/********************************BASIC********************************/

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif;
    /* color: #333333; */
}


h1 {
    font-size: 3rem;
    font-weight: bold;
    color: white;
}

h2.section-title {
    font-size: 3rem;
    font-weight: bold;
    color: #a7165e;
    margin: 2.5rem 0;
}


hr {
    background-color: #bf165e;
    margin-bottom: 1em;
}

.fa-search-plus:before {
    font-family: 'Font Awesome 5 Pro';
}

/* .region-main h2 {
    font-size: 3rem;
    font-weight: bold;
    color: #a7165e;
    margin: 2.5rem 0;
}

.region-main a {
    text-decoration: none;
    color: #a7165e;
}


.region-main ul {
    list-style: none;
    padding-inline-start: 1.5rem;
}



.region-main ul li {
    margin: 0.2rem 0;
}

.region-main ul li::before {
    content: "\2022";
    color: #a7165e;
    font-size: 2rem;
    font-weight: bold;
    transform: translateY(0.2rem);
    display: inline-block;
    width: 1.5rem;
    margin-left: -1.5rem;
} */


.scroll-down #header {
    top: -158px;
}

.region-main .container .field--type-text-with-summary {
    word-break: break-all;
}


@media (min-width: 992px) {
    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }
}




/* 

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

thead {
    background: linear-gradient(
        90deg,
        rgba(153, 42, 91, 1) 0%,
        rgba(200, 26, 112, 1) 100%
    );
}

table.second-pattern tbody tr:nth-child(odd) {
    background-color: #f7f7f7;
}

table:not(.second-pattern) tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

th {
    color: white;
    font-size: 1.5rem;
    font-weight: 500;
}

th:not(:first-child) {
    border-left: 1px solid white;
}

th,
td {
    padding: 1rem;
    vertical-align: top;
} */

.fa-angle-left:before {
    font-family: "Font Awesome 5 Pro";
}

.fa-angle-right:before {
    font-family: "Font Awesome 5 Pro";
}

.anchor-link {
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 1em;
}




/* 
.view-content .views-row a {
    text-decoration: none;
    color: #a7165e;
}

.view-content .views-row ul {
    list-style: none;
    padding-inline-start: 1.5rem;
}

.view-content .views-row ul li {
    margin: 0.2rem 0;
}
}

.view-content .views-row ul li::before {
    content: "\2022";
    color: #a7165e;
    font-size: 2rem;
    font-weight: bold;
    transform: translateY(0.2rem);
    display: inline-block;
    width: 1.5rem;
    margin-left: -1.5rem;
} */
.content-text {
    font-size: 1.1875rem;
    line-height: 1.8rem;
}


.desktop {
    display: block;
}

.mobile {
    display: none;
}

.youtube_container {
    width: 100%;
    display: flex;
}

.youtube_container:not(.index-video-youtube_container) iframe {
    width: 100%;
    height: 30vw;
    max-height: 526px;
    min-height: 350px;
}

.video-preview-container .youtube_container.index-video-youtube_container iframe {
    width: 100%;
    /* height: auto;
    max-height: 0; */
    min-height: 0;
}

.main-and-sidebar-wrapper {
    padding-top: 2.5rem;
    /* padding-bottom: 3rem; */
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}



.main-and-sidebar-wrapper .row {
    margin-right: 0;
    margin-left: 0;
}

.main-and-sidebar-wrapper .col-lg-3 {
    padding: 0 0;
    flex: 21rem 0 0;
    max-width: 21rem;
}


.main-and-sidebar-wrapper .col-lg-9 {
    margin-left: 3rem;
    padding-right: 0;
    flex: 1;
    /* max-width: none; */
    /* max-width: 1016px; */
    max-width: calc(100% - 24rem);
    /* max-width: 1016px; */
    /* overflow-x: scroll; */
}

.video-preview-container .swiper-button-prev,
.video-preview-container .swiper-button-next {
    transform: translateY(0);
    /* transform: translateY(-50%); */
    width: 45px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center;
}



.video-preview-container .swiper-button-prev {
    left: -20px;
}

.video-preview-container .swiper-button-next {
    right: -20px;
}

@media (max-width: 1520px) {

    .video-preview-container .swiper-button-prev {
        left: 20px;
    }

    .video-preview-container .swiper-button-next {
        right: 20px;
    }

}




@media (max-width: 1280px) {
    #main-wrapper.with-sidebar .main-and-sidebar-wrapper {
        padding-top: 1rem;
    }

    /* .video-preview-container .swiper-button-prev {
        left: 0;
    }

    .video-preview-container .swiper-button-next {
        right: 0;
    } */
}

@media (max-width: 1200px) {
    .main-and-sidebar-wrapper .col-lg-9 {
        margin-left: 2rem;
        max-width: calc(100% - 24rem);
        /* overflow: scroll; */
    }
}




@media (max-width: 767px) {

    /* .video-preview-container .swiper-button-prev {
        left: 15px;
    }

    .video-preview-container .swiper-button-next {
        right: 15px;
    } */

    .video-preview-container .swiper-button-prev,
    .video-preview-container .swiper-button-next {
        display: none;
    }


}

/* @media (max-width: 1200px) {
    .main-and-sidebar-wrapper .col-lg-9 {
        max-width: calc(100% - 24rem);
    }
} */









@media (max-width: 767px) {
    div#main-wrapper {
        margin-top: 100px;
    }

    div#main-wrapper.with-sidebar {
        margin-top: 127px;
        /* margin-top: 125px; */
    }

    .node--type-index-page div#main-wrapper {
        margin-top: 67px;
    }

}

@media (max-width: 576px) {
    div#main-wrapper.with-sidebar {
        margin-top: 125px;
        /* margin-top: 125px; */
    }
}



@media (max-width: 999px) {

    .main-and-sidebar-wrapper .col-lg-9 {
        margin-left: auto;
        max-width: none;
        padding-left: 0;
        overflow: unset;
    }

    .desktop .section-breadcrumb {
        /* display: none; */
    }


    div#main-wrapper {
        position: relative;
        padding-top: 1rem;
    }


    div#main-wrapper:before {
        content: "";
        position: absolute;
        z-index: 1;
        left: 0;
        /* bottom: 0; */
        width: 100%;
        top: 0;
        height: 1rem;
        background: linear-gradient(to right, #992A5B 0%, #992A5B 20%, #C81A70 100%);
    }


    div#main-wrapper.with-sidebar {
        position: relative;
        padding-top: 0;
    }


    div#main-wrapper.with-sidebar:before {
        content: none;
    }



}

@media (max-width: 767px) {

    #main-wrapper.with-sidebar .main-and-sidebar-wrapper {
        padding-top: 2.5rem;
    }

}

@media (min-width: 320px) {
    .container {
        max-width: none;
    }
}

@media (min-width: 760px) {
    .container {
        max-width: none;
    }
}



@media (min-width: 1000px) {
    .container {
        max-width: none;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1440px;
        /* max-width: 1152px; */
    }
}


.container {
    margin: 0 auto;
    max-width: 1440px;
    padding: 0 20px;
}

.layout-no-sidebars .region-main {
    padding-top: 2.5rem;
}

.layout-no-sidebars .main-and-sidebar-wrapper .region-main {
    padding-top: 0;
}


/* .desktop-nav-filter ~ .region-main{
    padding-top: 1em;
} */

@media only screen and (max-width: 992px) {
    html {
        font-size: 14px;
    }

}

@media only screen and (max-width: 767px) {
    html {
        font-size: 13px;
    }


    h1 {
        font-size: 2.5rem;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }


    /* .layout-no-sidebars .region-main{
        padding-top: 2.5rem;
    } */




}

@media only screen and (max-width: 576px) {
    html {
        font-size: 12px;
    }

    h1 {
        font-size: 2.2rem;
    }




}


@media only screen and (max-width: 430px) {
    h1 {
        font-size: 2rem;
    }




}


@media only screen and (max-width: 380px) {
    h1 {
        font-size: 1.8rem;
    }



}

body .ckeditor-template.cityu-image-layout {
    margin-top: 1em;
}


.node--type-page .block-field-blocknodepagebody::before {
    content: none;
}

.node--type-cityu-normal-page .block-entity-fieldnodebody {
    border-top: none;
}


/********************************TABLE********************************/




table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

thead {
    background: linear-gradient(90deg,
            rgba(153, 42, 91, 1) 0%,
            rgba(200, 26, 112, 1) 100%);
}

table.second-pattern tbody tr:nth-child(odd) {
    background-color: #f7f7f7;
}

table:not(.second-pattern) tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}


th {
    color: white;
    font-size: 1.5rem;
    font-weight: 500;
}

th:not(:first-child) {
    border-left: 1px solid white;
}

th,
td {
    padding: 1rem;
    vertical-align: top;
}

.high-padding th,
.high-padding td {
    padding: 1.8rem 2rem;
}

.responsive-table.js-active table {
    font-size: smaller;
}

/* .responsive-table.js-active table tr th {
    padding: 1.8rem 2rem;
}

.responsive-table.js-active table tr td {
    padding: 1.8rem 2rem;
} */

.responsive-table.js-active .high-padding th,
.responsive-table.js-active .high-padding td {
    padding: 1.5rem 1.8rem;
}

@media only screen and (max-width: 767px) {
    .width-10rem-mobile {
        min-width: 10rem;
    }

    .width-20rem-mobile {
        min-width: 20rem;
    }

    .width-30rem-mobile {
        min-width: 30rem;
    }

    .width-40rem-mobile {
        min-width: 40rem;
    }

    .high-padding th {
        padding: 1.2rem 2rem;
    }


    .responsive-table {
        max-width: calc(100vw - 40px);
        overflow-x: scroll;
        white-space: nowrap;
    }
}






/********************************BACK-TO-TOP********************************/

.t-back-to-top {

    background-color: #AB165E;
    border-radius: 50%;

}


.t-back-to-top::after {

    font-family: "Font Awesome 5 Pro";
    color: rgb(255, 255, 255);
    font-size: 27px;
    font-weight: 900;
    content: "\f077";

}


/********************************HEADER********************************/

.t-backhome-icon {
    display: none;
}

.t-primary-menu {
    flex-wrap: wrap;
}

.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>.t-nav-link {
    color: #000;
    font-weight: 600;
}

.t-primary-menu .t-menu-level-0>li>.t-nav-link.t-dropdown-toggle span::after {
    content: 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 {
    color: #bf165e;
}




/* #navbar-top .t-header-left.t-department-websites {
    display: none;
} */

#navbar-top {
    display: none;
}

/* 
#navbar-top {

} */



#navbar-main .t-header-left.t-department-websites {
    display: flex;
    /* flex: 370px 0; */
    /* margin-bottom: 1em; */
    margin-bottom: 2em;
}

#navbar-main .menu--quick-links {
    position: absolute;
    top: 0;
    right: 20px;
    margin-top: 2px;
    z-index: 15;
    /* right: 120px; */
}

#navbar-main .t-header-search {
    position: absolute;
    top: 0;
    right: 12px;
}

.t-primary-menu .t-navbar-nav>li {
    margin-right: .8em;
    white-space: nowrap;
    /* margin-right: 8px; */
}

.t-primary-menu .t-navbar-nav>li:last-child {
    margin-right: 0;
}

.t-primary-menu .t-navbar-nav>li:last-child >.t-dropdown-menu {
    right: 0;
    left: auto;
}

.t-primary-menu .t-menu-level-0>li>.t-nav-link.t-dropdown-toggle span {
    padding-right: 0;
    font-size: 1.1rem;
    font-weight: 500;
    /* padding-bottom: 1em; */
    line-height: 1.3;
}

.cityu-template-department-websites .t-primary-menu .nav-item,
.cityu-template-department-service .t-primary-menu .nav-item {
    cursor: pointer;
}

.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>.t-nav-link {
    font-size: 1rem;
    padding-bottom: 1.7em;
    line-height: 1.3;
}

.t-primary-menu .t-menu-level-0>li>.t-nav-link {
    padding: 0;
}

.cityu-template-department-websites .t-header-nav-wrapper,
.cityu-template-department-service .t-header-nav-wrapper {
    margin-bottom: 20px;
}

.cityu-template-department-websites .t-header-nav-wrapper::before,
.cityu-template-department-service .t-header-nav-wrapper::before {
    bottom: -20px;
    height: 20px;
    background: linear-gradient(to right, #992A5B 0%, #992A5B 20%, #C81A70 100%);
}

.cityu-template-department-websites .t-primary-menu .t-menu-level-0>li>.t-nav-link.t-active::before,
.cityu-template-department-service .t-primary-menu .t-menu-level-0>li>.t-nav-link.t-active::before {
    content: none;
}

.cityu-template-department-websites .t-primary-menu .t-menu-level-0>li>.t-nav-link.t-active,
.cityu-template-department-service .t-primary-menu .t-menu-level-0>li>.t-nav-link.t-active {
    color: #A7165E;
}

.menu--quick-links>h2 {
    /* font-size: 19px; */
    /* font-size: 16px; */
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.menu--quick-links>h2::after {

    color: #333;
    font-size: 22px;
}

.menu--quick-links .nav {
    width: auto;
    padding: .7em;
}

.menu--quick-links .nav a {
    font-size: 17px;
    /* font-size: 19.5px; */
    font-weight: 600;
    color: #333;
}


#header .t-header-text {
    /* height: calc(19.5px * 1.5); */
    height: 0;
    max-height: 0;
    visibility: hidden;
}

#header .t-header-search-icon {
    /* font-size: 19px; */
    /* display: flex; */
    /* align-self: center; */
    font-size: 19.5px;
    top: 2px;
}


#header .t-header-text {
    /* display: none; */
}


.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 {
    content: none;
}




.no-touch .t-primary-menu .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 .t-dropdown .t-dropdown-menu.t-menu-level-3 {
    display: none;
}

.no-touch .t-primary-menu .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 .t-dropdown:hover .t-dropdown-menu.t-menu-level-3 {
    display: block;
}

.cityu-template-department-websites .t-primary-menu .nav-item .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 .t-dropdown .t-dropdown-menu.t-menu-level-3 .t-dropdown .t-nav-link:after {
    content: none;
}

.cityu-template-department-service .t-primary-menu .nav-item .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 .t-dropdown .t-dropdown-menu.t-menu-level-3 .t-dropdown .t-nav-link:after {
    content: none;
}


.cityu-template-department-websites .t-primary-menu .nav-item .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 .t-dropdown .t-dropdown-menu.t-menu-level-3 .t-menu-level-4,
.cityu-template-department-service .t-primary-menu .nav-item .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 .t-dropdown .t-dropdown-menu.t-menu-level-3 .t-menu-level-4 {
    display: none;
}


@media (min-width: 1000px) {


    .cityu-template-department-websites .t-primary-menu .nav-item:nth-child(n+6) .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu,
    .cityu-template-department-service .t-primary-menu .nav-item:nth-child(n+6) .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu {
        left: -98%;
    }

    .cityu-template-department-websites .t-primary-menu .nav-item:nth-child(n+6) .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 .t-dropdown .t-dropdown-menu.t-menu-level-3,
    .cityu-template-department-service .t-primary-menu .nav-item:nth-child(n+6) .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 .t-dropdown .t-dropdown-menu.t-menu-level-3 {
        left: -100%;
    }



}







@media (min-width: 1000px) {
    /* #navbar-main .t-header-left.t-department-websites{
        flex: 370px 0;
    } */


    nav#block-cityu-subtheme-2019-main-menu {
        display: flex;
        align-self: flex-end;
        /* flex: calc(100% - 370px) 0; */
        justify-content: flex-end;
        margin-left: auto;
    }

}






@media (max-width: 1300px) {
    #navbar-main .t-header-left.t-department-websites {
        /* flex: 340px 0; */
    }

    nav#block-cityu-subtheme-2019-main-menu {

        flex: calc(100% - 340px) 0;

    }


}

@media (max-width: 999px) {

    #navbar-top {
        display: block;
    }

    /* #navbar-top .t-header-left.t-department-websites {
        display: flex;
    } */

    #navbar-main .t-header-left.t-department-websites {
        display: none;
    }

    #navbar-main .menu--quick-links {
        display: none;
    }

    #navbar-main .t-header-search {
        display: none;
    }
}

@media (max-width: 999.98px) {

    .t-search-input .t-header-search,
    .t-nav-collapse .t-navbar-nav li .t-nav-link>span,
    .t-sidebar-mobile .t-navbar-nav li .t-nav-link>span,
    .t-nav-collapse .m-quick-link+.nav .nav-link span,
    .t-sidebar-mobile .m-quick-link+.nav .nav-link span,
    .t-nav-collapse .m-quick-link>h2,
    .t-sidebar-mobile .m-quick-link>h2 {
        max-width: unset;
        padding-left: 20px;
        padding-right: 20px;
    }

    .t-nav-collapse .m-quick-link+.nav .nav-link span,
    .t-sidebar-mobile .m-quick-link+.nav .nav-link span {
        padding-left: 20px;
        padding-right: 20px;
    }

    .t-nav-collapse .m-quick-link:first-of-type {
        display: none;
    }

}

/********************************MOBILE MENU********************************/
/* .t-search-input .t-header-search,
.t-nav-collapse .t-navbar-nav li .t-nav-link>span,
.t-sidebar-mobile .t-navbar-nav li .t-nav-link>span,
.t-nav-collapse .m-quick-link+.nav .nav-link span,
.t-sidebar-mobile .m-quick-link+.nav .nav-link span,
.t-nav-collapse .m-quick-link>h2,
.t-sidebar-mobile .m-quick-link>h2 {} */


.t-nav-collapse .t-navbar-nav li .t-nav-link>span,
.t-sidebar-mobile .t-navbar-nav li .t-nav-link>span {
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
}

.t-sidebar-mobile .t-navbar-nav li .t-nav-link.show+ul.t-menu-level-2 .t-nav-link.show .t-menu-level-4 {
    background-color: #5b0c2d;
}

/* .t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu a>span,
.t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu span>span {
    padding-left: 60px !important;

} */

/* .t-nav-collapse .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu a>span,
.t-nav-collapse .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu span>span,
.t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu a>span,
.t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu span>span {

    padding-left: 60px !important;
} */


@media (max-width: 1199.98px) {

    .t-nav-collapse .t-navbar-nav .t-menu-level-1.t-dropdown-menu a>span,
    .t-nav-collapse .t-navbar-nav .t-menu-level-1.t-dropdown-menu span>span {
        padding-left: 40px !important;
    }



    .t-nav-collapse .t-navbar-nav .t-menu-level-2.t-dropdown-menu a>span,
    .t-nav-collapse .t-navbar-nav .t-menu-level-2.t-dropdown-menu span>span {
        padding-left: 60px !important;
    }





    .t-nav-collapse .t-navbar-nav .t-menu-level-3.t-dropdown-menu a>span,
    .t-nav-collapse .t-navbar-nav .t-menu-level-3.t-dropdown-menu span>span {
        padding-left: 90px !important;
    }

    .t-nav-collapse .t-navbar-nav .t-menu-level-4.t-dropdown-menu a>span,
    .t-nav-collapse .t-navbar-nav .t-menu-level-4.t-dropdown-menu span>span {
        padding-left: 120px !important;
    }

    /* .t-nav-collapse .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu a>span,
    .t-nav-collapse .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu span>span,
    .t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu a>span,
    .t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-menu-level-4.t-dropdown-menu span>span {
        padding-left: 60px !important;
    } */

    /* .t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-menu-level-3.t-dropdown-menu li .t-nav-link a>span,
    .t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-menu-level-3.t-dropdown-menu li .t-nav-link span>span {
        padding-left: 60px !important;
    } */

    .t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-dropdown-menu.t-menu-level-3 a>span {
        padding-left: 90px !important;
    }

    .t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-dropdown-menu.t-menu-level-3 .is-active>span {
        padding-left: 106px !important;
    }

    .t-sidebar-mobile .t-navbar-nav .t-dropdown-menu .t-dropdown-menu.t-menu-level-3 .is-active>span::before {
        left: 90px;
    }


}



.t-sidebar-mobile .t-sidebar-collapse .nav-sidebar-normal {
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
}

.t-sidebar-mobile .t-sidebar-collapse p {
    max-width: none;
    padding-left: 20px;
    padding-right: 20px;
}

.t-sidebar-mobile .t-sidebar-collapse.collapsed p::after {
    /* right: 28px; */
    right: 20px;
}

.t-sidebar-mobile .t-sidebar-collapse p::after {
    right: 20px;
}

/********************************FOOTER********************************/
.site-footer {
    color: #fff;
    margin-top: 3rem;
}

.t-footer {
    display: flex;
}


.t-footer .footer-links {
    line-height: 1.54;
    margin-right: 1em;
}




.t-footer .footer-copyright {
    color: #fff;
    /* line-height: 1.54; */
    line-height: 2;
}


.t-footer .footer-links a::after {
    width: 1px;
    height: 13px;
    border-radius: 0;
}

.t-sitemap {
    /* background: #6b203e; */
    /* background-color: #343434; */
    /* padding: 50px 0; */
    background: #222;
}

.t-footer-bottom {
    /* background-color: #343434; */
    background: #222;
}


.t-sitemap .block-menu .t-menu-level-0>li>.t-nav-link,
.t-sitemap .block-menu .t-menu-level-0>li>.second-nav-item .t-nav-link {
    display: block;
    margin-bottom: 1em;
    padding: 0;
    /* font-size: 15px;
    line-height: 1.6;
    font-weight: 900; */
    font-size: 16px;
    line-height: 1.3;
    font-weight: normal;
}

.t-sitemap .block-menu .t-menu-level-0>li>.second-nav-item {
    margin-top: 2em;
}

.t-sitemap .block-menu .t-dropdown-item {
    margin-bottom: 7px;
}

.t-sitemap .block-menu .t-navbar-nav .t-dropdown-item .t-nav-link,
.t-sitemap .block-menu .t-menu-level-0>li>.second-nav-item .t-dropdown-item .t-nav-link {
    /* display: block;
    font-size: 13px;
    line-height: 1.3;
    font-weight: normal;   */
    font-size: 13px;
    margin-bottom: 5px;
    /* line-height: 1.4; */
    line-height: 1.31;
    /* line-height: 17px; */
}

.t-sitemap .block-menu .t-navbar-nav {}

.t-sitemap .block-menu .nav-item {
    flex: auto;
    /* flex: 1; */
    /* flex: 0; */
    /* margin: 0 1em 0 0; */
    /* flex: 1 1 0; */
    margin: 0 1em;
}

.t-sitemap .block-menu .nav-item:not(.mobile):first-child {
    margin-left: 0;
}

.t-sitemap .block-menu .nav-item:not(.mobile):last-child {
    margin-right: 0;
}


.t-sitemap .block-menu .t-navbar-nav .second-nav-item {}



@media (max-width: 999px) {
    .t-footer {
        flex-wrap: wrap;
    }

    .t-footer .footer-links {
        flex: 100% 0;
    }

    .t-footer .footer-copyright {
        flex: 100% 0;
        text-align: left;
        /* position: absolute; */
        /* bottom: 3em; */
        /* bottom: 0px; */
        width: 100vw;
        white-space: nowrap;
    }


    .t-sitemap {
        display: none;
    }


    .t-footer-bottom .t-footer-wrapper {

        display: block;
    }

    .t-footer-bottom .t-footer-wrapper>.block {
        /* flex: 50% 0; */
        float: left;
        width: calc(100% - 114px);
    }

    .t-footer-bottom .t-footer-wrapper .footer-logo {
        /* flex: 50% 0; */
        float: right;
    }


    .t-footer .footer-links a {
        display: block;
        text-align: left;
        margin-bottom: 1em;
        font-size: 19px;
    }

    .t-footer .footer-links a::after {
        content: none;
    }

    /* .t-footer .footer-copyright {
        text-align: left;
    } */


}






/********************************FOLLOW US BLOCK********************************/

/* .addthis_inline_follow_toolbox {
    margin-top: -2em;
    min-height: 120px;
}

.addthis_toolbox.addthis_default_style {
    display: flex;
    justify-content: center;
    align-content: center;
} */

#block-followusblock {
    /* background: #bf165e; */
    /* background: #AB165E; */

    background: url(/cc/sites/g/files/asqsls8351/files/2021-07/find_us_bg.png);
    /* background-size: contain; */
    background-position: center;
    background-repeat: no-repeat;
    outline: none;
    background-size: cover;

}

#block-followusblock .container {
    /* background-color: #ab165eb5; */
    background-color: #ab165ecc;
    width: 100%;
    margin: 0 auto;
    max-width: none;
    /* padding: 2em 0; */
}


.t-footer-follow-us-block {
    /* padding-bottom: 60px; */
    height: 19.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.t-footer-follow-us-block h1 {
    color: #fff;
}


.follow-us--title {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-top: 0.625rem;

}


.follow-us--container {
    margin: 0 auto;
    margin-top: 1.5em;
    display: flex;
    align-content: center;
    justify-content: center;
}

.follow-us--item {
    flex: 4rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-right: 1.5em; */
    margin: 0 1.125rem;
    transition: transform ease .2s;
}

.follow-us--item:hover {
    transform: translateY(-4px);
}

/* .follow-us--item:last-child {
    margin-right: 0;
} */

.follow-us--item img {
    max-width: 100%;
    vertical-align: top;
}



@media only screen and (max-width: 767px) {

    .t-footer-follow-us-block {
        height: 13rem;
    }

    .follow-us--title {
        font-size: 2rem;
        margin-top: -0.2rem;
        margin-bottom: 1.4rem;
    }

    .follow-us--item {
        flex: 3.6rem 0;
        margin: 0 .5rem;
    }

    .t-footer-follow-us-block {
        padding-bottom: 15px;
    }


    .follow-us--container {
        margin-top: 0;
    }

}


.block-entity-fieldnodebody .cityu-image-layout .row>[class^="col-"] img,
.field--name-field-cityu-normal-content .cityu-image-layout .row>[class^="col-"] img,
.block-field-blocknodecityu-normal-pagebody .cityu-image-layout .row>[class^="col-"] img,
.block-entity-fieldnodefield-cityu-service-description .cityu-image-layout .row>[class^="col-"] img,
.block-field-blocknodecityu-eventbody .cityu-image-layout .row>[class^="col-"] img,
.block-field-blocknodepagebody .cityu-image-layout .row>[class^="col-"] img {
    transform: scale(1);
}




@media (max-width: 600px) {

    /* .follow-us--item {
        margin-right: .9em;
    } */


    #block-followusblock .container {
        /* padding: 1.5em 0; */
    }

}






/********************************EVENTS BLOCK**********************************/
/********************************RESEARCH BLOCK********************************/
/* .shadow {
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
} */

.shadow {
    box-shadow: 6px 6px 12px #cccccc !important;
}


.events-item {
    width: 100%;
    margin-bottom: 2.5rem;
    /* margin-bottom: 2.5rem; */
    padding: 2.4rem 2.4rem 2.4rem;
    /* padding: 2.4rem 2.4rem 4.2rem; */
    position: relative;

}

.events-img-container {
    position: relative;
}

.events-item--title {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    margin-bottom: 1rem;
}

.events-item--content {}

.events-item img {
    max-width: 100%;
    width: auto;
}


.events-item .row>[class^="col-"] img {
    max-width: 100%;
    width: 100%;
}


.events-item a {
    word-break: break-all;
}

.events-item p {
    font-size: 1.1875rem;
    line-height: 2.1875rem;
}


@media only screen and (max-width: 767px) {
    .events-item {
        margin-bottom: 3.5rem;
    }

    .events-item:first-child {
        /* margin-top: 2rem; */
        margin-top: 0;
    }
}


/********************************EVENT-INFO BLOCK********************************/

.event-information {
    margin-bottom: 1em;
}


.event-information-row {
    display: flex;
    margin: 0.3rem 0;
}

.event-information-row .event-information-col {
    font-size: 1.1875rem;
    line-height: 1.8rem;
}

.event_information_label {
    /* width: 6rem; */
    flex: 12% 0;
    margin-right: 10px;
    font-weight: 600;
}

.event_information_content {
    flex: 1;
}

.event_information_content p {
    line-height: unset;
    margin-bottom: 0;
}

/********************************SIDE-MENU BLOCK********************************/


.region-sidebar {}

.region-sidebar .t-navbar-nav {
    width: 21rem;
    min-width: 21rem;
    /* margin-right: 3rem; */
}


.region-sidebar .t-menu-level-0>li {}

.region-sidebar .t-menu-level-0>li:first-child {
    border-top: 1px solid #e9e9e9;
}

.region-sidebar .t-menu-level-0>li>.t-nav-link {
    display: block;
    padding: 1rem 1rem;
    border-bottom: 1px solid #e9e9e9;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #333333;
    background-color: transparent;
}

.region-sidebar .t-menu-level-0>li:not(.t-active)>.t-nav-link:hover {
    color: #a7165e;
}

/* .no-touch .region-sidebar .t-menu-level-0 > li > .t-nav-link:hover{

} */

.region-sidebar .t-menu-level-0>li>.t-nav-link.t-active {
    background-color: #a7165e;
    color: white;
    /* border-bottom: 3px solid #bf165e; */
    border-bottom: none;
}

.region-sidebar .t-menu-level-0>li>.t-nav-link.t-active:hover {
    color: white;
}

.region-sidebar .t-menu-level-0>li>.t-nav-link.t-active::before {
    color: #fff;
}

.region-sidebar .t-menu-level-0>li>.t-nav-link.t-active:hover::before {
    color: #fff;
}


.region-sidebar .t-menu-level-0>.t-dropdown .t-dropdown-menu.t-menu-level-1 .t-dropdown-item .t-nav-link {}

.region-sidebar .t-menu-level-0>.t-dropdown .t-dropdown-menu.t-menu-level-1 .t-dropdown-item .t-nav-link {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 1rem 1rem;
}

.region-sidebar .t-menu-level-0>.t-dropdown .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 {}

.region-sidebar .t-menu-level-0>.t-dropdown .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu.t-menu-level-2 .t-dropdown-item .t-nav-link {
    font-size: 1.0rem;
    font-weight: 500;

}



.region-sidebar .t-menu-level-0>.t-dropdown .t-dropdown-menu.t-menu-level-1 .t-dropdown .t-dropdown-menu .t-menu-level-3 .t-dropdown-item {
    background-color: #ebebeb;
}

/* .region-sidebar .t-navbar-nav .t-menu-level-3 .t-nav-link {
    padding-left: 60px;
} */
.region-sidebar .t-menu-level-0>.t-dropdown .t-dropdown-menu.t-menu-level-1 .t-menu-level-3 .t-nav-link {
    padding-left: 60px !important;
}

/* 
.no-touch .region-sidebar .t-menu-level-0 > li > .t-nav-link:hover{

} */


@media only screen and (max-width: 1200px) {
    /* .region-sidebar .t-navbar-nav {
        margin-right: 2rem;
    } */

    .region-sidebar .t-menu-level-0>li>.t-nav-link {
        padding: 0.8rem 0.8rem;
        font-size: 1rem;
    }

}

@media only screen and (max-width: 992px) {
    .side-menu {
        display: none;
    }


}








/********************************BREADCRUMB BLOCK********************************/


.mobile_breadcrumb_block {
    display: none;
}

.desktop_breadcrumb_block {
    display: block;
}





.section-breadcrumb .breadcrumb {
    /* display: block;
    margin-bottom: 0;
    padding: 20px 0;
    background-color: transparent;
    border-radius: 0; */
    padding: 0 0;
    background-color: transparent;
    display: flex;
    justify-content: flex-end;
    margin-top: 1.2rem;
    /* margin-top: -1.2rem; */
    /* margin-top: 0; */
    margin-bottom: 1rem;
    /* margin-bottom: 1rem; */
}

/* @media (min-width: 760px) {
    .section-breadcrumb .breadcrumb {
        padding: 30px 0;
    }
}

@media (min-width: 1000px) {
    .section-breadcrumb .breadcrumb {
        padding: 40px 0 40px;
    }
}


@media (min-width: 1200px) {
    .section-breadcrumb .breadcrumb {
        padding: 50px 0 50px;
    }
} */

.section-breadcrumb .breadcrumb-home {
    display: none;
}


.section-breadcrumb .breadcrumb-first {
    display: inline-block;
}

.section-breadcrumb .breadcrumb a {
    display: inline-block;
    position: relative;
    padding-right: 0.4rem;
    color: #333333;
    font-size: 1rem;
    font-weight: 300;
    /* text-transform: capitalize; */
}

/* .section-breadcrumb .breadcrumb a:not(:first-child) {
    padding-left: 1.4rem;
} */

.section-breadcrumb .breadcrumb a:hover {
    color: #a7165e;
}

.section-breadcrumb .breadcrumb .active {
    color: #a7165e;
}

.section-breadcrumb .breadcrumb:not(:first-child) {
    padding-left: 1.4rem;
}

.section-breadcrumb .breadcrumb-others span::before {
    font-size: 16px;
    color: #333333;
    font-weight: 300;
    opacity: 1;
}


@media only screen and (max-width: 1280px) {

    .section-breadcrumb .breadcrumb {
        margin-top: 1.2rem;
    }

}



@media (max-width: 767px) {
    /* .section-breadcrumb {
        display: none;
    } */

    .mobile_breadcrumb_block {
        /* display: none; */
        display: block;
    }

    #header {
        box-shadow: none;
    }

    .mobile_breadcrumb_block .section-breadcrumb .breadcrumb {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
        justify-content: flex-start
    }

    #header .mobile_breadcrumb_block .section-breadcrumb .breadcrumb {
        padding-bottom: 0;
        overflow: auto;
    }

    .desktop_breadcrumb_block {
        display: none;
    }

}

/********************************TOP BANNER BLOCK********************************/

.region-title-side .field--name-field-banner-title {
    display: none;
}


.field--name-field-normal-page-banner,
.field--name-field-banner-mobile {
    display: none;
}

.top-banner {
    height: 22rem;
    /* background-image: url("../images/top_banner.png"); */
    background-position: unset !important;
}

.top-banner-container {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.bg-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.top-banner-container h1 {
    margin-bottom: 0;
    text-shadow: 0 0 4px black;
}


@media only screen and (min-width: 1440px) {
    .top-banner-container h1 {
        max-width: 45%;
        /* max-width: 35%; */
    }


}

@media only screen and (max-width: 1439px) {
    .top-banner-container h1 {
        max-width: 60%;
        /* max-width: 30%; */
    }


}

@media only screen and (max-width: 992px) {}


@media only screen and (max-width: 767px) {
    .top-banner {
        height: 12rem;
        /* background-image: url("../images/top_banner_mobile.png"); */
    }

    .top-banner-container {
        max-width: 60%;
        margin: 0;
    }

    .top-banner-container h1 {
        max-width: none;
    }

}

@media only screen and (max-width: 500px) {

    .top-banner-container {
        max-width: 70%;
        margin: 0;
    }
}



@media only screen and (max-width: 576px) {
    .top-banner {
        height: 11rem;
    }
}





@media only screen and (max-width: 430px) {
    .top-banner {
        height: 10rem;
    }
}

@media only screen and (max-width: 380px) {
    .top-banner {
        height: 9rem;
    }
}

@media only screen and (max-width: 350px) {
    .top-banner {
        height: 8rem;
    }

    .top-banner-container {
        max-width: 90%;
    }

}





/********************************BUTTON BLOCK********************************/


.btn {
    font-size: 1rem;
}

.btn.read-more-btn {
    margin-top: 1.5em;
    padding: 0.6rem 2rem;
    font-size: 1.1rem;
    /* 
    transform: translate(-50%, 0);
    position: absolute;
    left: 50%; */
    /* padding: 0.4rem 2.8rem; */
}




.btn-container {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 1.875rem 0;
}


.section-btn {
    font-size: 1.5rem;
    font-weight: 500;
    color: #a7165e;
    padding: 0.5rem 3rem;
    border-radius: 0.6rem;
    /* border: 2px solid #a7165e; */
    border: 2px solid #a7165e;
    transition: background 200ms;
}


.indexpage-btn {
    font-size: 1.5rem;
    font-weight: 500;
    color: #a7165e;
    padding: 0.5rem 3rem;
    border-radius: 0.6rem;
    /* border: 2px solid #a7165e; */
    border: 2px solid #a7165e;
    transition: background 200ms;
}

.btn.slim {
    padding: 0.4rem 2.8rem;
}


/********************************PAGINATION BLOCK********************************/




.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
}


/* .view li.pager__item--pre {}

.view li.pager__item--next {}

.view .pagination .page-item-main {} */


@media (max-width: 759.98px) {

    .view .pagination {
        /* justify-content: space-between; */
        justify-content: center;
    }




}




/********************************PREV / NEXT PAGE BTN********************************/


.view .pagination .news-list-page-link {
    background-color: transparent;
    /* height: 1.25rem; */
    margin: 0 0.25rem;
    width: auto;
}

.view .pagination .news-list-page-link span {
    font-size: 1.25rem;
    color: #a7165e;

}

.no-touch .view .pagination .news-list-page-link:hover,
.no-touch .view .pagination .news-list-page-link:focus,
.view .pagination .news-list-page-link:active {
    background-color: transparent;
}

.view .pagination .pager__item--pre {
    margin-right: 0;
}

.view .pagination .pager__item--next {
    margin-left: 0;
}

/********************************PAGE NUMBER********************************/


.view .pagination .page-item-main .page-item:first-child .page-link {
    margin-left: 0.6rem;
}

.view .pagination .page-item-main .page-item.mobile {
    display: none !important;
}

.view .pagination .page-item-main .page-item .page-link {
    font-size: 1.25rem;
    margin-right: 0.7rem;
    /* margin-right: 0.6rem; */
    color: #333333;
    padding: 0;
}

/* .view .pagination .page-item-main .page-item:not(:last-child) .page-link{
    margin-right: 0.7rem;
} */


.view .pagination .page-item-main .page-item.active .page-number.page-link {
    font-weight: 500;
    color: #a7165e;
}


.view .pagination .page-item-main>li a::after,
.view .pagination .page-item-main>li span::after {
    /* content: "|"; */
    /* margin-right: 0.6rem; */
    content: none;
}

.view .pagination .page-item-main>li:not(:first-child) a::before,
.view .pagination .page-item-main>li:not(:first-child) span::before {
    content: "|";
    margin-right: 0.6rem;
    color: #333333;
}

/* 
.view .pagination .page-number {}

.view .pagination .page-link {} */


/* .view .pagination .page-item-main .page-item.active {} */





/* .view .pagination .page-item.active .page-number {
    font-weight: 500;
    color: #a7165e;
} */




@media only screen and (max-width: 767px) {


    /* .view .pagination .page-item-main .page-item {
        display: block;
    } */

    .view .pagination .page-item-main .page-item {
        display: none;
    }


    .view .pagination .page-item-main .page-item.mobile {
        display: inline-block !important;
    }


    .view .pagination .page-item-main .page-item.active {
        display: inline-block;
    }

    .view .pagination .page-item-main .page-item.page-more {
        display: none;
    }



    .view .pagination .page-item-main .page-item .page-number.page-link {
        font-size: 1.9rem;
        color: #676767;
        margin-right: 0;
    }

    .view .pagination .page-item-main .page-item.active .page-number.page-link {
        font-weight: bold;
        color: #676767;
    }

    .view .pagination .page-item-main .page-item:not(.page-more):last-child {
        display: inline-block;
    }

    /* font-size: 2.4rem;
    color: #676767;
    margin: 0.2rem 1.2rem 0; */
    .view .pagination .news-list-page-link span {
        font-size: 2.4rem;
        color: #676767;
        margin: 0 1.2rem 0;
    }

    .view .pagination .page-item-main>li:not(:first-child) a::before,
    .view .pagination .page-item-main>li:not(:first-child) span::before {
        content: "/";
        font-size: 1.9rem;
        color: #676767;
        margin: 0 0.6rem;
    }

    .view .pagination .page-item-main>li.active a::before,
    .view .pagination .page-item-main>li.active span::before {

        content: none;
    }

    /* .view .pagination .page-item-main .page-item+.view .pagination .page-item-main .page-item:last-child:before {
        content: "/";
    } */


}




/********************************SWIPER BLOCK********************************/





.swiper-button-prev,
.swiper-button-next {
    transform: translateY(-50%);
    width: calc(var(--swiper-navigation-size) / 44 * 20);
    background-repeat: no-repeat;
    background-position: center;
    background-size: unset;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    content: none;
}

.swiper-button-prev {
    /* background-image: url("../images/swiper_prev.svg"); */
    background-image: url(/cc/sites/g/files/asqsls8351/themes/site/cityu_subtheme_2019/images/swiper_prev.svg);
}

.swiper-button-next {
    /* background-image: url("../images/swiper_next.svg"); */
    background-image: url(/cc/sites/g/files/asqsls8351/themes/site/cityu_subtheme_2019/images/swiper_next.svg);
}



.swiper-pagination-bullets {
    width: 100%;
    top: 2.5rem;
    bottom: unset;
    left: 50%;
    transform: translateX(-50%);
    text-align: right;
    max-width: 1440px;
    padding: 0 20px;
}

.swiper-pagination-bullet {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.4rem !important;
    text-align: center;
    font-size: 1.2rem;
    color: white;
    border: 2px solid white;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
    color: #a7165e;
    background: white;
}


.events-img-container {
    margin-top: 2rem;
}


.events-img-container img {
    max-width: 100%;
}

.events-img-container .swiper-container {
    /* max-height: 25rem; */
}

.events-img-container .swiper-container .swiper-slide {
    width: 100% !important;
}



.events-img-container .swiper-container .swiper-slide img {
    width: 100%;
    height: 100%;
    /* max-height: 25rem; */
    object-fit: cover;
}

.events-img-container .swiper-button-prev,
.events-img-container .swiper-button-next {
    width: 3.5rem;
    height: 3rem;
    margin-top: 0;
}


@media only screen and (max-width: 1200px) {


    .swiper-pagination-bullets {
        top: unset;
        bottom: -3rem;
        text-align: center;
        padding: 0;
    }

    .swiper-pagination-bullet {
        width: 1.4rem;
        height: 1.4rem;
        margin: 0 1rem !important;
        line-height: 1.4rem;
        font-size: 0;
        color: white;
        background: white;
        border: 2px solid #a7165e;
    }

    .swiper-pagination-bullet-active {
        color: #a7165e;
        background: #a7165e;
    }


}



/********************************PEOPLE BLOCK********************************/






.people-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    grid-auto-rows: 1fr;

    gap: 4rem 6rem;
    justify-content: center;
    padding: 3rem 0 5rem;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}

.person-card {
    display: flex;
    flex-direction: column;
    max-width: 36rem;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.person-card .upper-part {
    display: flex;
    justify-content: space-between;
    /* min-height: 50%; */
}

.person-card .person-photo {
    width: 50%;
    margin: 1.5rem 2.2rem 0.5rem 1rem;
}

.person-card .person-photo .field--name-image img {
    /* height: 300px;
    object-fit: none; */
    min-height: 300px;
    object-fit: contain;
}


.person-card .upper-part>.profile-container {
    width: 50%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4rem;
}

.person-card .upper-part>div>img {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.person-card .profile {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 4rem;
}

.person-card .icon-title {
    display: flex;
    align-items: center;
    margin: 0.6rem 0;
}

.person-card .icon-title img {
    width: 2.8rem;
    height: 2.8rem;
    margin-right: 0.5rem;
}

.person-card .icon-title span {
    color: white;
    font-size: 1.125rem;
}

.person-card .lower-part {
    padding: 1rem;
    padding-bottom: 3rem;
}

.person-card .name {
    font-size: 1.5rem;
    font-weight: 500;
    color: #a7165e;
}

.person-card .study {
    margin-top: 0.2rem;
    color: #808080;
}

.person-card .position {
    font-weight: 500;
    color: #808080;
    margin: 2rem 0;
}

.person-card .interest {
    font-size: 1.125rem;
}

.person-card .interest .title {
    font-weight: 500;
}



@media only screen and (max-width: 1352px) {}

@media only screen and (max-width: 1200px) {

    .people-list {
        gap: 3rem 3.5rem;
    }


}

@media only screen and (max-width: 992px) {
    .people-list {
        gap: 3rem 3rem;
    }

}



@media only screen and (max-width: 868px) {
    .people-list {
        grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
        gap: 3rem 2rem;
    }

    .person-card .person-photo {
        width: 48%;
        margin-right: 1.5rem;
    }
}



@media only screen and (max-width: 767px) {

    .people-list {
        display: grid;
        grid-template-columns: unset;
        gap: 3rem 3rem;
        padding-top: 0.5rem;
    }



}

/********************************ALPHA FILTER BLOCK********************************/



.letter-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* margin-top: 2.5rem; */
    margin-top: 0;
    line-height: 2rem;
}

.letter-list>a.letter-item {
    font-size: 1.4rem;
    color: #8d8d8d;
    cursor: pointer;
}

.letter-list>a.letter-item:not(.active):hover {
    color: #a7165e;
}

.letter-list>a.letter-item.active {
    font-weight: bold;
    color: #a7165e;
}

.letter-list>a.letter-item:not(:first-child) {
    margin-left: 0.75rem;
}

.letter-list>a.letter-item:not(:last-child)::after {
    content: "|";
    font-weight: 400;
    color: #676767;
    margin-left: 0.75rem;
}


@media only screen and (max-width: 767px) {


    .letter-list {
        /* margin-top: 2rem; */
        margin-top: 0;
        margin-bottom: 2rem;
    }





}





/********************************PEOPLE CATEGORY BLOCK********************************/


/* navigation */





.staff-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 2rem 3rem;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.staff-types>* {
    background-color: #e9e9e9;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #333333;
    text-align: center;
    border-radius: 4px;
}

.staff-types>*:not(.active):hover {
    color: #a7165e;
}

.staff-types>*.active {
    background-color: #a7165e;
    color: white;
}




.desktop-nav-filter {
    display: block;
    padding: 0 20px;
    padding-top: 2.5rem;
}

.desktop-nav-filter .navigation .t-navbar-nav.t-menu-level-0.clearfix::after {
    content: none;
}



.mobile-nav-filter {
    display: none;
}





@media only screen and (max-width: 767px) {
    .staff-types {
        display: none;
    }



    .desktop-nav-filter {
        display: none;
    }

    .mobile-nav-filter {
        display: flex;
    }






}

/********************************FILTER-CONTAINER BLOCK********************************/


.desktop-nav-filter .navigation .t-menu-level-0 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 2rem 3rem;
    justify-content: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}


.desktop-nav-filter .navigation .t-menu-level-0 .nav-item {
    background-color: #e9e9e9;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #333333;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}

.desktop-nav-filter .navigation .t-menu-level-0 .nav-item:hover span {
    color: #a7165e;
}

.desktop-nav-filter .navigation .t-menu-level-0 .nav-item span {
    /* background-color: #e9e9e9;
    color: #a7165e; */
    color: #333333;

}

.desktop-nav-filter .navigation .t-menu-level-0 .nav-item.t-active {
    background-color: #a7165e;
    color: white;
}

.desktop-nav-filter .navigation .t-menu-level-0 .nav-item.t-active span {
    color: white;
}

.desktop-nav-filter .navigation .t-menu-level-0 .nav-item.t-active:hover span {
    color: white;
}





.mobile-nav-filter {
    position: relative;
    /* display: flex; */
    justify-content: flex-end;
    /* margin-top: -2rem; */
    margin-top: -1.5rem;
    /* margin-bottom: 1rem; */
    margin-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
}


.mobile-nav-filter .filter {
    display: flex;
    align-items: center;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #333333;
    cursor: pointer;

    padding-bottom: 0;
    border-bottom: none;
}

.mobile-nav-filter .filter img.icon {
    width: auto;
    height: auto;
}


/* .filter .value {
    min-width: 8rem;
    font-size: 1.375rem;
    font-weight: 500;
    padding: 0 0.5rem;
} */

.mobile-nav-filter .navigation {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 20px;
    z-index: 1;
    width: 20rem;
    padding: 1.5rem 1.2rem;
    box-shadow: 2px 2px 8px #aaaaaa;
    background-color: white;
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms;
}


.mobile-nav-filter .navigation.active {
    visibility: visible;
    opacity: 1;
}

.mobile-nav-filter .navigation .t-navbar-nav {
    display: flex;
    flex-direction: column;
}

.mobile-nav-filter .navigation .t-navbar-nav .nav-item {
    background-color: #e9e9e9;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #333333;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}

.mobile-nav-filter .navigation .t-navbar-nav .nav-item span {
    color: #333333;
}

.mobile-nav-filter .navigation .t-navbar-nav .nav-item:not(:first-child) {
    margin-top: 1.2rem;
}

.mobile-nav-filter .navigation .t-navbar-nav .nav-item:not(.t-active):hover {
    color: #a7165e;
}

.mobile-nav-filter .navigation .t-navbar-nav .nav-item:not(.t-active):hover span {
    color: #a7165e;
}

.mobile-nav-filter .navigation .t-navbar-nav .nav-item.t-active {
    background-color: #a7165e;
    color: white;
}

.mobile-nav-filter .navigation .t-navbar-nav .nav-item.t-active span {
    color: white;
}





/********************************NEWS BLOCK********************************/





.achievement-items {
    padding-bottom: 2rem;
}

.achievement-item {
    display: flex;
    align-items: flex-start;
    padding: 3.2rem 0 3.8rem;
    border-bottom: 1px solid #cecece;
}

.achievement-item:first-child {
    padding-top: 2rem;
}

.achievement-item .news-image {
    /* padding-top: 2rem; */
    flex: 26rem 0;
}


.achievement-item img {
    max-width: 26rem;
}

.achievement-item .news-content {
    padding-left: 2rem;
    flex: calc(100% - 26rem) 0;
    max-width: calc(100% - 26rem);
}

.achievement-item .news-content p a {
    word-break: break-all;
}


.achievement-item .news-date {
    font-size: 1rem;
    font-weight: 500;
    color: #808080;
}

.achievement-item .news-title {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.2rem;
    margin: 0 0 1rem;

}




@media only screen and (max-width: 1352px) {
    .achievement-item img {
        max-width: 20rem;
    }

    .achievement-item .news-image {
        flex: 20rem 0;
    }

    .achievement-item .news-content {
        flex: calc(100% - 20rem) 0;
        max-width: calc(100% - 20rem);
    }

}

@media only screen and (max-width: 1200px) {

    .achievement-item img {
        max-width: 16rem;
    }

    .achievement-item .news-image {
        flex: 16rem 0;
    }

    .achievement-item .news-content {
        flex: calc(100% - 16rem) 0;
        max-width: calc(100% - 16rem);
    }


}



@media only screen and (max-width: 767px) {


    .achievement-items {
        padding-bottom: 0;
    }

    .achievement-item {
        flex-direction: column;
        align-items: center;
        padding-bottom: 2.5rem;
    }

    .achievement-item:first-child {
        padding-top: 0.5rem;
    }

    .achievement-item img {
        max-width: unset;
        width: 100%;
    }

    .achievement-item .news-content {
        padding-top: 1rem;
        padding-left: 0;
        max-width: 100%;
    }

    .achievement-item .news-image {
        flex: 1;
    }

    .achievement-item .news-content {
        flex: 1;
    }


}




/********************************VIDEO INDEX BLOCK********************************/

.video-preview {

    background-image: url(/cc/sites/g/files/asqsls8351/themes/site/cityu_subtheme_2019/images/news-previews/bg.png);
    padding: 1.875rem 0;
}

.video-preview-container {
    position: relative;
    /* display: flex;
    align-items: flex-start; */
    margin: 0 auto;
    margin-bottom: 4rem;
    max-width: 1440px;
    padding: 0 20px;
}

.video-preview-container .container {
    width: auto;
}

.video-preview .swiper-container {
    margin: 3.125rem 0 0 2rem;
    max-height: 26rem;
}

.video-preview-item {
    display: flex;
    flex-direction: column;
    position: relative;
}

.video-preview-item .title {
    display: flex;
    padding-right: 1.2rem;
}

.video-preview-item .title .main {
    flex: 1;
    background-color: #a7165e;
    /* padding: 0.5rem 1rem 1rem 0.625rem; */
    padding: 0.5rem 1rem 0.5rem 0.625rem;
    /* padding: 0.5rem 0 0.5rem 0.625rem; */
    font-size: 1.25rem;
    font-weight: 500;
    color: white;
    clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
}

.video-preview-item .title .end {
    display: none;
    margin-left: -1px;
    width: 2rem;
    background-image: linear-gradient(to top right,
            #a7165e,
            #a7165e 50%,
            transparent 50%,
            transparent);
}

.video-preview-item .field--name-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}


@media only screen and (max-width: 1200px) {

    .video-preview-container {
        display: block;
        margin-bottom: 0;
        /* margin-bottom: -3rem; */
    }

    .video-preview .swiper-container {
        margin-left: 0;
    }


}

@media only screen and (max-width: 992px) {
    .video-preview-container {
        margin-bottom: 0rem;
    }

}

@media only screen and (max-width: 767px) {

    .video-preview-container {
        padding: 0;
        margin-bottom: 4rem;
    }

    .video-preview .swiper-container {
        max-height: 28.5rem;

        margin-bottom: 6rem;
    }




    .video-preview .swiper-container.mobile .video-preview-item .field--name-image img {
        width: 100%;
        height: 280px;
        object-fit: cover;
    }

}

@media only screen and (max-width: 576px) {


    .video-preview-container {
        margin-bottom: 2rem;
    }
}




/********************************HOMEPAGE-BANNER BLOCK********************************/



.homepage-banner {
    position: relative;
    height: 45rem;
}


.homepage-banner .swiper-container {

    height: 100%;

}

.index-slider-bg-cover {
    height: 100%;
}

.index-slider-bg-cover .container {
    height: 100%;
}


.homepage-banner .swiper-slide .banner-title {
    display: flex;
    align-items: center;
    height: 100%;
    color: white;
    /* font-size: 5.625rem; */
    font-size: 4rem;
    font-weight: bold;
    text-shadow: 4px 4px 5px #666666;
    line-height: 1.3;
}


.swiper-pagination-bullets {
    width: 100%;
    top: 2.5rem;
    bottom: unset;
    left: 50%;
    transform: translateX(-50%);
    text-align: right;
    max-width: 1440px;
    padding: 0 20px;
}

.swiper-pagination-bullet {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.4rem !important;
    text-align: center;
    font-size: 1.2rem;
    color: white;
    border: 2px solid white;
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}

.swiper-pagination-bullet-active {
    color: #a7165e;
    background: white;
}


@media only screen and (max-width: 1200px) {
    .homepage-banner .swiper-slide .banner-title {
        /* font-size: 5rem; */
        font-size: 3.5rem;
    }


}

@media only screen and (max-width: 992px) {
    .homepage-banner .swiper-slide .banner-title {
        /* font-size: 4rem; */
        font-size: 3rem;
    }
}

@media only screen and (max-width: 767px) {

    .homepage-banner {
        height: 21rem;
        margin-bottom: 6rem;
    }

    .homepage-banner .swiper-slide .banner-title {
        /* font-size: 2.9rem; */
        font-size: 2.5rem;
    }

    .swiper-pagination-bullets {
        top: unset;
        bottom: -3rem;
        text-align: center;
        padding: 0;
    }

    .swiper-pagination-bullet {
        width: 1.4rem;
        height: 1.4rem;
        margin: 0 1rem !important;
        line-height: 1.4rem;
        font-size: 0;
        color: white;
        background: white;
        border: 2px solid #a7165e;
    }

    .swiper-pagination-bullet-active {
        color: #a7165e;
        background: #a7165e;
    }
}

@media only screen and (max-width: 700px) {
    .homepage-banner .swiper-slide .banner-title {
        font-size: 2rem;
    }
}

@media only screen and (max-width: 480px) {
    .homepage-banner .swiper-slide .banner-title {
        font-size: 1.7rem;
    }
}

@media only screen and (max-width: 380px) {
    .homepage-banner .swiper-slide .banner-title {
        font-size: 1.5rem;
        line-height: 1.4;
    }
}

/********************************HOMEPAGE-ITEMS BLOCK********************************/







.homepage-items>.field {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
    gap: 3rem;
    margin: 6.25rem 0;
}

.homepage-item {
    display: flex;
    flex-direction: column;
    transition: all 500ms;
    cursor: pointer;
}

.homepage-item:hover {
    box-shadow: 6px 6px 20px #aaaaaa;
}

.homepage-item.shadow:hover {
    box-shadow: 6px 6px 20px #aaaaaa !important;
}

.homepage-item-content {
    position: relative;
}

.homepage-item-content img {
    width: 100%;
    object-fit: fill;
}

.homepage-item-icon {
    align-self: flex-end;
    width: 10rem;
    height: 10rem;
    margin: 1rem 1rem 0 0;
}

.homepage-item-icon img {
    width: 100%;
    height: auto;
    display: flex;
    margin: 0 auto;
}


.homepage-item-content p {
    position: absolute;
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
    padding: 0 3.25rem 0 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: white;
    margin: 1em 0;
}



@media only screen and (max-width: 767px) {


    .homepage-items>.field {
        grid-template-columns: repeat(1, 1fr);
    }

    .homepage-item {
        flex-direction: row;
    }

    .homepage-item-icon {
        order: 2;
        align-self: center;
        margin-top: 0;
        margin-left: auto;
        margin-right: 1.5rem;
        width: 7.5rem;
        height: 7.5rem;
    }

    .homepage-item-content {
        order: 1;
    }

    .homepage-item-content p {
        padding-right: 3.5rem;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }





}


/********************************RANKING BLOCK********************************/



.ranking {
    padding: 2.5rem 0;
}

.ranking-container>.field {
    margin: 4rem 0;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(27rem, 1fr));
}

.ranking-container>.field article {
    height: 27.5rem;
    /* height: 100%; */
    margin: 0 0.6rem 2rem;
    text-align: center;
    padding: 2.75rem 1.5rem;
}

.ranking-container>.field article.blue {
    background-color: #15264a;
}
.ranking-container>.field article.blue1 {
    background-color: #35466a;
}

.ranking-container>.field article.purple {
    background-color: #a7165e;
}
.ranking-container>.field article.purple1 {
    background-color: #c7367e;
}

.ranking-container>.field article.blue *,
.ranking-container>.field article.purple *,
.ranking-container>.field article.blue1 *,
.ranking-container>.field article.purple1 * {
    color: white;
}

.ranking-container>.field article.white {
    background-color: #e9e9e9;
}

.ranking-container>.field article.offset {
    margin-top: 2.5rem;
}

.ranking-container>.field article p {
    margin: 0;
}

.ranking-container>.field article .ranking-top {
    font-size: 2rem;
    line-height: 1.35;
}

.ranking-container>.field article .ranking-main {
    font-size: 4.72rem;
    margin: 3.2rem 0 1rem;
    line-height: 1.3;
}

.ranking-container>.field article .ranking-main sup {
    font-size: 2.5rem;
    top: -2rem;
}

.ranking-container>.field article .ranking-main.big {
    font-size: 8.125rem;
    margin: 1.2rem 0 -0.2rem;
}

.ranking-container>.field article .ranking-main.big sup {
    font-size: 4rem;
    top: -3rem;
}

.ranking-container>.field article .ranking-main.bold {
    font-weight: bold;
}

.ranking-container>.field article .ranking-bottom {
    font-size: 1.25rem;
    font-weight: 500;
}



@media only screen and (max-width: 1335px) {
    .ranking-container>.field article {
        /* height: unset; */
        height: 100%;
    }

    .ranking-container>.field article.offset {
        margin-top: 0;
    }


    .ranking-container>.field {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: unset;
    }

    .ranking-container>.field>.field__item {
        height: auto;
        flex: 50% 0;
        margin-bottom: 2rem;
    }

    .ranking-container>.field article {}

}

@media only screen and (max-width: 795px) {

    .ranking-container>.field>.field__item {
        /* height: auto; */
        flex: 100% 0;
        /* margin-bottom: 1em; */
    }

    .ranking-container>.field article {
        height: unset;
    }

    .ranking-container>.field>.field__item {
        margin-bottom: 0;
    }


}



@media only screen and (max-width: 430px) {

    .ranking-container>.field>.field__item {
        /* height: auto; */
        flex: 100% 0;
        /* margin-bottom: 1em; */
    }


    .ranking-container>.field {
        /* grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); */
    }


}



/********************************EVENT-INDEX BLOCK********************************/



.event-preview {
    padding: 1.875rem 0;
}

.event-preview-main {
    display: flex;
}

.event-preview-list {
    /* flex: 1; */
    flex: 50% 0;
    min-width: 50%;
}

.event-preview-item {
    display: flex;
}

.event-preview-img {
    flex: 50% 0;
}

.event-preview-arrow {
    opacity: 0;
    /* width: 38px; */
    width: auto;
}

img.event-preview-arrow {
    width: auto;
}

.event-preview-item.active .event-preview-arrow {
    opacity: 1;
}

.event-preview-content {
    flex: 1;
    font-size: 1.25rem;
    padding: 1.975rem 0.6rem;
    border-bottom: 1px solid #e9e9e9;
    color: #333333;
}

.event-preview-content:first-child {
    border-top: 1px solid #e9e9e9;
}

.event-preview-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: #9b9b9b;
    margin-top: 1rem;
}

.event-preview-item.active .event-preview-title {
    color: #a7165e;
    font-weight: bold;
}

.event-preview-img {
    display: flex;
    /* align-items: center; */
    align-items: baseline;
    max-height: 624px;
    margin-left: 1.5rem;
}

.event-preview-img>img {
    /* width: 100%; */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#event-btn-container {
    margin-top: 2.6rem;
}

.event-btn-nav {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
}

.event-btn-nav>button {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border-radius: 50%;
    border: 2px solid #a7165e;
    width: 3rem;
    height: 3rem;
    padding: 0.9rem;
    margin-right: 1rem;
    cursor: pointer;
    outline: none;
}

.event-btn-nav>button>img {
    width: 100%;
}

#prev-event-page img {
    transform: rotateZ(-270deg);
}

#next-event-page img {
    transform: rotateZ(90deg);
}

.news-preview-swiper.desktop .swiper-pagination.desktop.swiper-pagination-bullets {
    top: auto;
    position: relative;
    margin-top: 30px;
    text-align: center;
}

.news-preview-swiper.desktop .swiper-pagination.desktop.swiper-pagination-bullets .swiper-pagination-bullet {
    width: 1.4rem;
    height: 1.4rem;
    margin: 0 1rem !important;
    line-height: 1.4rem;
    font-size: 0;
    color: white;
    background: white;
    border: 2px solid #a7165e;
}

.news-preview-swiper.desktop .swiper-pagination.desktop.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
    color: #a7165e;
    background: #a7165e;
}


@media only screen and (max-width: 767px) {
    .event-preview-list {
        flex: 1;
        /* flex: 50% 0; */
        min-width: 50%;
    }

    .event-preview-img {
        display: none;
    }

    .event-preview-title {
        color: #a7165e;
    }

    #event-btn-container {
        justify-content: flex-end;
    }

}


/********************************INDEX-NEWS BLOCK********************************/


.news-preview {
    background-image: url("/cc/sites/g/files/asqsls8351/themes/site/cityu_subtheme_2019/images/news-previews/bg.png");
    padding: 1.875rem 0;
}

.news-preview-swiper {
    position: relative;
    margin: 0 auto;
    max-width: 1440px;
    /* height: 42.5rem; */
    height: 100%;
    padding: 0 3.3rem;
}


.swiper-slide .overlay {
    display: none;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: background 500ms;
}

.news-preview-item {
    position: relative;
    background-color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 6px 6px 12px #cccccc;
}

.news-preview-item .field--name-image img {
    width: 100%;
    /* height: 19.3rem; */
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.news-preview-item>p {
    height: 11rem;
    margin: 1.56rem 1.56rem 0.3rem 1.56rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2.2rem;
}

.news-preview-item>.bottom-container {
    display: flex;
    justify-content: space-between;
}

.news-preview-item>.bottom-container>* {
    flex: 1;
    max-width: 220px;
}

.news-preview-item .date-container {
    position: relative;
}

.news-preview-item .date-container img {
    width: 100%;
    object-fit: fill;
}

.news-preview-item .date-container p {
    position: absolute;
    left: 1rem;
    bottom: 0.625rem;
    color: white;
    font-weight: 500;
}

.news-preview-item .details-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2rem;
}


.news-preview-swiper .swiper-button-prev,
.news-preview-swiper .swiper-button-next {
    transform: translateY(-50%);
    /* width: calc(var(--swiper-navigation-size) / 44 * 20); */
    width: 45px;
    height: 100px;

    background-repeat: no-repeat;
    background-position: center;
}




.news-preview-swiper .swiper-button-prev {
    left: -18px;
}

.news-preview-swiper .swiper-button-next {
    right: -18px;
}




@media only screen and (max-width: 1520px) {
    .news-preview-swiper {
        padding: 0 5.4rem;
    }

    .news-preview-swiper .swiper-button-prev {
        left: 20px;
    }

    .news-preview-swiper .swiper-button-next {
        right: 20px;
    }
}


@media only screen and (max-width: 879px) {


    .news-preview-swiper .swiper-button-prev,
    .news-preview-swiper .swiper-button-next {
        display: none;
    }
}


@media only screen and (max-width: 767px) {




    .news-preview-swiper {
        position: relative;
        padding: 0;
        margin-bottom: 6rem;
        /* height: 48.5rem; */
        height: 100%;
    }

    .news-preview-swiper.mobile {
        margin-top: 3rem;
    }


    .swiper-slide:not(.swiper-slide-active) .overlay {
        display: block;
        background-color: rgba(0, 0, 0, 0.4);
    }

    .news-preview-item {
        box-shadow: 0 4px 8px #aaaaaa;
    }

    .news-preview-item>.bottom-container>* {
        max-width: 180px;
    }

    .news-preview-item .field--name-image img {
        /* height: 26rem; */
    }

    /* .news-preview-item>img {
      
    } */

    .news-preview-item>p {
        margin-top: 1.8rem;
    }

}


@media only screen and (max-width: 576px) {

    .news-preview-swiper {
        /* height: 40rem; */
        height: 100%;
    }

    .news-preview-item .field--name-image img {
        /* height: 16.5rem; */
    }
}

/********************************FILTER-CONTAINER BLOCK********************************/



.year-filter-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}



.year-filter-container .filter {
    display: flex;
    align-items: center;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #333333;
    cursor: pointer;
}

.year-filter-container .filter .value {
    min-width: 8rem;
    font-size: 1.375rem;
    font-weight: 500;
    padding: 0 0.5rem;
}

.year-filter-container .filter-overlay {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    z-index: 1;
    width: 20rem;
    padding: 1.5rem 1.2rem;
    box-shadow: 2px 2px 8px #aaaaaa;
    background-color: white;
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms;
}

.year-filter-container .filter-overlay.active {
    visibility: visible;
    opacity: 1;
}

.year-filter-container .filter-overlay .dropdown {
    display: flex;
    flex-direction: column;
}

.year-filter-container .filter-overlay .dropdown * {
    background-color: #e9e9e9;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #333333;
    text-align: center;
    border-radius: 4px;
}

.year-filter-container .filter-overlay .dropdown *:not(:first-child) {
    margin-top: 1.2rem;
}

.year-filter-container .filter-overlay .dropdown *:not(.active):hover {
    color: #a7165e;
}

.year-filter-container .filter-overlay .dropdown *.active {
    background-color: #a7165e;
    color: white;
}








@media only screen and (max-width: 767px) {
    .year-filter-container {
        margin-top: -4rem;
    }

    .year-filter-container .filter {
        padding-bottom: 0;
        border-bottom: none;
    }

    .year-filter-container .filter .value {
        display: none;
    }

    .year-filter-container .filter .arrow {
        display: none;
    }

}



/********************************accordion BLOCK********************************/

.field--name-field-cityu-accordion-items {
    background: transparent;
}



.field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item {
    box-shadow: 2px 2px 6px #cccccc;
    margin-bottom: 0.6rem;
    padding: 0;
    border-bottom: none;
}



.field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item>.field--name-field-cityu-title {
    position: relative;
    background-color: #f7f7f7;
    padding: 1.5rem 2rem;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
}

.field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item.expended .field--name-field-cityu-title {
    box-shadow: 0 2px 4px #dddddd;
}

.field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item .field--name-field-cityu-title:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    background-image: url(/cc/sites/g/files/asqsls8351/themes/site/cityu_subtheme_2019/images/accordion_close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

.field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item.expended .field--name-field-cityu-title:after {
    height: 2.5px;
    background-image: url(/cc/sites/g/files/asqsls8351/themes/site/cityu_subtheme_2019/images/accordion_open.svg);

}




.field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item>h2 .open-plus {
    /* width: 2.2rem;
    height: 2.2rem; */
    display: none;
}

.field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item>h2 .open-plus::after {
    content: none;
}

.field--name-field-cityu-accordion-items .field--name-field-cityu-content {
    display: none;
    padding: 1.5rem 4rem 1.5rem 2rem;
    /* padding: 1.4rem 4rem 3.2rem; */
    background: #fff;
    font-size: 1.1875rem;
    line-height: 1.8rem;
}

.field--name-field-cityu-accordion-items .expended .field--name-field-cityu-content {
    display: block;
}

@media only screen and (max-width: 992px) {
    .field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item>.field--name-field-cityu-title {
        padding: 1.5rem 4rem 1.5rem 2rem;
    }
}

@media only screen and (max-width: 767px) {

    .field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item>.field--name-field-cityu-title {
        font-size: 1.4rem;
        font-weight: 500;
    }

    /* .field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item>h2 .open-plus::after {
        right: 2rem;
        width: 1.8rem;
        height: 1.8rem;
    } */

    .field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item .field--name-field-cityu-title:after {
        right: 2rem;
        width: 1.8rem;
        height: 1.8rem;
    }

    .field--name-field-cityu-accordion-items .paragraph--type--cityu-accordion-item.expended .field--name-field-cityu-title:after {
        height: 2.5px;
    }

    .field--name-field-cityu-accordion-items .expended .field--name-field-cityu-content {
        padding: 1rem 2rem 2.6rem;
    }

}


/********************************accordion BLOCK********************************/




/********************************Normalpage-Img-Slider BLOCK********************************/





.normalpage-img-container {
    width: 100%;
    margin-bottom: 2.5rem;
    padding: 2.4rem 5.4rem 2.4rem;
    margin: 0 auto;
    position: relative;
}





.normalpage-img-container .swiper-button-prev,
.normalpage-img-container .swiper-button-next {
    width: 3.5rem;
    height: 3rem;
    margin-top: 0;
}


.normalpage-img-container {
    max-width: 600px;
}

/* .normalpage-img-container .swiper-container{
    max-width: 450px;
} */




.normalpage-img-container .image-slider-image img {
    width: 100%;
}


@media only screen and (max-width: 767px) {

    .normalpage-img-container {
        max-width: none;
    }

}

/********************************Final-Year-Project-Showcase BLOCK********************************/



.view-id-bsc_cs_final_yrpj h3:not(.tertiary-title) {
    display: block;
    padding-top: 0;
    padding-bottom: 8px;
    margin-bottom: 32px;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: normal;
    color: #bf165e;
    border-bottom: 1px solid #bf165e;
}


.final-yrpj .tertiary-title {

    margin-bottom: 8px;
    font-size: 17.5px;
    line-height: 38px;
    font-weight: 900;
    letter-spacing: -0.13px;
    color: #2E2E2E;

}


.bsc-cs-final-yrpj-item+.bsc-cs-final-yrpj-item {
    /* margin-top: 0;
    margin-bottom: 32px; */
    margin-top: 32px;
    border-top: 1px solid #bf165e;
    padding-top: 32px;
}


@media (min-width: 760px) {
    .final-yrpj h3:not(.tertiary-title) {
        padding-bottom: 16px;
    }

    .final-yrpj .tertiary-title {
        display: block;
        margin-bottom: 16px;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: normal;
    }

    .final-yrpj p {
        font-size: 17px;
        line-height: 30px;
    }

}




/* 

.filter-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.filter {
    display: flex;
    align-items: center;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #333333;
    cursor: pointer;
}

.filter .value {
    min-width: 8rem;
    font-size: 1.375rem;
    font-weight: 500;
    padding: 0 0.5rem;
}

.filter-overlay {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    z-index: 1;
    width: 20rem;
    padding: 1.5rem 1.2rem;
    box-shadow: 2px 2px 8px #aaaaaa;
    background-color: white;
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms;
}

.filter-overlay.active {
    visibility: visible;
    opacity: 1;
}

.filter-overlay .dropdown {
    display: flex;
    flex-direction: column;
}

.filter-overlay .dropdown * {
    background-color: #e9e9e9;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #333333;
    text-align: center;
    border-radius: 4px;
}

.filter-overlay .dropdown *:not(:first-child) {
    margin-top: 1.2rem;
}

.filter-overlay .dropdown *:not(.active):hover {
    color: #a7165e;
}

.filter-overlay .dropdown *.active {
    background-color: #a7165e;
    color: white;
}






@media only screen and (max-width: 767px) {

    .filter-container {
        margin-top: -4rem;
    }

    .filter {
        padding-bottom: 0;
        border-bottom: none;
    }

    .filter .value {
        display: none;
    }

    .filter .arrow {
        display: none;
    }

} */



/********************************ADDTHIS BLOCK********************************/

/* .addthis_toolbox a.at300b,
.addthis_toolbox a.at300m {
    padding: .1em 0.5em;
    background: #fff;
    border-radius: 5px;
    margin-left: 5em;
    transform: scale(2);

}


.addthis_toolbox a.at300b:first-child,
.addthis_toolbox a.at300m:first-child {
    margin-left: 0;
}


.at-follow-tbx-element .at300b:focus,
.at-follow-tbx-element .at300b:hover,
.at-follow-tbx-element .at300m:focus,
.at-follow-tbx-element .at300m:hover {
    transform: scale(2) translateY(-4px) !important;
} */

/* @media (max-width: 999px) {

    .addthis_toolbox a.at300b,
    .addthis_toolbox a.at300m {
        padding: .1em 0.5em;
        background: #fff;
        border-radius: 5px;
        margin-left: 2em;
        transform: scale(1.5);
    }

    .at-follow-tbx-element .at300b:focus,
    .at-follow-tbx-element .at300b:hover,
    .at-follow-tbx-element .at300m:focus,
    .at-follow-tbx-element .at300m:hover {
        transform: scale(1.5) translateY(-4px) !important;
    }
}
 */