/*
 * CityU Template 2019 Sub-theme CSS
 */

/* Global
---------------------------------------------------------- */
.paragraph--type--cityu-carousel::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/m_carousol_bg_org.svg) no-repeat;
    background-size: cover;
}

.section-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 1152px;
    padding: 40px 12px;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.2px;
    text-align: left;
    color: #bf165e;
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-breadcrumb .breadcrumb {
    border: none !important;
}

/* header
---------------------------------------------------------- */
.cityu-template-department-websites .t-header-nav-wrapper,
.cityu-template-department-service .t-header-nav-wrapper {
    background-color: #BF165E;
    position: fixed;
}

.path-frontpage .t-backhome-icon,
.no-touch .cityu-template-department-websites .t-backhome-icon:hover,
.no-touch .cityu-template-department-service .t-backhome-icon:hover {
    background-color: #6B203E;
}

.cityu-template-department-websites .t-backhome-icon::after,
.cityu-template-department-service .t-backhome-icon::after,
.no-touch .cityu-template-department-websites .t-backhome-icon:hover::after,
.no-touch .cityu-template-department-service .t-backhome-icon:hover::after {
    color: #fff;
}

.cityu-template-department-websites .t-primary-menu .t-menu-level-0>li>.t-nav-link,
.cityu-template-department-service .t-primary-menu .t-menu-level-0>li:hover>.t-nav-link {
    color: #fff !important;
}

.no-touch .cityu-template-department-websites .t-backhome-icon:hover::before,
.no-touch .cityu-template-department-service .t-backhome-icon:hover::before,
.no-touch .cityu-template-department-websites .t-primary-menu .t-menu-level-0>li:hover::before,
.no-touch .cityu-template-department-service .t-primary-menu .t-menu-level-0>li:hover::before,
.cityu-template-department-websites .t-primary-menu .t-menu-level-0>li>.t-nav-link.t-active::before {
    display: none;
}

.no-touch .cityu-template-department-websites .t-primary-menu .t-menu-level-0>li:hover>.t-nav-link,
.no-touch .cityu-template-department-service .t-primary-menu .t-menu-level-0>li:hover>.t-nav-link,
.t-primary-menu .t-menu-level-0>li>.t-nav-link.t-active {
    color: #fff;
    background-color: #6B203E !important;
}

/* Search Button */
.t-header-wrapper #block-headersearchbtn {
    margin-left: auto !important;
}

.header-search-btn {
    cursor: pointer;
}

.header-search-btn a::before {
    content: "��";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    font-size: 0.8125rem;
    color: rgb(131, 137, 144);
    padding-left: 15px;
    padding-right: 0px;
    left: 0px;
}

.header-search-btn a::after {
    content: "��";
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    font-size: 0.8125rem;
    color: rgb(131, 137, 144);
    line-height: 12px;
    padding-left: 4px;
    padding-right: 15px;
}

/* Header Logo */
.navbar-brand-hk img {
    width: auto;
    height: 90px;
}

.sticky-menu-on .d-inline-block {
    display: none !important;
}

.sticky-menu-on .navbar-brand-hk .t-header-logo-m {
    display: block;
}

header .tm-service-name img.t-menu-closed,
header.t-menu-open .tm-service-name img.t-menu-opened {
    display: block;
}

header .tm-service-name img.t-menu-opened,
header.t-menu-open .tm-service-name img.t-menu-closed {
    display: none;
}

/* Footer
---------------------------------------------------------- */
.site-footer__top {
    padding: 0;
}

.t-footer-bottom {
    background-color: #2D3136;
}

.t-footer .footer-left {
    font-size: 13px;
}

.t-footer .footer-links a:hover {
    color: rgba(255, 255, 255, .5);
}

/* Index
---------------------------------------------------------- */
body.path-frontpage {
    background-color: #fff;
}

.headline-carousel {
    max-width: none;
}

.carousel-inner .field--name-field-cityu-banner img,
.section-headline .field--name-field-cityu-image img {
    object-position: center center;
}

.headline-carousel .carousel-control {
    background: rgb(90, 90, 90, 0.4);
}

.no-touch .headline-carousel .carousel-control:focus,
.no-touch .headline-carousel .carousel-control:hover {
    background: rgb(119, 119, 119);
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
    font-size: 3rem;
}

.headline-carousel .carousel-indicators {
    display: none;
}

.headline-carousel .carousel-bottom-bg::after {
    content: '';
    position: absolute;
    z-index: 52;
    display: block;
    width: 100%;
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/carousel_bottom.svg) no-repeat;
    background-size: 100%;
    bottom: -5.1vw;
    height: 12.6vw;
}

/* Index - Spotlight
---------------------------------------------------------- */
.block-views-blockhome-spotlight-block-1 .news-slider-del {
    padding-top: 11vw;
}

.news-slider-del h2.section-title {
    font-size: 48px;
    margin-bottom: 0;
    padding: 0;
}

.news-slider-del .header-link {
    margin-bottom: 10px;
}

.news-slider-del .header-link a {
    color: #B6337D;
    font-size: 14px;
    font-weight: bold;
}

.news-slider-del .header-link a:hover i {
    padding-left: 1rem;
    padding-right: 0;
}

.block-views-blockhome-spotlight-block-1 {
    background-color: #fff;
    margin-top: -3vw;
}

.block-views-blockhome-spotlight-block-1 .section-news-slider-2 {
    background: none !important;
    padding-top: 40px;
    padding-bottom: 0;
    z-index: 3;
}

.section-news-slider-self-2 .news-slider-del {
    margin-bottom: 20px;
}

.section-news-slider-self-2 .section-title {
    margin-bottom: 0;
    padding-bottom: 40px;
}

.spotlight-content,
.index-spotlight {
    position: relative;
}

.spotlight-content::before {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/section-spotlight-slider-bg.svg) no-repeat;
    background-size: 100%;
    content: '';
    height: 100%;
    position: absolute;
    top: 35px;
    bottom: -70px;
    left: -35px;
    right: -35px;
}

.index-spotlight a {
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    position: absolute;
}

.spotlight-content .swiper-container {
    color: #fff;
}

.index-spotlight .col-lg-8 {
    padding: 0 18px 20px;
}

.index-spotlight-img {
    overflow: hidden;
    box-shadow: 1px 10px 10px rgb(0 0 0 / 20%);
}

.index-spotlight:hover .index-spotlight-img img {
    transform: scale(1.1);
}

.index-spotlight-caption {
    position: relative;
    left: -50px;
}

.index-spotlight-caption h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 15px;
}

.index-spotlight-caption p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-news-slider-2 .spotlight-content .swiper-button-common.swiper-button-prev {
    background-color: #fff;
    border: #F1F1F1 1px solid;
    left: -35px;
}

.section-news-slider-2 .spotlight-content .swiper-button-common.swiper-button-next {
    background-color: #fff;
    border: #F1F1F1 1px solid;
    right: -35px;
}

.section-news-slider-2 .spotlight-content .swiper-button-common.swiper-button-prev:hover,
.section-news-slider-2 .spotlight-content .swiper-button-common.swiper-button-next:hover {
    background-color: #C02B6B;
}

.swiper-button-prev.swiper-button-common::before,
.swiper-button-next.swiper-button-common::before {
    color: #C02B6B;
}

.swiper-button-prev.swiper-button-common:hover::before,
.swiper-button-next.swiper-button-common:hover::before {
    color: #fff;
}

.section-news-slider-2 .spotlight-content .swiper-pagination {
    padding-top: 110px;
}

/* Index - Ribbon
---------------------------------------------------------- */
.index-ribbon-bg {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/index_ribbon_bg.png) center center no-repeat;
    background-size: cover;
    content: '';
    display: block;
    width: 83vw;
    max-width: 1590px;
    height: 45vw;
    position: absolute;
    top: -3.5vw;
    left: 0;
    z-index: 2;

    -webkit-mask-image: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/index_ribbon_mask.png);
    mask-image: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/index_ribbon_mask.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
    opacity: 0;
}

.ribbon-trigger.active {
    animation: move 2s forwards;
    animation-timing-function: ease-out;
    animation-delay: 0.45s;
}

@keyframes move {
    from {
        opacity: 0;
        -webkit-mask-size: 10% 100%;
    }

    to {
        opacity: 1;
        -webkit-mask-size: 110% 100%;
    }
}

/* Index - About CEO
---------------------------------------------------------- */
#block-homesection3aboutceo {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/about_ceo_bg.png) center bottom no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
    margin-top: -10vw;
}

#block-homesection3aboutceo .content {
    padding-top: 18vw;
    padding-bottom: 15.8vw;
}

#block-homesection3aboutceo .content h2.section-title {
    font-size: 48px;
    line-height: 60px;
    padding: 20px 0;
}

#block-homesection3aboutceo .content p {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 30px;
}

#block-homesection3aboutceo .content a {
    font-size: 14px;
    font-weight: 800;
    line-height: 1rem;
}

/* Index - Video
---------------------------------------------------------- */
#block-home-section4-bypromotingmulticulturalexchange {
    margin-top: -10.75vw;
}

.video-wrapper {
    width: 100%;
    height: 50vw;
    max-height: 900px;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-title-box {
    background-color: rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5.21vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.video-title-box-bg {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/video-title-box-bg.jpg) center center no-repeat;
    background-size: cover;
}

.video-title-box-bg::before {
    background-color: rgba(0, 0, 0, .2);
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.video-title-1,
.video-title-2,
.video-title-3 {
    color: #fff;
    font-size: 32px;
    line-height: 45px;
    letter-spacing: -0.5px;
    width: 100%;
    max-width: calc(100% - 40px);
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: fadeInUp linear 90s infinite;
    /* 9s */
}

.video-title-2 {
    animation-delay: 30s;
    /* 3s */
}

.video-title-3 {
    animation-delay: 60s;
    /* 6s */
}

@-webkit-keyframes fadeInUp {

    0%,
    33%,
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 50%, 0);
        transform: translate3d(-50%, 50%, 0);
    }

    0.5% {
        /* 3% */
        opacity: 1;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    }

    32.5% {
        /* 28% */
        opacity: 1;
    }

    33% {
        /* 30% */
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    }
}

@keyframes fadeInUp {

    0%,
    33%,
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-50%, 50%, 0);
        transform: translate3d(-50%, 50%, 0);
    }

    0.5% {
        /* 3% */
        opacity: 1;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    }

    32.5% {
        /* 28% */
        opacity: 1;
    }

    33% {
        /* 30% */
        opacity: 0;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
    }
}

/* Index - Slider2
---------------------------------------------------------- */
.block-views-blockhome-stay-connected-block-1 .news-slider-del {
    padding-top: 6.8vw;
}

.section-news-slider-2 {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/section-news-slider-2-bg.svg) center top no-repeat;
    background-size: cover;
}

.section-news-slider-2 .news-slider-del h2 {
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 20px;
}

.section-news-slider-2 .news-slider-del .header-link,
.section-news-slider-2 .news-slider-del .header-link a {
    padding-right: 0;
}

.section-news-slider-2 .news-slider-del .header-link a::after {
    content: none;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide {
    background: none !important;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide::before {
    content: '';
    display: block;
    position: initial;
    z-index: 5;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-image: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/stay_connected_slider_before_img.svg);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: 100% auto;
    background-color: transparent;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide::after {
    content: '';
    display: block;
    position: initial;
    z-index: 5;
    bottom: 0;
    width: 100%;
    height: 40px;
    background-image: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/stay_connected_slider_after_img.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: transparent;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide:nth-child(odd)::before,
.section-news-slider-2 .news-slider-swiper-container .swiper-slide:nth-child(even)::after {
    display: none;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide .news-slider-img {
    position: relative;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide .news-slider-img::before {
    background: linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .4) 85%);
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide .news-slider-img img {
    aspect-ratio: 568 / 387;
    object-fit: cover;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide .box {
    position: relative;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide .news-slider-title {
    display: none;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide h3 {
    position: absolute;
    bottom: 0;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide h3 a {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    max-height: 48px;
    margin: 0 30px 30px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-news-slider-2 .news-slider-swiper-container .swiper-slide h3 a:not(.news-slider-title)::after {
    content: "\f0da";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    padding-left: 10px;
}

/* Subpage
---------------------------------------------------------- */
.path-node .node__content {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/subpage_bg_01.jpg) no-repeat;
    background-size: 100% auto;
    background-position: 0 100vh;
    min-height: calc(60vw + 100vh);
    padding-bottom: 8%;
    position: relative;
}

.path-node .node__content .layout {
    position: relative;
    z-index: 2;
}

.path-node .paragraph--type--cityu-carousel::after {
    display: none;
}

.path-node .headline-carousel .next-screen {
    display: none;
}

.path-node .headline-carousel .carousel-bottom-bg::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/carousel_bottom_subpage.svg) no-repeat;
    background-size: 100%;
    bottom: -4vw;
    height: 7.93vw;
}

.path-node .headline-carousel .carousel-bottom-bg.d-none {
    display: block !important;
}

.path-node .carousel-des {
    bottom: 4vw;
    top: auto;
}

.path-node .carousel-des h2 {
    margin-bottom: 0;
    padding-left: 0;
}

.path-node .static-page-blk-content {
    padding-top: 10px;
}

.path-node .section-title {
    font-size: 48px;
    margin-bottom: 30px;
    padding: 0;
}

.path-node .p-lg-bold {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.45;
}

.block-field-blocknodelanding-pagebody p {
    margin-bottom: 1.7rem;
}

/* Ribbon Background
---------------------------------------------------------- */
.ribbon-bg-left {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/ribbon_bg_left.png) center center no-repeat;
    background-size: cover;
    content: '';
    display: block;
    width: 65.68vw;
    max-width: 1135px;
    height: 46.41vw;
    position: absolute;
    left: 0;
    z-index: 1;

    -webkit-mask-image: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/ribbon_mask_left.png);
    mask-image: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/ribbon_mask_left.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
    opacity: 0;
}

.ribbon-bg-right {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/ribbon_bg.png) center center no-repeat;
    background-size: cover;
    content: '';
    display: block;
    width: 65.5vw;
    max-width: 1132px;
    height: 32.12vw;
    position: absolute;
    right: 0;
    z-index: 1;

    -webkit-mask-image: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/ribbon_mask.png);
    mask-image: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/ribbon_mask.png);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right;
    mask-position: right;
    opacity: 0;
}

/* Breadcrumb
---------------------------------------------------------- */
.section-breadcrumb {
    background: none !important;
}

.section-breadcrumb .breadcrumb a {
    font-size: 14px;
}

.has-headline-carousel-d .section-breadcrumb .breadcrumb,
.node--type-special-events .section-breadcrumb .breadcrumb,
.node--type-programmes .section-breadcrumb .breadcrumb {
    padding: 130px 0 58px;
}

/* Programmes Lectures/Talks
---------------------------------------------------------- */
.block-views-blockprogrammes-block-1 {
    padding-top: 20px;
}

.cityu-list .views-row {
    margin-bottom: 76px;
}

.cityu-list .layout--twocol-section {
    border: 1px #dddddd solid;
    background-color: #fff;
    display: flex;
    padding-bottom: 15px;
    position: relative;
}

.cityu-list .views-row .layout--twocol-section::after {
    content: '';
    display: block;
    width: calc(100% + 2px);
    height: 26px;
    margin-left: -1px;
    position: absolute;
    bottom: -26px;
}

.cityu-list .views-row:nth-child(odd) .layout--twocol-section:after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/list_item_bottom_odd.svg) no-repeat;
    background-size: auto 100%;
    background-position: right;
}

.cityu-list .views-row:nth-child(even) .layout--twocol-section:after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/list_item_bottom_even.svg) no-repeat;
    background-size: auto 100%;
    background-position: left;
}

.cityu-list .layout--twocol-section .layout__region--first {
    flex: 1 0 39%;
}

.cityu-list .layout--twocol-section .layout__region--first img {
    aspect-ratio: 454/297;
    object-fit: cover;
}

.cityu-list .layout--twocol-section .layout__region--second {
    flex: 0 1 61%;
    padding: 49px 44px 0;
}

.cityu-list .layout--twocol-section .layout__region--second p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cityu-list .cityu-list-title {
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    width: fit-content;
    font-weight: 700;
    line-height: 1.33;
    margin-bottom: 10px;
}

.cityu-list p {
    margin-bottom: 20px;
}

.cityu-list .layout--twocol-section .cityu-list-read-more {
    color: #bf165e;
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
    margin-top: 30px;
}

.cityu-list .layout--twocol-section .cityu-list-read-more i {
    padding-left: 8px;
    transition: padding .25s;
}

.cityu-list .layout--twocol-section .cityu-list-read-more:hover i {
    color: #6b203e;
    padding-left: 16px;
}

/* Welcoming Message
---------------------------------------------------------- */
.node-img-section {
    margin-bottom: 50px;
}

.node-img-right-caption {
    background-color: #fff;
    display: block;
    margin-bottom: 35px;
    margin-left: -90px;
    margin-right: 40px;
    padding: 40px;
    position: relative;
    webkit-filter: drop-shadow(1px 10px 10px rgb(0 0 0 / 20%));
    filter: drop-shadow(1px 10px 10px rgb(0 0 0 / 20%));
}

.node-img-right-caption::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/img-caption-bottom.svg) no-repeat;
    background-size: cover;
    background-position-y: bottom;
    content: '';
    width: 100%;
    height: 35px;
    position: absolute;
    left: 0;
    bottom: -35px;
}

.node-img-right-caption h3 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.33;
    letter-spacing: -0.2px;
    color: #bf165e;
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Contact Us
---------------------------------------------------------- */
.card-row {
    margin-right: -16px;
    margin-left: -16px;
}

@media (min-width: 1200px) {

    .card-row [class^='col'],
    .card-row [class*=' col'] {
        padding-right: 16px;
        padding-left: 16px;
    }
}

.card-wrap {
    background-color: #fff;
    height: 240px;
    margin-bottom: 65px;
    padding: 35px 40px;
    position: relative;
    webkit-filter: drop-shadow(1px 10px 10px rgb(0 0 0 / 20%));
    filter: drop-shadow(1px 10px 10px rgb(0 0 0 / 20%));
}

.card-wrap.card-wrap-phone {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_phone.svg) right 53px bottom 27px no-repeat;
}

.card-wrap.card-wrap-fax {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_fax.svg) right 48px bottom 28px no-repeat;
}

.card-wrap.card-wrap-email {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_email.svg) right 53px bottom 29px no-repeat;
}

.card-wrap.card-wrap-address {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_address.svg) right 57px bottom 20px no-repeat;
}

.card-wrap::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_wrap_bottom.svg) no-repeat;
    background-size: cover;
    background-position-y: bottom;
    content: '';
    display: block;
    width: 100%;
    height: 35px;
    position: absolute;
    bottom: -35px;
    left: 0;
}

.card-wrap h4 {
    background: linear-gradient(to right, #7c257c, #bf165e);
    width: fit-content;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin-bottom: 5px;
}

.card-wrap p {
    font-size: 18px;
    font-weight: 600;
}

.card-wrap a {
    font-size: 14px;
}

/* Staff List
---------------------------------------------------------- */
.card-wrap.card-wrap-staff {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 184px;
}

.card-wrap.card-wrap-director {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 85px;
}

.card-wrap.card-wrap-director::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_wrap_bottom_red.svg) no-repeat;
    background-size: cover;
    background-position-y: bottom;
}

.card-wrap.card-wrap-staff p,
.card-wrap.card-wrap-director p {
    font-weight: normal;
}

.card-wrap.card-wrap-staff ul li,
.card-wrap.card-wrap-director ul li {
    float: left;
    height: 24px;
    list-style: 24px;
    margin-left: 30px;
}

.card-wrap.card-wrap-staff ul li:first-child,
.card-wrap.card-wrap-director ul li:first-child {
    margin-left: 0;
}

.card-phone {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_phone_small.svg) left center no-repeat;
    padding-left: 32px;
}

.card-address {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_address_small.svg) left center no-repeat;
    padding-left: 28px;
}

.card-email {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_email_small.svg) left center no-repeat;
    padding-left: 32px;
}

/* Date Range
---------------------------------------------------------- */
.cityu-list .programmes-period,
.node--type-special-events .card .card-body .programmes-period,
.programmes-info .layout__region--content .field--type-daterange .field__item {
    color: #2E2E2E00;
    display: flex;
    width: 130px;
    justify-content: space-between;
}

.cityu-list .programmes-period time,
.node--type-special-events .card .card-body .programmes-period time,
.programmes-info .layout__region--content .field--type-daterange time {
    color: #2E2E2E;
    font-size: 16px;
    line-height: 1.1;
    text-align: center;
    width: 35px;
}

.cityu-list .programmes-period time:nth-child(2),
.node--type-special-events .card .card-body .programmes-period time:nth-child(2),
.programmes-info .layout__region--content .field--type-daterange time:nth-child(2) {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/date-range-hyphen.svg) left center no-repeat;
    padding-left: 45px;
    width: 80px;
}

.cityu-list .programmes-period time strong,
.node--type-special-events .card .card-body .programmes-period time strong,
.programmes-info .layout__region--content .field--type-daterange time strong {
    font-size: 30px;
}

.pastEvent-deta {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/date_range_pass_event.svg) center center no-repeat;
    color: #fff;
    font-size: 14px;
    padding-top: 7px;
    text-align: center;
    width: 94px;
    height: 35px;
}

/* Special Events List
---------------------------------------------------------- */
.block-views-block-page-specialevents-view-page-block-1 {
    margin-top: 20px;
}

.special-events-list {
    margin-bottom: 85px;
    padding-bottom: 40px;
    position: relative;
}

.special-events-list-info {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 520px;
    min-height: 190px;
    padding: 35px 45px;
    position: absolute;
    bottom: 0;
    right: 40px;
    webkit-filter: drop-shadow(1px 10px 10px rgb(0 0 0 / 20%));
    filter: drop-shadow(1px 10px 10px rgb(0 0 0 / 20%));
}

.special-events-list-info::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/special_events_list_info_bottom_odd.svg) no-repeat;
    background-size: cover;
    background-position-y: bottom;
    content: '';
    display: block;
    width: 100%;
    height: 35px;
    position: absolute;
    bottom: -35px;
    left: 0;
}

.special-events-list-info h2 {
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block-views-block-page-specialevents-view-page-block-1 .views-row:nth-child(even) .special-events-list-info {
    left: 40px;
    right: auto;

}

.block-views-block-page-specialevents-view-page-block-1 .views-row:nth-child(even) .special-events-list-info::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/special_events_list_info_bottom_even.svg) no-repeat;
    background-size: cover;
    background-position-y: bottom;
}

.special-events-list-more {
    color: #bf165e;
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
    margin-top: 30px;
}

.special-events-list-more i {
    padding-left: 8px;
    transition: padding .25s;
}

.special-events-list-more:hover i {
    color: #6b203e;
    padding-left: 16px;
}

/* Special Events landing
---------------------------------------------------------- */
.node--type-special-events .layout--twocol-section {
    margin-bottom: 78px;
}

.node--type-special-events .layout--twocol-section img,
.node--type-special-events .layout--twocol-section p {
    margin-bottom: 30px;
}

.node--type-special-events .layout--twocol-section>.layout__region--first {
    padding-right: 20px;
}

.node--type-special-events .layout--twocol-section>.layout__region--second {
    padding-left: 20px;
}

.node--type-landing-page .container .section-breadcrumb .container,
.node--type-special-events .container .section-breadcrumb .container,
.node--type-programmes .container .section-breadcrumb .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.node--type-special-events .cityu-list header {
    width: 100%;
}

.node--type-special-events h2.secondary-title {
    margin-bottom: 30px;
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.2px;
    text-align: left;
    color: #bf165e;
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.node--type-special-events .cityu-list .views-row {
    display: flex;
    margin-bottom: 60px;
}

.node--type-special-events .cityu-list .views-row:after {
    display: none;
}

.node--type-special-events .card {
    border: none;
}

.node--type-special-events .card .card-img-top {
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
}

.node--type-special-events .card .card-img-top img {
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
}

.node--type-special-events .card:hover .card-img-top img {
    transform: scale(1.1);
}

.node--type-special-events .card .card-body {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    margin-top: -40px;
    margin-left: 12px;
    margin-right: 12px;
    min-height: 280px;
    position: relative;
}

.node--type-special-events .card .card-body::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/special_Events_landing_item_bottom.svg) no-repeat;
    background-size: cover;
    background-position: left bottom;
    content: '';
    display: block;
    height: 20px;
    position: absolute;
    bottom: -20px;
    left: -1px;
    right: -1px;
}

.node--type-special-events .card .card-body .card-title {
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    font-weight: 700;
    line-height: 1.33;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node--type-special-events .card .card-body .card-text {
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node--type-special-events .card a {
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Programmes Detail
---------------------------------------------------------- */
.path-node.node--type-special-events .field--name-field-speciallanding-img img,
.path-node.node--type-programmes .field--name-field-programmes-banner img,
.path-node.node--type-programmes .field--name-field-programmes-banner1 img {
    height: 100%;
    object-fit: cover;
}

.node--type-programmes .paragraph--type--cityu-carousel .carousel-des {
    display: none;
}

.path-node.node--type-special-events .field--name-field-speciallanding-img::after,
.path-node.node--type-programmes .field--name-field-programmes-banner::after,
.path-node.node--type-programmes .field--name-field-programmes-banner1::after {
    content: '';
    position: absolute;
    z-index: 52;
    display: block;
    width: 100%;
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/carousel_bottom_subpage.svg) no-repeat;
    background-size: 100%;
    bottom: -4vw;
    height: 7.93vw;
}

.block-field-blocknodeprogrammescreated {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.33;
}

.block-field-blocknodeprogrammestitle {
    border-top: #B6B6B6 1px solid;
    margin-top: 22PX;
    margin-bottom: 30px;
    padding-top: 40px;
}

.block-field-blocknodeprogrammestitle .field--name-title {
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1152px;
    font-size: 35px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.2px;
    text-align: left;
    color: #bf165e;
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.field--name-field-procontent .secondary-title {
    margin-bottom: 20px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.2px;
    text-align: left;
    color: #bf165e;
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.node--type-programmes .paragraph--type--procontent-img-word .field--name-field-procontentimg {
    position: relative;
}

.node--type-programmes .paragraph--type--procontent-img-word .field--name-field-procontentimg::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/programmes_img_bottom.svg) no-repeat;
    background-size: cover;
    background-position: left top;
    content: '';
    display: block;
    height: 35px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.node--type-programmes .paragraph--type--procontent-img-word img {
    height: 372px;
    object-fit: cover;
}

.node--type-programmes .field--type-image img {
    margin-bottom: 0;
}

.node--type-programmes [class*='field--name-field-img'] {
    font-size: 16px;
    color: #757575;
    margin-top: 10px;
}

.node--type-programmes .field--type-text-long p,
#edit-markup p {
    margin-bottom: 30px;
}

.programmes-info {
    margin: 50px auto;
}

.programmes-info .layout__region--content {
    background-color: rgba(255, 255, 255, .5);
    border: #dddddd 1px solid;
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    padding: 30px 30px 15px;
}

.programmes-info .layout__region--content>div {
    width: 50%;
    margin-bottom: 15px;
    min-height: 51px;
    padding: 0 10px;
}

.programmes-info .layout__region--content .field__label {
    font-weight: 600;
    width: 27%;
    min-width: 135px;
}

.programmes-info .layout__region--content .field__item p {
    margin-bottom: 0;
}

/* Programmes - YouTube Video */
.node--type-programmes .field--name-name,
.node--type-programmes .field--name-created,
.node--type-programmes .field--name-uid {
    display: none;
}

/* Programmes - Date Before Title  */
.node--type-programmes .block-field-blocknodeprogrammesfield-programmes-video {
    margin-top: 40px;
}

.node--type-programmes .block-field-blocknodeprogrammescreated .field--name-created {
    display: block;
}

/* Programmes - Share This  */
.block-cityu-template-share-this .at-style-responsive .at-share-btn.at-svc-email {
    display: none;
}

/* Programmes - Info List */
.field--type-daterange,
.field--name-field-venue,
.field--name-field-openinghours,
.field--name-field-co-organizers,
.field--name-field-participants,
.field--name-field-admission,
.field--name-field-capacity {
    display: flex;
}

.programmes-info ul li,
#edit-markup ul li,
#edit-markup--2 ul li,
#edit-markup--3 ul li {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/programmes-info-list-dot.svg) no-repeat;
    background-position: 0 13px;
    padding-left: 24px;
    position: relative;
}

#edit-markup,
#edit-markup--2,
#edit-markup--3 {
    border: #dddddd 1px solid;
    padding: 30px 40px;
    margin-bottom: 50px;
}

.edit-markup-detail {
    padding: 0;
    cursor: pointer;
}

.edit-markup-detail::before {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/edit-markup-arrow-down.svg) no-repeat;
    background-size: 32px 18px;
    content: '';
    display: block;
    width: 32px;
    height: 18px;
    float: right;
    margin-left: 20px;
    margin-top: 3px;
    margin-bottom: 10px;
    transition: all 0.3s;
}

.edit-markup-detail:hover::before {
    margin-top: 9px;
    opacity: .5;
}

.edit-markup-detail:not(.collapsed):before {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/edit-markup-arrow-up.svg) no-repeat;
    background-size: 32px 18px;
}

.edit-markup-detail:not(.collapsed):hover::before {
    margin-top: -3px;
    opacity: .5;
}

.edit-markup-detail-more ul {
    margin-bottom: 30px;
}

/* Programmes - Online Registration */
.node--type-landing-page .webform-submission-form #edit-markup {
    background-color: rgba(255, 255, 255, .8);
}

.node--type-programmes .js-form-item:not(.form-item-markup),
.node--type-landing-page .webform-submission-form .js-form-item:not(.form-item-markup) {
    max-width: 568px;
    margin: 0 auto 20px;
}

.node--type-programmes .js-form-item:not(.form-item-markup) label,
.node--type-landing-page .webform-submission-form .js-form-item:not(.form-item-markup) label {
    margin-bottom: 0;
}

.node--type-programmes .js-form-item:not(.form-item-markup) .form-control {
    color: #6c757d;
}

.node--type-programmes .js-form-item:not(.form-item-markup) .description.text-muted,
.node--type-landing-page .webform-submission-form .js-form-item:not(.form-item-markup) .description.text-muted {
    color: #595959 !important;
    font-size: 1rem;
    display: block;
}

.node--type-programmes .js-form-item:not(.form-item-markup) .description.text-muted a,
.node--type-landing-page .webform-submission-form .js-form-item:not(.form-item-markup) .description.text-muted a {
    text-decoration: underline;
}

.node--type-programmes .js-form-type-checkbox {
    display: flex;
    min-height: 28px;
}

.node--type-programmes .js-form-type-checkbox .form-check-label::after,
.node--type-landing-page .webform-submission-form .js-form-type-checkbox .form-check-label::after {
    content: ' ';
    display: inline-block;
}

.node--type-programmes .js-form-item:not(.form-item-markup) input[type="checkbox"]:checked,
.node--type-landing-page .webform-submission-form .js-form-item:not(.form-item-markup) input[type="checkbox"]:checked {
    background-color: #F8F8F8;
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/check.svg);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
}

.node--type-programmes .js-form-item:not(.form-item-markup).form-check {
    margin-top: 40px;
    padding-left: 39px;
}

.node--type-landing-page .webform-submission-form .js-form-item:not(.form-item-markup).form-check {
    display: flex;
    min-height: 28px;
    margin-top: 40px;
    padding-left: 39px;
}

.node--type-programmes .js-form-item:not(.form-item-markup) .form-check-input,
.node--type-landing-page .webform-submission-form .js-form-item:not(.form-item-markup) .form-check-input {
    margin-top: 0;
    margin-left: -39px;
}

.node--type-programmes .js-form-item:not(.form-item-markup) input[type="checkbox"],
.node--type-landing-page .webform-submission-form .js-form-item:not(.form-item-markup) input[type="checkbox"] {
    width: 28px;
    height: 28px;
    border: 1px solid #D2D2D2;
    border-radius: 50%;
    background-color: #F8F8F8;
}

.node--type-programmes .webform-button--submit,
.node--type-landing-page .webform-submission-form .webform-button--submit {
    background: linear-gradient(90deg, #F2CF94, #B5337D);
    border: none;
    font-size: 18px;
    display: block !important;
    width: 156px !important;
    height: 50px !important;
    margin: 40px auto;
    transition: all 0.3s;
}

.node--type-programmes .webform-button--submit:hover,
.node--type-landing-page .webform-submission-form .webform-button--submit:hover {
    opacity: .75;
}

.node--type-programmes .form-required:after {
    /* background-image: url(/sites/g/files/asqsls3821/themes/site/cityu/images/required.svg);
    background-size: 7px 7px;
    width: 7px;
    height: 7px; */
    content: "* required";
    color: red;
    font-size: 12px;
    width: 70px;
}

/* Special Events Block */
#block-views-block-special-events-block-1 {
    display: none;
}

/* Programmes Detail Another Edit
---------------------------------------------------------- */
.node--type-programmes .field--name-field-programmes-c-img img {
    height: 372px;
    object-fit: cover;
}

.node--type-programmes .field--name-field-programmes-c-img {
    position: relative;
}

.node--type-programmes .field--name-field-programmes-c-img::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/programmes_img_bottom.svg) no-repeat;
    background-size: cover;
    background-position: left top;
    content: '';
    display: block;
    height: 35px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

@media (max-width: 767px) {
    .node--type-programmes .field--name-field-programmes-con-word p {
        margin-top: 30px;
    }
}

/* Special Projects
---------------------------------------------------------- */
.block-views-blockspecialprojects-block-1 {
    margin-top: 20px;
}

.special-projects-list {
    margin-bottom: 110px;
}

.special-projects-list-img {
    position: relative;
}

.special-projects-list-img::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/special_projects_list_img_bottom.svg) no-repeat;
    background-size: cover;
    background-position-y: top;
    content: '';
    display: block;
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.special-projects-list-info {
    margin: -135px 7% 0;
    padding: 45px 50px;
    position: relative;
    background-color: #fff;
    webkit-filter: drop-shadow(1px 10px 10px rgb(0 0 0 / 20%));
    filter: drop-shadow(1px 10px 10px rgb(0 0 0 / 20%));
}

.special-projects-list-info::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/special_projects_list_info_bottom.svg) no-repeat;
    background-size: cover;
    background-position-y: bottom;
    content: '';
    display: block;
    width: 100%;
    height: 30px;
    position: absolute;
    bottom: -30px;
    left: 0;
}

.special-projects-list-info h4 {
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    width: fit-content;
    font-weight: 700;
    line-height: 1.33;
    margin-bottom: 10px;
}

.special-projects-list-info p {
    margin-bottom: 30px;
}

.special-projects-list-more {
    color: #bf165e;
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
}

.special-projects-list-more i {
    padding-left: 8px;
    transition: padding .25s;
}

.special-projects-list-more:hover i {
    color: #6b203e;
    padding-left: 16px;
}

/* Privilege
---------------------------------------------------------- */
.privilege-img {
    margin-top: 50px;
}

.privilege-detail {
    margin-top: -75px;
    padding-left: 50px;
    padding-right: 50px;
}

.privilege-detail .card-wrap {
    height: auto;
    min-height: 260px;
    margin-bottom: 20px;
    padding: 32px 32px 110px;
}

.privilege-detail .col-md-6 .card-wrap {
    padding: 32px 115px 32px 32px;
}

.privilege-detail .card-wrap.card-wrap-certificate {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_certificate.svg) right 32px bottom 37px no-repeat;
}

.privilege-detail .card-wrap.card-wrap-donor-roll {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_donor_roll.svg) right 36px bottom 45px no-repeat;
}

.privilege-detail .card-wrap.card-wrap-regular-news {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_regular_news.svg) right 38px bottom 43px no-repeat;
}

.privilege-detail .card-wrap.card-wrap-special-membership {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_special_membership.svg) right 34px bottom 46px no-repeat;
}

.privilege-detail .card-wrap.card-wrap-invitations {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_Invitations.svg) right 38px bottom 47px no-repeat;
}

.privilege-detail .card-wrap::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_card_wrap_bottom.svg) no-repeat;
    background-size: cover;
    background-position-y: top;
    height: 19px;
    bottom: 0;
    left: 0;
}

.privilege-detail .col-md-6 .card-wrap::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_card_wrap_bottom_long.svg) no-repeat;
    background-size: cover;
    background-position-y: top;
}

.privilege-detail .card-wrap p {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 1rem;
}

/* Join Now
---------------------------------------------------------- */
.join-now-detail .card-wrap {
    aspect-ratio: 1;
    height: auto;
    border: #dddddd 1px solid;
    filter: none;
    margin-bottom: 20px;
    padding: 24px 28px;
}

.join-now-detail .card-wrap::after {
    display: none;
}

.join-now-detail .card-wrap.card-wrap-donate-now {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/join_now_icon_donate_now.svg) right 24px bottom 25px no-repeat;
}

.join-now-detail .card-wrap.card-wrap-express {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/join_now_icon_express.svg) right 23px bottom 22px no-repeat;
}

.join-now-detail .card-wrap.card-wrap-contact {
    background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/join_now_icon_contact.svg) right 20px bottom 22px no-repeat;
}

.join-now-detail .card-wrap a {
    background: linear-gradient(to right, #7c257c, #bf165e);
    width: fit-content;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
    font-weight: 700;
}

/* News and Announcements
---------------------------------------------------------- */
.announcement {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    position: relative;
    margin: 0 -12px 60px -12px;
    text-align: center;
    vertical-align: middle;
}

.announcement p {
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    font-weight: 700;
    line-height: 1.33;
    font-size: 32px;
    margin-bottom: 0;
    padding: 40px 0;
}

.announcement p::before {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/special_Events_landing_item_bottom.svg) no-repeat;
    background-size: cover;
    background-position: left bottom;
    content: '';
    display: block;
    height: 28px;
    position: absolute;
    bottom: -29px;
    left: -1px;
    right: -1px;
}

.event-deta .event-deta-day time {
    font-size: 30px;
    color: #2E2E2E;
    line-height: 1.1;
}

.event-deta .event-deta-moon time {
    color: #2E2E2E;
    font-size: 16px;
    line-height: 1.1;
}

.event-deta .event-deta-moon,
.event-deta .event-deta-day {
    line-height: 1.1;
    text-align: center;
}

.event-deta .d-flex>div:nth-child(2) {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/date-range-hyphen.svg) left center no-repeat;
    padding-left: 45px;
    width: 80px;
    margin-left: 15px;
}

/* News and Announcements Detail
---------------------------------------------------------- */
.node--type-newsconi .section-breadcrumb .container {
    padding: 0;
}
.node--type-newsconi .section-breadcrumb .breadcrumb {
    padding: 130px 0 58px;
}

.block-field-blocknodenewsconifield-new-banner {
    position: relative;
}
.block-field-blocknodenewsconifield-new-banner .content::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/carousel_bottom_subpage.svg) no-repeat;
    background-size: 100%;
    content: '';
    display: block;
    width: 100%;    
    height: 7.93vw;
    position: absolute;
    bottom: -4vw;
    z-index: 52;    
}

.block-field-blocknodenewsconifield-new-banner img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    position: absolute;    
}

.block-field-blocknodenewsconicreated {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.33;
}

.block-field-blocknodenewsconititle {
    border-top: #B6B6B6 1px solid;
    margin-top: 22PX;
    margin-bottom: 30px;
    padding-top: 40px;
}

.block-field-blocknodenewsconititle .field--name-title {
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1152px;
    font-size: 35px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.2px;
    text-align: left;
    color: #bf165e;
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ceonew-content img {
    margin: 20px 0;
}

/* e-Newsletters
---------------------------------------------------------- */
.block-views-blocke-newsletters-block-1 .card .card-body .card-title {
    position: relative;
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    width: fit-content;
    font-weight: 700;
    line-height: 1.33;
    margin-bottom: 10px;
    font-size: 24px;
}

.block-views-blocke-newsletters-block-1 .card .card-body .card-title::after {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    position: absolute;
    bottom: -10px;
    background-image: linear-gradient(to right, #B5337D, #F2CF94);
}

.block-views-blocke-newsletters-block-1 .card .card-body {
    padding: 49px 38px;
}

.block-views-blocke-newsletters-block-1 .card .card-body .card-content {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 26px;
    margin-bottom: 20px;
    height: 96px;
}

.block-views-blocke-newsletters-block-1 .views-row {
    padding-right: 7%;
    margin-bottom: 30px;
}

.block-views-blocke-newsletters-block-1 .card img {
    width: 200px;
    height: 289px;
    filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.2));
    object-fit: cover;
    position: absolute;
    top: 37px;
    left: 7px;
}

.block-views-blocke-newsletters-block-1 .card::after {
    content: '';
    display: block;
    width: calc(100% + 2px);
    ;
    height: 23px;
    margin-left: -1px;
    position: absolute;
    bottom: -23px;
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/newsletters_card_wrap_bottom.svg) no-repeat;
    background-size: auto 100%;
    background-position: right;
}

.block-views-blocke-newsletters-block-1 .card {
    border-radius: unset;
    margin-bottom: 63px;
}

.block-views-blocke-newsletters-block-1 .cityu-list .views-row:after {
    background: none;
}

.block-views-blocke-newsletters-block-1 .cityu-list .views-row:nth-child(even) {
    margin-top: 50px;
}

.block-views-blocke-newsletters-block-1 .card .cityu-list-read-more {
    color: #B6337D;
    display: inline-block;
    font-size: 14px;
    font-weight: 900;
    margin-top: 35px;
}

.block-views-blocke-newsletters-block-1 nav,
.block-views-blockconnected-gallery-view-page-block-1 nav {
    width: 100%;
    flex-grow: 1;
    padding-left: 20px;
    padding-right: 20px;
}

/* Photo/Video Gallery
---------------------------------------------------------- */
.block-views-blockconnected-gallery-view-page-block-1 .cityu-list .views-row {
    display: flex;
    margin-bottom: 60px;
}

.block-views-blockconnected-gallery-view-page-block-1 .cityu-list .card-link a {
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.block-views-blockconnected-gallery-view-page-block-1 .views-row>.views-field {
    width: 100%;
}

.block-views-blockconnected-gallery-view-page-block-1 .card:hover .card-img-top img {
    transform: scale(1.1);
}

.block-views-blockconnected-gallery-view-page-block-1 .card {
    border: none;
    background: unset;
}

.block-views-blockconnected-gallery-view-page-block-1 .card .card-img-top {
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;
}

.block-views-blockconnected-gallery-view-page-block-1 .card .card-img-top {
    height: 100%;
    object-fit: cover;
    transition: all 0.3s;
}

.block-views-blockconnected-gallery-view-page-block-1 .card .card-img-top img {
    height: 243px;
    object-fit: cover;
    object-fit: cover;
    transition: all 0.3s;
}

.block-views-blockconnected-gallery-view-page-block-1 .card .card-body {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
    margin-top: -40px;
    margin-left: 12px;
    margin-right: 12px;
    position: relative;
}

.block-views-blockconnected-gallery-view-page-block-1 .card .card-body .card-title {
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    font-weight: 700;
    line-height: 1.33;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 95px;
    text-overflow: ellipsis;
}

.block-views-blockconnected-gallery-view-page-block-1 .card .card-body::after {
    background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/special_Events_landing_item_bottom.svg) no-repeat;
    background-size: cover;
    background-position: left bottom;
    content: '';
    display: block;
    height: 20px;
    position: absolute;
    bottom: -20px;
    left: -1px;
    right: -1px;
}

.block-views-blockconnected-gallery-view-page-block-1 .cityu-list .views-row:after {
    background: none;
}

/* Photo/Video Gallery Detail
---------------------------------------------------------- */
.path-node.node--type-connected-gallery .node__content {
    background-position: 0 0;
    min-height: calc(60vw + 200px);
    padding-bottom: calc(8% + 58px);
}

.node--type-connected-gallery .section-breadcrumb nav {
    padding: 0;
}

.node--type-connected-gallery .section-breadcrumb .breadcrumb {
    padding: 88px 0 53px;
}

.block-field-blocknodeconnected-gallerycreated {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.33;
}

.block-field-blocknodeconnected-gallerytitle {
    border-top: #B6B6B6 1px solid;
    margin-top: 22PX;
    margin-bottom: 30px;
    padding-top: 40px;
}

.node--type-connected-gallery .slick>div {
    margin: 0;
}

.node--type-connected-gallery .slick--field-connected-gallery----custom .slick__slide .media {
    aspect-ratio: 58 / 38;
}

.node--type-connected-gallery .slick--field-connected-gallery----custom .slick__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: 0;
}

.node--type-connected-gallery .slick-wrapper .slick--thumbnail {
    margin: 0 98px;
    width: calc(100% - 196px);
    position: absolute;
    bottom: -58px;
}

.node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick__slide {
    padding: 0 9px;
}

.node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick__slide img {
    width: 178px;
    height: 116px;
    object-fit: cover;
    margin-bottom: 0;
}

.node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick__slide.slick-center img {
    border: 2px solid #bf165e;
}

.node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-arrow {
    border-radius: 0;
    width: 56px;
    height: 97px;
    background-color: #fff;
    border: #F1F1F1 1px solid;
}

.node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-prev {
    left: -76px;
}

.node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-prev::before {
    content: "��";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 0.8125rem;
    color: #C02B6B;
    font-size: 3rem;
    background: #fff;
}

.node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-next {
    right: -76px;
}

.node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-next::before {
    content: "��";
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    font-size: 0.8125rem;
    color: #C02B6B;
    font-size: 3rem;
    background: #fff;
}

.node--type-connected-gallery .slick--field-connected-gallery----custom nav,
.node--type-connected-gallery .slick--field-connected-gallery----custom .slick-dots {
    display: none !important;
}

.block-field-blocknodeconnected-gallerytitle .field--name-title {
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1152px;
    font-size: 35px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.2px;
    text-align: left;
    color: #bf165e;
    background: linear-gradient(to right, #7c257c, #bf165e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.node--type-connected-gallery .block-field-blocknodeconnected-galleryfield-connected-video {
    padding-top: 140px;
}

.block-field-blocknodeconnected-galleryfield-connected-video .field--name-name,
.block-field-blocknodeconnected-galleryfield-connected-video .field--name-created,
.block-field-blocknodeconnected-galleryfield-connected-video .field--name-uid {
    display: none;
}

/* User Login
---------------------------------------------------------- */
body.page-user-login #main-wrapper {
    max-width: none;
}

body.page-user-login #main-wrapper .user-login-form {
    padding: 0;
}

#user-login-form .field-group {
    margin: 0;
}

#user-login-form .form-group.form-item-name {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 0em;
    margin-bottom: 2rem;
}

#user-login-form .form-group.js-form-type-password {
    flex: 0 0 100%;
    max-width: 100%;
}

#user-login-form #edit-actions {
    margin-top: 1rem;
}

body.page-user-login #main-wrapper #edit-simplesamlphp-auth-login-link .btn-icon {
    background-image: unset;
}

body.page-user-login #main-wrapper #edit-simplesamlphp-auth-login-link .login-with {
    margin-bottom: 0px;
}

/* User Login
---------------------------------------------------------- */
.path-webform .layout-main-wrapper {
    background-color: #fff;
}
.webform-submission-newsletter-subscription-form {
    padding-top: 50px;
    padding-bottom: 50px;    
    margin: 0 auto 5em auto;
}
.webform-submission-newsletter-subscription-form #edit-title h2 {        
    color: #bf165e;
    font-size: 1.75rem;
    margin-top: 20px !important;
    margin-bottom: 20px !important;    
}
.webform-submission-newsletter-subscription-form .form-group {
    margin-bottom: 1rem;
}
.webform-submission-newsletter-subscription-form .form-group label {
    font-weight: bold;
    margin-bottom: 5px;
}
.webform-submission-newsletter-subscription-form .form-text {
    margin-top: 0;
}
.webform-submission-newsletter-subscription-form .form-required:after {    
    content: "* required";
    color: red;
    font-size: 12px;
    width: 70px;
}
.layout-main-wrapper .webform-submission-newsletter-subscription-form #edit-submit {
    display: block;
    width: 200px;
    height: auto;
    margin: 2rem auto 0;    
}

/*-----------------------------------------------------------
    Tom CEO New
-----------------------------------------------------------*/
section.ceo-new img {
    max-width: 500px;
    height: 300px;
    object-fit: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.programmes-info .layout__region--content .field__item,
.programmes-info .layout__region--content .field__label {
    display: inline-block;
}

section.new_banner_image img {
    margin: 30px auto;
    width: 800px;
    height: 400px;
    object-fit: cover;
}

.new-content-filter {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 72px;
    margin-bottom: 20px;
}

/*-----------------------------------------------------------
    Media Query
-----------------------------------------------------------*/
@media screen and (min-width: 40em) {
    .node--type-programmes .layout__region--first {
        padding-right: 16px;
    }

    .node--type-programmes .layout__region--second {
        padding-left: 16px;
    }

    .node--type-programmes .layout--threecol-section--33-34-33 .layout__region--first {
        padding-right: 10px;
    }

    .node--type-programmes .layout--threecol-section--33-34-33 .layout__region--second {
        padding-left: 10px;
        padding-right: 10px;
    }

    .node--type-programmes .layout--threecol-section--33-34-33 .layout__region--third {
        padding-left: 10px;
    }
}

@media (min-width: 760px) {

    .video-title-1,
    .video-title-2,
    .video-title-3,
    .block-field-blocknodeconnected-gallerytitle .field--name-title {
        font-size: 48px;
        line-height: 60px;
    }

    /* Programmes Detail */
    .block-field-blocknodeprogrammesfield-translation-text {
        position: absolute;
        top: 15px;
        background-color: #bf165e;
        color: #fff;
        padding: 2px 8px;
        font-size: 14px;
    }

    .block-field-blocknodeprogrammestitle .field--name-title {
        font-size: 48px;
        line-height: 60px;
        letter-spacing: -0.5px;
    }

    /* Join Now */
    .join-now-detail .col-md-8 {
        padding-right: 16px;
    }

    .block-views-blocke-newsletters-block-1 nav,
    .block-views-blockconnected-gallery-view-page-block-1 nav {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (min-width: 1000px) {

    /* header*/
    #header {
        background-color: #fff;
        min-height: 165px;
        padding-top: 21px;
    }

    #header #navbar-top {
        padding-top: 21px;
        padding-bottom: 21px;
        background-color: #fff;
    }

    #header #navbar-main {
        margin-top: 132px;
    }

    .sticky-menu-on .t-header-nav-wrapper {
        margin-top: 90px !important;
        transition: all 0.3s;
    }

    .sticky-menu-on .t-header-left {
        min-height: 58px;
    }

    .sticky-menu-on .navbar-brand-hk {
        height: 58px;
    }

    /* Header Logo */
    .sticky-menu-on .navbar-brand-hk img {
        height: 50px;
    }

    /* Index - Spotlight */
    .index-spotlight-caption h3 {
        margin-top: 58px;
    }

    /* Index - Slider2 */
    .carousel-des {
        bottom: 7.5rem;
    }

    .section-news-slider-2 {
        padding-top: 32px;
        padding-bottom: 150px;
    }

    .section-news-slider-2 .news-slider-del .header-link {
        margin-top: 76px;
    }

    .section-news-slider-2 .news-slider-swiper-container {
        margin-bottom: 20px;
    }

    /* Subpage Background */
    .path-node .paragraph--type--cityu-carousel,
    .path-node.node--type-special-events .field--name-field-speciallanding-img,
    .path-node.node--type-programmes .field--name-field-programmes-banner,
    .path-node.node--type-programmes .field--name-field-programmes-banner1,
    .block-field-blocknodenewsconifield-new-banner {
        height: 460px;
    }

    .path-node .node__content {
        background-position: 0 460px;
        min-height: calc(60vw + 460px);
    }

    .path-node.node--type-special-events .node__content {
        background-size: 100% 680px;
    }

    .path-node.node--type-programmes .node__content {
        background-size: 100% 730px;
    }

    /* Ribbon Background */
    .ribbon-bg-left {
        top: calc(25.12vw + 460px);
    }

    .ribbon-bg-right {
        top: calc(28.3vw + 460px);
    }

    /* Join Now */
    .join-now-detail .col-md-8 {
        padding-right: 24px;
    }

    /* e-Newsletters */
    .block-views-blocke-newsletters-block-1 nav,
    .block-views-blockconnected-gallery-view-page-block-1 nav {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (min-width: 1000px) and (max-width: 1199px) {

    /* Index - Slider2 */
    .section-news-slider-2 .news-slider-swiper-container .swiper-slide::before {
        height: 25px;
    }
}

@media (min-width: 1200px) {

    /* Global */
    .call-to-action {
        padding: 172px 0 152px;
    }

    /* header*/
    #header {
        min-height: 172px;
    }

    .sticky-menu-on #header {
        height: 130px;
    }

    /* Index */
    .paragraph--type--cityu-carousel,
    .path-node.node--type-special-events .field--name-field-speciallanding-img,
    .path-node.node--type-programmes .field--name-field-programmes-banner,
    .path-node.node--type-programmes .field--name-field-programmes-banner1 {
        height: calc(100vh - 250px);
    }

    /* Subpage Background */
    .path-node .paragraph--type--cityu-carousel,
    .block-field-blocknodenewsconifield-new-banner {
        height: 540px;
    }

    .path-node .node__content {
        background-position: 0 540px;
        min-height: calc(60vw + 540px);
    }

    .path-node.node--type-special-events .node__content,
    .path-node.node--type-programmes .node__content {
        background-size: 100% 790px;
    }

    /* Ribbon Background */
    .ribbon-bg-left {
        top: calc(25.12vw + 540px);
    }

    .ribbon-bg-right {
        top: calc(28vw + 540px);
    }

    /* Programmes Lectures/Talks */
    .view .pagination {
        width: 70%;
        margin: 50px auto 0;
    }

    /* Programmes Detail */
    /* .path-node.node--type-programmes .node__content {
        background-position: 0 calc(100vh - 250px);
    } */
    /* Privilege */
    .privilege-detail [class^='col'],
    .privilege-detail [class*='col'] {
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (max-width: 1199.98px) {

    /* header*/
    .navbar-brand-hk img {
        height: 75px;
    }

    /* Index - Ribbon */
    .index-ribbon-bg {
        top: 5vw;
    }

    /* Welcoming Message */
    .node-img-right-caption {
        padding: 20px;
    }

    /* Contact Us */
    .card-wrap {
        margin-bottom: 52px;
        padding: 28px 40px;
    }

    .card-wrap.card-wrap-phone {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_phone.svg) right 42px bottom 22px no-repeat;
        background-size: 60px;
    }

    .card-wrap.card-wrap-fax {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_fax.svg) right 38px bottom 22px no-repeat;
        background-size: 60px;
    }

    .card-wrap.card-wrap-email {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_email.svg) right 42px bottom 23px no-repeat;
        background-size: 60px;
    }

    .card-wrap.card-wrap-address {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/card_icon_address.svg) right 46px bottom 16px no-repeat;
        background-size: 41px;
    }

    .card-wrap::after {
        height: 28px;
        bottom: -28px;
    }

    /* Join Now */
    .join-now-detail .card-wrap {
        padding: 20px 21px 21px 20px;
    }

    .join-now-detail .card-wrap.card-wrap-donate-now {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/join_now_icon_donate_now.svg) right 24px bottom 20px no-repeat;
        background-size: 52px;
    }

    .join-now-detail .card-wrap.card-wrap-express {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/join_now_icon_express.svg) right 23px bottom 17px no-repeat;
        background-size: 51px;
    }

    .join-now-detail .card-wrap.card-wrap-contact {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/join_now_icon_contact.svg) right 20px bottom 17px no-repeat;
        background-size: 48px;
    }

    /* e-Newsletters */
    .block-views-blocke-newsletters-block-1 .card img {
        width: 180px;
        height: 260px;
        left: 0;
    }

    /* Photo/Video Gallery Detail */
    .node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick__slide img {
        width: 135px;
        height: 88px;
    }

    .node--type-connected-gallery .slick-wrapper .slick--thumbnail {
        margin: 0 80px;
        width: calc(100% - 160px);
        bottom: -44px;
    }

    .node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-arrow {
        width: 45px;
        height: 80px;
    }

    .node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-prev {
        left: -56px;
    }

    .node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-next {
        right: -56px;
    }

    .node--type-connected-gallery .block-field-blocknodeconnected-galleryfield-connected-video {
        padding-top: 120px;
    }
}

@media (max-width: 1099.98px) {

    /* Index - Ribbon */
    .index-ribbon-bg {
        top: 12vw;
    }
}

@media (max-width: 999.98px) {

    /* header*/
    #header #navbar-top {
        position: relative;
    }

    .navbar-brand-hk img {
        display: none !important;
        height: 45px;
    }

    .t-services-wrapper {
        max-width: 128px;
    }

    .header-search-btn {
        display: none;
    }

    .t-nav-toggle::after {
        font-size: 22px;
        padding: 4px;
    }

    /* Index */
    .path-frontpage .headline-carousel .carousel-bottom-bg {
        display: none;
    }

    /* Index - Spotlight */
    .spotlight-content::before {
        background-position: center bottom calc(20% + 40px);
        left: -30px;
        right: -30px;
    }

    .index-spotlight-caption {
        padding: 20px;
        left: auto;
    }

    /* Index - Ribbon */
    .index-ribbon-bg {
        top: 460px;
    }

    /* Index - Video */
    #block-home-section4-bypromotingmulticulturalexchange {
        margin-top: -15vw;
    }

    /* Index - Slider2 */
    .section-news-slider-2 {
        padding-top: 40px;
        padding-bottom: 75px;
    }

    /* Subpage */
    .path-node .headline-carousel .carousel-bottom-bg::after,
    .path-node.node--type-special-events .field--name-field-speciallanding-img::after,
    .path-node.node--type-programmes .field--name-field-programmes-banner::after,
    .path-node.node--type-programmes .field--name-field-programmes-banner1::after,
    .block-field-blocknodenewsconifield-new-banner .content::after {
        background-size: cover;
        height: 10vw;
    }

    .path-node .paragraph--type--cityu-carousel,
    .path-node.node--type-special-events .field--name-field-speciallanding-img,
    .path-node.node--type-programmes .field--name-field-programmes-banner,
    .path-node.node--type-programmes .field--name-field-programmes-banner1,
    .block-field-blocknodenewsconifield-new-banner {
        height: 392px;
        min-height: auto;
    }

    .path-node .paragraph--type--cityu-carousel img,
    .block-field-blocknodenewsconifield-new-banner img {
        height: 100%;
    }

    .path-node .node__content {
        background-position: 0 392px;
        min-height: calc(80vh + 392px);
        background-size: 200% auto;
    }

    .path-node.node--type-special-events .node__content,
    .path-node.node--type-programmes .node__content {
        background-size: 170% 620px;
    }

    /* Ribbon Background */
    .ribbon-bg-left {
        top: calc(66.39vw + 392px);
    }

    .ribbon-bg-right {
        top: calc(74vw + 392px);
    }

    /* Breadcrumb */
    .has-headline-carousel-d .section-breadcrumb .breadcrumb,
    .node--type-special-events .section-breadcrumb .breadcrumb,
    .node--type-programmes .section-breadcrumb .breadcrumb,
    .node--type-newsconi .section-breadcrumb .breadcrumb {
        padding: 65px 0 20px;
    }

    /* Programmes Lectures/Talks */
    .cityu-list .layout--twocol-section .layout__region--second {
        padding: 30px 30px 10px;
    }

    /* Welcoming Message */
    .node-img-right-caption {
        margin-top: -60px;
        margin-left: 40px;
    }

    /* Contact Us */
    .card-wrap {
        padding: 20px 30px;
    }

    .card-wrap.card-wrap-phone {
        background-position: right 32px bottom 22px;
    }

    .card-wrap.card-wrap-fax {
        background-position: right 28px bottom 22px;
    }

    .card-wrap.card-wrap-email {
        background-position: right 32px bottom 23px;
    }

    .card-wrap.card-wrap-address {
        background-position: right 36px bottom 16px;
    }

    .card-wrap::after {
        height: 28px;
        bottom: -28px;
    }

    .card-wrap p {
        font-size: 16px;
    }

    /* Staff List */
    .card-wrap.card-wrap-staff {
        height: 200px;
    }

    .card-wrap.card-wrap-staff,
    .card-wrap.card-wrap-director {
        padding: 20px 30px 10px;
    }

    .card-wrap.card-wrap-staff ul li,
    .card-wrap.card-wrap-director ul li {
        float: none;
        margin-left: 0;
        margin-bottom: 10px;
    }

    /* Special Events List */
    .special-events-list {
        padding-bottom: 70px;
    }

    .special-events-list-info h2 {
        font-size: 28px;
    }

    /* Programmes Detail */
    .block-field-blocknodeprogrammescreated {
        margin-top: 10px;
    }

    .programmes-info .layout__region--content {
        padding: 30px 20px 15px;
    }

    /* Special Projects */
    .special-projects-list-info {
        margin-top: -85px;
    }

    /* Privilege */
    .privilege-detail {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Join Now */
    .join-now-detail .card-wrap {
        aspect-ratio: auto;
        height: 106px;
        padding: 20px 98px 21px 20px;
    }

    /* e-Newsletters */
    .block-views-blocke-newsletters-block-1 .card .card-body {
        padding: 30px 20px;
    }

    .block-views-blocke-newsletters-block-1 .card img {
        width: 125px;
        height: 180px;
        top: 25px;
        left: 3px;
    }

    /* Photo/Video Gallery Detail */
    .node--type-connected-gallery .slick-wrapper .slick--thumbnail {
        margin: 0 120px;
        width: calc(100% - 240px);
    }

    /* News and Announcements */
    .announcement p {
        font-size: 24px;
    }
}

@media (max-width: 759.98px) {

    /* header*/
    .navbar-brand-hk img {
        height: 40px;
    }

    .t-services-wrapper {
        max-width: 128px;
    }

    /* Index - Spotlight */
    .news-slider-del h2.section-title {
        font-size: 35px;
        line-height: 49px;
        padding-bottom: 10px;
    }

    .section-news-slider-self-2.section-news-slider-self-2 .news-slider-del {
        margin-bottom: 0;
    }

    .news-slider-del .header-link {
        margin-bottom: 30px;
    }

    .block-views-blockhome-spotlight-block-1 .section-news-slider-2 {
        padding-top: 0;
    }

    .spotlight-content::before {
        background: url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/section-spotlight-slider-bg-mob.svg) no-repeat;
        left: -10px;
        right: -10px;
        background-size: 100%;
        bottom: 50px;
        top: 30%;
        height: auto;
    }

    /* Index - Ribbon */
    .index-ribbon-bg {
        display: none;
    }

    /* Index - About CEO */
    #block-homesection3aboutceo .content {
        padding-bottom: 40vw;
    }

    #block-homesection3aboutceo .content h2.section-title {
        font-size: 35px;
        line-height: 49px;
        padding: 50px 0 20px;
    }

    #block-homesection3aboutceo .content p {
        font-size: 20px;
    }

    /* Index - Video */
    #block-home-section4-bypromotingmulticulturalexchange {
        margin-top: -24vw;
    }

    .video-wrapper {
        height: 75vw;
    }

    .video-title-box {
        padding-top: 11vw;
    }

    /* Index - Slider2 */
    .section-news-slider-2 {
        padding-top: 0;
        padding-bottom: 40px;
    }

    .section-news-slider-2 .news-slider-swiper-container .swiper-slide {
        padding-left: 1px;
        padding-right: 1px;
    }

    /* Subpage */
    .path-node .headline-carousel .carousel-bottom-bg::after,
    .path-node.node--type-special-events .field--name-field-speciallanding-img::after,
    .path-node.node--type-programmes .field--name-field-programmes-banner::after,
    .path-node.node--type-programmes .field--name-field-programmes-banner1::after,
    .block-field-blocknodenewsconifield-new-banner .content::after {
        background-size: 280%;
        background-position: 32% bottom;
        bottom: -43px;
        height: 70px;
    }

    .path-node .paragraph--type--cityu-carousel,
    .path-node.node--type-special-events .field--name-field-speciallanding-img,
    .path-node.node--type-programmes .field--name-field-programmes-banner,
    .path-node.node--type-programmes .field--name-field-programmes-banner1,
    .block-field-blocknodenewsconifield-new-banner {
        height: calc((100vh - 64px) * 0.32);
    }

    .path-node .carousel-des h2 {
        margin-bottom: 15px;
    }

    .path-node .node__content {
        background-position: 0 calc((100vh - 64px) * 0.32);
        min-height: calc(60vw + ((100vh - 64px) * 0.32));
        background-size: 300% auto;
    }

    .path-node.node--type-special-events .node__content {
        background-size: 230% auto;
    }

    .path-node .section-title {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .path-node .p-lg-bold {
        font-size: 20px;
    }

    /* Ribbon Background */
    .ribbon-bg-left {
        display: none;
        width: 100%;
        height: 71vw;
        top: calc(113.17vw + ((100vh - 64px) * 0.32));
    }

    .ribbon-bg-right {
        display: none;
        width: 100%;
        height: 49vw;
        top: calc(115vw + ((100vh - 64px) * 0.32));
    }

    /* Programmes Lectures/Talks */
    .cityu-list .layout--twocol-section {
        flex-direction: column;
    }

    .cityu-list .layout--twocol-section .layout__region--second {
        padding: 20px 20px 10px;
    }

    /* Welcoming Message */
    .node-img-right-caption {
        margin: -40px 20px 25px 20px;
    }

    .node-img-right-caption::after {
        bottom: -25px;
        height: 25px;
    }

    .node-img-right-caption h3 {
        font-size: 20px;
    }

    /* Contact Us */
    .card-wrap {
        height: auto;
        padding: 20px 20px 70px;
    }

    .card-wrap.card-wrap-phone {
        background-size: 49px;
        background-position: right 22px bottom 22px;
    }

    .card-wrap.card-wrap-fax {
        background-size: 49px;
        background-position: right 18px bottom 22px;
    }

    .card-wrap.card-wrap-email {
        background-size: 49px;
        background-position: right 22px bottom 23px;
    }

    .card-wrap.card-wrap-address {
        background-size: 36px;
        background-position: right 26px bottom 16px;
    }

    /* Staff List */
    .card-wrap.card-wrap-staff,
    .card-wrap.card-wrap-director {
        height: auto;
        padding: 20px;
    }

    .card-wrap.card-wrap-director p {
        margin-bottom: 50px;
    }

    .card-wrap.card-wrap-staff p {
        margin-bottom: 30px;
    }

    /* Special Events List */
    .special-events-list {
        margin-bottom: 50px;
        padding-bottom: 30px;
    }

    .special-events-list-info {
        position: relative;
        width: auto;
        right: auto;
        margin: -40px 12px 0;
        padding: 20px;
        min-height: 150px;
    }

    .block-views-block-page-specialevents-view-page-block-1 .views-row:nth-child(even) .special-events-list-info {
        left: auto;
    }

    .special-events-list-more {
        margin-top: 20px;
    }

    /* Programmes Detail */
    .programmes-info .layout__region--content>div {
        width: 100%;
        padding: 0;
    }

    .programmes-info .layout__region--content>div:last-child {
        margin-bottom: 0;
    }

    /* Programmes - Date Before Title  */
    .node--type-programmes .block-field-blocknodeprogrammesfield-programmes-video {
        margin-top: 0px;
    }

    /* Programmes - Info List */
    #edit-markup {
        padding: 30px 20px;
    }

    /* Programmes - Online Registration */
    .node--type-programmes .js-form-type-checkbox {
        display: block;
    }

    /* Special Projects */
    .special-projects-list {
        margin-bottom: 65px;
    }

    .special-projects-list-info {
        margin-top: -40px;
        padding: 20px;
    }

    .special-projects-list-info::after {
        height: 15px;
        bottom: -15px;
    }

    /* Privilege */
    .privilege-img .embedded-entity {
        height: calc(60vw - 40px);
    }

    .privilege-img .embedded-entity img {
        height: 100%;
        object-fit: cover;
    }

    .privilege-detail {
        margin-top: -40px;
    }

    .privilege-detail .card-wrap {
        padding: 20px 20px 110px;
    }

    .privilege-detail .col-md-6 .card-wrap {
        padding: 20px 115px 20px 20px;
    }

    .privilege-detail .card-wrap.card-wrap-certificate {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_certificate.svg) right 20px bottom 30px no-repeat;
    }

    .privilege-detail .card-wrap.card-wrap-donor-roll {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_donor_roll.svg) right 24px bottom 38px no-repeat;
    }

    .privilege-detail .card-wrap.card-wrap-regular-news {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_regular_news.svg) right 26px bottom 36px no-repeat;
    }

    .privilege-detail .card-wrap.card-wrap-special-membership {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_special_membership.svg) right 22px bottom 39px no-repeat;
    }

    .privilege-detail .card-wrap.card-wrap-invitations {
        background: #fff url(/ceo/sites/g/files/asqsls7851/themes/site/cityu_subtheme_2019/images/privilege_icon_Invitations.svg) right 26px bottom 40px no-repeat;
    }

    /* e-Newsletters */
    .block-views-blocke-newsletters-block-1 .views-row {
        padding-right: 20px;
    }

    .block-views-blocke-newsletters-block-1 .card {
        margin-top: 50px;
        margin-bottom: 0px;
    }

    .block-views-blocke-newsletters-block-1 .card .col-md-8 {
        order: 2;
    }

    .block-views-blocke-newsletters-block-1 .card .col-md-4 {
        order: 1;
    }

    .block-views-blocke-newsletters-block-1 .card img {
        width: calc(100% - 40px);
        height: auto;
        margin: -50px 20px 0;
        position: relative;
        left: auto;
        top: auto;
    }

    .block-views-blocke-newsletters-block-1 .card .cityu-list-read-more {
        margin-top: 0;
    }

    /* Photo/Video Gallery Detail */
    .node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick__slide {
        padding: 0 5px;
    }

    .node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick__slide img {
        width: 80px;
        height: 52px;
    }

    .node--type-connected-gallery .slick-wrapper .slick--thumbnail {
        margin: 0 50px;
        width: calc(100% - 100px);
        bottom: -30px;
    }

    .node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-arrow {
        width: 30px;
        height: 50px;
    }

    .node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-prev {
        left: -40px;
    }

    .node--type-connected-gallery .slick-wrapper .slick--thumbnail .slick-next {
        right: -40px;
    }

    .node--type-connected-gallery .block-field-blocknodeconnected-galleryfield-connected-video {
        padding-top: 80px;
    }
}

@media (max-width: 379.98px) {

    /* Index - Spotlight */
    .section-news-slider-2 .spotlight-content .swiper-pagination {
        padding-top: 55px;
    }
}

@media screen and (max-width: 39.98em) {

    /* Special Events landing */
    .node--type-special-events .layout--twocol-section>.layout__region--first {
        padding-right: 0;
    }

    .node--type-special-events .layout--twocol-section>.layout__region--second {
        padding-left: 0;
    }

    .node--type-special-events .layout--twocol-section {
        margin-bottom: 30px;
    }

    /* Programmes Detail */
    .node--type-programmes .layout__region--second .field--name-field-procontent-two-img2,
    .node--type-programmes .layout__region--second .field--name-field-procontent-three-img2,
    .node--type-programmes .layout__region--third .field--name-field-procontent-three-img3 {
        margin-top: 10px;
    }
}