@import url('style.css');
body {
    font-family: 'Roboto', sans-serif;
    position: relative;
}

    /* same as .cpce_cb a css  */
    body a.cpce_cb_a {
        position: relative;
    }
    body a.cpce_cb_a::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0;
        bottom: 0;
        background-color: #A02337;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .4s cubic-bezier(.215,.61,.355,1);
        will-change: transform;
    }

    body a.cpce_cb_a:hover {
        color: #A02337;
        text-decoration: none;
    }

    body a.cpce_cb_a:hover::after {
        transform: scaleX(1);
    }
    /* END same as .cpce_cb a css  */
/* Custom Class for Edit Mode */
:root:root:root:root:root .sf-backend-wrp .form-group.required .control-label:after {
    content: "*";
    color: red;
    padding-left: 3px;
}

:root:root:root:root:root .sf-backend-wrp .alert-danger span {
    white-space: pre-wrap !important;
}

:root:root:root:root:root .sf-backend-wrp .form-control.is-invalid,
:root:root:root:root:root .sf-backend-wrp .was-validated .form-control:invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.sfPageContainer .zeDockZoneEmpty, .zeContentMode .sfPageContainer .zeDockZoneEmpty {
    width: 100%;
}

.container.g-0 .row,
.container.g-0 [class*='col-'],
.container-fluid.g-0 .row,
.container-fluid.g-0 [class*='col-'] {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

input:focus-visible {
    outline-color: #A02337;
}

header {
    position: relative;
    overflow: visible;
    z-index: 500;
    width: 100%;
    top: 0;
    transition: 0.2s all;
    background-color: transparent;
}

.header-tri {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 100vw 0 0;
    border-color: #fff transparent transparent transparent;
    position: relative;
    top: 0;
    display: block;
    /* float: left;
     */
    transition: 0.5s all;
    display: none;
}


.menu__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background: #fff;
    transform: skewY(-2.1deg);
    transform-origin: top left;
}

.menu-bottom-div {
    width: 100%;
    height: 50px;
    position: absolute;
    display: block;
    background: #fff;
    bottom: 0;
}

nav.top-nav {
    display: block;
    height: 90%;
    width: 30%;
    position: absolute;
    z-index: 100;
    right: 8px;
    top: 0;
    z-index: 1000;
}

    nav.top-nav ul {
        margin: 0;
        padding: 0;
        display: flex;
        width: 100%;
        height: 100%;
        text-align: center;
        justify-content: end;
    }

        nav.top-nav ul li {
            /*list-style-type: none;*/
            display: flex;
            align-items: center;
            position: relative;
            width: 25%;
        }

            nav.top-nav ul li a {
                color: #fff;
                text-decoration: none;
                top: 0;
                left: 0;
                width: 80%;
                padding: 0px;
                transition: all 0.2s;
                white-space: nowrap;
                transform: scale(1.05);
                font-size: 1vw;
            }

                nav.top-nav ul li a img {
                    width: 30%;
                }

            nav.top-nav ul li:hover a {
                width: 85%;
                font-size: 1.2vw;
            }

.fontSizeDropdown {
    width: 128px;
}

.toolDropdown {
    display: none;
    overflow: hidden;
    position: absolute;
    left: -10%;
    top: 80%;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 1px 1px 3px 1px rgba(0,0,0,.25);
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,.25);
    z-index: 1;
}

    .toolDropdown > div {
        display: flex;
        padding: 10px;
    }

    .toolDropdown .toolIcons a, .toolDropdown .toolIcons .btn {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px;
        border-radius: 100%;
        position: relative !important;
        display: inline-block;
        margin: 0 2px;
        background-repeat: no-repeat;
        background-color: #e3e3e3;
        background-size: 100% auto !important;
        color: #777 !important;
        text-align: center;
        text-decoration: none !important;
        padding: 0;
    }

    .no-touch .toolDropdown a:hover, .toolDropdown a.active, .toolDropdown .btn.active {
        background-color: #A02337;
        color: #fff !important;
        -webkit-transition: all 300ms ease;
        transition: all 300ms ease;
    }

    .toolDropdown a::after {
        display: none;
    }

.fontSizeDropdown a.sizeS {
    font-size: 13px !important;
}

.fontSizeDropdown a.sizeM {
    font-size: 18px !important;
}

.fontSizeDropdown a.sizeL {
    font-size: 24px !important;
}

.large_size {
    font-size: 140%;
}

.middle_size {
    font-size: 120%;
}

.small_size {
    font-size: 100%;
}

.header-logos-table-div {
    display: block;
    width: 100%;
    height: 80px;
    border-top: solid 10px #fff;
    position: relative;
}

.header-logos-table-div-bg {
    display: block;
    width: 100%;
    height: 6vw;
    position: absolute;
    top: 0px;
}

.header-logos-table-div-bg-div {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.header-logos-shadow {
    position: relative;
    width: 100%;
    height: 90%;
    top: 0px;
    background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
}

.header-logos {
    position: absolute;
    top: 0px;
    z-index: 100;
    width: 65%;
    height: 100%;
    background: #fff;
    border-radius: 0 0 32px 0;
    max-width: 1350px;
    max-height: 125px;
}

    .header-logos:before {
        content: '';
        width: 64px;
        height: 64px;
        position: absolute;
        left: 0;
        bottom: -64px;
        z-index: -1;
        border-radius: 50%;
        box-shadow: -32px -32px 0 0 #fff;
        display: block;
        background: transparent;
    }

    .header-logos .header-logos-border-right {
        width: 64px;
        height: 64px;
        position: absolute;
        top: 0;
        right: -64px;
        overflow: hidden;
    }

        .header-logos .header-logos-border-right:after {
            content: '';
            width: 64px;
            height: 64px;
            position: absolute;
            border-radius: 50%;
            box-shadow: -32px -32px 0 0 #fff;
            display: block;
            background: transparent;
        }

.header-logos-div {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 90%;
    align-items: start;
    justify-content: start;
    padding-left: 16px;
}

.header-logos-div-left {
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
}

.header-logos-div-right {
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
}

.header-logo-link {
    /*padding-right: 49px;*/
    height:100%;
}

.spaceAsLogoSize {
    display: block;
    height: 80%;
    aspect-ratio: 1/1;
}

.spaceAsLogoSize2 {
    display: none;
}

.header-logos img {
    height: 98%;
}

.iv-logo1 {
        padding-right: 10px;
    }

.logo-for-responsive{
    display:block;
}

.header-logos-div-left-twoRaw{
    display:none!important;
}

@media only screen and (max-width: 992px) {
    .header-logos-table-div {
        border: none;
    }

    .header-logos-table-div-bg {
        height: 7vw;
    }

    .header-logos-table-div {
        height: 7vw;
    }

    .header-logos-border-right {
        display: none;
    }

    .header-logos-div {
        justify-content: center;
        height: 100%;
        align-items: start;
    }

    .header-logos-div-left {
        flex-wrap: nowrap;
        justify-content: start;
        align-content: center;
    }

    .header-logos-div-right {
        justify-content: center;
        align-content: center;
    }

    .header-logos {
        border-radius: 0px;
        width: 100%;
    }

        .header-logos:before {
            display: none;
        }

    .iv-logo1 {
        padding-right: 10px;
    }
}

@media only screen and (max-width: 576px) {
    .header-logos-div-left {
        /*width: 45%;*/
        flex-wrap: wrap;
        justify-content: start;
        align-content: start;
    }

    .header-logos-div-right {
        /*width: 55%;*/
        justify-content: space-around;
        align-content: start;
    }

    .header-logos-div-left a {
        display: flex;
        flex-wrap: nowrap;
    }

    .header-logos-div-right a {
        /*height: 50%;*/
    }

    .spaceAsLogoSize {
        /*display: none;*/
    }

    .header-logos {
        border-radius: 0px;
        width: 100%;
        height: 19vw;
    }

    .header-logos-table-div {
        height: 20vw;
    }

    .header-logos:before {
        display: none;
    }

    .header-logos-div {
        padding: 5px 15px;
        height:65%;
        justify-content:start;
        flex-wrap:wrap;
    }

    .spaceAsLogoSize2 {
        display: block;
        height: 75%;
        aspect-ratio: 1/1;
    }

    .logo-for-responsive {
        display: none!important;
    }

    .header-logos-div-left-twoRaw{
        display:block!important;
        width:100%;
    }

    .header-logos-div-left-twoRaw img{
        height:50%!important;
    }
}

.home-banner {
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .home-banner > video {
        width: 100%;
    }

    .home-banner img {
        filter: brightness(0.9);
    }

main {
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    top: -72px;
}

.banner-cover-content {
    position: absolute;
    z-index: 100;
    color: #fff;
    text-align: center;
    font-weight: bold;
    width: 80%;
}

.main-banner-wrapper {
    position: relative;
}

.main-banner {
    position: relative;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/page3-banner-blur.jpg);
    background-size: cover !important;
    background-repeat: no-repeat !important;
    height: 390px;
    background-position: center;
}

    .main-banner h1 {
        max-width: 1000px;
        margin: 1rem 0 0 0;
    }

    .main-banner img {
        filter: brightness(0.8);
    }

.ui {
    display: inline-block;
    border: 3px solid #a02337;
    padding: 0rem 6rem 0rem 1.3rem;
    margin: 0 0 0 1rem;
    color: #a02337;
    font-size: 36px;
    text-decoration: none;
    background: #fff;
}

    .ui .search-btn {
        display: block;
        width: 54px;
        height: 54px;
        background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-search-icon.png) no-repeat;
        background-size: 20px auto;
        background-position: center center;
    }

.search-ui-div {
    margin: 0 auto;
    width: 80%;
    max-width: 1150px;
    text-align: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

.search-ui ul li {
    margin: 0 1rem 0 0;
    line-height: 1;
    display: contents;

}

.search-ui ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    text-wrap: nowrap;
}

.search-ui ul {
    margin: 0;
    padding: 0;
}

.search-ui-div .white-line {
    display: inline-block;
    width: 1px;
    height: 60px;
    background: #fff;
}

.search-ui {
    margin: 1rem 0 0 0;
    font-size: 42px;
}

.search-ui-wrapper {
    position: relative;
    width: 100%;
    display: inline-block;
}

.search-ui .txt {
    display: inline-block;
}

.banner-ui {
    margin: 0 0 0 0;
    /* font-size: 60px;
     */
}

.s-banner-wrapper a {
    width: 204px;
    text-decoration: none;
    color: #fff;
    text-align: center;
}

    .s-banner-wrapper a div {
        position: absolute;
        top: 50%;
        font-weight: bold;
        display: block;
        font-size: 15px;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        line-height: 1.3;
        z-index: 100;
    }

    .s-banner-wrapper a img {
        width: 240px;
    }

.s-banner-wrapper {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    z-index: 200;
    font-size: 30px;
}

    .s-banner-wrapper .close-btn {
        display: block;
        width: 17px;
        height: 17px;
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/white-cross.png);
        background-size: 17px 17px;
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 100;
    }

.brand-red {
    color: #a02337;
    position: relative;
}

    .brand-red.course-name a {
        color: #a02337;
        font-weight: 500;
    }
/*.skew-img {
     max-width: 488px;
     position: relative;
     z-index: 200;
}
*/
.skew-img {
    /* background-color: brown;
     */
    width: 200px;
    height: 200px;
    clip-path: polygon(25% 0%,100% 0%,70% 100%, 0% 100%);
    /* position: relative;
     */
    /* left: 50%;
     */
    display: flex;
}

section {
    /*width: 95%;*/
    display: block;
    margin: 0 auto;
    line-height: 1.5;
    /*font-size: 15px;
      color: #606060;
    */
    color: #333;
    font-size: 1.125rem;
    font-weight: 300;
}

.shortcut-img-blk {
    padding: 1rem;
    display: block;
}

    .shortcut-img-blk img {
        border-radius: 10px;
    }

    .shortcut-img-blk:before {
        content: '';
        background: rgba(0, 0, 0, 0.4);
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
        position: absolute;
        border-radius: 10px;
    }

footer {
    width: 100%;
    display: block;
    margin: 0 auto;
}

    footer .menu-wrapper {
        width: 95%;
        display: block;
        margin: 0 auto;
    }

.mt-30 {
    margin-top: 30px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-90 {
    margin-top: 90px;
}

.mt-150 {
    margin-top: 150px;
}

.mt-120 {
    margin-top: 120px;
}

.mt-245 {
    margin-top: 245px;
}

.pt-120 {
    padding-top: 120px;
}

.pb-120 {
    padding-bottom: 120px;
}

.pt-245 {
    padding-top: 245px;
}

.red-skew-rect-1 {
    /*width: 0;
     height: 0;
     border-style: solid;
     border-width: 0 0 1421px 433px;
    */
    /* 0 0 150vh 470px;
    */
    /*border-color: transparent transparent #a02337 transparent;
     top: 150px;
     position: absolute;
     right: -64px;
    */
    position: absolute;
    right: -50%;
    bottom: -30%;
}

.right-red-tri {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 150vh 20vw;
    border-color: transparent transparent #a02337 transparent;
    top: 20vh;
    position: absolute;
    right: -2vw;
    /* z-index: 100;
     */
}

.left-grey-tri {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100vh 0 0 20vw;
    border-color: transparent transparent transparent #f5f5f5;
    top: 81vh;
    position: absolute;
    left: 0;
    /* z-index: 10000;
     */
    /* z-index: 10000 !important;
     */
}

.home-banner > .red-skew-rect-1 > .white-region {
    /*width: 0;
     height: 0;
     border-style: solid;
     border-width: 0 0 1020px 380px;
     border-color: transparent transparent #fff transparent;
    */
    /* bottom: 0;
     */
    /* position: absolute;
     right: -200px;
    */
    /* bottom: 0;
     */
    /*top: 464px;
    */
    width: 800px;
    height: 800px;
    background-color: #a02337;
    clip-path: polygon(25% 0%,100% 0%,70% 100%, 0% 100%);
}

.red-skew-rect-2 {
    display: block;
    width: 121%;
    height: 132vh;
    background: #a02337;
    transform: skew(-30deg, 0deg);
    position: absolute;
    top: 0;
    left: -330px;
    z-index: -100;
}

.news-and-events-left-txt {
    font-size: 15px;
    background: #a02337;
    height: 100%;
    width: 100%;
    padding: 3rem !important;
    position: absolute;
}

    .news-and-events-left-txt .view-all-btn {
        padding: 0 20px 0 3%;
        font-size: 22px;
    }

    .news-and-events-left-txt .thin-big-title {
        margin: 85px 0 0 0;
        padding: 0 0 0 3%;
        font-weight: 300;
        font-size: 35px;
    }

.news-and-events-left-content {
    display: block;
    max-width: 450px;
    padding: 0 0 0 3%;
}

.view-all-btn {
    display: inline-block;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/white-arrow.png) no-repeat;
    text-decoration: none;
    color: #fff;
    padding: 0 20px 0 0;
    /* background-position: 100% 0;
     */
    background-position: right;
    background-size: 10px;
    position: relative;
    z-index: 200;
    font-weight: 300;
}

.news-date {
    font-size: 12px;
    color: #7c7c7c;
}

.news-short-content {
    font-size: 18px;
    line-height: 26px;
}

.news-content-inner {
    padding: 10px;
    position: relative;
    /* top: 200px;
     */
}

.home-news-col .slick-track, .home-news-col .slick-list {
    -webkit-perspective: 2000 !important;
    -webkit-backface-visibility: hidden !important;
}

*/
.news-a {
    text-decoration: none;
    color: #222222;
    position: relative;
    display: inline-block;
    /* transform: rotate(90deg);
     */
    /* transform-origin: top left;
     */
    position: relative;
    /* left: 100%;
     */
    width: 320px;
    height: 420px;
    box-shadow: 0px 5px 10px #00000017;
    background: #fff;
    /* margin-bottom: -70px;
     */
    float: left;
    margin: 0 1rem 0.5rem 0;
}

.news-a .news-label {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5rem 0.8rem;
    font-size: 13px;
    color: #fff;
}

.news-white-tri-1 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 165px 6vw 0 0;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 0;
    left: 0;
}

.news-white-tri-2 {
    width: 0;
    height: 0;
    border-style: solid;
    /* border-width: 0 0 6vw 165px;
     */
    /* border-color: #fff transparent transparent transparent;
     */
    position: absolute;
    top: 0;
    right: 0;
    /* width: 0;
     height: 0;
     border-style: solid;
     border-width: 0 0 1185px 40.5vw;
     border-color: transparent transparent #fff transparent;
     position: absolute;
     bottom: 0;
     right: 0;
     */
    transform-origin: top right;
    /* transform: rotate(180deg);
     */
    /* scale: 5;
     */
    border-width: 0 0 1020px 540px;
    border-color: transparent transparent #fff transparent;
    scale: 2;
}

.home-news-col {
    /* position: absolute;
     */
    top: 62%;
    /* transform: translate(0, -50%);
     */
    /* top: 345px;
     */
    left: -19vw;
    position: relative;
    margin: 315px 0 0 0;
}

    .home-news-col .home-news-col-inner {
        width: 78vw;
        overflow: auto;
        /* transform: rotate(-90deg);
     */
        transform-origin: top;
        /* height: 420px;
     */
        scrollbar-width: none !important;
        /* z-index: 1000000;
     */
    }

        .home-news-col .home-news-col-inner::-webkit-scrollbar {
            display: none;
        }

.red-bg {
    background: #a02337;
}

.heavy-red-bg {
    background: #ea081c;
    color: #fff;
}

.orange-bg {
    background: #f06445;
}

.blue-bg {
    background: #0e79c5;
}

.purple-bg {
    background: #994897;
}

.green-bg {
    background: #1cb19d;
}

/*same as .full_width_bg*/
.gray-bg-100vw {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background-color: #f5f5f5;
    z-index: -1;
}

.slide-over-txt {
    display: block;
    font-size: 38px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    top: 50%;
    z-index: 100;
    font-weight: 500;
    width: 60%;
    line-height: 45px;
}

    .slide-over-txt.small-slide-over-txt {
        font-size: 19px;
        width: 100%;
        background-size: 100% auto !important;
        padding: 1rem;
        background-position: center center !important;
    }

        .slide-over-txt.small-slide-over-txt img {
            height: 45px;
        }

.slide-over-txt-2 {
    display: block;
    font-size: 38px;
    /* position: absolute;
     */
    left: 50%;
    /* transform: translate(-50%, -50%);
     */
    color: #fff;
    text-align: center;
    top: 50%;
    z-index: 100;
    font-weight: 300;
}

    .slide-over-txt-2.small-slide-over-txt {
        font-size: 19px;
        width: 100%;
        background-size: 100% auto !important;
        padding: 1rem;
        background-position: center center !important;
    }

        .slide-over-txt-2.small-slide-over-txt img {
            height: 45px;
        }

.slide-div {
    text-decoration: none;
    color: #fff;
    text-align: center;
    height: 80vh;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/wkc-foto-banner.jpg);
    background-size: cover;
}

    .slide-div img {
        filter: brightness(0.8);
    }

.thin-arrow {
    display: block;
    width: 35px;
    height: 55px;
    position: absolute;
}

.thin-arrow-left {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/thin-arrow.png) no-repeat;
    background-size: 100% 100%;
    left: -20%;
    top: 50%;
    transform: translate(0, -50%);
}

.thin-arrow-right {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/thin-arrow.png) no-repeat;
    background-size: 100% 100%;
    right: -20%;
    transform: rotate(180deg) translate(0, 50%);
    /* transform: translate(0, -50%);
     */
    top: 50%;
}

.stat-num {
    font-size: 52px;
    font-weight: 300;
}

.stat-table td {
    padding: 0 10rem 0 0;
    vertical-align: top;
    font-weight: 200;
}

    .stat-table td:last-child {
        padding: 0 0 0 0;
    }

.stat-ul {
    margin: 0;
    padding: 0;
    display: block;
    width: min-content;
    font-size: 20px;
    color: #fff;
    text-align: center;
    margin: 0 auto;
}

    .stat-ul li {
        text-align: center;
        display: inline-block;
        /* margin: -2px 3% 0 0;
     */
        font-weight: 200;
        width: 100%;
        padding: 2rem 3% 2rem 0;
        display: inline-block;
        margin: 0 auto;
        border-bottom: 1px solid #fff;
        text-align: left;
    }

        .stat-ul li:last-child {
            /* margin: 0;
     */
            border: none;
        }

.stat-div {
    width: 100%;
    font-size: 32px;
    font-weight: 300;
}

    .stat-div .plus {
        font-size: 31px;
        position: relative;
        left: -10px;
    }

.stat-desc {
    font-size: 15px;
    /* line-height: 1.8;
     */
    color: #666666;
    width: 90%;
}

.left-tri-div {
    display: block;
    width: 100%;
    position: relative;
    margin: -37vw 0 0 0;
}

.left-tri {
    /* width: 0;
     height: 0;
     border-style: solid;
     border-width: 650px 0 650px 36vw;
     border-color: transparent transparent transparent #a02337;
     */
    transform: matrix(0.71, -0.71, 0.71, 0.71, 0, 0);
    background: #a02337 0% 0% no-repeat padding-box;
    border-radius: 25px;
    width: 1297px;
    height: 1297px;
    right: 494px;
    position: absolute;
    z-index: 100;
}

.polyu-white-logo-set {
    /* float: left;
     */
    position: absolute;
    top: 50%;
    width: 70%;
    transform: translate(0, -50%);
    left: 2rem;
}

    .polyu-white-logo-set img {
        /* position: absolute;
     */
        width: 90%;
        /* top: 0;
     */
    }

.slide-over-txt .view-all-btn {
    font-size: 20px;
}

.bottom-banners-section {
    /* background: #fff;
     */
}

    .bottom-banners-section img {
        filter: brightness(0.6);
    }

    .bottom-banners-section .slide-over-txt {
        width: 90%;
    }



.left-red-bar-div {
    position: relative;
    margin: 0 0 6rem 1rem;
}

    .left-red-bar-div.staff-directory {
        position: relative;
        margin: 0 0 0rem 1rem;
    }

    .left-red-bar-div::before {
        content: '';
        display: block;
        width: 3px;
        height: 40px;
        background: #a02437;
        position: absolute;
        left: -1rem;
        top: 0;
    }

.menu-main-ul {
    margin: 0 auto;
    padding: 0;
    /* display: block;
     */
}

    .menu-main-ul ul {
        margin: 0;
        padding: 0;
    }

    .menu-main-ul li {
        list-style-type: none;
        margin: 0 0 0.7rem 0;
        position: relative;
    }


        .menu-main-ul li a.menu-column-title {
            margin: 0 0 1.5rem 0;
            font-size: 23px;
            position: relative;
            font-weight: 500;
            color: #a02337;
        }

        .menu-main-ul li ul.sublevel-menu {
            padding-top: 1rem;
        }

            .menu-main-ul li ul.sublevel-menu li {
                margin: 0 0 0.5rem 0;
            }

    .menu-main-ul a {
        color: #222;
        font-size: 0.875rem;
        text-decoration: none;
        line-height: 23px;
    }

.overlay-menu .menu-main-ul li::before {
    background: #fff;
}

.overlay-menu li a.menu-column-title {
    color: #fff;
}

.overlay-menu .menu-wrapper {
    margin-top: 4rem;
}

.overlay-menu .menu-main-ul a,
.overlay-menu .menu-main-ul a:hover,
.overlay-menu .menu-main-ul a:visited {
    color: #fff;
}

.overlay-menu .footer-bottom-div {
    background: #fff;
}

.footer-bottom-div {
    background: #f5f5f5;
    position: relative;
    /* height: 30vh;
     */
}

    .footer-bottom-div ul {
        margin: 0;
        padding-left: 0;
    }

.overlay-menu .footer-bottom-div ul {
    display: flex;
    text-align: center;
}

.footer-bottom-div ul li:first-child {
    margin: 0;
}

.footer-bottom-div ul li {
    list-style-type: none;
    display: inline-block;
    /* padding-right: 40px;
     */
    margin: 0 0 0 12px;
}

.overlay-menu .footer-bottom-div ul li a {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-diamond.png) no-repeat;
    background-position: 100% center;
    text-decoration: none;
    color: #000;
    background-size: 10px;
    padding-right: 25px;
    font-size: 0.875rem;
    text-decoration: none;
}

.footer-bottom-div ul li a {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-diamond.png) no-repeat;
    background-position: 100% center;
    text-decoration: none;
    color: #000;
    background-size: 10px;
    padding-right: 25px;
    font-size: 0.875rem;
}

.footer-bottom-div ul li:last-child a {
    background: none;
    padding: 0;
}

.footer-tri {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 30vh 20vw;
    border-color: transparent transparent #a02337 transparent;
    position: absolute;
    bottom: 0;
    right: 0;
}

.overlay-menu .footer-bottom-container {
    padding-top: 10px;
    position: relative;
    font-size: 0.875rem;
    padding-bottom: 10px;
    z-index: 100;
}

.footer-bottom-container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    position: relative;
    font-size: 0.875rem;
}

.sbanner-a img {
    filter: brightness(0.5);
}

.top-btn-container {
    position: fixed;
    right: 2vw;
    bottom: 5vh;
    z-index: 2999;
}

    .top-btn-container a:hover {
        color: #fff !important;
    }
/*!not delete this css vvvvvvvvvvvvvvvvvvvvvvv*/
/*a.top-btn:before {
    content: '';
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.6rem;
    background: #A02337;
    position: absolute;
    top: -0.25rem;
    left: -0.55rem;
    transform: rotate(45deg);
    z-index: -1;
}

.top-btn, a.top-btn, a.top-btn:hover, a.top-btn:visited {
    color: #fff;
    position: absolute;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.25rem;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/up-white-arrow.png) no-repeat;
    background-size: 1.25rem auto;
    padding: 1rem 0 0 0;
    background-position: 50% 0;
}*/
/*!not delete this css ^^^^^^^^^^^^^^^^^^^^^^^^^*/
.top-btn {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 3.5rem;
    height: 3.5rem;
    background: #A02337;
    padding: 10px;
}

.top-btn-Pattern {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 50%;
    width: 40%;
}

.top-btn-Pattern-a {
    width: 100%;
    height: 50%;
    clip-path: polygon(50% 25%, 100% 100%, 0% 100%);
    background-color: white;
}

.top-btn-Pattern-b {
    width: 100%;
    height: 50%;
    clip-path: polygon(50% 25%, 100% 100%, 0% 100%);
    transform: rotate(180deg);
    background-color: rgb(255,255,255,30%);
}

.top-btn-text {
    width: 100%;
    text-align: center;
    color: #fff;
}

.breadcrumb {
    font-size: 1rem;
    font-weight: 300;
    width: 100%;
    position: relative;
    margin: 0 auto;
}

    .breadcrumb a {
        text-decoration: none;
        /*color: #7c7c7c;
    */
        color: #fff;
        cursor: pointer;
    }

    .breadcrumb h1 {
        font-size: 1.875rem;
        font-weight: 400;
    }

.breadcrumb-item + .breadcrumb-item::before {
    display: none;
}
/* Submenu */
.mobile-submenubar-title-div {
    display: none;
}

.submenubar {
    font-size: 1rem;
    width: 100%;
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.submenu-root {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    margin: 0px;
    justify-content: flex-start;
}

    .submenu-root li {
        display: flex;
        align-items: center;
        position: relative;
        margin-right: 10px;
    }

    .submenu-root svg {
        /*        display: inline;*/
        display: none;
        position: absolute;
        color: #222;
        left: 0.2rem;
        padding: 0;
        margin: 0;
        width: 1rem;
        height: 1rem;
    }

    .submenu-root a {
        display: inline;
        color: #222;
        width: 100%;
        padding: 0.5rem;
        margin: 0;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
        border-radius: 3rem;
    }

    .submenu-root li:hover a {
        background-color: #A02337;
        color: #fff;
        text-decoration: underline;
        text-decoration-color: #fff;
    }
     .nav-link:focus {
        color: #A02337
    }

    .submenu-root li:hover svg {
        color: #fff;
    }

.submenu-bottom-line {
    display: block;
    background-color: #f5f5f5;
    width: 100%;
    height: 1px;
}

@media only screen and (max-width: 576px) {
    .mobile-submenubar-title-div {
        display: block;
        width: 100%;
        background-color: #A02337;
    }

    .mobile-submenubar-title-div-background {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px;
    }

    .mobile-submenubar-title {
        color: #fff;
    }

    .mobile-submenubar-action-button {
        width: 20px;
        height: 20px;
        padding: 0px;
        border-width: 1px;
        border-color: #ffffff;
        border-style: solid;
        border-radius: 15px;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-submenubar-action-button-img {
        width: 60%;
    }

    .submenubar {
        display: none;
        font-size: 1rem;
        width: 100%;
        background-color: #A02337;
        padding: 10px;
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .submenubar.submenubar-box {
        display: block;
        background-color: transparent;
        padding: 0px;
    }
    .submenubar.submenubar-box .list-boxes1-item {
        flex: 1 0 30.5%;
        max-width: 48%;
        margin: 0.5rem 0.5rem;
    }
    .submenubar.submenubar-box .list-boxes1__text {
        font-size: 0.875em;
        line-height: 1;
        top: 0.34em;
        right: 0.455em;
        bottom: 0.34em;
        left: 0.455em;
    }

    .submenu-root {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0px;
        margin: 0px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .submenu-root li {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin-right: 0px;
            width: 100%;
            padding-top: 3px;
            padding-bottom: 3px;
        }

        .submenu-root svg {
            display: none;
        }

        .submenu-root a {
            display: block;
            color: #fff;
            font-weight: 500;
            width: 100%;
            padding: 0px 0px 0px 0px;
            margin: 0px 0px 0px 0px;
            border-style: solid;
            border-width: 0px 0px 1px 0px;
            border-color: #b5b5b5;
            border-radius: 0px;
        }

        .submenu-root li:hover a {
            background-color: #A02337;
            color: #fff;
            text-decoration: none;
            text-decoration-color: #fff;
        }

        .submenu-root li:hover svg {
            color: #fff;
        }

    .submenu-bottom-line {
        display: none;
    }
}
/* End of Submenu */
.darkgrey-bg {
    background: #dddddd !important;
}

.grey-bg {
    background: #f5f5f5 !important;
}

.white-bg {
    background: #ffffff !important;
}

.red-bg {
    background: #A02337 !important;
}

.grey-bg-with-red-corner {
    background: #f5f5f5 url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-corner-3.svg) no-repeat !important;
    background-position: right bottom !important;
    text-align: center !important;
    padding: 2rem !important;
    background-size: 32px !important;
}

.heavy-grey-bg {
    background: #6c6d70;
    color: #fff;
}

.grey-bg-div {
    background: #f5f5f5;
    padding: 1rem;
}

.display-filter {
    display: block;
    padding: 0;
    margin: 0;
    position: relative;
    top: 0;
    right: 0;
}

    .display-filter select {
        border: none;
        background: #fff;
        padding: 0.3rem 3rem 0.3rem 1.5rem;
        border-radius: 3rem;
        outline: none;
        -webkit-appearance: none;
        background: #f5f5f5 url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat;
        background-position: 75% center;
        background-size: 18px auto;
        margin: 0 0 0 0.5rem;
    }

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

    .mobile.display-filter select {
        border: none;
        background: #fff;
        padding: 0.3rem 3rem 0.3rem 1.5rem;
        border-radius: 3rem;
        outline: none;
        -webkit-appearance: none;
        background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat;
        background-position: 75% center;
        background-size: 18px auto;
        margin: 0 0 0 0.5rem;
    }

.display-filter li {
    display: inline-block;
    margin: 0 1rem 0 0;
}

    .display-filter li:last-child {
        margin: 0;
    }

    .display-filter li a {
        text-decoration: none;
        color: #7c7c7c;
        background: #fff;
        padding: 0.6rem 1rem;
        border-radius: 3rem;
    }

        .display-filter li a.display-method {
            /*padding: 0.5rem 2rem 0.5rem 4rem;*/
            padding: 0.5rem 1rem 0.5rem 3rem;
            transition: 0.2s all;
        }

            .display-filter li a.display-method.display-method-grid {
                background: #f5f5f5 url(/ResourcePackages/CPCE_Theme/assets/dist/img/grid-icon.png) no-repeat;
                background-size: 20px;
                /*background-position: 30px center;*/
                background-position: 20px center;
                color: #7c7c7c;
            }

        .display-filter li a.active.display-method.display-method-grid {
            background: #a02337 url(/ResourcePackages/CPCE_Theme/assets/dist/img/grid-icon-w.png) no-repeat;
            background-size: 20px;
            /*background-position: 30px center;*/
            background-position: 20px center;
            color: #fff;
        }

        .display-filter li a.display-method.display-method-list {
            background: #f5f5f5 url(/ResourcePackages/CPCE_Theme/assets/dist/img/list-icon.png) no-repeat;
            background-size: 20px;
            /*background-position: 30px center;*/
            background-position: 20px center;
            color: #7c7c7c;
        }

        .display-filter li a.active.display-method.display-method-list {
            background: #a02337 url(/ResourcePackages/CPCE_Theme/assets/dist/img/list-icon-w.png) no-repeat;
            color: #fff;
            background-size: 20px;
            /*background-position: 30px center;*/
            background-position: 20px center;
        }

.filter-title {
    display: block;
    font-size: 24px;
    color: #a02337;
    margin: 0 0 0.5rem 0;
}

.w-95 {
    width: 95%;
}

.form-check-input {
    margin-top: 0.5em;
}

.filter-checkbox {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 0px !important;
    border: 1px solid #707070;
    outline: none;
}

    .filter-checkbox:checked {
        background: #a02337;
    }

    .filter-checkbox:focus {
        border-color: #707070;
        outline: 0;
        box-shadow: none;
    }

.filter-table label {
    padding: 0 0 0 0.8rem;
    font-size: 14px;
    float: left;
    margin: 6px 0 0 0;
}

.filter-table td {
    padding: 0 0 0.5rem 0;
    vertical-align: top;
}

.filter-group {
    margin: 0 0 3rem 0;
}

.course-info-wrapper {
    position: relative;
    display: block;
    background: #fff;
    line-height: 1.3;
    padding: 0 0 1rem 0;
    font-size: 14px;
    margin: 0 0 1rem 0;
    /*-webkit-box-shadow: -1px 3px 7px -7px rgb(0 0 0 / 75%);
     -moz-box-shadow: -1px 3px 7px -7px rgb(0 0 0 / 75%);
     box-shadow: -1px 3px 7px -7px rgb(0 0 0 / 75%);
    */
    -webkit-box-shadow: 0px 7px 10px #0000000f;
    height: 100%;
    -moz-box-shadow: 0px 7px 10px #0000000f;
    box-shadow: 0px 7px 10px #0000000f;
    border-radius: 5px;
}

    .course-info-wrapper img.professor-img {
        width: 46px;
        height: 46px;
        margin: 0 0.3rem 0 0;
    }

    .course-info-wrapper .color-head-line {
        display: block;
        height: 4px;
        /* background: #f06445;
     */
        border-radius: 5px 5px 0 0;
        width: calc(100% - 2px);
        background-position: center center;
        margin: 0 1px;
    }

    .course-info-wrapper table td {
        vertical-align: middle;
        height: 40px;
        padding: 0 5%;
    }

.course-info {
    display: block;
    width: 90%;
    margin: 0 auto;
}

    .course-info:last-child a {
        display: inline-block;
    }

        .course-info:last-child a img {
            margin: 0;
        }

.course-info-wrapper .course-name, .course-info-wrapper .course-name a, .course-info-wrapper .course-name a:focus, .course-info-wrapper .course-name a:visited {
    font-size: 1.25rem;
    color: #A02337;
    margin: 1rem 0 0 0;
    line-height: 1.2;
    min-height: 3.6em;
    font-weight: 500;
    text-decoration: none;
}

.course-info-wrapper .course-year, .course-info-wrapper .course-info-div {
    /*font-size: 16px;*/
    font-size: 1.1rem;
    /*margin: 0.5rem 0 0 0;*/
    font-weight: 400;
    color: black;
}

.course-info-wrapper .subtitle {
    font-size: 14px;
    color: #000;
    font-weight: 600;
}

    .course-info-wrapper .subtitle.red {
        color: #A02337;
    }

.course-info-wrapper .bottom-grey-line {
    display: block;
    width: 95%;
    background: #ececec;
    height: 1px;
    margin: 0 auto;
}

.course-bottom-div {
    position: absolute;
    border-top: solid 1px #eee;
    bottom: 0;
    width: 100%;
}

.explore-label {
    padding: 0.2rem 0;
    width: fit-content;
}

.course-info-icon {
    height: 30px;
    margin: 5px 0;
}

.pagination-ul {
    margin: 0;
    padding: 0;
    width: max-content;
    margin: 0 auto 2rem auto;
}

    .pagination-ul li {
        list-style-type: none;
        display: inline-block;
        margin: 0 2rem 0 0;
    }

        .pagination-ul li:last-child {
            margin: 0 0 0 0;
        }

        .pagination-ul li a {
            text-decoration: none;
            font-size: 16px;
            color: #000;
            transition: 0.2s all;
        }

            .pagination-ul li a:hover {
                color: #a02337;
            }

            .pagination-ul li a.active {
                color: #a02337;
            }

.pagination-arrow {
    display: block;
    width: 9px;
    height: 14px;
}

    .pagination-arrow.pagination-arrow-left {
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/pagination-arrow.png) no-repeat;
        background-size: 100% 100%;
    }

    .pagination-arrow.pagination-arrow-right {
        transform: rotate(180deg);
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/pagination-arrow.png) no-repeat;
        background-size: 100% 100%;
    }

.apply-btn {
    border-radius: 8px;
    display: block;
    width: 100%;
    height: 60px;
    background: #a02337;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    text-align: center;
    line-height: 60px;
    font-weight: 200;
    /* padding: 0 0 0 2rem;
     */
}
.apply-btn:hover {
    font-weight: 400;
    text-decoration: underline;
    color:#fff;
}

    .apply-btn img {
        height: 40px;
        margin: 0 0.5rem 0 0;
    }

.middle-nav-ul {
    margin: 0;
    padding: 0;
    display: inline-flex !important;
    margin: 0 auto;
}

    .middle-nav-ul li {
        display: inline-table;
        list-style-type: none;
        margin: 0 2rem 0rem 0;
        /* float: left;
     */
        text-align: center;
        vertical-align: middle;
        padding: 0 1rem;
    }

        .middle-nav-ul li:last-child {
            margin: 0;
        }

        .middle-nav-ul li a {
            text-decoration: none;
            color: #7c7c7c;
            font-size: 15px;
            display: table-cell;
            height: 36px;
            transition: 0.2s all;
        }

    .middle-nav-ul.large li a {
        text-decoration: none;
        color: #7c7c7c;
        font-size: 30px;
        height: 36px;
        transition: 0.2s all;
        /* height: 100px;
     */
        display: table-cell;
        vertical-align: middle;
        border-bottom: 5px solid #fff;
        padding-bottom: 0.5rem;
    }

        .middle-nav-ul.large li a.active {
            text-decoration: none;
            color: #7c7c7c;
            font-size: 30px;
            transition: 0.2s all;
            display: table-cell;
            vertical-align: middle;
            color: #a02337;
        }

    .middle-nav-ul li a:hover {
        color: #a02337;
    }

    .middle-nav-ul li a.active {
        text-decoration: underline;
        color: #7c7c7c;
        font-size: 15px;
        /* text-decoration-color: #a02337 !important;
     */
        /* text-underline-offset: 15px;
     */
        border-bottom: 5px solid #a02337;
        display: block;
        text-decoration: none;
        padding-bottom: 0.5rem;
        text-align: center;
    }

    .middle-nav-ul li a.active {
        text-decoration: none;
    }

.selected-course-info-subtitle {
    font-size: 23px;
    font-weight: bold;
    color: #464646;
}

.info-subtitle {
    font-size: 30px;
    font-weight: bold;
    color: #464646;
}

.course-info-group {
    font-size: 17px;
}

.you-may-interest-title {
    font-size: 45px;
    font-weight: bold;
    margin: 0 0 2rem 0;
}

.mobile-filter-ui {
    display: none;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/thin-grey-arrow.png) no-repeat;
}

.logos-table img {
    height: 130px;
}

.logos-table td {
    padding: 0 2rem;
}

.small-slide-img {
    filter: brightness(0.8);
}

.bottom-banners-section-div {
    background: #fff;
}

.search-ui-title {
    color: #a02337;
    font-weight: bold;
    font-size: 30px;
    text-align: left;
}

.overlay-search .search-ui-div {
    width: 50%;
}

.overlay-search .search-ui-wrapper input::placeholder {
    color: #fff;
}

.search-ui-wrapper input {
    border: 1px solid #fff;
    color: #fff;
    font-size: 25px;
    font-weight: 300;
    width: 100%;
    border-radius: 5px;
    position: relative;
    height: 70px;
    background: transparent;
    padding: 0 5rem 0 1rem;
}

.search-ui-wrapper .search-arrow-btn {
    display: block;
    width: 70px;
    height: 70px;
    background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/tri-right.png) no-repeat;
    background-position: center center;
    position: absolute;
    top: 3px;
    right: 0;
    background-size: 16px;
    border-radius: 5px;
}

.search-tags-ul {
    padding: 0;
    margin: 0;
    text-align: left;
}

    .search-tags-ul li {
        display: inline-block;
        font-size: 15px;
        float: left;
        margin: 0.7rem 0.7rem 0 0;
    }

        .search-tags-ul li a {
            text-decoration: none;
            color: #606060;
            background: #fef3d1;
            padding: 0.3rem 0.5rem;
        }

.info-layer {
    position: fixed;
    display: none;
    background: #fff;
    z-index: 2000;
    width: 100%;
    overflow: auto;
    height: 100%;
}

    .info-layer.appear {
        display: block;
        position: relative;
        overflow: visible;
    }

        .info-layer.appear .personnel-info-bg {
            background: #a02337 url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-corner-2.svg) no-repeat;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -100;
            background-position: 0 100%;
            background-size: 100px;
            width: 100vw;
        }

        .info-layer.appear .under-personnel-info {
            margin: 2rem 0 0 0rem;
        }

        .info-layer.appear .personnel-info {
            margin-top: 5rem;
            margin-left: 0;
            background: none;
            width: auto;
            overflow: visible;
        }

.layer-menu-ul {
    padding: 0;
    margin: 0;
}

    .layer-menu-ul li {
        list-style-type: none;
    }

        .layer-menu-ul li a {
            background: #f5f5f5;
            color: #000000;
            font-size: 23px;
            font-weight: bold;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 4rem;
            width: 100px;
            display: block;
            width: 25%;
            margin: 0 auto 1rem auto;
            min-width: 420px;
        }

.menu-title {
    font-size: 56px;
}

.menu-content-div {
    /* position: absolute;
     */
    /* top: 50%;
     */
    /* left: 50%;
     */
    /* transform: translate(-50%, -50%);
     */
    margin-top: 15vh;
}

.menu-close-btn, .info-layer-close-btn {
    position: absolute;
    top: 1.1rem;
    right: 0;
    display: block;
    width: 100px;
    /* height: 100px;
     */
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/close-cross.svg) no-repeat;
    background-position: 0 center;
    background-size: 14px;
    font-size: 20px;
    text-decoration: none;
    color: #000;
    padding: 0 0 0 1.3rem;
}

.red-side-title {
    font-weight: bold;
    color: #a02437;
}

.info-group-div {
    /* background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-corner.svg) no-repeat;
     */
    /* background-position: right bottom;
     */
    background: #fff;
    text-align: center;
    padding: 0.5rem;
    background-size: 32px;
    -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 1px 15px -5px rgba(0, 0, 0, 0.35);
    text-align: left;
    padding-left: 1.5rem;
}

    .info-group-div.directorate {
        background: #fff;
        text-align: center;
        padding: 0.5rem;
        background-size: 32px;
        -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.35);
        -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.35);
        box-shadow: 0px 1px 15px -5px rgba(0, 0, 0, 0.35);
        text-align: left;
        padding: 1.8rem 0 1rem 1.8rem;
    }

    .info-group-div .staff-personal-name {
        /* color: #606060;
     */
        font-size: 23px;
        color: #a02337;
        text-decoration: underline;
    }

    .info-group-div .staff-qual {
        color: #606060;
        font-size: 12px;
    }

.personnel-info {
    background: #a02437 url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-corner-2.svg) no-repeat;
    color: #fff;
    margin: 4rem 0 0 4rem;
    font-size: 23px;
    padding: 0 0 6rem;
    background-position: 0 100%;
    background-size: 100px;
    /* width: 100vw;
     */
}

.under-personnel-info {
    margin: 2rem 0 0 4rem;
    padding: 0 0 6rem;
}

.bg-img-none {
    background-image: none;
    background: none;
}

.color-initial {
    color: initial;
}

.font-size-initial {
    font-size: initial;
}

.personnel-info a {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin: 2rem 0 0 0;
    padding-right: 1.2rem;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/white-arrow.png) no-repeat;
    background-size: 8px;
    background-position: 100% center;
}

.personnel-info .group-title {
    font-size: 20px;
    font-weight: bold;
}

.personnel-info table {
    width: 100%;
    text-align: left;
}
/* .personnel-info td {
     color: #fff;
     vertical-align: top;
}
 */
.personnel-info img {
    /* width: 315px;
     */
    width: 100%;
    /* max-width: 235px;
     */
}

.info-layer::-webkit-scrollbar {
    width: 10px;
}
/* Track */
.info-layer::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* Handle */
.info-layer::-webkit-scrollbar-thumb {
    background: #888;
}

.academic-staff-div table a {
    text-decoration: none;
    color: #606060;
}

.academic-staff-div table {
    margin: 1rem 0 0 0;
}

.academic-staff-div td {
    color: #606060;
    padding: 0 0.5rem 0.2rem 0;
}

.academic-staff-div img {
    width: 17px;
    opacity: 0.6;
}

.highlight-div {
    font-size: 15px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0px 7px 10px #0000000f;
}

    .highlight-div .book-img {
        width: 190px;
        padding-right: 1rem;
    }

    .highlight-div table td {
        vertical-align: top;
    }

    .highlight-div .group-title {
        font-size: 21px;
    }

    .highlight-div .subtitle {
        font-size: 14px;
        color: #000;
    }

.icon-info-table {
    table-layout: fixed;
}

    .icon-info-table td {
        text-align: center;
        position: relative;
        padding: 0 1rem;
    }

        .icon-info-table td a {
            text-decoration: none;
            color: #606060;
        }

        .icon-info-table td .line {
            position: absolute;
            top: 50%;
            right: 0;
            width: 1px;
            height: 70%;
            background: #a2a2a2;
            transform: translate(0, -50%);
        }

.contact-form table {
    table-layout: fixed;
}

.contact-form textarea {
    resize: none;
}

.contact-form table {
}

.contact-form label {
    margin: 0 0 0.2rem 0;
}

.red-big-btn {
    width: 100%;
    background: #a02337;
    color: #fff;
    transition: 0.2s all;
}

    .red-big-btn:hover {
        opacity: 0.8;
        border: solid 1px #fff;
    }


.grey-big-btn {
    width: 100%;
    background: #6c757d;
    color: #fff;
    transition: 0.2s all;
}

    .grey-big-btn:hover {
        opacity: 0.8;
        border: solid 1px #fff;
    }

.text-grey-color, .a-grey-color {
    color: #606060;
}

.text-black-color, .a-black-color {
    color: #000000;
}

.menu-btn.active {
    background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-cross.svg) no-repeat;
    color: #a02437;
    background-size: 28% !important;
    background-position: center 25% !important;
    position: absolute;
    z-index: 999999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100000;
}

.search-btn.active {
    background: #fff;
    color: #a02437;
    width: 95%;
    height: auto;
    padding: 10px 0px;
    border-radius: 4px;
}

    .search-btn.active img {
        content: url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-cross.svg);
        width: auto;
        height: 1.75em;
    }

.overlay-menu {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #a02437;
    z-index: 3500;
}

    .overlay-menu .header-logos a {
        filter: brightness(0) invert(1);
    }

.overlay-search {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #776F6B;
    z-index: 100;
    opacity: 0.9;
}

.head-foto {
    max-width: 400px;
}

header.scrolled .header-tri {
    border-width: 0px;
    height: 8px;
    background: #fff;
    width: 100%;
}


.home-news-col .slick-prev {
    display: none !important;
}

.home-news-col .slick-next {
    display: none !important;
}

.white-bg-table td {
    background: #fff;
    padding: 1rem;
    margin: 1px;
    border-right: 5px solid #f5f5f5;
    border-bottom: 5px solid #f5f5f5;
}

.white-bg-div {
    background: #fff;
    padding: 1rem;
}

.red-border-red {
    display: block;
    border-left: 3px solid #a02337;
    padding: 0 0 0 0.7rem;
    margin-bottom: 0px;
    margin-top: 10px;
}

.tell-us-who-you-are-div {
    -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 6px 15px -8px rgba(0, 0, 0, 0.75);
    position: relative;
    background: #fff;
    margin: 2rem 0 0 0;
    z-index: 2;
}

    .tell-us-who-you-are-div ul {
        margin: 0;
        display: table;
        padding: 0;
        width: 100%;
        table-layout: fixed;
        padding: 1rem 0 1rem 0;
    }

        .tell-us-who-you-are-div ul li {
            display: table-cell;
            vertical-align: top;
            text-align: center;
            font-size: 20px;
            color: #a02337;
            font-weight: bold;
            position: relative;
        }

            .tell-us-who-you-are-div ul li .grey-dot {
                position: absolute;
                top: 50%;
                right: -6px;
                transform: translate(0, -50%);
                height: 14px;
            }

            .tell-us-who-you-are-div ul li img {
                height: 40px;
                margin: 0 0 1rem 0;
            }

.section1-content {
    width: 100%;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

.section1-content-text {
    width: 70%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 50px;
}

.section1-content-text-h2 {
}

.section1-content-text-div {
}

.section1-content-skew-img-background {
    width: 30%;
    position: relative;
}

.section1-content-skew-img-div {
    position: absolute;
    right: -30%;
    bottom: 10%;
    background-color: aqua;
    width: 400px;
    height: 400px;
    border-radius: 40px;
    overflow: hidden;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.section1-content-skew-img {
    width: 150%;
    height: 150%;
    transform: rotate(-45deg);
}

.news-a-arrow-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    margin: 0.5rem 0.5rem 0 0;
}

    .news-a-arrow-btn.news-a-arrow-btn-left {
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/grey-arrow-left.png) center center no-repeat #f5f5f5;
        background-size: 22px;
    }

    .news-a-arrow-btn.news-a-arrow-btn-right {
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/grey-arrow-right.png) center center no-repeat #f5f5f5;
        background-size: 22px;
    }

.news-a-bottom-tag-div {
    display: block;
    padding: 5px 10px;
    position: absolute;
    bottom: 0;
    color: #7c7c7c;
}

    .news-a-bottom-tag-div .tag {
        color: #000;
    }

.light-red-bg {
    background: #fff3ef;
}

.light-blue-bg {
    background: #eef8ff;
}

.light-yellow-bg {
    background: #f8f5e5;
}

.light-green-bg {
    background: #f1feed;
}

.event-info-row {
    width: 75vw;
}

#datepicker {
    margin: 0rem 0 0 0;
    font-family: 'Roboto', sans-serif !important;
    display: inline-block;
}

.ui-datepicker-inline {
    width: max-content !important;
    border: none !important;
    background: none;
}

.ui-datepicker th {
    padding: 0 1rem;
    text-align: center;
    border-right: 2px solid #fff;
    background: #f5f5f5;
    font-weight: normal;
}

.ui-datepicker td {
    border: 0;
    border-right: 2px solid #fff;
    padding: 3px 0 0 0;
    border-bottom: 1px solid #dfdfdf;
    vertical-align: top;
    position: relative;
}

    .ui-datepicker td .diamond-div {
        height: 30px;
        /* position: absolute;
     */
        /* bottom: 0;
     */
        position: relative;
        top: 0;
    }

        .ui-datepicker td .diamond-div .calendar-diamond {
            line-height: 1;
        }

.ui-datepicker-month {
    display: inline-block;
    margin: 0 1.5rem 0 0;
}

    .ui-datepicker-month::after {
        display: inline-block;
        width: 1px;
        height: 20px;
        background: #dfdfdf;
        content: '';
        position: absolute;
        top: 50%;
        margin: 0 1rem;
        transform: translate(0, -50%);
    }

.ui-datepicker .ui-datepicker-title {
    text-align: left !important;
    font-size: 2rem !important;
    color: #a02437 !important;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    padding: 0 1rem 0 0 !important;
    font-weight: 300;
    text-transform: uppercase;
    position: relative;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none !important;
    background: none !important;
    font-weight: bold !important;
    color: #000 !important;
    text-align: center !important;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    display: none !important;
}

.ui-widget-header {
    background: none !important;
    border: none !important;
}

.ui-datepicker td span, .ui-datepicker td a {
    font-family: auto !important;
}

.calendar-diamond {
    display: block;
    font-size: 1.5rem;
    display: inline-block !important;
}

.small-diamond.calendar-diamond {
    font-size: 1rem;
    /* display: inline-block !important;
     */
}

.calendar-diamond.blue {
    color: #1174be;
}

.event-div a {
    color: #000000;
    text-decoration: none;
}

.event-div .calendar-diamond {
    line-height: 1;
}

.calendar-diamond.orange {
    color: #ff743f;
}

.calendar-diamond.green {
    color: #60b631;
}

.event-info-div {
    display: inline-block;
}

    .event-info-div .date-td {
        text-align: center;
    }

        .event-info-div .date-td .month {
        }

        .event-info-div .date-td .date {
            font-size: 28px;
        }

    .event-info-div .line-td {
        padding: 0 1rem;
    }

    .event-info-div .info-td .first-line {
        line-height: 17px;
    }

    .event-info-div .info-td .second-line {
        font-size: 20px;
        line-height: 1.5;
        padding: 0.5rem 0 0 0;
    }

    .event-info-div table td {
        vertical-align: top;
    }

.ui-datepicker-other-month {
    opacity: 0.7 !important;
}

.stat-logo {
    filter: brightness(100);
    height: 80px;
}

.stat-div-outer-div {
    display: block;
    background: #a02337;
    position: relative;
    overflow: hidden;
}

    .stat-div-outer-div .tri-1 {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 70vh 0 0 4vw;
        border-color: transparent transparent transparent #fff;
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: top left;
        transform: scale(2);
    }

    .stat-div-outer-div .tri-2 {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 4vw 70vh 0;
        border-color: transparent #fff transparent transparent;
        position: absolute;
        right: 0;
        top: 0;
        transform-origin: top right;
        transform: scale(1.9);
    }

.vision-red-tri {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 30px 0 30px 30px;
    border-color: transparent transparent transparent #a02337;
    padding: 0 0.5rem;
}

.overlay-menu-close-btn {
    text-decoration: none;
    text-align: center;
    display: block;
    width: 106px;
    height: 92px;
    position: absolute;
    font-size: 11px;
    top: 0;
    right: 0;
    background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-cross.svg) no-repeat;
    color: #a02437 !important;
    background-size: 28% !important;
    background-position: center 25% !important;
    padding: 60px 0 0 0;
    z-index: 3000;
}

.top-annoucement {
    background: #A02337;
    color: #fff;
    height: 80px;
    position: relative;
    z-index: 100;
}

    .top-annoucement .pointer {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: #A02337 transparent transparent transparent;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: -23px;
    }

.annoucement-close-btn {
    color: #fff !important;
    text-decoration: none;
}

    .annoucement-close-btn img {
        height: 20px;
        margin: 0 0 0 0.5rem;
    }

.cookie-msg-div {
    display: block;
    color: #fff;
    position: fixed;
    bottom: 1rem;
    background: #3B3B3B 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 21px #00000063;
    border-radius: 5px;
    width: 80%;
    z-index: 1000;
    left: 50%;
    transform: translate(-50%, 0px);
}

    .cookie-msg-div img {
        height: 33px;
        margin: 1rem;
    }

.msg-table {
    position: relative;
    color: #fff;
}

    .msg-table::after {
        content: '';
        display: block;
        width: 1px;
        height: 60%;
        background: #414141;
        position: absolute;
        top: 50%;
        right: 0;
        /* padding: 0 1rem 0 0;
     */
        transform: translate(0, -50%);
    }

.accept-cookie-btn {
    color: #fff;
    text-decoration: none;
}

    .accept-cookie-btn img {
        height: 20px;
    }

.accept-cookie-btn-td table {
    width: max-content;
}

    .accept-cookie-btn-td table td {
        padding: 0 0 0 1rem;
    }

.home-banner-video-ui {
    position: absolute;
    bottom: 16px;
    left: 1px;
    z-index: 1;
    padding: 0px;
    margin: 0px;
    width: 10%;
}

.home-banner-video-ui-button-mute {
    background: transparent;
    border: none;
    width: 40%;
}

.home-banner-video-ui-button-stop {
    background: transparent;
    border: none;
    width: 40%;
}

@media only screen and (min-width: 1200px) {
    .home-banner-video-ui {
        width: 120px;
    }
}

.home-banner-video-ui-image {
    width: 100%;
    height: 100%;
    color: #fff;
}

.banner-inner-txt {
    display: block;
    color: #fff;
    position: absolute;
    top: 59%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

s .question-mark {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #707070;
    color: #fff;
    text-align: center;
    margin: 0 0 0 0.2rem;
    border-radius: 1rem;
    text-decoration: none;
    font-size: 13px;
}

.filter-ul {
    margin: 0;
    padding: 0.5rem 0rem;
    /* background: #fff;
    box-shadow: 0px 3px 6px #00000029;*/
    border-radius: 5px;
    overflow-y: auto;
    max-height: 20rem;
    scrollbar-color: red orange;
    scrollbar-width: thin;
}

    .filter-ul::-webkit-scrollbar {
        width: 6px;
    }

    .filter-ul::-webkit-scrollbar-track {
        /*box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
        background-color: #A1A1A1;
        border-right: 4px #fff solid;
    }

    .filter-ul::-webkit-scrollbar-thumb {
        background-color: #A02337;
        border-right: 4px #fff solid;
        background-clip: padding-box;
        /*outline: 1px solid slategrey;*/
    }

    .filter-ul li {
        list-style-type: none;
        background: transparent;
        padding: 0.5rem 0rem;
        margin: 0;
    }

        .filter-ul li.active {
            background: #a02337;
            color: #fff;
        }

        .filter-ul li label {
            display: block;
            font-weight: 400;
            font-size: 1.1rem;
            color: black;
        }

        .filter-ul li input {
            margin: 0.25rem 0 0 0;
            background: #ccc;
            border: 0;
        }

.main-banner-bottom-tri {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 0 100vw;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    bottom: -6px;
    display: none;
}

.programme-filter-search-input {
    height: 50px;
    width: 50%;
    padding: 0 0 0 2.5rem;
    margin: 0 0.5rem 0 0;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon-black.png) no-repeat;
    background-position: 10px center;
    background-size: 18px;
    border: 1px solid #707070;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 300;
}


.programme-filter-search-btn {
    height: 50px;
    position: relative;
    top: -1px;
    border-radius: 5px;
    min-width: 45%;
    font-size: 1.5rem;
    font-weight: 100;
    min-width: 10px;
    width: 23%;
}

.programme-filter-reset-btn {
    height: 50px;
    position: relative;
    top: -1px;
    border-radius: 5px;
    min-width: 45%;
    font-size: 1.5rem;
    font-weight: 100;
    min-width: 10px;
    width: 23%;
}

.form-check-input:checked {
    background-color: #a02437 !important;
    border-color: #fff !important;
}

.form-check-input:focus {
    border-color: #707070;
    outline: 0;
    box-shadow: none;
}

.selected-filter-item {
    display: inline-block;
    background: #a02437;
    color: #fff;
    text-decoration: none;
    padding: 0.3rem 2rem 0.3rem 1rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: normal;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/w-close-cross.svg) #a02437 no-repeat;
    background-position: calc(100% - 10px) 45%;
    background-size: 12px;
}

a.selected-filter-item,
a.selected-filter-item:hover,
a.selected-filter-item:visited {
    color: #fff;
}

.selected-filter-item-ul {
    margin: 0 0 0 0.5rem;
    padding: 0;
    display: inline-block;
    position: relative;
    top: -1px;
}

    .selected-filter-item-ul li {
        display: inline-block;
        padding-right: 10px;
        padding-bottom: 5px;
    }

.table-icon-title-td {
    width: 175px;
    position: relative;
    /* overflow: hidden;
     */
}

    .table-icon-title-td img {
        height: 40px;
    }

    .table-icon-title-td .red-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(-5deg, 0deg);
    }

    .table-icon-title-td .red-bg-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 20%;
        height: 100%;
        background: #a02437;
    }

.information-table {
    -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 4px 16px -8px rgba(0, 0, 0, 0.35);
    margin: 0 0 2rem 0;
}

    .information-table.grey-table {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

        .information-table.grey-table .grey-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: skew(-10deg, 0deg);
        }

    .information-table td {
        color: #000;
    }

    .information-table.grey-table td {
        /* background: #f5f5f5;
     */
        position: relative;
        color: #a02337;
    }

    .information-table .subtitle {
        position: relative;
    }

        .information-table .subtitle::before {
            content: '';
            /*border-left: 1px solid #606060;*/
            position: absolute;
            top: 0;
            left: -1rem;
            width: 1px;
            height: 40px;
        }

.course-info-head-bar-bg {
    display: block;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/course-info-head-bar.png) no-repeat;
    background-size: 100% auto;
    min-height: 120px;
}

.course-info-ul li {
    list-style-type: none;
    position: relative;
    margin: 0 0 1rem 1rem;
}

    .course-info-ul li::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background: #666666;
        position: absolute;
        top: 8px;
        left: -0.8rem;
        transform: rotate(45deg);
    }

.course-detail-instructor-div {
    display: block;
    background: #fff;
    padding: 2rem;
    border-left: 2px solid #a02337;
}

.course-detail-top-btn img {
    height: 20px;
    padding: 0 0.5rem 0 0;
}

.course-detail-top-btn {
    text-decoration: none;
    color: #a02437;
    font-weight: bold;
    margin: 10px 0 0 0;
    display: inline-block;
}

.course-information-middle-menu-ul {
    margin: 0;
    padding: 0;
    display: block;
    background: #fff;
    border-top: 6px solid #999999;
    position: relative;
    top: -130px;
    -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
}

    .course-information-middle-menu-ul li {
        list-style-type: none;
    }

    .course-information-middle-menu-ul.mobile {
        border-top: none;
        background: no-repeat;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        margin: 10rem 0 0 0;
    }

        .course-information-middle-menu-ul.mobile li a {
            display: none;
        }

    .course-information-middle-menu-ul li a {
        display: block;
        width: 100%;
        padding: 1rem 0 1rem 1.5rem;
        transition: 0.1s all;
        text-decoration: none;
        color: #484848;
        border-bottom: 1px solid #e8e8e8;
        position: relative;
    }

        .course-information-middle-menu-ul li a .arrow {
            position: absolute;
            right: 15px;
            height: 12px;
            top: 50%;
            transform: translate(0, -50%);
            display: none;
        }

        .course-information-middle-menu-ul li a.active {
            background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/selected-item-bg-strip.jpg) no-repeat #a02337 !important;
            color: #fff;
        }

            .course-information-middle-menu-ul li a.active .arrow {
                display: inline-block;
            }

.course-intro-div {
    /* -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
     -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
     box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
     width: min-content;
     */
    margin: 0 auto;
    /* padding: 5rem;
     */
    /* min-width: 80%;
     */
}

    .course-intro-div img {
        position: relative;
        width: 123%;
        top: -15%;
    }

        .course-intro-div img.mobile {
            display: none;
        }

    .course-intro-div .txt {
        padding: 2rem 2rem 2rem 6rem;
        background: #fff;
        -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 1px 15px -5px rgba(0, 0, 0, 0.35);
        line-height: 2rem;
    }

.division-head-div {
    background: #fff;
    -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 1px 15px -5px rgba(0, 0, 0, 0.35);
    padding: 7rem 9rem 7rem 9rem !important;
}

    .division-head-div img {
        width: 300px;
        position: relative;
        top: -10px;
        left: -10px;
        padding: 0 1rem 0 0;
        float: left;
    }

.head-img-wrapper {
    position: relative;
    margin: -90px;
}

.mobile.head-img-wrapper {
    display: none;
}

.head-img-wrapper .red-sq {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 200px;
    height: 200px;
    background: #a02337;
}

.dash-dot {
    display: block;
    height: 2px;
    width: 100%;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/dot-bg.png);
    /* border-style: dashed;
     */
    /* border-bottom: 1px solid #707070;
     */
    background-size: auto 100%;
}

.listing-method.list-view tr.content-tr {
    background: #fff;
}

.listing-method.list-view tr th {
    padding: 1rem 0.9rem 0.5rem 0.9rem;
}

.listing-method.list-view tr.content-tr td {
    padding: 1rem 0.9rem 1rem 0.9rem;
}

.list-view-inner {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 5px;
    margin: 0 0 1rem 0;
}

.listing-data-header {
    color: #000;
    font-weight: 500;
    margin: 0.5rem 0;
    padding: 1rem;
    align-items: center;
}

.listing-data-row {
    font-size: 0.875rem;
    background: #fff;
    padding: 1rem;
    align-items: center;
    margin: 0;
    border-bottom: solid 1px #f5f5f5;
}

    .listing-data-row:first-child {
        border-radius: 5px 5px 0 0;
    }

    .listing-data-row:last-child {
        border-radius: 0 0 5px 5px;
        border-bottom: solid 0px #f5f5f5;
    }

    .listing-data-row .course-name a {
        font-size: 1.25rem;
        color: #A02337;
        margin: 1rem 0 0 0;
        line-height: 1.2;
        min-height: 3.6em;
        font-weight: 500;
        text-decoration: none;

    }
    .grid-view-block {
    padding-right: 2rem;
}

    .grid-view-block:nth-child(3n) {
        /*padding-right: 0rem;*/
    }

.isotope-grid {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    position: relative;
    /*left: -10px;*/
}

.isotope-item {
    /* width: 33.33%;
     */
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
}

@media only screen and (max-width: 992px) {
    .isotope-item {
        padding: 1rem !important;
    }
}

body {
    padding: 0;
    margin: 0;
}

.grid-sizer {
    width: 100%;
    /* Set the width to correspond to the desired column width */
}

.isotope-item-content {
    background: #fff;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0px 7px 10px #0000000F;
}

    .isotope-item-content .lecturer-name, .lecturer-name {
        font-size: 1.6rem;
    }

.research-search-input {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon-black.png) no-repeat transparent;
    background-position: 10px center;
    background-size: 20px;
    padding-left: 2.5rem;
    border: 1px solid #707070;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 300;
}

    .research-search-input::placeholder {
        color: #c1c1c1;
    }

.researchproject-search-btn {
    font-size: 1.2rem;
    font-weight: 100;
}

.research-category-select {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/category-icon.png) no-repeat;
    background-position: 10px center;
    background-size: 20px;
    padding-left: 2.5rem;
    border: 1px solid #707070;
    color: #c1c1c1;
    height: 2.5rem;
}

.research-category-select-wrapper {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat #fff;
    background-position: 96% center;
    background-size: 20px;
}

.polynews-category-select-wrapper {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat #fff;
    background-position: 96% center;
    background-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.polynews-month-select-wrapper {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat #fff;
    background-position: 96% center;
    background-size: 20px;
}

.polyEvents-category-select-wrapper {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat #fff;
    background-position: 96% center;
    background-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.polyEvents-filter-search-input {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon-black.png) no-repeat #fff;
    background-position: 10px center;
    background-size: 20px;
    padding-left: 2.5rem;
    border: 1px solid #707070;
}

    .polyEvents-filter-search-input::placeholder {
        color: #c1c1c1;
    }

.polyEvents-category-select {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/category-icon.png) no-repeat;
    background-position: 10px center;
    background-size: 20px;
    padding-left: 2.5rem;
    border: 1px solid #707070;
    color: #c1c1c1;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #f5f5f5;
    height: 2.5rem;
}

.polyNews-filter-search-input {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon-black.png) no-repeat #fff;
    background-position: 10px center;
    background-size: 20px;
    padding-left: 2.5rem;
    border: 1px solid #707070;
}

    .polyNews-filter-search-input::placeholder {
        color: #c1c1c1;
    }

img.news-content-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.media-content > * {
    font-size: 1.1rem;
    font-weight: 300;
}

.polynews-category-select {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/category-icon.png) no-repeat;
    background-position: 10px center;
    background-size: 20px;
    padding-left: 2.5rem;
    border: 1px solid #707070;
    color: #c1c1c1;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #f5f5f5;
    height: 2.5rem;
}

.polynews-month-select {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat #fff;
    background-position: 96% center;
    background-size: 20px;
    border: 1px solid #707070;
    color: #000000;
}

.polynews-related-news a {
    color: #A02337;
    text-decoration: none;
    font-weight: 500;
    position: relative;
}

.ui-slider-div .ui-state-default, .ui-slider-div .ui-widget-content .ui-state-default, .ui-slider-div .ui-widget-header .ui-state-default {
    border: none !important;
    background: #a02337 !important;
    font-weight: bold !important;
    color: #000 !important;
    text-align: center !important;
    transform: rotate(45deg);
    outline: none;
}

.ui-slider-div .ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
    background: #a02337 !important;
}

.ui-slider-div .ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #a1a1a1;
    color: #222222;
}

.ui-slider-div .ui-slider-horizontal {
    height: 0.4em;
}

    .ui-slider-div .ui-slider-horizontal .ui-slider-handle {
        top: -0.25em;
        margin-left: -0.6em;
    }

.ui-slider-div .ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 0.8em;
    height: 0.8em;
    cursor: default;
    text-decoration: none;
}

.from-year {
    transform: rotate(-45deg);
    position: relative;
    top: 16px;
    font-size: 10px;
    left: 8px;
    color: #606060;
    font-weight: 400;
}

.to-year {
    transform: rotate(-45deg);
    color: #606060;
    position: relative;
    top: 16px;
    font-size: 10px;
    left: 8px;
    font-weight: 400;
}

#slider-range {
    width: 87%;
    margin: 0 0 0 8%;
}

.funding-select-menu-ul-wrapper {
    background: #fff;
    -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 1px 15px -5px rgba(0, 0, 0, 0.35);
}

.funding-select-menu-ul {
    display: block;
    margin: 0;
    padding: 0;
    /* background: #fff;
     */
    /* -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.35);
     -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.35);
     box-shadow: 0px 1px 15px -5px rgba(0, 0, 0, 0.35);
     */
    /*height: 300px;
    */
    overflow: auto;
}

    .funding-select-menu-ul li {
        list-style-type: none;
    }

        .funding-select-menu-ul li a {
            text-decoration: none;
            color: #606060;
            padding: 0.5rem 1rem;
            display: block;
            border-radius: 1rem;
        }

            .funding-select-menu-ul li a.active {
                color: #fff;
                background: #a02337;
            }
    /* Target the scrollbar */
    .funding-select-menu-ul::-webkit-scrollbar {
        width: 5px;
        /* Change the width */
    }
    /* Target the track (the area behind the thumb) */
    .funding-select-menu-ul::-webkit-scrollbar-track {
        background-color: #a1a1a1;
        /* Change the background color */
    }
    /* Target the thumb (the draggable handle) */
    .funding-select-menu-ul::-webkit-scrollbar-thumb {
        background-color: #a02337;
        /* Change the color of the thumb */
        border-radius: 5px;
        /* Add rounded corners */
    }

.awards-ul {
    margin: 0;
    padding: 0;
}

    .awards-ul li {
        background: #fff;
        list-style-type: none;
    }

        .awards-ul li a {
            font-size: 20px;
            font-weight: bold;
            display: block;
            margin: 1rem 0 0 0;
            color: #a02337;
            text-decoration: none;
        }

            .awards-ul li a .arrow {
                /* background-size: 100% auto;
     */
                transition: 0.2s transform;
                display: block;
                width: 30px;
                height: 30px;
                background: #f5f5f5 url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat;
                border-radius: 3rem;
                float: right;
                margin-right: 1rem;
                background-size: 16px auto;
                background-position: center 12px;
            }

            .awards-ul li a.active .arrow {
                /* background-size: 100% auto;
     */
                display: block;
                width: 30px;
                height: 30px;
                background: #a02337 url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow-white.png) no-repeat;
                border-radius: 3rem;
                float: right;
                transform: rotate(180deg);
                background-size: 16px auto;
                background-position: center 12px;
            }

.award-year {
    font-size: 30px;
    font-weight: bold;
}

.award-lecturer {
    background: #f5f5f5;
    margin: 1rem;
    border-left: 2px solid #a02337;
}

    .award-lecturer table {
    }

        .award-lecturer table td {
            vertical-align: top;
            padding: 1rem;
        }

.award-lecturers-div {
    display: none;
}

.year-select {
    border-radius: 2rem;
    color: #666666;
    padding: 0.375rem 5.25rem 0.375rem 1.5rem;
}

.student-news-div {
    display: block;
    background: #fff;
    position: relative;
}

    .student-news-div .subtitle {
        font-size: 18px;
    }

    .student-news-div.large-student-news-div {
        height: 650px;
    }

    .student-news-div .caption {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: #fff;
        text-align: center;
        background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100% );
        font-size: 20px;
        padding: 1rem;
        text-align: left;
    }

.home-content-section {
    margin-top: 300px;
}

.overlay-menu-close-btn.overlay-menu-close-btn-mobile {
    /* display: none !important;
     */
    display: none;
}
/* .filter-col-bg {
     position: absolute;
     left: 0;
}
 */
.course-search-title {
    position: relative;
}

.course-search-title-arrow {
    display: none;
    position: absolute;
    right: 0;
    width: 20px;
    height: 20px;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow-red.png) no-repeat #fff;
    background-size: 10px auto;
    top: 50%;
    border-radius: 1rem;
    background-position: center;
    transform: translate(0px, -50%);
}

.programme-course-search-ui-inner {
    display: none;
    /* margin: 1rem 0 0 0;
     */
}

.course-information-middle-menu-ul.mobile {
    display: block;
}

.sub-content-title-td .arrow {
    display: none;
}

.course-information-big-title {
    margin: 20px 0 0 0;
}

.transport-info-table td {
    background: #f5f5f5;
    padding: 1rem;
    border-bottom: 0.5rem solid #fff;
}

.transport-info-table tr td:first-child {
    border-right: 0.5rem solid #fff;
}

.news-div {
    display: block;
    padding: 1rem;
    background: #fff;
}

.event-div {
    display: block;
    padding: 1.5rem;
    background: #fff;
    border-radius: 5px;
}

.event-top-div {
    display: block;
    padding: 1.5rem;
    background: #fff;
}

.grad-student-div {
    display: block;
    padding: 1rem;
    background: #fff;
}

.news-div .calendar-diamond {
    font-size: 1rem;
}

.brand-red-date {
    display: inline-block;
    width: 62px;
    text-align: center;
    height: 62px;
    background: #a02437;
    color: #fff;
}

    .brand-red-date.big {
        display: inline-block;
        width: 80px;
        text-align: center;
        height: 80px;
        background: #a02437;
        color: #fff;
    }

        .brand-red-date.big .month {
            /* margin: 15px 0 0 0;
     */
            margin: 0;
        }

    .brand-red-date .month {
        margin: 5px 0 0 0;
        font-size: 12px;
    }

    .brand-red-date .date {
        font-size: 24px;
    }

.cover-yellow-bg {
    background: #d5ba55;
}

.cover-red-bg {
    background: #932f3a;
}

.cover-blue-bg {
    background: #245b93;
}

.news-letter-cover-div img {
    max-width: 80%;
    max-height: 80%;
}

.news-letter-div {
}

.news-letter-cover-div-wrapper {
    background: #fff;
    color: #000;
}

.related-news-div {
    border-bottom: 1px dashed #D8D4D4;
    padding: 0 0 1rem 0;
    position: relative;
    margin: 1rem 0 0 0;
}

    .related-news-div.left-news-div {
        border-bottom: none;
        padding: 0rem 0 1rem 1rem;
        position: relative;
        margin: 0rem 0 0 0;
    }

/* .related-news-div.left-news-div::before { */
/* content: ''; */
/* position: absolute; */
/* top: 0px; */
/* left: 0; */
/* display: block; */
/* width: 4px; */
/* height: 120px; */
/* background: #a02437;  */
/* } */

/* .related-news-div::before {  */
/* content: '';  */
/* position: absolute;  */
/* top: 6px;  */
/* left: 0;  */
/* display: block;  */
/* width: 4px;  */
/* height: 40px;  */
/* background: #a02437;  */
/* }  */

.enlarge-able-div-a {
    color: initial;
    text-decoration: none;
    transition: 0.2s all;
}

    .enlarge-able-div-a:hover {
        opacity: 0.85;
    }

.enlarge-able-div {
    display: block;
    background: #f5f5f5;
    position: relative;
}

    .enlarge-able-div table {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .enlarge-able-div img {
        max-width: 75%;
        width: auto !important;
        max-height: 90%;
        height: auto !important;
        position: absolute;
        top: 50%;
        left: 50%;
        height: 80%;
        transform: translate(-50%, -50%);
    }

.enlarge-icon-div {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    display: block;
    width: 30px;
    height: 30px;
    background: rgb(100 100 100 / 85%) url(/ResourcePackages/CPCE_Theme/assets/dist/img/enlarge-icon.png) no-repeat;
    background-position: center center;
    border-radius: 2rem;
    background-size: 17px;
}
/* .staff-directory-member-img::before {
     content: '';
}
 */
.staff-directory-member-red-sq, .staff-directory-member-red-sq-2 {
    position: absolute;
    display: block;
    width: 100%;
    background: #a02437;
    left: -1rem;
    top: -1rem;
}

.staff-directory-member-img {
    position: relative;
    z-index: 10;
}

.grad-student-name {
    font-size: 20px;
}

.grad-student-img-wrapper .grey-bg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.grad-student-img-wrapper img {
    position: relative;
    left: 1rem;
    top: 1rem;
}

.red-quote {
    height: 20px;
}

.more-detail-a {
    color: #606060;
    display: inline-block;
    margin-bottom: 1rem;
}

.student-more-content {
    display: none;
}

.lightbox {
    position: fixed;
    z-index: 2000;
    width: 100%;
    height: 100%;
    top: 0;
    display: none;
    left: 0;
    z-index: 20000;
    background: rgb(0 0 0 / 60%);
}

    .lightbox img {
        height: 100%;
        max-height: 80%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
    }

.home-news-col .slick-arrow {
    z-index: 100;
    position: absolute;
}

    .home-news-col .slick-arrow.slick-arrow-left {
        top: 50%;
        transform: translate(0, -50%);
        left: 50px;
    }

    .home-news-col .slick-arrow.slick-arrow-right {
        top: 50%;
        transform: translate(0, -50%);
        right: 50px;
    }

.event-date-div {
    text-align: center;
    color: #666666;
}

    .event-date-div .year {
        line-height: 1;
    }

    .event-date-div .month {
        line-height: 1;
    }

    .event-date-div .date {
        font-size: 24px;
        line-height: 1;
    }

.event-div .event-info {
    position: relative;
    padding: 0 0 0 0.5rem;
}

    .event-div .event-info::before {
        content: '';
        position: absolute;
        top: 4px;
        left: 0;
        display: block;
        width: 1px;
        height: 12px;
        background: #222222;
    }

.polynews-related-news .event-name {
    font-size: 20px;
    line-height: 24px;
}

.event-detail-table td {
    font-size: 0.875rem;
    color: #A02337;
    font-weight: bold;
    padding-right: 20px;
    padding-bottom: 20px;
    table-layout: auto;
    width: 5%;
    word-break: break-all;
    vertical-align: top;
}

.event-table-detail-text {
    color: #444444;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 30px;
    text-align: justify;
}

img.event-banner {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.related-event-side-div {
    border-bottom: 1px dashed #afafaf;
    padding: 0 0 1rem 0 !important;
}

/* .brand-red-info-subtitle::before { */
/* content: ''; */
/* position: absolute; */
/* top: 50%; */
/* left: 1rem; */
/* display: block; */
/* width: 1px; */
/* height: 14px; */
/* background: black; */
/* transform: translate(0, -50%); */
/* } */

.event-info-table tr:nth-child(2n) {
    background: #f5f5f5;
}

.event-info-table tr td {
    padding: 1rem;
}

.brand-red-info-subtitle {
    width: 50px;
}

.event-detail-ul li {
    list-style-type: none;
    position: relative;
    margin: 1rem 0 0 0;
}

    .event-detail-ul li::before {
        position: absolute;
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background: #a5a5a5;
        position: absolute;
        top: 8px;
        left: -0.8rem;
        transform: rotate(45deg);
    }

.event-detail-ul {
    margin: 0 0 0 13px !important;
}

.event-detail-mobile-show-date {
    display: none;
}

@media screen and (max-width: 568px) {
    .ui-datepicker td .diamond-div {
        height: 20px;
        /* position: absolute;
         */
        /* bottom: 0;
         */
        position: relative;
        top: 0;
    }

    #datepicker {
        width: 100%;
        font-size: 0.5rem;
    }

    .calendar-diamond {
        display: block;
        font-size: 1rem;
        display: inline-block !important;
    }

    .ui-datepicker td span, .ui-datepicker td a {
        display: block;
        padding: 0;
        text-align: right;
        text-decoration: none;
    }

    .stat-div-outer-div .tri-1 {
        display: none;
    }

    .vision-red-tri {
        left: -1rem !important;
        position: relative;
        border-width: 50px 0 50px 50px;
    }
}

@media screen and (max-width: 1580px) {
    .date-part-col {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .grid-sizer {
        width: 50%;
        /* Change the width for smaller screens */
    }
}

.isotope-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    box-shadow: 0px 7px 10px #0000000F;
}

@media screen and (max-width: 768px) {
    .isotope-item {
        width: 50%;
    }
}

@media screen and (max-width: 480px) {
    .isotope-item {
        width: 100%;
    }
}

@media (max-width: 1500px) {
    .ui {
        display: inline-block;
        border: 3px solid #fff;
        padding: 0rem 6rem 0rem 1.3rem;
        margin: 0 0 0 1rem;
        color: #fff;
        font-size: 23px;
        text-decoration: none;
    }

        .ui .search-btn {
            display: block;
            width: 35px;
            height: 35px;
            background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon.png) no-repeat;
            background-size: 19px auto;
            background-position: center center;
        }
}

@media (max-width: 1200px) {
    .red-skew-rect-1 {
        /* overflow: hidden;
         */
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 150vh 370px;
        border-color: transparent transparent #a02337 transparent;
        top: 20vh;
        position: absolute;
        right: -70px;
    }

    .news-and-events-left-txt {
        font-size: 15px;
        background: #a02337;
        height: 1185px;
        width: 140%;
    }

    .slide-over-txt .view-all-btn {
        font-size: 16px;
    }

    .copyright-sentence {
        width: 80%;
    }

    .footer-bottom-div ul {
    }

        .footer-bottom-div ul li {
            display: block;
            margin: auto;
        }

        .footer-bottom-div ul li:first-child {
            display: block;
            margin: auto;
        }

        .footer-bottom-div ul li a {
            display: block;
            font-size: 15px;
            background: none;
        }

    .top-btn-container {
        right: 2vw;
        /*bottom: 15vh;*/
    }

    /*    .top-btn {
            position: absolute;
            bottom: 1rem;
            top: auto;
            right: 0;
        }
        */
    .footer-tri {
        border-width: 0 0 30vh 35vw;
    }

    .slide-over-txt {
        width: max-content;
        font-size: 21px;
    }

    .banner-cover-content h2 {
        font-size: 42px;
    }

    .i-am-div {
        margin: 1rem 0 0 0;
        font-size: 18px;
    }

        .i-am-div .txt {
            display: block;
            margin: 0 0 0.5rem 0;
        }

    .s-banner-wrapper {
        right: 1rem;
        bottom: 1rem;
    }

        .s-banner-wrapper a img {
            width: 214px;
        }

        .s-banner-wrapper a div {
            position: absolute;
            top: 50%;
            font-weight: bold;
            display: block;
            font-size: 18px;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            line-height: 1.3;
            z-index: 100;
        }

        .s-banner-wrapper .close-btn {
            display: block;
            width: 15px;
            height: 15px;
            background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/white-cross.png);
            background-size: 100%;
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            z-index: 100;
        }
}

@media (max-width: 991px) {
    .banner-inner-txt h1 {
        font-size: 1.75rem;
    }

    main {
        top: 0;
        margin-top: -72px;
    }

    footer .menu-wrapper {
        display: none;
    }

    .grad-student-img-wrapper {
        /* margin: 4rem;
         */
        position: relative !important;
        max-width: 80%;
        margin: 0 auto 1rem auto;
    }

    .staff-directory-member-red-sq, .staff-directory-member-red-sq-2 {
    }

    .info-group-div.directorate {
        padding: 4rem;
        margin: 0 0 4rem 0;
    }

    .news-letter-cover-div img {
        max-width: 80%;
        max-height: 80%;
        height: 100%;
    }

    .main-banner h1 {
        max-width: 1000px;
        margin: 1rem 0 0 0;
        font-size: 1.2rem;
    }

    .lightbox img {
        height: 100%;
        max-height: 80%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        width: 90%;
        height: auto;
    }

    .event-detail-mobile-show-date {
        display: inline-block;
    }

    .event-detail-mobile-hide-date {
        display: none;
    }

    /* .related-news-div.left-news-div::before { */
    /* content: ''; */
    /* position: absolute; */
    /* top: 0px; */
    /* left: 0; */
    /* display: none; */
    /* width: 4px; */
    /* height: 120px; */
    /* background: #a02437; */
    /* } */

    .related-news-div.left-news-div {
        border-bottom: none;
        padding: 0rem 0 1rem 0rem;
        position: relative;
        margin: 0rem 0 0 0;
    }

    .d-md-none {
        display: none;
    }

    .event-page-calendar {
        /*display: none;*/
    }

    .course-detail-top-btn {
        display: none;
    }

    .course-information-middle-menu-ul.mobile li a {
        display: block;
        background: #fff;
    }

    .course-detail-sub-content {
        display: none;
        padding: 0px 1.5rem;
    }

    .sub-content-title-td .arrow {
        display: inline-block;
    }

    .course-information-container {
        max-width: 100% !important;
        padding: 0;
    }

    .course-information-middle-menu-ul.mobile {
        display: block;
        top: auto;
        box-shadow: none;
        margin: 0;
    }

        .course-information-middle-menu-ul.mobile li a .arrow {
            position: absolute;
            top: 50%;
            right: 1rem;
            display: block;
            width: 14px;
            height: 7px;
            z-index: 1000;
            background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat;
            background-size: 100%;
            transform: translate(0, -50%);
            background-position: center;
        }

        .course-information-middle-menu-ul.mobile li a.active .arrow {
            position: absolute;
            top: 50%;
            right: 1rem;
            display: block;
            width: 14px;
            height: 7px;
            z-index: 1000;
            background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/up-thin-arrow-white.png) no-repeat;
            background-size: 100%;
            transform: translate(0, -50%);
            background-position: center;
        }

    .course-info-head-bar-bg {
        display: none;
    }

    .apply-btn {
        width: 100% !important;
    }

    .course-information-middle-menu-ul {
        display: none;
    }

    .table-icon-title-td .arrow img {
        width: 18px;
        height: auto;
    }

    .sub-content-title-td {
        cursor: pointer;
    }

        .sub-content-title-td .arrow {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            transition: 0.2s all;
        }

        .sub-content-title-td.active .arrow {
            /* transform: rotate(180deg) translate(0, -50%);
         */
            /* top: 50%;
         */
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%) rotate(180deg);
            transition: 0.2s all;
        }

    .information-table.grey-table td.sub-content {
        display: none;
    }

    .information-table {
        margin: 0;
    }

        .information-table.grey-table .grey-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: skew(0deg, 1deg);
            margin: 1rem 0 0 0;
        }

        .information-table .red-tri {
            position: absolute;
            top: -6px;
            left: 0;
            width: 100%;
            height: 13px;
            background: #a02437;
            transform: skew(0deg, 1deg);
        }

    .table-icon-title-td .red-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(0deg, 0deg);
    }

    .information-table td {
        display: block;
        padding: 0.5rem;
        width: 100%;
    }

    .student-news-div.large-student-news-div {
        height: auto;
    }

    .left-red-bar-div {
        position: relative;
        margin: 0 0 0 1rem;
    }

    .head-img-wrapper {
        display: none;
    }

    .under-head-div {
        position: relative;
        padding: 4rem 0 0 0 !important;
    }

    .head-img-wrapper.mobile {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
    }

        .head-img-wrapper.mobile .under-head-div {
        }

    .head-img-wrapper.mobile {
    }

    .head-img-wrapper.mobile {
        top: 0;
        right: 0;
    }

    .mobile.head-img-wrapper .red-sq {
        top: -270px;
        left: -63px;
    }

    .head-img-wrapper.mobile img {
        float: none;
        /* position: absolute;
         */
        top: -245px;
        left: auto;
        right: 38px;
    }

    .division-head-div {
        margin: 280px 0 0 0;
        background: #fff;
        /* -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
         -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
         box-shadow: 0px 1px 15px -5px rgba(0, 0, 0, 0.35);
         padding: 7rem 9rem 7rem 9rem !important;
         */
        padding: 1rem 2rem !important;
        position: relative;
    }

    .course-intro-div img {
        display: none;
    }

        .course-intro-div img.mobile {
            display: block;
            position: absolute;
            top: -16vh;
            height: 19vh;
            width: auto;
            left: -18px;
        }

    .left-red-bar-div br {
        display: none;
    }

    .course-intro-div .txt {
        padding: 3rem 1rem 2rem 1rem;
        background: #fff;
        -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 1px 15px -5px rgba(0, 0, 0, 0.35);
        line-height: 2rem;
        margin: 12rem auto 2rem auto;
        width: 85%;
        position: relative;
    }

    .course-intro-div img {
        left: -2%;
        position: relative;
        width: 70vw;
        top: 4%;
    }

    .mobile.filter-col .filter-group {
        padding: 1rem;
        /* padding: 1rem;
         */
        position: relative;
        margin: 0;
        /* border-bottom: 2px dashed;
         */
    }

        .mobile.filter-col .filter-group .brand-red {
            cursor: pointer;
        }

        .mobile.filter-col .filter-group .arrow {
            position: absolute;
            top: 50%;
            right: 0;
            display: block;
            width: 14px;
            height: 7px;
            z-index: 1000;
            background: #f5f5f5 url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow.png) no-repeat;
            background-size: 100%;
            transform: translate(0, -50%);
            background-position: center;
        }

        .mobile.filter-col .filter-group .active.brand-red .arrow {
            position: absolute;
            top: 50%;
            right: 0;
            display: block;
            width: 14px;
            height: 7px;
            z-index: 1000;
            background: #f5f5f5 url(/ResourcePackages/CPCE_Theme/assets/dist/img/up-thin-arrow-red.png) no-repeat;
            background-size: 100%;
            transform: translate(0, -50%);
            background-position: center;
        }

    .mobile.filter-col .filter-ul {
        display: none;
    }

    .mobile.filter-col .filter-group::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/dot-bg.png);
        background-size: 9px;
    }

    .programme-course-search-ui {
        background: #a02437;
        padding: 1rem;
    }

        .programme-course-search-ui h1 {
            color: #fff;
            font-size: 1rem;
            font-weight: normal;
            position: relative;
            cursor: pointer;
            padding: 0;
            margin: 0;
        }

    .course-search-title-arrow {
        display: block;
    }

    .programme-course-search-ui h1.active .course-search-title-arrow {
        transform: rotate(180deg);
        position: absolute;
        display: block;
        right: 0;
        width: 20px;
        height: 20px;
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow-red.png) no-repeat #fff;
        background-size: 10px auto;
        top: 50%;
        border-radius: 1rem;
        background-position: center;
        transform: translate(0px, -50%) rotate(180deg);
    }

    .programme-course-search-ui input {
        background: #fff;
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon-black.png) no-repeat #fff;
        background-position: 10px center;
        background-size: 18px;
        height: 40px;
        width: 100%;
        margin: 0.5rem 0 0.5rem 0;
        border: none;
    }

    .programme-filter-search-btn {
        background: #fff;
        color: #a02437;
        height: 50px;
        width: 100% !important;
    }

    .programme-filter-reset-btn {
        height: 50px;
        width: 100% !important;
        margin-top: 0.5rem !important;
    }

    .programme-filter-search-input {
        height: 50px;
        width: 50%;
        padding: 0 0 0 2.5rem;
        margin: 0 0.5rem 0 0;
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon-black.png) no-repeat;
        background-position: 10px center;
        background-size: 18px;
    }

    .filters-div {
        /* display: none;
         */
    }

    .mobile.display-filter {
        display: table;
        margin: 1rem 0 1rem 0;
        /* float: left;
         */
        width: 100%;
    }

        .mobile.display-filter li {
            display: inline-block;
            width: 50%;
            padding: 0;
            margin: 0;
            float: left;
        }

            .mobile.display-filter li:last-child {
                text-align: right;
            }

    .grid-view-block {
        padding: 0;
    }

    #slider-range {
        width: 95%;
        margin: 0 0 0 3%;
    }

    footer .menu-main-ul {
        margin: 1rem 0 0 0;
        display: block;
    }

        footer .menu-main-ul a {
            font-size: 20px;
            padding: 0.5rem 0 0.5rem 1rem;
            display: block;
        }

    .overlay-menu .menu-main-ul li {
        border-bottom: 1px solid #bc9090;
    }

    .menu-main-ul a.menu-column-title {
        margin: 0 0 0.5rem 0;
        font-size: 1.5rem;
        padding: 0.5rem 0 0.5rem 1rem;
        /* border-bottom: 1px solid;
         */
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow-white.png) no-repeat;
        background-position: 96% center;
        background-size: 16px;
    }

    .overlay-menu .menu-main-ul li a.menu-column-title {
        margin: 0;
        padding: 0.5rem 0 0.5rem 0rem;
        display: block;
    }

    .menu-main-ul li ul.sublevel-menu li::before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background: #a5a5a5;
        position: absolute;
        top: 50%;
        left: 0;
        transform: rotate(45deg) translate(0, -50%);
    }

    .menu-main-ul li.menu-column-title::before {
        display: none;
    }

    .overlay-menu .menu-main-ul li ul.sublevel-menu {
        display: none;
        padding: 0;
    }

        .overlay-menu .menu-main-ul li ul.sublevel-menu li {
            margin: 0;
            padding: 0 0 0 1rem;
        }

            .overlay-menu .menu-main-ul li ul.sublevel-menu li:last-child {
                border: 0;
            }

            .overlay-menu .menu-main-ul li ul.sublevel-menu li::before {
                background: #fff;
            }

    .menu-main-ul li ul.sublevel-menu li a {
        padding: 0.5rem 0 0.5rem 0rem;
        display: block;
    }
    /*
    .overlay-menu .menu-main-ul a {
        font-size: 20px;
    }
    */

    /*menu*/

    header {
        z-index: 3000;
    }

    .overlay-menu-close-btn {
        width: 50px;
        height: 50px;
        font-size: 10px;
        background-size: 25% !important;
        background-position: center 25% !important;
        padding: 30px 0 0 0;
    }

        .overlay-menu-close-btn.overlay-menu-close-btn-mobile {
            display: none;
            width: 100%;
            background-size: 20px !important;
            background-position: center 22px !important;
        }

    .event-info-div .date-td .date {
        font-size: 16px;
    }

    .event-info-div .info-td .first-line {
        line-height: 17px;
        font-size: 12px;
    }

    .event-info-div .info-td .second-line {
        font-size: 15px;
        line-height: 1.5;
        padding: 0.5rem 0 0 0;
    }

    #datepicker {
        width: 100%;
    }



    .pt-120 {
        padding-top: 2rem;
    }

    .ui-datepicker-inline {
        width: 100% !important;
    }

    .news-content-inner {
        padding: 1rem 2rem 6rem 1rem;
    }

    .news-a-bottom-tag-div {
        display: block;
        padding: 1rem;
        width: 100%;
    }

    .event-info-row {
        width: 100%;
        padding: 0 1rem;
        margin: 0;
    }

    .news-a-arrow-btn-div {
        display: none !important;
    }

    .tell-us-who-you-are-div {
        -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 6px 15px -8px rgba(0, 0, 0, 0.75);
        /*position: relative;
        */
        background: #fff;
        margin: 2rem 0 0 0;
        height: 200px;
    }

        .tell-us-who-you-are-div ul {
            margin: 0;
            display: block;
            padding: 0;
            width: 100%;
            table-layout: fixed;
            padding: 0.5rem 0 0.5rem 0;
        }

            .tell-us-who-you-are-div ul li {
                display: table;
                vertical-align: top;
                text-align: center;
                text-align: left;
                font-size: 20px;
                color: #a02337;
                font-weight: bold;
                width: 100%;
                padding: 0.5rem 1rem;
                position: relative;
            }

                .tell-us-who-you-are-div ul li::after {
                    content: '';
                    /* border-bottom: 1px dotted #000;
         */
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/dot-bg.png);
                    background-size: 7px auto;
                }

                .tell-us-who-you-are-div ul li:last-child::after {
                    display: none;
                }

                .tell-us-who-you-are-div ul li div {
                    display: inline-block;
                    text-align: left;
                    vertical-align: middle;
                    width: 80%;
                }

                .tell-us-who-you-are-div ul li .grey-dot {
                    position: absolute;
                    top: 50%;
                    right: -6px;
                    transform: translate(0, -50%);
                    height: 14px;
                    display: none;
                }

                .tell-us-who-you-are-div ul li img {
                    height: 40px;
                    margin: 0;
                    vertical-align: middle;
                    display: inline-block;
                    padding: 0 1rem 0 0;
                    margin: 0;
                }

    .top-annoucement {
        height: 60px;
        font-size: 12px;
    }

        .top-annoucement .pointer {
            bottom: -20px;
        }

    .accept-cookie-btn img {
        height: 10px;
    }

    .cookie-msg-div {
        display: block;
        color: #fff;
        position: fixed;
        bottom: 1rem;
        /* height: 26px;
         */
        background: #000;
        width: 95%;
        z-index: 1000;
        left: 50%;
        transform: translate(-50%, 0px);
        padding: 1rem;
        font-size: 0.7rem;
    }

    .icon-info-table td {
        text-align: center;
        position: relative;
        padding: 0 2rem;
    }

    .under-personnel-info {
        margin: 2rem 0 0 0rem;
        padding: 0 0 6rem;
    }

    .personnel-info {
        background: #a02437 url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-corner-2.svg) no-repeat;
        color: #fff;
        margin: 4rem 0 0 0rem;
        font-size: 17px;
        padding: 0 0 6rem;
        background-position: 0 100%;
        background-size: 10vw;
        /* width: 100vw;
         */
    }

    .menu-btn.active {
        background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-cross.svg) no-repeat;
        color: #a02437;
        background-size: 16px !important;
        background-position: center 22px !important;
        position: absolute;
        z-index: 999999;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 100000;
    }

    .overlay-menu .menu-wrapper {
        margin-top: 0vh;
        height: 80vh;
        overflow-x: hidden;
    }

    .overlay-search .search-ui-div {
        width: 80%;
    }

    .search-arrow-btn {
        display: block;
        width: 70px;
        height: 66px;
        background: #a02437 url(/ResourcePackages/CPCE_Theme/assets/dist/img/white-small-tri-arrow.png) no-repeat;
        background-position: center center;
        position: absolute;
        top: 5px;
        right: 0;
        background-size: 12px;
    }

    .search-ui-wrapper input {
        font-size: 1.1rem;
        height: 3rem;
    }

    .search-ui-wrapper .search-arrow-btn {
        width: 3rem;
        height: 3rem;
        top: 1rem;
    }

    .middle-nav-ul li {
        /* display: inline-flex;
         */
        list-style-type: none;
        margin: 0 0rem 0rem 0;
        /* float: left;
         */
        text-align: center;
        vertical-align: middle;
        padding: 0 1rem;
        width: 24vw;
    }

    .red-side-title {
        font-size: 1rem;
        text-align: center;
    }

    .middle-nav-ul.large li a.active {
        text-decoration: none;
        color: #7c7c7c;
        font-size: 20px;
        transition: 0.2s all;
        display: table-cell;
        vertical-align: middle;
        color: #a02337;
        border-bottom: 4px solid #a02337;
    }

    .middle-nav-ul.large li a {
        text-decoration: none;
        color: #7c7c7c;
        font-size: 20px;
        /* height: 36px;
         */
        transition: 0.2s all;
        /* height: 100px;
         */
        /* display: table-cell;
         */
        vertical-align: middle;
        border-bottom: 5px solid #fff;
        padding-bottom: 0.5rem;
    }

    .mobile-hide {
        display: none;
    }

    .info-layer.appear .personnel-info-bg {
        background: #a02337 url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-corner-2.svg) no-repeat;
        position: absolute;
        top: 0;
        left: -4vw;
        width: 100%;
        height: 100%;
        z-index: -100;
        background-position: 0 100%;
        background-size: 9vw;
        width: 200vw;
    }

    footer .menu-wrapper ul li.menu-column-title {
        display: block;
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/tri-right.png) no-repeat;
        background-position: 98% center;
        /* background-size: 10px;
         */
        border-bottom: 1px solid #c6c6c6;
        margin: 0 0 0.5rem 0;
        padding: 0.5rem 0 0.5rem 0;
        background-size: 7px;
        /* font-weight: normal;
         */
    }

        footer .menu-wrapper ul li.menu-column-title.active {
            display: block;
            background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/tri-down.png) no-repeat;
            background-position: 98% center;
            background-size: 11px;
        }

        footer .menu-wrapper ul li.menu-column-title:hover {
            cursor: pointer;
        }

    footer .menu-wrapper ul li {
        display: none;
        margin: 0;
    }

    .copyright-sentence {
        width: 80%;
        font-size: 15px;
    }

    .news-date {
        font-size: 15px;
        color: #7c7c7c;
    }

    .news-short-content {
        font-size: 22px;
    }

    .mobile-filter-ui {
        display: block;
        width: 100%;
        background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/thin-grey-arrow.png) no-repeat;
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        color: #a02437 !important;
        margin: 1rem 0 0 0;
        background-position: 97% center;
        background-size: 10px;
    }

    h2 {
        font-size: 30px;
    }

    .mt-150 {
        margin-top: 30px;
    }

    .mt-120 {
        margin-top: 20px;
    }

    .mt-245 {
        margin-top: 15vh;
    }

    nav.top-nav {
        position: fixed;
        bottom: 0;
        top: unset;
        left: 0;
        width: 100%;
        background: #00000099;
        height: 48px;
    }

        nav.top-nav ul li {
            justify-content: center;
        }

            nav.top-nav ul li a {
                width: 55%;
                font-size: 2vw;
                text-align: center;
            }

                nav.top-nav ul li a img {
                    width: 30%;
                }

            nav.top-nav ul li:hover a {
                width: 65%;
                font-size: 3vw;
            }

    .toolDropdown {
        left: 6vw;
        /*transform: translateX(calc(12.5vw - 50%));*/
        top: -3.125rem;
    }


    .banner-cover-content h2 {
        font-size: 42px;
    }

    .i-am-div {
        margin: 1rem 0 0 0;
        font-size: 18px;
    }

        .i-am-div .txt {
            display: block;
            margin: 0 0 0.5rem 0;
        }


    .s-banner-wrapper {
        right: 1rem;
        bottom: 1rem;
    }

        .s-banner-wrapper a img {
            width: 214px;
        }

        .s-banner-wrapper a div {
            position: absolute;
            top: 50%;
            font-weight: bold;
            display: block;
            font-size: 18px;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            line-height: 1.3;
            z-index: 100;
        }

        .s-banner-wrapper .close-btn {
            display: block;
            width: 15px;
            height: 15px;
            background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/white-cross.png);
            background-size: 100%;
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            z-index: 100;
        }

    .mobile-reverse-column {
        flex-direction: column-reverse;
    }

    .skew-img {
        width: auto;
        margin: 0 auto 2rem auto;
        display: block;
    }

    .red-skew-rect-1 .white-region {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 88vh 300px;
        border-color: transparent transparent #fff transparent;
        /* bottom: 0;
         */
        position: absolute;
        right: -27vw;
        /* bottom: 0;
         */
        top: 0;
    }

    .red-skew-rect-1 {
        /* overflow: hidden;
         */
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 88vh 300px;
        border-color: transparent transparent #a02337 transparent;
        top: 45vh;
        position: absolute;
        right: -20vw;
    }

    section {
        font-size: 15px;
    }

    .news-and-events-left-txt {
        font-size: 15px;
        background: #a02337;
        height: 70vh;
        width: 110%;
        padding: 7.5rem 7% !important;
    }

    .news-and-events-left-content {
        display: block;
        max-width: 450px;
        padding: 0 0 0 3%;
        font-size: 15px;
    }

    .news-and-events-left-txt .thin-big-title {
        margin: 0px 0 0 0;
        padding: 0 0 0 0;
        font-weight: 300;
    }

    .news-and-events-left-content {
        display: block;
        max-width: 65%;
        padding: 0 0 0 0;
        font-size: 15px;
    }

    .news-and-events-left-txt .view-all-btn {
        padding: 0 20px 0 0;
        font-size: 1.5rem;
    }

    .news-white-tri-1 {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 165px 10vw 0 0;
        border-color: #fff transparent transparent transparent;
        position: absolute;
        top: -1px;
        left: 0;
    }

    .news-white-tri-2 {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 1185px 50vw;
        border-color: transparent transparent #fff transparent;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .home-news-col .home-news-col-inner {
        width: 100%;
        overflow: initial;
        height: auto;
        transform: rotate(0deg);
        transform-origin: top;
        margin: 0 auto;
        scrollbar-width: none !important;
        /* background: #fff;
         */
        padding: 0 5%;
        margin: 2rem 0 0 0;
        position: relative;
        /* float: left;
         */
        display: table;
    }

    .news-a {
        text-decoration: none;
        color: #222222;
        position: relative;
        display: inline-block;
        /* transform-origin: top left;
         */
        position: relative;
        margin-bottom: 0px !important;
        left: 0;
        background: #fff;
        transform: rotate(0deg);
        transform-origin: center;
        margin-bottom: 2rem !important;
        padding: 0;
        margin: 0;
        width: 100%;
        /* float: left;
         */
        height: auto;
    }

    .home-news-col {
        position: relative;
        /* margin: -15vw 0 0;
         */
        left: auto;
        top: 0;
    }

    .slide-over-txt {
        width: 80%;
        white-space: normal;
        font-size: 21px;
    }

    .thin-arrow {
        width: 12px;
        height: 22px;
        position: relative;
        z-index: 100;
    }

    .thin-arrow-left {
        left: -30%;
        position: absolute;
    }

    .thin-arrow-right {
        right: -30%;
        position: absolute;
    }

    .left-tri {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 40vh 0 40vh 90vw;
        border-color: transparent transparent transparent #a02337;
    }

    .stat-ul {
        display: block;
        font-size: 21px;
        padding: 1rem;
    }

        .stat-ul li {
            display: block;
            padding: 0;
            text-align: left;
            margin: 0 0 2rem 0;
            padding: 2rem 0 2rem 0;
        }

            .stat-ul li br {
                display: none;
            }

    .stat-num {
        font-size: 60px;
        font-weight: 300;
        line-height: 1;
    }

    .stat-div .plus {
        font-size: 37px;
        position: relative;
        left: -10px;
    }

    .stat-div {
        width: 100%;
        font-size: 15px;
        font-weight: 300;
        padding: 0 1rem;
        margin: 0 0 1rem 0;
    }

    .slide-over-txt .view-all-btn {
        font-size: 16px;
    }

    .menu-wrapper .container {
        max-width: 100%;
    }

        .menu-wrapper .container div.row {
            display: block;
        }

        .menu-wrapper .container .col {
            width: 100%;
            display: block;
            margin: 0 0 0 0 !important;
        }

    .footer-bottom-div {
        padding-bottom: 1rem;
    }

        .footer-bottom-div ul li {
            display: block;
            margin: auto;
        }

            .footer-bottom-div ul li:first-child {
                display: block;
                margin: auto;
            }

            .footer-bottom-div ul li a {
                display: block;
                font-size: 15px;
                background: none;
            }

    .overlay-menu .footer-bottom-div ul li a {
        background-position: 92% center;
        padding-right: 1rem;
        font-size: 0.875rem;
    }

    .footer-bottom-container {
        padding-top: 3rem;
        position: relative;
        max-width: 90%;
        font-size: 15px;
        padding-bottom: 10vh;
        padding-left: 0;
        padding-right: 0;
    }

    .overlay-menu .footer-bottom-container {
        max-width: 95%;
    }

    .top-btn-container {
        right: 2vw;
        bottom: 6vh;
    }

    .slide-div {
        text-decoration: none;
        color: #fff;
        text-align: center;
        height: 30vh;
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/wkc-foto-banner.jpg);
        background-size: cover;
    }


    .filter-col {
        display: none;
        -webkit-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 6px 15px -8px rgba(0, 0, 0, 0.75);
    }

    .ui {
        display: inline-block;
        border: 3px solid #fff;
        padding: 0rem 6rem 0rem 1.3rem;
        margin: 0 0 0 1rem;
        color: #fff;
        font-size: 23px;
        text-decoration: none;
    }

        .ui .search-btn {
            display: block;
            width: 35px;
            height: 35px;
            background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon.png) no-repeat;
            background-size: 15px auto;
            background-position: center center;
        }

    .main-banner {
        height: 200px;
    }

    .banner-inner-txt {
        top: 70%;
    }

    .breadcrumb {
        font-size: 0.8rem;
    }

        .breadcrumb h1 {
            font-size: 2rem;
        }

    .display-filter {
        display: none;
        padding: 0;
        margin: 2rem 0 0 0;
        position: relative;
    }

        .display-filter li a.active.display-method.display-method-grid {
            background: #a02337 url(/ResourcePackages/CPCE_Theme/assets/dist/img/grid-4-icon-w.png) no-repeat;
            background-size: 14px;
            background-position: 14px center;
            color: #fff;
        }

        .display-filter li a {
            font-size: 15px;
        }

            .display-filter li a.display-method {
                padding: 0.5rem 1rem 0.5rem 2rem;
                transition: 0.2s all;
            }

                .display-filter li a.display-method.display-method-grid {
                    background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/grid-4-icon.png) no-repeat;
                    background-size: 14px;
                    background-position: 14px center;
                    color: #7c7c7c;
                }

                .display-filter li a.display-method.display-method-list {
                    background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/list-icon.png) no-repeat;
                    background-size: 14px !important;
                    background-position: 14px center !important;
                    color: #7c7c7c;
                }

        .display-filter label {
            font-size: 14px;
        }

    .course-info-wrapper .color-head-line {
        display: block;
        height: 3px;
        /* background: #f06445;
         */
        margin: 0 0 0.5rem 0;
    }

    .course-info-icon {
        height: 29px;
    }

    .course-info-wrapper .course-name {
        font-size: 17px;
        color: #000;
        /* font-weight: bold;
         */
        margin: 1rem 0 0 0;
    }

    .course-info-wrapper .subtitle {
        font-size: 16px;
        color: #000;
        font-weight: bold;
    }

    .course-info-wrapper a {
        font-size: 18px;
        text-decoration: underline;
        color: #7c7c7c;
    }

    .course-info-div {
    }

    .course-info-wrapper img.professor-img {
        width: 40px;
        height: 40px;
        margin: 0 0.3rem 0 0;
    }

    .pagination-ul li a {
        text-decoration: none;
        font-size: 14px;
        color: #000;
        transition: 0.2s all;
    }

    .pagination-arrow.pagination-arrow-left {
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/pagination-arrow.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 2px;
    }

    .pagination-arrow.pagination-arrow-right {
        transform: rotate(180deg);
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/pagination-arrow.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: 2px;
    }

    .display-filter select {
        font-size: 13px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .mobile-stick-1 {
        position: fixed;
        left: 0;
        bottom: 93px;
        width: 50%;
        background: #fff;
        /* padding: 1rem; */
        font-size: 12px;
        height: 75px;
        padding: 10px;
        z-index: 200;
    }

    .mobile-stick-2 {
        /* position: fixed;
         bottom: 93px;
         right: 0;
         width: 50%;
         height: 75px;
         font-size: 15px;
         line-height: 75px;
         z-index: 200;
        padding: 0 0 0 25%;
        */
    }

    .program-logo {
        max-width: 200px;
    }

    .middle-nav-ul li a.active, .middle-nav-ul li a {
        font-size: 15px;
    }

    .middle-nav-ul-wrapper {
        display: block;
        width: 100%;
        overflow: auto;
        height: auto;
        overflow-y: hidden;
    }

    .middle-nav-ul {
        display: inline-flex !important;
        width: auto;
        position: relative;
        z-index: 100;
        display: inline-flex;
    }

    .middle-nav-ul-wrapper::-webkit-scrollbar {
        display: none;
    }

    .middle-nav-ul li a.active {
        text-decoration: underline;
        color: #a02337;
        text-decoration-color: #a02337 !important;
        text-underline-offset: 15px;
        text-decoration-thickness: 8px !important;
    }

    .pb-120 {
        padding-bottom: 0px;
    }

    .selected-course-info-subtitle {
        font-size: 23px;
        font-weight: bold;
        color: #464646;
    }

    .course-info-group {
        font-size: 15px;
    }

    .you-may-interest-title {
        font-size: 30px;
        font-weight: bold;
        margin: 0 0 2rem 0;
    }
}

@media (max-width: 640px) {
    .banner-inner-txt h1{
        font-size: 1.5rem;
    }

    .slide-over-txt {
        width: 90%;
        font-size: 15px;
    }

    .news-white-tri-2 {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 1181px 91vw;
        border-color: transparent transparent #fff transparent;
        position: absolute;
        bottom: 0;
        right: -220px;
        /* display: none;
         */
    }

    .red-skew-rect-1 {
        /* overflow: hidden;
         */
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 105vh 300px;
        border-color: transparent transparent #a02337 transparent;
        top: 85vh;
        position: absolute;
        right: -12vw;
    }

        .red-skew-rect-1 .white-region {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 105vh 350px;
            border-color: transparent transparent #fff transparent;
            /* bottom: 0;
         */
            position: absolute;
            right: -38vw;
            /* bottom: 0;
         */
            top: 0;
        }
}

@media (max-width: 480px) {


    .overlay-menu-close-btn.overlay-menu-close-btn-mobile {
        /* display: none;
         width: 100%;
         background-size: 20px !important;
         background-position: center 22px !important;
         */
        color: #a02437;
        text-decoration: none;
        position: absolute;
        top: 0;
        background-size: 50% !important;
        background-position: center 17px !important;
        left: 0;
        font-size: 12px;
        width: 100%;
        height: 100%;
        padding: 43px 0 0 0;
        background-size: 19px !important;
    }

    .home-banner {
        height: 77vh;
        width: 100vw;
        /* background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/home-main-banner.jpg) no-repeat;
         */
        background-size: cover;
        position: relative;
        overflow: hidden;
    }

    .grid-sizer {
        width: 100%;
        /* Change the width for even smaller screens */
    }

    .top-annoucement {
        font-size: 10px;
    }

        .top-annoucement img {
            width: 1.3rem;
        }

    .search-btn.active img {
        height: 1rem;
    }


    .banner-cover-content h2 {
        font-size: 33px;
    }


    .s-banner-wrapper {
        right: 1rem;
        bottom: 1rem;
    }

    .red-skew-rect-1 {
        /* overflow: hidden;
         */
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 75vh 185px;
        border-color: transparent transparent #a02337 transparent;
        top: 85vh;
        position: absolute;
        right: 0vw;
    }

        .red-skew-rect-1 .white-region {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 88vh 262px;
            border-color: transparent transparent #fff transparent;
            /* bottom: 0;
         */
            position: absolute;
            right: -49vw;
            /* bottom: 0;
         */
            top: 0;
        }

    .skew-img {
        width: 100%;
        margin: 0 0 2rem 0;
    }

    .i-am-div {
        margin: 1rem 0 0 0;
        font-size: 18px;
    }

    .slide-over-txt .view-all-btn {
        font-size: 13px;
    }

    h2 {
        font-size: 30px;
    }

    section {
        font-size: 16px;
        margin-top: 1rem !important;
    }

    .news-and-events-left-content {
        display: block;
        max-width: 85%;
        padding: 0 0 0 0;
        font-size: 16px;
    }

    .news-short-content {
        font-size: 16px;
    }

    .stat-ul li {
        display: block;
        padding: 0;
        text-align: left;
        margin: 0 0 1rem 0;
        padding: 0 0 0 0;
    }

    .stat-div {
        width: 100%;
        font-size: 16px;
        font-weight: 300;
        padding: 0 1rem;
        margin: 0 0 1rem 0;
    }

    .stat-ul {
        display: block;
        font-size: 15px;
        padding: 1rem;
        float: left;
    }

    .stat-num {
        font-size: 38px;
        font-weight: 300;
    }

    .menu-main-ul li {
        list-style-type: none;
        margin: 0 0 0.5rem 0;
    }

        .menu-main-ul li.menu-column-title {
            margin: 0 0 0.5rem 0;
            font-size: 1.5rem;
            padding: 0.5rem 0 0.5rem 1rem;
            border-bottom: 1px solid;
            background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/down-thin-arrow-white.png) no-repeat;
            background-position: 96% center;
            background-size: 16px;
        }

    .view-all-btn {
        display: inline-block;
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/white-arrow.png) no-repeat;
        text-decoration: none;
        color: #fff;
        padding: 0 20px 0 0;
        /* background-position: 100% 0;
         */
        background-position: right;
        background-size: 7px;
        position: relative;
        z-index: 200;
        font-weight: 300;
    }

    .red-side-title {
        font-size: 0.75rem;
        font-weight: 500;
        padding-right: 0.3rem !important;
    }

    .footer-bottom-div ul li a {
        display: block;
        font-size: 16px;
        background: none;
    }

    .overlay-menu .footer-bottom-div ul li a {
        padding-right: 20px;
        font-size: 0.5rem;
    }

    .top-btn-container {
        right: 0.5rem;
        bottom: 3.5rem;
    }


    .ui {
        display: inline-block;
        border: 3px solid #fff;
        padding: 0rem 6rem 0rem 1.3rem;
        margin: 0 0 0 1rem;
        color: #fff;
        font-size: 15px;
        text-decoration: none;
    }

        .ui .search-btn {
            display: block;
            width: 23px;
            height: 23px;
            background: #fff url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon.png) no-repeat;
            background-size: 12px auto;
            background-position: center center;
        }

    .breadcrumb {
        font-size: 14px;
        width: 100%;
        position: relative;
        margin: 0 auto;
        padding: 0 !important;
    }

    .display-filter label {
        font-size: 14px;
    }

    .display-filter li {
        display: inline-block;
        margin: 0 0rem 0 0;
    }

    .course-info-wrapper a {
        font-size: 13px;
        text-decoration: underline;
        color: #7c7c7c;
        line-height: 1.4 !important;
        display: block;
    }

    .mobile-stick-1 {
        position: fixed;
        left: 0;
        bottom: 71px;
        width: 50%;
        background: #fff;
        /* padding: 1rem;
         */
        font-size: 9px;
        height: 55px;
        padding: 10px;
        z-index: 200;
    }

    .middle-nav-ul li a.active, .middle-nav-ul li a {
        font-size: 16px;
        text-decoration-thickness: 4px !important;
    }

    .selected-course-info-subtitle {
        font-size: 18px;
        font-weight: bold;
        color: #464646;
    }

    .course-info-group {
        font-size: 16px;
    }

    .you-may-interest-title {
        font-size: 23px;
        font-weight: bold;
        margin: 0 0 2rem 0;
    }

    .course-info-wrapper img.professor-img {
        width: 35px;
        height: 35px;
        margin: 0 0.3rem 0 0;
    }
}

/* new style */
body {
    margin: 0px;
    width: 100%;
}
/* basic css~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.bg-grayf9f9f9 {
    background-color:#f9f9f9;
}
.color-white {
    color: #fff;
}

/*poly red */
.color-red {
    color: #a02337;
}

.color-gray {
    color: #666666;
}

.color-gray444444 {
    color: #444444;
}

.color-gray222222 {
    color: #222222;
}

.color-gray333333 {
    color: #333333;
}

.color-gray606060 {
    color: #606060;
}

.color-black {
    color: black;
}

.font-size-07rem {
    font-size: 0.7rem;
}

.font-size-0875rem {
    font-size: 0.875rem;
}

.font-size-1rem {
    font-size: 1rem;
}

.font-size-1-1rem {
    font-size: 1.1rem;
}

.font-size-1-2rem {
    font-size: 1.2rem;
}

.font-size-1-2-5rem {
    font-size: 1.25rem;
}

.font-size-1-3rem {
    font-size: 1.3rem;
}
.font-size-1-3-7-5rem {
    font-size: 1.375rem;
}

.font-size-1-5rem {
    font-size: 1.5rem;
}

.font-size-1-7-5rem {
    font-size: 1.75rem;
}

.font-size-2rem {
    font-size: 2rem;
}

.font-size-2-5rem {
    font-size: 2.5rem;
}

.font-size-3rem {
    font-size: 3rem;
}

.font-size-3-5rem {
    font-size: 3.5rem;
}

.font-size-5rem {
    font-size: 5rem;
}

.font-weight-100 {
    font-weight: 100;
}

.font-weight-200 {
    font-weight: 200;
}

.font-weight-300 {
    font-weight: 300;
}

.font-weight-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.font-weight-900 {
    font-weight: 900;
}

.lh-25 {
    line-height: 25px;
}

.main-part {
    width: 100%;
    overflow: hidden;
}

.limited-background {
    width: 100%;
    overflow: hidden;
    font-family: "Roboto", sans-serif;
    margin-top: -72px;
}

.limited-background-div {
    width: 100%;
    overflow: hidden;
}

/*css for home-banner~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.iv-home-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

.home-banner > video {
    width: 100%;
}

/*.banner-cover-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    z-index: 1;
    text-align: center;
    font-weight: 900;
    width: 80%;
}

    .banner-cover-content > h2 {
        width: 100%;
        margin: 10px;
    }

    .banner-cover-content > h3 {
        width: 100%;
        margin: 15px;
    }*/

.search-div {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    height: 3rem;
    width: 40rem;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

a.pull-down-ui, a.pull-down-ui:hover, a.pull-down-ui:visited {
    text-align: left;
    width: 70%;
    text-decoration: none;
    color: #fff;
    margin-left: 15px;
}

.search-button {
    height: 100%;
    aspect-ratio: 1/1;
    border: none;
    border-radius: 3px 2px 2px 3px;
    background-color: #fff;
    color: #a02337;
}

.home-s-banner-wrapper {
    position: absolute;
    z-index: 1;
    padding: 0px;
    margin: 0px;
    width: 300px;
    aspect-ratio: 16/9;
    bottom: 20px;
    right: 10px;
    cursor: pointer;
}

.home-s-banner-wrapper-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.home-s-banner-wrapper-div-img {
    width: 100%;
    height: 100%;
    filter: brightness(0.7);
}

.home-banner-close-btn {
    position: absolute;
    top: 9%;
    right: 7%;
    z-index: 2;
    color: #ede4e4;
    border: none;
    background-color: transparent;
}

.home-banner-sbanner-a-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    text-decoration: none;
}

.home-banner-sbanner-a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    text-align: center;
    z-index: 0;
}

.background-pattern {
    position: absolute;
    right: -665px;
    bottom: -600px;
}

    .background-pattern > div {
        width: 1000px;
        height: 1000px;
        background-color: #a02337;
        clip-path: polygon(34% 0%, 34% 0%, 34% 100%, 0% 100%);
    }
/*css for home-section-1~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.home-section-1 {
    width: 100%;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tell Us widget */
.tell-us-div {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    width: 95%;
    margin: 10px;
    z-index: 2;
}

.tell-us-div-container {
    width: 100%;
    margin-bottom: 3rem;
}

.tell-us-div-title {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .tell-us-div-title h2 {
        color: #A02337;
    }

.tell-us-div-bg-purple .tell-us-div-title h2 {
    color: #90468b;
}

.tell-us-div-bg-grey .tell-us-div-title h2 {
    color: #58595b;
}

.tell-us-div-bg-blue .tell-us-div-title h2 {
    color: #0072bb;
}

.tell-us-div-bg-orange .tell-us-div-title h2 {
    color: #d66d00;
}

.tell-us-div-bg-green .tell-us-div-title h2 {
    color: #099c8a;
}

.tell-us-div-content {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 9rem;
    background-color: #fff;
    z-index: 1;
    padding: 10px;
    padding-bottom: 10px;
    border-radius: 5px;
}

.tell-us-div-content-div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 20%;
    height: 100%;
}

.grey-dot-bg {
    display: none;
}

.grey-dot {
    width: 10px;
}

.tell-us-div-content-div-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60%;
    margin: 8px;
}

    .tell-us-div-content-div-icon img {
        width: 3rem;
    }

.tell-us-div-content-div-text {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

    .tell-us-div-content-div-text a {
        margin: 0px;
        padding: 0px;
        text-align: center;
        text-decoration: none;
        font-weight: 500;
        color: #A02337;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

.tell-us-div-bg-purple .tell-us-div-content-div-text a {
    color: #90468b;
}

.tell-us-div-bg-grey .tell-us-div-content-div-text a {
    color: #58595b;
}

.tell-us-div-bg-blue .tell-us-div-content-div-text a {
    color: #0072bb;
}

.tell-us-div-bg-orange .tell-us-div-content-div-text a {
    color: #d66d00;
}

.tell-us-div-bg-green .tell-us-div-content-div-text a {
    color: #099c8a;
}

/* End of Tell Us widget */

.home-section-1-introduce-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 600px;
    margin-top: 30px;
}

.home-section-1-introduce-div-left {
    height: 100%;
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/*.home-section-1-introduce-div-title {
    width: 100%;
    margin-bottom: 25px;
}*/

.home-section-1-introduce-div-content {
    width: 100%;
}

    .home-section-1-introduce-div-content > h6 {
    }

.home-section-1-introduce-div-right {
    width: 40%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background-pattern2 {
    display: none;
}

.home-section-1-introduce-div-image-bg {
    position: relative;
    right: -20%;
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

.landing-diamond-image-div {
    width: 100%;
}

.home-section-1-introduce-div-image-bg-size {
    width: 90%;
    aspect-ratio: 1/1;
    border-radius: 40px;
    overflow: hidden;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15% auto;
}

    .home-section-1-introduce-div-image-bg-size a {
        display: flex;
        justify-content: center;
        aspect-ratio: 1/1;
    }

.home-section-1-introduce-div-image {
    width: 150%;
    height: 150%;
    transform: rotate(-45deg);
    object-fit: cover;
    flex-shrink: 0;
}

.home-section-1-bottom {
    width: 100%;
    height: 120px;
}

.home-section-1-introduce-div-mobile {
    display: none;
}
/*css for home-section-2~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.home-section-2 {
    width: 100%;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
}

.section-2-banner-div {
    width: 100%;
}

/*    .section-2-banner-div img {
        width: 100%;
    }*/

.home-section-2-logo-pattern-div {
    width: 50%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: -30%;
}

.home-section-2-logo-pattern-logo {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-section-2-logo-pattern {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 0px 40px 0px 0px;
    overflow: hidden;
    transform: rotate(45deg);
    background-color: #a02337;
    z-index: 1;
}

.home-section-2-logo-pattern-logo-image-background {
    position: absolute;
    left: 60%;
    width: 50%;
    text-align: center;
    z-index: 2;
}

.home-section-2-logo-pattern-logo img {
    width: 100%;
    padding: 0.5rem;
    transition: all 1s;
}

.section-2-content-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    margin-top: 20px;
}

.section-2-content-left {
    width: 30%;
}

.section-2-content-right {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.graduates-div {
    display: flex;
    align-items: self-start;
    justify-content: start;
    flex-wrap: wrap;
    width: 100%;
}

    .graduates-div.upper {
    }

    .graduates-div.lower {
    }

.graduates-number-item {
    width: 30%;
    /* height: 15rem;*/
}

/*.graduates-div.lower .graduates-number-item {
    padding-top: 2rem;
}*/

.graduates-number-img-wrapper {
    width: 100%;
    height: 6rem;
    aspect-ratio: 16/9;
}

    .graduates-number-img-wrapper img {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }

.graduates-number-item-inner {
    display: flex;
    justify-content: center;
    align-items: start;
    text-align: center;
    flex-wrap: wrap;
    width: 100%;
}

.graduates-number {
    width: 100%;
    text-align: center;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.cpces-vision-div {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    word-wrap: break-word;
}

/*

.graduates-number2 {
    width: 15rem;
    height: 20rem;
    padding-top: 50px;
    text-align:center;
}

.graduates-number2-img-div {
    width: 100%;
    height: 6rem;
}

.graduates-number2 > div {
}

    .graduates-number2 > div > h2 {
        display: inline;
    }

    .graduates-number2 > div > h3 {
        display: inline;
    }

    .graduates-number2 > div > h5 {
        display: inline;
    }

.graduates-number2 > h5 {
}
        */


/*css for home-section-3~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.home-section-3 {
    width: 100%;
    margin: 0px;
    position: relative;
    margin-top: 20px;
}

.section-3-background-pattern-1 {
    position: absolute;
    top: -83px;
    right: -800px;
    background-color: #a02337;
    height: 1000px;
    aspect-ratio: 1/1;
    transform: rotate(-128deg) skewX(-38deg) scale(1, 0.866);
    border-radius: 75px;
    z-index: -1;
}

.section-3-background-pattern-2 {
    position: absolute;
    bottom: -200px;
    left: -700px;
    background-color: #f5f5f5;
    height: 800px;
    aspect-ratio: 1/1;
    transform: rotate(-128deg) skewX(-38deg) scale(1, 0.866);
    border-radius: 25px;
    z-index: -1;
}

.home-section-3-mobile-date-event-div {
    display: none;
}

.slick-list-div-title {
    width: 100%;
    height: 8rem;
    padding-top: 4rem;
    position: relative;
}

    .slick-list-div-title > div {
        position: absolute;
        height: 100%;
        width: 20rem;
        right: 4%;
        top: 20%;
        text-align: justify;
    }

.home-section-3-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
    margin-top: 4.5rem;
}

.home-section-3-mobile-content-div {
    display: none;
}

.slick-list-div {
    width: 80%;
    margin-top: 0px;
    /* height: 25em; */
}

.slick-list-container {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    /* height: 25rem; */
    position: relative;
    flex-direction: row-reverse;
}

    .slick-list-container::-webkit-scrollbar {
        display: none;
    }

    .slick-list-container .slick-list {
        padding: 0 0 0 2rem !important;
    }

.slick-list-content-card {
    width: 18rem;
    /* height: 24rem; */
    margin: 0.6rem;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
    border-radius: 5px 5px 5px 5px;
    position: relative;
    background: #fff;
}

.slick-list-content-card-image-div {
    /* width: 18rem; */
    width: 100%;
    aspect-ratio: 16 / 9;
    /* height: 45%; */
}

    .slick-list-content-card-image-div > img {
        width: 100%;
        height: 100%;
        border-radius: 5px 5px 0px 0px;
        object-fit: cover;
    }

.slick-list-content-card-content-div {
    width: 100%;
    /*height: 55%;*/
    height: 13rem;
    background-color: #fff;
    border-radius: 0px 0px 5px 5px;
    padding: 0.5rem;
}

.slick-list-content-card-content-div-date {
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 15%;
    padding: 5px;
}

.slick-list-content-card-content-div-date-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    white-space: pre-line;
}


.slick-list-content-card-content-div-title {
    width:fit-content;
   /* width: 100%;*/
    margin: 0px;
    padding: 5px;
    height: 50%;
    text-overflow: ellipsis;
    line-height: 22px;
}

.slick-list-content-card-content-div-title-link {
    /*display:-webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: pre-line;
    -webkit-line-clamp: 3;
    ;*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: pre-line;
}

.slick-list-content-card-bottom-div {
    width: 100%;
    height: 5rem;
    margin: 0px;
    padding: 5px 10px;
    border-style: solid;
    border-color: #f5f5f5;
    border-width: 2px 0px 0px 0px;
    position: absolute;
    bottom: 0;
}

.slick-list-content-card-bottom-div-text {
    white-space: pre-line;
    margin: 0px;
}

.slink-view-all-div {
    width: 20%;
    height: 20rem;
    text-align: center;
}

.slink-view-all-div-view-all-img {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 10px;
}

.slink-view-all-div-text {
    margin-top: 3rem;
    color: #fff;
    display: inline;
    position: relative;
    float: right;
    margin-right: 35px;
    right: 0;
}

.slink-view-all-div-text a, .slink-view-all-div-text a:hover{
    color:#fff;
}

.home-section-3-content-control {
    width: 100%;
    margin: 10px;
}

.slick-to-left {
    cursor: pointer;
    display: inline-block;
    background-image: url(/ResourcePackages/CPCE_Theme/assets/dist/img/grey-arrow-left.png);
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 60% 60%;
    width: 40px;
    height: 40px;
}

.slick-to-right {
    cursor: pointer;
    display: inline-block;
    background-image: url(/ResourcePackages/CPCE_Theme/assets/dist/img/grey-arrow-right.png);
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 60% 60%;
    width: 40px;
    height: 40px;
}

.event-list-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-list-wrapper {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.event-list-card {
    margin: 20px;
    width: 100%;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-wrap: wrap;
}

.event-list-card-left {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 7px;
}

.event-list-card-left-year {
    font-size: 0.8rem;
    font-weight: 300;
    line-height: 6px;
}

.event-list-card-left-month {
    font-size: 0.8rem;
    font-weight: 300;
}

.event-list-card-left-date {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
}

.event-list-card-right {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}

.event-list-card-right-t1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: nowrap;
}

    .event-list-card-right-t1 .event-unit {
        width: 150px;
        margin: 0px;
        padding: 0px;
        text-align: start;
        font-weight: 300;
    }

    .event-list-card-right-t1 .event-type {
        width: 50%;
        margin: 0px;
        padding: 0px;
        text-align: start;
        font-weight: 300;
    }

.event-list-card-right-t2 {
    width:fit-content;
    /*width: 100%;*/
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
}

    .event-list-card-right-t2 .event-title {
        width: 100%;
        margin: 0px;
        padding: 0px;
        text-align: start;
        font-weight: 400;
        font-size: 1.3rem;
    }

.home-section-3-mobile {
    display: none;
}
/*css for home-section-4~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.home-section-4 {
    width: 100%;
    margin: 0px;
    padding: 0px;
}


#xc-carousel-landing {
    /*content: '';
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: absolute;*/
}

#xc-carousel-indicators {
    display: none;
}

#xc-carousel-inner {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    position: relative;
}

#xc-carousel-item {
    width: 100%;
    height: 100%;
}

#xc-carousel-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#xc-carousel {
    height: 100%;
    bottom: 0px;
    margin: 0px;
    padding: 0px;
}

.xc-carousel-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xc-carousel-view-all {
}

.xc-carousel-view-all-img {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 10px;
}
/*css for media query~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media only screen and (min-width: 1400px) {
}

@media only screen and (max-width: 1400px) {
    .home-section-1-introduce-div-image-bg-size {
        width: 65%;
    }
}
/*font-size >media only screen and (max-width: 1200px)*/
@media only screen and (max-width: 1200px) {
    .font-size-07rem {
        font-size: 0.65rem;
    }

    .font-size-0875rem {
        font-size: 0.8rem;
    }

    .font-size-1rem {
        font-size: 0.9rem;
    }

    .font-size-1-1rem {
        font-size: 1rem;
    }

    .font-size-1-2rem {
        font-size: 1.05rem;
    }

    .font-size-1-2-5rem {
        font-size: 1.05rem;
    }

    .font-size-1-3rem {
        font-size: 1.1rem;
    }

    .font-size-1-3-7-5rem {
        font-size: 1.125rem;
    }

    .font-size-1-5rem {
        font-size: 1.3rem;
    }

    .font-size-1-7-5rem {
        font-size: 1.55rem;
    }

    .font-size-2rem {
        font-size: 1.8rem;
    }

    .font-size-2-5rem {
        font-size: 2.25rem;
    }

    .font-size-3rem {
        font-size: 2.75rem;
    }

    .font-size-3-5rem {
        font-size: 3.2rem;
    }

    .font-size-5rem {
        font-size: 4.5rem;
    }

    .home-section-1-introduce-div-left {
        width: 50%;
    }

    .background-pattern {
        right: -750px;
    }

    .home-s-banner-wrapper {
        width: 250px;
    }
}
/*font-size >media only screen and (max-width: 992px)*/
@media only screen and (max-width: 992px) {
    .font-size-07rem {
        font-size: 0.5rem;
    }

    .font-size-0875rem {
        font-size: 0.8rem;
    }

    .font-size-1rem {
        font-size: 0.75rem;
    }

    .font-size-1-1rem {
        font-size: 0.85rem;
    }

    .font-size-1-2rem {
        font-size: 0.9rem;
    }

    .font-size-1-2-5rem {
        font-size: 0.95rem;
    }

    .font-size-1-3rem {
        font-size: 1.0rem;
    }

    .font-size-1-3-7-5rem {
        font-size: 1.025rem;
    }

    .font-size-1-5rem {
        font-size: 1.1rem;
    }

    .font-size-1-7-5rem {
        font-size: 1.35rem;
    }

    .font-size-2rem {
        font-size: 1.6rem;
    }

    .font-size-2-5rem {
        font-size: 2.05rem;
    }

    .font-size-3rem {
        font-size: 2.55rem;
    }

    .font-size-3-5rem {
        font-size: 2.9rem;
    }

    .font-size-5rem {
        font-size: 4rem;
    }

    .home-s-banner-wrapper {
        width: 200px;
    }
}
/*font-size >media only screen and (max-width: 768px)*/
@media only screen and (max-width: 768px) {
    .font-size-07rem {
        font-size: 0.45rem;
    }

    .font-size-0875rem {
        font-size: 0.6rem;
    }

    .font-size-1rem {
        font-size: 0.65rem;
    }

    .font-size-1-1rem {
        font-size: 0.7rem;
    }

    .font-size-1-2rem {
        font-size: 0.8rem;
    }

    .font-size-1-2-5rem {
        font-size: 0.85rem;
    }

    .font-size-1-3rem {
        font-size: 0.9rem;
    }

    .font-size-1-3-7-5rem {
        font-size: 0.95rem;
    }

    .font-size-1-5rem {
        font-size: 1rem;
    }

    .font-size-1-7-5rem {
        font-size: 1.15rem;
    }

    .font-size-2rem {
        font-size: 1.4rem;
    }

    .font-size-2-5rem {
        font-size: 1.9rem;
    }

    .font-size-3rem {
        font-size: 2.3rem;
    }

    .font-size-3-5rem {
        font-size: 2.7rem;
    }

    .font-size-5rem {
        font-size: 3.5rem;
    }

    .home-section-1-introduce-div-image-bg-size {
        width: 50%;
    }

    .home-s-banner-wrapper {
        width: 150px;
    }
}
/*for mobile*/
@media only screen and (max-width: 576px) {

    .main-part {
        width: 100%;
        overflow: hidden;
    }

    /*css for home-banner~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .iv-home-banner {
        display: flex;
        align-items: start;
        justify-content: center;
        height: 90vh;
        /* height: 100vh;*/
        position: relative;
        margin-bottom: 20px;
    }

        .iv-home-banner w-100 {
            width: auto;
        }

        .iv-home-banner #xc-carousel-inner {
            height: 90vh;
        }

    .banner-cover-content {
        margin-top: 23%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        position: absolute;
        z-index: 1;
        text-align: center;
        width: 100%;
    }

        .banner-cover-content > h2 {
            width: 80%;
            margin: 10px;
        }

        .banner-cover-content > h3 {
            width: 80%;
            margin: 15px;
            font-size: 1.4rem;
            margin-bottom: 18%;
        }

    .home-banner-video-ui {
        position: absolute;
        bottom: 16px;
        left: 1px;
        z-index: 1;
        padding: 0px;
        margin: 0px;
        width: 100px;
    }

    .home-banner-video-ui-button-mute {
        background: transparent;
        border: none;
        width: 40%;
    }

    .home-banner-video-ui-button-stop {
        background: transparent;
        border: none;
        width: 40%;
    }

    .search-div {
        width: 90%;
        position: relative;
        height: auto;
    }

    .pull-down-ui {
        height: 100%;
        font-size: 1.1rem;
        line-height: 2;
    }

    .search-button {
        position: absolute;
        right: -1%;
        height: 107%;
        aspect-ratio: 1/1;
        border: none;
        background-color: #fff;
        color: #a02337;
    }

    .home-s-banner-wrapper {
        position: absolute;
        z-index: 1;
        padding: 0px;
        margin: 0px;
        width: 220px;
        aspect-ratio: 16/9;
        bottom: 10px;
        right: 10px;
        display: none;
    }

    .home-s-banner-wrapper-div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    .home-s-banner-wrapper-div-img {
        width: 100%;
        height: 100%;
        filter: brightness(0.7);
    }

    .home-banner-close-btn {
        position: absolute;
        top: 2%;
        right: 2%;
        z-index: 1;
        color: #ede4e4;
    }

    .home-banner-sbanner-a-bg {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        text-decoration: none;
    }

    .home-banner-sbanner-a {
        width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font-size: 1rem;
        font-weight: 500;
    }

    .background-pattern {
        display: none;
        position: absolute;
        right: -700px;
        bottom: -900px;
    }

        .background-pattern > div {
            width: 1000px;
            height: 1000px;
            background-color: #a02337;
            clip-path: polygon(31% 0%, 50% 0%, 23% 80%, 0% 80%);
        }
    /*css for home-section-1~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .home-section-1 {
        width: 100%;
        margin: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tell-us-div-title h2 {
        font-size: 2rem;
        font-weight: 500;
    }

    .tell-us-div-content {
        flex-wrap: wrap;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        width: 100%;
        height: auto;
    }

    .tell-us-div-content-div {
        flex-wrap: nowrap;
        width: 100%;
        height: auto;
    }

    .grey-dot-bg {
        display: block;
        width: 100%;
        height: 1px;
        border-width: 1px 0px 0px 0px;
        border-style: solid;
        border-color: #9e9e9e;
    }

    .grey-dot {
        display: none;
    }

    .tell-us-div-content-div-icon {
        width: 15%;
        height: 100%;
    }

        .tell-us-div-content-div-icon img {
            height: 3rem;
        }

    .tell-us-div-content-div-text {
        width: 85%;
        justify-content: start;
    }

        .tell-us-div-content-div-text a {
            font-size: 1.22rem;
            font-weight: 500;
        }

    .home-section-1-introduce-div {
        justify-content: center;
        flex-wrap: wrap;
        height: 100%;
    }

    .home-section-1-introduce-div-left {
        margin: 3rem 0;
        order: 2;
        width: 100%;
    }

    .home-section-1-introduce-div-title {
        width: 100%;
        margin-bottom: 25px;
    }

    .home-section-1-introduce-div-content {
        width: 100%;
    }


    .home-section-1-introduce-div-right {
        width: 100%;
        order: 1;
        position: relative;
    }

    .home-section-1-introduce-div-image-bg {
        position: relative;
        left: 0;
    }

    .home-section-1-introduce-div-image-bg-size {
        margin-top: 5rem;
        margin-bottom: 5rem;
        width: 75%;
    }

    .landing-diamond-image-div {
        width: 100%;
    }

    .home-section-1-introduce-div-image {
        width: 150%;
        height: 150%;
        transform: rotate(-45deg);
    }

    .home-section-1-bottom {
        width: 100%;
        height: 120px;
        display: none;
    }

    .home-section-1-introduce-div-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .home-section-1-introduce-div-image-bg-size-mobile {
        margin-top: 5rem;
        margin-bottom: 5rem;
        width: 75%;
        aspect-ratio: 1/1;
        border-radius: 40px;
        overflow: hidden;
        transform: rotate(45deg);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .home-section-1-introduce-div-image-mobile {
        width: 150%;
        height: 150%;
        transform: rotate(-45deg);
        object-fit: cover;
    }

    .home-section-1-introduce-div-title-mobile {
        width: 95%;
        margin-bottom: 1rem;
    }

        .home-section-1-introduce-div-title-mobile > h3 {
            font-size: 2rem;
            font-weight: 500;
            color: #a02337;
        }

    .home-section-1-introduce-div-content-mobile {
        width: 95%;
        margin-bottom: 2.5rem;
    }

        .home-section-1-introduce-div-content-mobile > h6 {
            font-size: 1.1rem;
            line-height: 1.8rem;
            font-weight: 400;
        }
    /*css for home-section-2~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .home-section-2 {
        width: 100%;
        margin: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
    }

    .section-2-banner-div {
        width: 100%;
        height: 416px;
        position: relative;
    }

        .section-2-banner-div img {
            position: absolute;
            object-fit: cover;
            object-position: right;
            height: 100%;
        }

    .home-section-2-logo-pattern-div {
        width: 700px;
        height: 1268px;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        left: -475px;
        top: -250px;
    }

    .home-section-2-logo-pattern {
        width: 80%;
        border-radius: 0px 70px 0px 0px;
    }

    .home-section-2-logo-pattern-logo-image-background {
        position: absolute;
        left: 65%;
        width: 37%;
        text-align: center;
        z-index: 2;
    }

    .home-section-2-logo-pattern-logo img {
        padding: 2rem;
    }

    .section-2-content-div {
        margin: 0px;
        margin-top: 40px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .section-2-content-left {
        width: 0%;
    }

    .section-2-content-right {
        width: 100%;
    }

    .graduates-div {
        display: flex;
        align-items: start;
        justify-content: start;
        flex-wrap: wrap;
        width: 50%;
        margin-bottom: 2rem;
        margin-left: 50%;
    }

        .graduates-div.lower {
            flex-wrap: wrap;
            margin-left: 0;
            justify-content: space-between;
            width: 100%;
        }

    .graduates-number-item {
        width: 100%;
        height: auto;
        padding-top: 0px;
        text-align: left;
    }

    .graduates-div.lower .graduates-number-item {
        padding: 0.5rem 1rem;
        width: 45%;
    }

    .graduates-div.lower .graduates-number-img-wrapper img {
        max-height: 70%;
    }


    .graduates-number-item-inner {
        text-align: left;
    }


    .cpces-vision-div {
        width: 95%;
        margin: 10px;
    }


    /*css for home-section-3~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .home-section-3 {
        margin-top: 20px;
    }

    .home-section-3-content {
        display: none;
    }

    .event-list-container {
        display: none;
    }

    .home-section-3-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 80rpx;
    }

    .home-section-3-mobile-title {
        width: 92%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

        .home-section-3-mobile-title > h2 {
            color: #a02337;
            font-size: 2rem;
            font-weight: 400;
        }

    .home-section-3-mobile-view-all {
        width: 92%;
        margin-bottom: 30px;
    }

        .home-section-3-mobile-view-all > a {
            text-decoration: none;
            font-size: 1.6rem;
            font-weight: 400;
            color: black;
        }

    .home-section-3-mobile-content-div {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .home-section-3-mobile-content-card {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 92%;
        margin-bottom: 10px;
        background-color: #ffffff;
    }

    .mobile-card-img {
        width: 100%;
        height: 62%;
        position: relative;
    }

        .mobile-card-img > img {
            width: 100%;
        }

    .mobile-card-tag-news {
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        align-items: end;
        justify-content: center;
        width: 70px;
        height: 35px;
        background-color: #a02337;
    }

    .mobile-card-tag-event {
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        align-items: end;
        justify-content: center;
        width: 70px;
        height: 35px;
        background-color: #f06445;
    }

    .mobile-card-tag {
        color: #fff;
        font-size: 0.8rem;
        font-weight: 100;
    }

    .mobile-card-date {
        width: 100%;
        height: 5%;
        margin-top: 3%;
        margin-bottom: 1%;
    }

    .mobile-card-date-text {
        font-size: 0.8rem;
        color: #666666;
        line-height: 1rem;
    }

    .mobile-card-text {
        height: 28%;
    }

    .mobile-card-text-text {
        font-size: 1.3rem;
        color: #666666;
        font-weight: 400;
        color: black;
    }

    .home-section-3-mobile-date-event-div {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 40px;
    }

    .mobile-date-event-card {
        display: flex;
        align-items: start;
        justify-content: center;
        width: 93%;
        margin-bottom: 40px;
    }

    .mobile-date-event-card-left {
        width: 15%;
        text-align: center;
    }

    .mobile-date-event-card-month {
        width: 100%;
    }

    .mobile-date-event-card-month-text {
        margin: 0px;
        width: 100%;
        color: #666666;
        font-size: 0.8rem;
        font-weight: 400;
    }

    .mobile-date-event-card-date {
        width: 100%;
    }

    .mobile-date-event-card-date-text {
        margin: 0px;
        width: 100%;
        color: #666666;
        font-size: 1.5rem;
        font-weight: 400;
    }

    .date-horizontal-line {
        color: #666666;
        font-size: 1rem;
        font-weight: 400;
    }

    .mobile-date-event-card-right {
        width: 85%;
    }

    .mobile-date-event-card-event-type {
        width: 100%;
    }

    .mobile-date-event-card-event-type-text {
        margin: 0px;
        width: 100%;
        font-size: 0.8rem;
        font-weight: 400;
    }

    .mobile-date-event-card-event-title {
        width: 100%;
    }

    .mobile-date-event-card-event-title-text {
        margin: 0px;
        width: 100%;
        font-size: 1.2rem;
        font-weight: 400;
    }
    /*css for home-section-4~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .home-section-4 {
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    .xc-carousel-view-all {
        display: none;
    }

    /*    #xc-carousel-control-prev {
        opacity: 1;
        top:25%;
        bottom:25%;
    }*/

    /* #xc-prev-icon {
        background-image: url(/ResourcePackages/CPCE_Theme/assets/dist/img/Path 3454.svg);
        width: 2.1rem;
        height: 2.1rem;
    }*/

    /*    #xc-carousel-control-next {
        opacity: 1;
        top: 25%;
        bottom: 25%;
    }*/

    /*#xc-next-icon {
        background-image: url(/ResourcePackages/CPCE_Theme/assets/dist/img/Path 3455.svg);
        width: 2.3rem;
        height: 2.1rem;
    }*/
}

@media only screen and (max-width: 380px) {
    .background-pattern {
        position: absolute;
        right: -740px;
        bottom: -900px;
    }

    .section-2-content-div {
        margin: 0px;
        margin-top: 80px;
        padding-left: 10px;
        padding-right: 10px;
    }
}
/*iv css for research vvvvv*/
.iv-color-b9b9b9 {
    color: #b9b9b9;
}

#clear-box-shadow {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.iv-searchList-container {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    height: 500px;
    overflow-y: scroll;
}

    .iv-searchList-container::-webkit-scrollbar {
        height: 10px;
        width: 10px;
        border-radius: 5px;
        background: #a1a1a1;
    }

    .iv-searchList-container::-webkit-scrollbar-thumb {
        background: #a02337;
        -webkit-border-radius: 5px;
    }

.iv-background-color-f5f5f5 {
    background-color: #f5f5f5 !important;
}

.iv-border-color-f5f5f5 {
    border-style: solid;
    border-color: #f5f5f5;
    border-width: 0 0 2px 0;
}

.iv-search-checkbox {
    background-color: #CACACA;
    border-radius: unset !important;
    border-color: #CACACA;
}

#iv-clear-after-css {
}

    #iv-clear-after-css:before {
        content: none;
    }

/*iv css for research ^^^^^*/
.ivsearch-div {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    /*margin-top:20px;
    padding-left:10%;
    padding-right:10%;*/
}

.ivsearch-div-search-title-div {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.ivsearch-action-button-search {
    width: 20px;
    height: 20px;
    padding: 0px;
    border-width: 1px;
    border-color: #A02337;
    border-style: solid;
    border-radius: 15px;
    background-color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
}

.ivsearch-action-button-img-search {
    width: 60%;
}

.ivsearch-div-search-title-div-text {
    color: #A02337;
    font-weight: 600;
}

.ivsearch-div-background {
    width: 100%;
    display: block;
}

.ivsearch-div-search {
    width: 100%;
}

.ivresearch-search-input {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon-black.png) no-repeat #fff;
    background-position: 10px center;
    background-size: 20px;
    padding-left: 2.5rem;
    border: 1px solid #707070;
    border-radius: 3px;
    font-size: 1rem;
    font-weight: 300;
    width: 100%;
    height: 2.5rem;
    margin-top: 10px;
    background-color: #f5f5f5;
}

    .ivresearch-search-input::placeholder {
        color: #c1c1c1;
    }

.ivsearch-btn {
    font-size: 1.2rem;
    font-weight: 100;
    background-color: #a02337;
    color: #ffffff;
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid rgba(0,0,0,0);
    margin-top: 10px;
    height: 2.5rem;
}

.ivsearch-reset-btn {
    font-size: 1.2rem;
    font-weight: 100;
    background-color: #6c757d;
    color: #ffffff;
    width: 100%;
    border-radius: 0.25rem;
    border: 1px solid rgba(0,0,0,0);
    margin-top: 10px;
    height: 2.5rem;
}

.ivside-column-group {
}

.ivfilter-group {
    margin-top: 60px;
}

.filter-group .bi-question-circle-fill,
.ivfilter-group .bi-question-circle-fill {
    display: none;
}

.iv-filter-group-title-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iv-filter-group-title {
}

.ivsearch-action-button {
    width: 20px;
    height: 20px;
    padding: 0px;
    border-width: 1px;
    border-color: #ffffff;
    border-style: solid;
    border-radius: 15px;
    background-color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
}

.ivsearch-action-button-img {
    width: 60%;
}

.ivfilter-ul {
    margin: 0;
    padding: 0.5rem 1rem;
    background: #fff;
    box-shadow: 0px 3px 6px #00000029;
    border-radius: 5px;
    overflow-y: auto;
    max-height: 20rem;
    scrollbar-color: red orange;
    scrollbar-width: thin;
}

.page_news .ivfilter-ul, .page_event .ivfilter-ul {
    max-height: 32rem;
}

.ivfilter-ul::-webkit-scrollbar {
    width: 6px;
}

.ivfilter-ul::-webkit-scrollbar-track {
    /*box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
    background-color: #A1A1A1;
    border-right: 4px #fff solid;
}

.ivfilter-ul::-webkit-scrollbar-thumb {
    background-color: #A02337;
    border-right: 4px #fff solid;
    background-clip: padding-box;
    /*outline: 1px solid slategrey;*/
}

.ivfilter-ul li {
    list-style-type: none;
    background: transparent;
    padding: 0.5rem 0rem;
    margin: 0;
}

    .ivfilter-ul li.active {
        background: #a02337;
        color: #fff;
    }

    .ivfilter-ul li label {
        display: block;
        font-weight: 300;
        color: black;
        font-size: 1.1rem;
    }

    .ivfilter-ul li input {
        margin: 0.25rem 0 0 0;
        background: #ccc;
        border: 0;
    }

.ivfilter-ul-bottom {
    display: none;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/dot-bg.png);
    background-size: 9px;
}

.ivdeg180 {
    transform: rotate(-180deg);
}

.ivdeg360 {
    transform: rotate(0deg);
}

.filter-div {
}

.ivd-display {
    display: block !important;
}

.iv-atagwhite {
    color: #ffffff;
    text-decoration: none;
}

    .iv-atagwhite:hover {
        color: #ffffff;
        text-decoration: none;
    }

@media only screen and (max-width: 992px) {
    /*ui-slider-div maybe del*/
    .ivsearch-div {
        display: flex;
        align-items: start;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 0px;
        background-color: #ffffff;
        padding-left: 7%;
        padding-right: 7%;
        padding-bottom: 20px;
    }

    .ivsearch-div-search-title-div {
        display: flex;
        justify-content: space-between;
        width: 100%;
        background-color: #A02337;
        padding: 20px;
    }

    .ivsearch-action-button-search {
        width: 20px;
        height: 20px;
        padding: 0px;
        border-width: 1px;
        border-color: #A02337;
        border-style: solid;
        border-radius: 15px;
        background-color: #ffffff;
        display: none;
        align-items: center;
        justify-content: center;
    }

    .ivsearch-action-button-img-search {
        width: 60%;
    }

    .ivsearch-div-search-title-div-text {
        color: #fff;
        font-weight: 400;
    }

    .ivsearch-div-search {
        width: 100%;
        background-color: #A02337;
        padding: 20px;
    }

    .ivsearch-div-search-title-div {
        display: flex;
        justify-content: space-between;
    }

    .ivsearch-div-background {
        width: 100%;
        background-color: #f5f5f5;
        display: none;
        box-shadow: 0px 6px 15px -8px rgba(0, 0, 0, 0.75);
    }

    .ivresearch-search-input {
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/search-icon-black.png) no-repeat transparent;
        background-position: 10px center;
        background-size: 20px;
        padding-left: 2.5rem;
        border: 1px solid #707070;
        border-radius: 5px;
        font-size: 1rem;
        font-weight: 300;
        width: 100%;
        margin-top: 10px;
        background-color: #fff;
        height: 40px;
    }

        .ivresearch-search-input::placeholder {
            color: #c1c1c1;
        }

    .ivsearch-btn {
        font-size: 1.2rem;
        font-weight: 100;
        color: #A02337;
        width: 100%;
        border-radius: 0.25rem;
        border: 1px solid rgba(0,0,0,0);
        margin-top: 10px;
        background-color: #fff;
        height: 40px;
    }

        .ivsearch-btn:hover {
            background-color: #A02337;
            color: #fff;
            border: solid 1px white;
        }

    .ivside-column-group {
        padding: 10px;
    }

    .ivfilter-group {
        margin-top: 0px;
        padding: 1rem;
    }

    .iv-filter-group-title-div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .iv-filter-group-title {
    }

    .ivsearch-action-button {
        width: 20px;
        height: 20px;
        padding: 0px;
        border-width: 1px;
        border-color: #f5f5f5;
        border-style: solid;
        border-radius: 15px;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ivsearch-action-button-img {
        width: 60%;
    }


    .ivfilter-ul {
        display: none;
        margin: 0;
        padding: 0.5rem 1rem;
        background: #fff;
        overflow-y: auto;
        max-height: 20rem;
        scrollbar-color: red orange;
        scrollbar-width: thin;
        background-color: #fff;
        box-shadow: 0px 3px 6px #00000029;
        border-radius: 5px;
    }


        .ivfilter-ul::-webkit-scrollbar {
            width: 6px;
        }

        .ivfilter-ul::-webkit-scrollbar-track {
            /*box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
            background-color: #A1A1A1;
            border-right: 4px #fff solid;
        }

        .ivfilter-ul::-webkit-scrollbar-thumb {
            background-color: #A02337;
            border-right: 4px #fff solid;
            background-clip: padding-box;
            /*outline: 1px solid slategrey;*/
        }

        .ivfilter-ul li {
            list-style-type: none;
            background: transparent;
            padding: 0.5rem 0rem;
            margin: 0;
        }

            .ivfilter-ul li.active {
                background: #a02337;
                color: #fff;
            }

            .ivfilter-ul li label {
                display: block;
                font-weight: 300;
            }

            .ivfilter-ul li input {
                margin: 0.25rem 0 0 0;
                background: #ccc;
                border: 0;
            }

    .ivfilter-ul-bottom {
        display: block;
        width: 100%;
        height: 2px;
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/dot-bg.png);
        background-size: 9px;
    }

    .filter-div {
        background-color: #fff;
        padding-left: 7%;
        padding-right: 7%;
        padding-bottom: 20px;
    }

    .ivd-display {
        display: none;
    }

    .polynews-category-select {
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/category-icon.png) no-repeat;
        background-position: 10px center;
        background-size: 20px;
        padding-left: 2.5rem;
        border: 1px solid #707070;
        border-radius: 5px;
        margin-top: 10px;
        color: #000000;
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: #f5f5f5;
        height: 40px;
    }

    .polynews-category-select-wrapper {
        background-color: #A02337;
    }

    .polyEvents-category-select {
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/category-icon.png) no-repeat;
        background-position: 10px center;
        background-size: 20px;
        padding-left: 2.5rem;
        border: 1px solid #707070;
        border-radius: 5px;
        margin-top: 10px;
        color: #000000;
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: #f5f5f5;
        height: 40px;
    }

    .polyEvents-category-select-wrapper {
        background-color: #A02337;
    }
}

@media only screen and (max-width: 540px) {
    .ivsearch-div {
        padding-left: 0px;
        padding-right: 0px;
    }

    .filter-div {
        padding-left: 0px;
        padding-right: 0px;
    }
}

.time-line-start-end-dot {
    width: 100%;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

    .time-line-start-end-dot > div {
        background-color: #b5b5b5;
        height: 10px;
        width: 10px;
        transform: rotate(45deg);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
    }

        .time-line-start-end-dot > div > div {
            background-color: #ffffff;
            height: 6px;
            width: 6px;
            border-radius: 1px;
        }

.time-line-content-div {
    display: flex;
    width: 100%;
    justify-content: center;
}

.time-line-content-background {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.time-line-dot-mid {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2px;
    background-color: #b5b5b5;
}

.time-line-dot {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    height: 20px;
    width: 20px;
}

.mobile-time-line-dot-mid {
    display: none;
}

.time-line-dot > div {
    background-color: #a02337;
    height: 10px;
    width: 10px;
    transform: rotate(45deg);
    border-radius: 2px;
}

.time-line-content-background-div {
    width: 49%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    padding: 10px;
}

    .time-line-content-background-div a {
        position: relative;
        color: #A02337
    }

        .time-line-content-background-div a::after {
            position: absolute;
            font-family: 'Bootstrap-icons';
            content: '\F138';
            bottom: -5px;
        }
/*~~~~~~*/
.time-line-content-background-div-text-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 95%;
}

/*~~~~~~*/
.time-line-content-background-div-image-div {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-wrap: nowrap;
    width: 95%;
    position: relative;
    aspect-ratio: 16/9;
}

.time-line-content-image-bg {
    width: 95%;
    aspect-ratio: 16/9;
    background-color: white;
}

.time-line-content-image {
    width: 100%;
    height: 100%;
}

.time-line-content-pattern {
    position: absolute;
    width: 75%;
    aspect-ratio: 16/9;
    z-index: -1;
    bottom: 0px;
    right: 0px;
    background-color: #a02337;
}

.iv-turn-text-image {
    flex-direction: row-reverse;
}

@media only screen and (max-width: 768px) {
    .time-line-content-div {
        display: flex;
        width: 100%;
        justify-content: start;
    }

    .time-line-start-end-dot {
        width: 100%;
        height: 18px;
        display: flex;
        justify-content: start;
        position: relative;
    }

        .time-line-start-end-dot > div {
            position: relative;
            left: -4px;
        }

    .time-line-dot-mid {
        display: none;
    }

    .mobile-time-line-dot-mid {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2px;
        background-color: #b5b5b5;
    }

    .mobile-time-line-dot {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        height: 20px;
        width: 20px;
    }

        .mobile-time-line-dot > div {
            background-color: #a02337;
            height: 10px;
            width: 10px;
            transform: rotate(45deg);
            border-radius: 2px;
        }

    .time-line-content-background {
        flex-wrap: wrap;
    }

    .time-line-content-background-div {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        padding: 10px;
    }

    .iv-turn-text-image {
        flex-direction: row;
    }

    .time-line-content-pattern {
        left: 0px;
    }
}


.lightBox-background {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background: rgb(0 0 0 / 60%);
}
/* lightBox container */
.lightBox-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.lightBox-item {
    width: 100%;
    height: 100%;
}

    .lightBox-item div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 100%;
        margin-left: 10%;
        margin-right: 10%;
        /*margin-top: 10%;*/
    }

    .lightBox-item img {
        max-height: 100%;
        width: auto!important;
    }
/* Next & previous buttons */
.prevLightBox, .nextLightBox {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 3px;
    user-select: none;
    text-decoration: none;
    z-index: 1001;
}

/* Position the "next button" to the right */
.nextLightBox {
    right: 0;
    border-radius: 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prevLightBox:hover, .nextLightBox:hover {
        background-color: rgba(0,0,0,0.8);
        color: #a02337;
        text-decoration: none;
    }

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .prev, .next, .text {
        font-size: 11px
    }
}

/* programme Detail page*/
.information-table .basic_info .col-6 {
    min-height: 46px;
}

/* event Detail page*/
.speaker_detail_box {
    background: #f5f5f5;
    padding: 2.5rem;
}

.main_content ul {
    list-style: none;
    padding: 0;
    color: #666666;
    font-weight: 400;
}

    .main_content ul li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 10px;
    }

        .main_content ul li:before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%) rotate(45deg);
            border-radius: 2px;
            width: 10px;
            height: 10px;
            background: #666666;
        }
/* end event Detail page*/

/*for search page*/
.iv-search-page-info-wrapper {
    position: relative;
    display: block;
    background: #fff;
    line-height: 1.3;
    padding: 0 0 1rem 0;
    font-size: 14px;
    margin: 0 0 1rem 0;
    height: 100%;
    box-shadow: 0px 7px 10px #0000000f;
    border-radius: 10px;
}

/*news letters || news letter detail*/
.newsletters-div {
    text-overflow: ellipsis;
    height: 7rem;
}
.newslettersTitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    white-space: pre-line;
    color:#A02337;
    text-decoration:none;
    max-width:fit-content;
}
    a.newslettersTitle:hover {
        color: #A02337;
    } 

.year_deco::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #FC7F3D;
    margin-right: 10px;
    margin-top: -2px;
    vertical-align: middle;
    border-radius: 2px;
    transform: rotate(45deg);
}

.ratio-4x3 .bi-newspaper::before {
    content: "\f4a3";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/*end news letters*/

/* Graduate/Student Success Stories */
.graduate-student-success-storie-card {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.gsss-intro-div {
    width: 99.9%;
    height: 100%;
    position: relative;
    padding: 2rem 5rem 3rem;
}

    .gsss-intro-div::before {
        content: '';
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-quote-left.png);
        width: 30px;
        height: 21px;
        position: absolute;
        background-position: center;
        background-size: contain;
        left: 0;
        margin: 0 2rem;
    }

    .gsss-intro-div::after {
        content: '';
        background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/red-quote-right.png);
        width: 30px;
        height: 21px;
        position: absolute;
        background-position: center;
        background-size: contain;
        right: 0;
        margin: 0 3rem;
        transform: rotate(180deg) scaleX(-1);
    }

.gsss-right-icon {
    font-size: 1.5rem;
    padding: 20px;
    margin: auto 0;
}

.iv-object-fit-cover {
    object-fit: cover;
}

.iv-object-fit-contain {
    object-fit: contain;
}

.ratio3x4 {
    --bs-aspect-ratio: 133%;
}

.text-overflow-short{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}


/* end Graduate/Student Success Stories */
/* book and journal papers */
.bookAndJournalPapersTextBox{
    border-color:#A02337;
    border-width:0px 0px 6px 0px;
    border-style:solid;
    color:#A02337;
}

.container_box_shadow {
    box-shadow: 0px 4px 12px -8px rgba(0, 0, 0, 0.75);
}

.textHoverGray:hover {
    color: #666666!important;
}
/* end book and journal papers */
/* annual report detail page */
@media only screen and (min-width:992px) {
    .card.AnnualReportItem {
        flex-direction: row;
        min-height: 240px;
    }
    .card.AnnualReportItem a{
    width:40%;
    }
    .card.AnnualReportItem .card-body {
        width: 60%;
    }
}
/* End annual report detail page */

.color-red-hover:hover div{
    color:#A02337!important;
}

/*programme detail page*/
.iv-course-information-container {
    min-height: 680px;
    display:block;
    margin-top:3.5rem;
}
.iv-course-info-head-bar-bg {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/course-info-head-bar.png) no-repeat;
    background-size: 100% 90px;
}
.iv-course-information-middle-menu-ul-top{
    position:relative;
    height:1px;
    width:100%;
}
.iv-course-information-middle-menu-ul {
    margin-left: 0;
    padding: 0;
    position: absolute;
    top: 0;
    background: #fff;
    border-top: 6px solid #999999;
    position: relative;
    box-shadow: 3px 7px 15px -4px rgba(0, 0, 0, 0.75);
}

    .iv-course-information-middle-menu-ul div {
        cursor:pointer;
        display:flex;
        align-items:center;
        justify-content:space-between;
        width: 100%;
        padding: 15px;
        color: #484848;
        border-bottom: 1px solid #e8e8e8;
        position: relative;
    }

        .iv-course-information-middle-menu-ul div a {
            text-decoration: none;
            color: #484848;
        }

        .iv-course-information-middle-menu-ul div .arrow {
            display:none;
        }

    .iv-course-information-middle-menu-ul .active a {
        color: white;
    }

    .iv-course-information-middle-menu-ul .active a:hover {
        color: white;
    }

    .iv-course-information-middle-menu-ul .active {
        /*background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/selected-item-bg-strip.jpg) no-repeat #a02337 !important;*/
        background: #a02337 !important;
        left: 0;
        top: 0;
    }

.iv-course-information-container-mobile{
    display:none;
}

    .iv-course-detail-sub-content {
        color:#444444;
    }

    .iv-course-detail-sub-content :is(h1, h2, h3) {
        color: #A02337;
    }

.iv-course-detail-sub-content-mobile {
    cursor:pointer;
}

.iv-course-detail-sub-content-mobile-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:100%!important;
    padding:0;
    
}

    .iv-course-detail-sub-content-mobile-container div {
        color: #484848;
    }

    .iv-course-detail-sub-content-mobile-container button {
        border-style: none;
        color: #484848;
        background: none;
    }

.iv-course-detail-sub-content-mobile-div .active {
    background: url(/ResourcePackages/CPCE_Theme/assets/dist/img/selected-item-bg-strip.jpg) no-repeat #a02337 !important;
    left: 0;
    top: 0;
}

    .iv-course-detail-sub-content-mobile-div .active div {
        color: white!important;
    }

    .iv-course-detail-sub-content-mobile-div .active button {
        transform: rotate(180deg);
        color: white;
    }

@media only screen and (max-width: 992px) {
    .noPaddingInM{
        padding:0px !important;
    }
}

    @media only screen and (max-width: 768px) {
        .iv-course-information-container {
            display: none;
        }

        .iv-course-information-container-mobile {
            display: block;
        }
    }
    /*end programme detail page*/

    /*
    loading icon
*/
    .iv-loadingicon {
        font-size: 30px;
    }

        .iv-loadingicon::before {
            animation: loadingicon 5s infinite;
            -webkit-animation: loadingicon 1s infinite linear;
        }

    @keyframes loadingicon {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* search result(search box) search bar */
    .search-box-div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

        .search-box-div input {
            width: 100%;
            height: 100%;
            min-width: 70%;
        }

        .search-box-div button {
            width: 2rem;
            height: 2rem;
            padding: 0px;
            background-color: #A02337;
        }

    .search-box-icon {
        font-size: 1.2rem;
        color: white;
    }

    iframe {
        aspect-ratio: 16/9;
    }