@font-face {
    font-family: 'Helvetica Neue Medium';
    src: url(../Fonts/HelveticaNeueLTStd-Md.woff);
    unicode-range: U+00-024F;
}
@font-face {
    font-family: 'Helvetica Neue Bold';
    src: url(../Fonts/HelveticaNeueLTStd-Bd.woff);
    unicode-range: U+00-024F;
}
@font-face {
    font-family: 'Helvetica Neue Roman';
    src: url(../Fonts/HelveticaNeueLTStd-Roman.woff);
    unicode-range: U+00-024F;
}

@font-face {
    font-family: "Noto Sans HK";
    src: local("Noto Sans HK"), sans-serif;
    unicode-range: U+4E00-9FFF;
}
.zh-HK, .zh-HK p , .zh-HK .fontStyleD2 {
font-family: "Helvetica Neue Roman", 'Noto Sans HK', sans-serif!important;
}
a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}
#section-news .fontStyleB{
font-size:53px;
}
.dean-image{
	max-width:25.5%
}
.flex-item-Sou{
position: relative;
    flex: 1;
    padding: 0px;
    box-sizing: border-box;
    width: 100%;
}
.flex-item-Sou a{
color: #1EAEDB!important;
    cursor: pointer;
    text-decoration: none;
}
.news-content .fontStyleB{
font-size:53px;
}
body {
    position: relative;
    display: block;
    color: #000000;
    background-color: #a2a2a2;
    font-size: 15px;
    font-weight: normal;
    font-family: "Helvetica Neue Medium", 'Noto Sans HK', 'arial', sans-serif;
    min-width: 320px;
    margin: 0 auto;
}
.clearBoth{
    clear: both;
}
.btn-download-doc{
	padding: 2% 9%;
    background: #00d7be;
    margin-bottom: 30px;
}
.btn-download-doc span{
	color:white!important;
}
.newsletter-box .flex-item .image-container img{
	width:auto!important;
}
.normal-news-box-wrapper flex-item{
	max-width:320px;	
}

.souvenirs .description{
	font-size: 1.2rem;
	
}
.year-select{
	float:right;
	width:20%;
}
.btn-order{
	float: right;
	font-size: 15px;
	padding: 10px;
	background: #00d7be;
	color: white;
}
/*///////// common items ////////////*/
/*a{
    color: transparent;
}*/
a img {border: none; }
h1, h2, h3, h4, h5, h6{
    margin-bottom: 20px;
    font-family: "Helvetica Neue Medium", "Noto Sans HK", 'arial', sans-serif;
    line-height: 1.2;
}
p{
    font-family: "Helvetica Neue Roman", "Helvetica Neue Medium", "Noto Sans HK", 'arial', sans-serif;
}
h4 {
    font-size: 3.2rem;
}
h6{
    font-size: 2rem;
}
pre, blockquote, dl, figure, table, p, ul, ol, form{
    margin-bottom: 1rem;
}
ul{
    list-style: disc inside;
}
li{
    margin-bottom: 0;
}
ul ul, ul ol, ol ol, ol ul {
    margin: 5px 5px 5px 20px;
    font-size: 90%;
}
.BoldText{
    font-weight: bold;
}
.ItalicText{
    font-style: italic;
}
// 20210915
.figure-box img {
    image-rendering: -webkit-optimize-contrast;
}
img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
img.fullWidthImage{
    width: 100%;
	image-rendering: auto;
}
.NoMarginTop{
    margin-top: 0;
}
.NoMarginBottom{
    margin-bottom: 0;
}
.flex-break {
  flex-basis: 100%;
  height: 0;
}
.first-level-menu-header a{
	color:black;
	
}
.first-level-menu-header a:hover{
	color:white;
	
}
#topright-menu-holder{
	min-height:250px;
}
/*//////////// breadcrumb ///////////////*/
ol:not(.navbar-nav), ul:not(.navbar-nav) {
    padding-left: 20px;
    /*list-style: none;*/
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    border-radius: 0.25rem;
}
.breadcrumb-bar .breadcrumb {
    margin-top: 0;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item {
    text-transform: none;
    padding-right: 5px;
    margin: 0;
    font-family: "Noto Sans HK", "Helvetica Neue Roman";    
}
.breadcrumb-bar .breadcrumb .breadcrumb-item a {
    color: #000000;
    font-size: 15px;
    text-decoration: underline;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item a.active{
    cursor: default;
}
.breadcrumb-bar .breadcrumb .breadcrumb-item a:hover{
    text-decoration: underline;
}
.breadcrumb-item a:not(.btn) {
    cursor: pointer;
}
.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: #6c757d;
    content: "/";
}
/*//////////// main content ////////*/
.site-wrapper{
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    min-width: 320px;
    max-width: 1920px;
    overflow-x: hidden;    
    box-sizing: border-box;
    min-height: 100vh;
}
.main-wrapper{
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    margin-top: 125px;
    box-sizing: border-box;
}
.box-container{
    position: relative;
    display: block;
    width: 100%;
    padding: 30px 40px;
    margin: 0 auto;
    box-sizing: border-box;
    max-width: 1280px;
    min-width: 320px;
}
.box-container:after{
    content: "";
    clear: both;
}
.box-container.noVerticalPadding{
    padding-left: 0;
    padding-right: 0;
}
.full-width-container{
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.full-width-container.topBorder{
    border-top: 1px solid #CBCBCB;
}
.full-width-container.bottomBorder{
    border-bottom: 1px solid #CBCBCB;
}
.title-container.box-container{
    padding: 70px 40px 50px 40px;
}
.row {
    position: relative;
    display: block;
}
.row:after{
    content: "";
    clear: both;
}
body > .site-wrapper{
    min-height: 90vh;
}
/*/////////// header ////////////*/
#header {
    position: fixed;/*relative;*/
    z-index: 900;
    border-bottom: 1px solid #CBCBCB;
    width: 100%;
    background-color: #ffffff;
    max-width: 1920px;
}
#header > .box-container{
    background-color: #ffffff;
    z-index: 991;
    padding: 30px 40px 27px 30px;
}
.mainLogo {
    position: relative;
    top: 0;
    left: 0;
    /*width: 380px;*/
    width: 50%;
    height: auto;
    float: left;
    top:25px;
}
.mainLogo:before {
    position: absolute;
    top: 0;
    right: calc(100% - 1px);
    height: 100%;
    content: "";
    background-color: #ffffff;
}
.mainLogo__img {
    image-rendering: auto;
    position: relative;
    z-index: 3;
    /*height: 60px;*/
    width:100%;
}

.mainLogo__img_mobile {
    display: none;
    width: 100%;
}

.mainLogo a {
    display: block;
}
.functional-gp{
    position: relative;
    display: block;
    float: right;
}
.functional-gp .tools-gp{
    display: inline-block;
}
#btn-menu{
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    color: #000000;
    margin: 20px 20px;
    height: 20px;
}
/*#btn-menu:focus,
#btn-menu:hover,
#btn-menu.selected{
    color: #00d7be;
}*/

.desktop {
    display: inline-block;
}

/*  menu --> icon
    20210324
*/
#btn-menu span {
    display: none;
}

#btn-menu #btn-menu-icon {
    position: relative;
    content: "";
    background-image: url(../images/mobile-menu.svg);
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center 100%;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    box-sizing: content-box;
    top: 15px;
}

/*
    20210409: fix desktop view
*/
#btn-menu.selected #btn-menu-icon {
    display: none;
}

#btn-menu.selected:before{
    position: absolute;
    top: -2px;
    left: -33px;
    content: "";
    background-image: url(../images/close.svg);
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center 100%;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    width: 30px;
    height: 30px;
    padding: 0px;
    text-align: center;
    box-sizing: content-box;
    padding-top: 25px;
}
#btn-search{
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    color: #000000;
    font-weight: bold;
    /* margin: 20px 20px; */
    width: 20px;
    height: 20px;
	border: none;
}
#btn-search:focus,
#btn-search:hover,
#btn-search.selected{
    color: #00d7be;
}
#btn-search:before{
    display: inline-block;
    content: "\f002";
    font-family: FontAwesome;
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    margin-top: 4px;
    margin-right: 10px;
}
#btn-language{
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    color: #000000;
    font-weight: bold;
    margin: 20px 20px;
    width: auto;
    height: 20px;
}
#btn-language:focus,
#btn-language:hover,
#btn-language.selected{
    color: #00d7be;
}
.btn-features{
    position: relative;
    display: inline-block; 
    color: #000000;
    font-size: 16px;
    font-family: "Helvetica Neue Bold", 'Noto Sans HK';
}
.btn-features:hover, .btn-features:focus{
    color: #00d7be;
}
.btn-features:before{
    position: relative;
    top: 7px;
    left: 0px;
    content: "";
    background-image: url(../images/arrow_right.svg);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center 100%;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    color: #ffffff;
    width: 25px;
    height: 25px;
    padding: 0px;
    text-align: center;
    z-index: 10;
    box-sizing: content-box; 
}
.btn-features+.btn-features{
    margin-left: 20px;
}
/*/////////// Mega menu ///////////*/
#header #megamenu{
    z-index: 990;
    min-height: 860px;
}
#megamenu{
    position: relative;
    display: none;/*flex;*/
    width: 100%;
    max-width: 1920px;
    height: calc(100vh - 100px);
    flex-direction: row;
    background-color: #f0f0f0;
    box-sizing: border-box;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    -moz-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -moz-transition: -moz-transform 0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -o-transition: -o-transform 0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: -webkit-transform 0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-transition: -webkit-transform 0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform 0s cubic-bezier(0.25, 0.46, 0.45, 0.94);    
}
.animating#megamenu {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
}
#megamenu .menu-column{
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    flex-direction: column;
    background-color: #f0f0f0;
}
#megamenu .first-level{
    flex-basis: 75%;
    max-width: calc(1280px * 0.75 + (100vw - 1280px)/2);
}
#megamenu .first-level .row{
    width: 100%;
}
#megamenu .first-level .first-level-link-holder.flex-box{
    border: none;
}
#megamenu .first-level .first-level-menu-header.columns, 
#megamenu .first-level .first-level-menu-holder.columns{
    height: 100%;
    color: #000000;
    background-color: #f0f0f0;
}
#megamenu .first-level .MenuGroup-tab{
    padding-left: calc((100vw - 1280px)/2);
}
#megamenu .first-level .MenuGroup-tab:hover .first-level-menu-header.columns,
#megamenu .first-level .MenuGroup-tab:focus .first-level-menu-header.columns,
#megamenu .first-level .MenuGroup-tab:hover .first-level-menu-holder.columns,
#megamenu .first-level .MenuGroup-tab:focus .first-level-menu-holder.columns{
    color: #ffffff;
    background-color: #000000;
}
#megamenu .first-level .first-level-menu-header.columns > .box-container, 
#megamenu .first-level .first-level-menu-holder.columns > .box-container{
    padding: 10px 40px;
}
#megamenu .first-level .first-level-menu-header.columns > .box-container > h5{
    padding: 3px 0px 3px 0px;
}
#megamenu .second-level{
    flex-basis: 25%; 
    flex-direction: column;
    height: calc(120% / 2);
    max-width: calc(1280px * 0.25 + (100vw - 1280px)/2);
}
#megamenu .menu-column .flex-box{
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}
#megamenu .menu-column .flex-box.first-level-child{
    border: none;
    align-self: flex-start;  
}
#megamenu .menu-column > .flex-box{
    height: calc((100vh - 100px)/5);
    overflow-y: hidden;
}
#megamenu .menu-column.second-level > .flex-box{
    border-right: none;
    /*padding-right: calc((100vw - 1280px)/2);*/
}
#megamenu .menu-column.second-level > .flex-box:first-child{
    border-bottom: none;
}
#megamenu .second-level-child .flex-box:last-child{
    border-bottom: none;
}
#megamenu .second-level-child.flex-box{
    flex-basis: 100%; 
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: none;/*1px solid #cccccc;*/
}
#megamenu .second-level-child.flex-box:last-child{
    border-bottom: none;
}
#megamenu .third-level.menu-column{
    position: relative;
    display: block;
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 1.5rem;
    background-color: #f0f0f0;
}
#megamenu .third-level .btnMenuLink{
    font-size: 1.5rem;
    padding: 3px 0;
}
#megamenu .third-level .btnMenuLink span.title{
    padding-left: 0px;
}
#megamenu .third-level .btnMenuLink:hover,
#megamenu .third-level .btnMenuLink:focus{
    color: #00d7be;
}
#megamenu .third-level.menu-column > p{
    display: inline-block;
    padding-right: 10%;
}
#megamenu .third-level.menu-column .btnSocial-holder{
    display: block;
    vertical-align: middle;
}
#megamenu #social-menu-holder{
    max-height: none;
    display: block;
}
#megamenu #useful-menu-holder{
    flex: 2;
    max-height: none;
}
#megamenu .nav-tab-btn {
    position: absolute;
    display: none;
    cursor: pointer;
    text-decoration: none;
    width: 36px;
    height: 36px;
    top: 0;
    right: 0;
    padding: 15px;
    padding-left: 50%;
}
#megamenu .nav-tab-btn:before {
    position: absolute;
    top: 15px;
    right: 15px;
    content: "";
    background-image: url(../images/plus.svg);
    background-size: 36px;
    background-repeat: no-repeat;
    background-position: center 100%;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    width: 36px;
    height: 36px;
    padding: 0px;
    text-align: center;
    z-index: 10;
    box-sizing: content-box;
}
/*/////////// Mega Menu open ////////////*/ 
.site-wrapper.MenuOpen{
    /*height: 100vh;*/
}
.site-wrapper.MenuOpen #header{
    max-width: 1920px;
    position: fixed;
    overflow-y: scroll;
    height: calc(100vh + 10px);
}
.site-wrapper.MenuOpen #megamenu{
    display: flex;
}
/*/////////// flex box ////////////*/
.flex-box{
    position: relative;
    display: flex;
    flex: 1;
    padding: 0;
    flex-wrap: wrap;
    flex-direction: row;
}
.flex-item {
    position: relative;
    flex: 1;    
    min-height: 220px;
    padding: 0px;
    box-sizing: border-box;
    width: 100%;
}
.flex-item .text-container{
    padding: 20px;
}
/*////// banner section //////*/  
#section-banner{
    position: relative;
    line-height: 0;
    max-height: 700px;
    overflow: hidden;    
}
#section-banner .content-container.box-container{
    position: absolute;
    padding: 40px 40px 60px 40px;
    box-sizing: border-box;
    max-width: 980px;
    margin-left: calc((100vw - 1280px)/2);
    margin-top: 7vh;
    top: 0;
}
 #section-banner .left-bottom .content-container.box-container{
margin-left: calc((100vw - 1780px)/2);
    top: 230px;
}
 #section-banner .right-top .content-container.box-container{
    text-align: right;
    margin-left: calc((100vw - 720px)/2);
    
}
 #section-banner .right-bottom .content-container.box-container{
margin-left: calc((100vw - 80px)/2);
    top: 230px;

}
#section-banner .content-container.box-container h1{
    display: inline;
    background-color: #ffffff;
    /* padding: 2px; */
    /* line-height: 74px; */
    font-size: 60px;
    box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff;
    -webkit-box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff;
    -moz-box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff;
	padding: 10px 2px 10px 2px;
    line-height: 80px;
}
#section-banner .content-container.box-container h2{
    display: inline;
    background-color: #ffffff;
    /* padding: 2px; */
    /* line-height: 74px; */
    font-size: 60px;
    box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff;
    -webkit-box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff;
    -moz-box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff;
	padding: 10px 2px 10px 2px;
    line-height: 80px;


}
#section-banner .content-container.box-container.on h1{

    background-color: #000000;
    color: #ffffff;
    box-shadow: 20px 0 0 #000000, -20px 0 0 #000000;
    -webkit-box-shadow: 20px 0 0 #000000, -20px 0 0 #000000;
    -moz-box-shadow: 20px 0 0 #000000, -20px 0 0 #000000;    
}
#section-banner .content-container.box-container.on h2{
    background-color: #000000;
    color: #ffffff;
    box-shadow: 20px 0 0 #000000, -20px 0 0 #000000;
    -webkit-box-shadow: 20px 0 0 #000000, -20px 0 0 #000000;
    -moz-box-shadow: 20px 0 0 #000000, -20px 0 0 #000000;    
}
#section-banner .content-container .more-btn{
    position: relative;
    display: inline-block;
    line-height: 1.2em;
    background-color: #ffffff;
    color: #000000;
    padding: 15px 30px;
    margin: 40px -20px;
}
#section-banner .content-container.box-container.on .more-btn{
    background-color: #000000;
    color: #ffffff;
}
#section-banner .content-container .more-btn-text{
    position: relative;
    display: inline-block;
    line-height: 1.2em;
    background-color: #ffffff;
    color: #000000;
    padding: 15px 30px;
    margin: 40px -20px;
}
/*////// quicklink section //////*/  
#section-quicklinks.box-container{
    /*padding-top: 0;*/
}
.ql-box{
    position: relative;
    margin: 40px auto;
    cursor: pointer;
}
.ql-box:first-child{
    margin-top: 20px;
}
.ql-box .flex-item.ql-box-text .text-container{
    padding-right: 10%;
}
.ql-box .flex-item.ql-box-image {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 20%;
    padding: 0;
    background-color: #222222;
    overflow: hidden;
}
.ql-box:nth-child(odd) .ql-box-text.flex-item{
    order: 1;
}    
.ql-box:nth-child(odd) .ql-box-image.flex-item{
    order: 2;
}
.ql-box .flex-item.ql-box-image .image-container{
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
}
.flex-item .image-container img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position : center center;
	image-rendering:auto;
}
.ql-box:hover .flex-item.ql-box-text{
    background-color: #000000;
    color: #ffffff;
}
.ql-box:hover .flex-item.ql-box-image.hover-zoom .image-container, .ql-box:focus .flex-item.ql-box-image.hover-zoom .image-container{
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
@-moz-document url-prefix() {
    .ql-box:hover .flex-item.ql-box-image.hover-zoom .image-container, .ql-box:focus .flex-item.ql-box-image.hover-zoom .image-container{
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }
}
/*////// news & events section //////*/  
.news-box .flex-item{
    min-height: 440px;
    height: 100%;
    margin: 20px auto;
    cursor: pointer;
}
.news-box .flex-item.news-box-text .text-container{
    padding-top: 0;
    padding-right: 20%;
}
.news-box .flex-item.news-box-image {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0%;
    padding: 0;
    background-color: #222222;
    overflow: hidden;
}
.news-box .flex-item.news-box-image .image-container{
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
}
/*.news-box .flex-item.news-box-image .image-container img{
    position: absolute;    
    width: 100%;
    height: 100%;    
    object-fit: cover;
}*/
.news-box .ButtonMore.FuncButton{
    position: absolute;
    bottom: 0;
    right: 0;
}
.news-box:hover .ButtonMore.FuncButton{
    background-color: #00d7be;
    color: #ffffff;
}
.news-box .flex-item.news-box-text .text-container.title, .news-box .flex-item.news-box-text .text-container.date:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;  
    background: rgba(60, 208, 184, 0.6); 
    opacity: 0;
    transition: all 1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
}
.news-box:hover .flex-item.news-box-text .text-container{
	color:#00d7be;
}
.news-box:hover .flex-item.news-box-image{
    background-color: transparent;
}
.news-box:hover .flex-item.news-box-image .image-container:before {
    opacity: 1;
}
.news-box:hover .flex-item.news-box-text{
    color: #00d7be;
}
.news-box:hover .flex-item.news-box-image.hover-zoom .image-container, .news-box:focus .flex-item.news-box-image.hover-zoom .image-container{
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
#news-highlight-primary.news-box{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
    width: 100%;
}
#section-news{
    padding: 100px 40px 120px 40px;
}
.secondary-row > .flex-box{
    display: inline-flex;
    flex: 1;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
    flex-wrap: nowrap;
    width: 50%;
    align-content: flex-start;
    vertical-align: top;
    justify-content: space-between;
    float: left;
    box-sizing: border-box;
}
#section-news .secondary-row > .flex-box-half{
    display: inline-flex;
    flex: 1;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
    flex-wrap: nowrap;
    width: 25%;
    align-content: flex-start;
    vertical-align: top;
    justify-content: space-between;
    float: left;
    box-sizing: border-box;
}
#section-news .secondary-row div:nth-child(1).flex-box-half{
    padding: 0 0 0 0;
}
#section-news .secondary-row div:nth-child(2).flex-box-full{
    padding: 0 0 0 20px;
}
#section-news .secondary-row div:nth-child(3).flex-box-full{
    padding: 0 0 0 20px;
}
#section-news .secondary-row .news-box .image-container video{
    width: 100%;
    height: 100%;
}
#news-highlight-secondary.news-box .news-box-image{
    order: 2;
}
#news-highlight-secondary.news-box .news-box-text{
    order: 1;
}
#news-highlight-secondary.news-box .news-box-text .text-container{
    padding-left: 0;
}
#news-highlight-secondary.news-box .ButtonMore.FuncButton{
    left: 0;
    right: auto;
}
.normal-news-box-wrapper{
    padding: 0 0 0 20px;
}
.normal-news-box.news-box.flex-box{
    padding: 0 20px 0 0;
    flex-direction: column;
    min-height: 480px;
}
.normal-news-box.news-box.flex-box:first-child{
    padding-left: 0;
}
.normal-news-box.news-box.flex-box:last-child{
    padding-right: 0;
}
.normal-news-box.news-box.flex-box .flex-item{
    height: 100%;
    min-height: 0;
}
.normal-news-box.news-box.flex-box .image-container{
    position: relative;
    width: 100%;
    height: 200px;
    margin-bottom: 20px;
} 
.normal-news-box.news-box.flex-box .flex-item.news-box-image{
    min-height: 220px;
    max-height: 220px;
}
.normal-news-box.news-box.flex-box .flex-item.news-box-text{
    min-height: auto;
    display: block;
    margin-top: 0;
}
.normal-news-box.news-box.flex-box .flex-item.news-box-text .text-container{
    padding: 0 0 20px 0;
}
/*////// Gallery box section //////*/  
.gallery-box .flex-item{
    min-height: 400px;
    height: 100%;
    margin: 0 auto;
    cursor: pointer;
}
.gallery-box .flex-item.gallery-box-text .text-container{
    padding-top: 0;
    padding-right: 20%;
}
.gallery-box .flex-item.gallery-box-image {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0%;
	background-color: #222222;
	overflow: hidden;
}
.gallery__controls__inner{
    left:0px !Important;
}
.hidden{
    
    display:none!important;
}
.gallery-box .flex-item.gallery-box-image .image-container{
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
}
.gallery-box .flex-item.gallery-box-image .image-container:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;  
    background: rgba(60, 208, 184, 0.6); 
    opacity: 0;
    transition: all 1s linear;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
}
.gallery-box:hover .flex-item.gallery-box-image .image-container img{
    -webkit-filter: grayscale(100%) contrast(140%) brightness(90%);
    -moz-filter: grayscale(100%) contrast(140%) brightness(90%);
    -ms-filter: grayscale(100%) contrast(140%) brightness(90%);
    -o-filter: grayscale(100%) contrast(140%) brightness(90%);
    filter: grayscale(100%) contrast(140%) brightness(90%);
}
.gallery-box:hover .flex-item.gallery-box-image{
    background-color: transparent;
}
.gallery-box:hover .flex-item.gallery-box-image .image-container:before {
    opacity: 1;
}
.gallery-box:hover .flex-item.gallery-box-image.hover-zoom .image-container, .gallery-box:focus .flex-item.gallery-box-image.hover-zoom .image-container{
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.normal-gallery-box-wrapper{
    padding: 0 0 0 20px;
}
.normal-gallery-box.gallery-box.flex-box{
    display: inline-flex;
    flex-direction: column;
    max-height: 220px;
    width: calc(100%/4 - 10px);
    padding-right: 10px;
    padding-bottom: 10px;
    float: left;
}
.normal-gallery-box.gallery-box.flex-box:first-child{
    padding-left: 0;
}
.normal-gallery-box.gallery-box.flex-box:last-child{
    padding-right: 0;
}
.normal-gallery-box.gallery-box.flex-box .flex-item{
    height: 100%;
    min-height: 0;
}
.normal-gallery-box.gallery-box.flex-box .image-container{
    position: relative;
    width: 100%;
    min-height: 220px;
} 
.normal-gallery-box.gallery-box.flex-box .flex-item.gallery-box-image{
    min-height: 220px;
    max-height: 220px;
}
.normal-gallery-box.gallery-box.flex-box .flex-item.gallery-box-text{
    min-height: auto;
    display: none;
    margin-top: 0;
    position: absolute;
    padding: 20px;    
    z-index: 90;
}
.normal-gallery-box.gallery-box:hover .flex-item.gallery-box-text{
    color: #ffffff;
    display: block;
}
.normal-gallery-box.gallery-box.flex-box .flex-item.gallery-box-text .text-container{
    padding: 0 0 20px 0;
}

/*///////////// footer /////////////*/
#footer{
    position: relative;
    border-top: 1px solid #CBCBCB;
    background-color: #ffffff;
}
#footer .box-container{
    padding-left: 0;
}
#footer .box-container:first-child{
    padding-left: 40px;
}
#footer .box-container.contact-info p{
    margin-bottom: 0;
}
#footer .HKUMed-logo{
    position: relative;
    display: block;
    text-align: right;
}
#footer .HKUMed-logo img{
    width: 100%;
    max-width: 170px;    
}
#footer .row{
    max-width: 1280px;
    margin: 0 auto;
}
#footer a:hover, #footer a:focus{
    color: #00d7be;
    text-decoration: underline;
}
#footer .backTop-row{
    border-bottom: 1px solid #CBCBCB;
}
#footer .backTop-row .box-container{
    text-align: right;
    padding: 10px 40px;
}
#backTop{
    position: relative;
    display: inline-block;
    right: 0;
    text-decoration: none;
    color: #000000;
}
#footer #backTop:hover, #footer #backTop:focus{
    color: #000000;
}
#backTop span{
    position: relative;
    display: inline-block;
    font-size: 20px;
    vertical-align: bottom;
}
#backTop span:before{
    position: relative;
    content: "";
    background-image: url(../images/arrow_up.svg);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center 100%;
    font-size: inherit;
    display: inline-block;
    width: 30px;
    height: 30px;
    padding-right: 10px;
    text-align: center;
    z-index: 580;
    box-sizing: content-box;
    vertical-align: bottom;
}
/*///////////// InnerPage ///////////////*/
.InnerPage #footer{
    border-top: 1px solid #CBCBCB;
}
.InnerPage .content-section{
    padding: 40px 40px;
}
.InnerPage .content-section .flex-item:first-child{
    padding-right: 40px;
}
.InnerPage .content-section p,
.InnerPage .content-section h6,
.InnerPage .content-section a{
    margin-bottom: 15px;
}
.InnerPage .content-section .columns img{
    width: 100%;
}
.InnerPage .header-container{
    padding: 40px 40px 15px 40px;
}
.InnerPage .header-container .title{
    margin-bottom: 50px;
}
.InnerPage .section-title-holder .header-container .title{
    margin-bottom: 0px;
}
.InnerPage .section-title-holder .header-container .sub-title{
    margin-bottom: 50px;
}
.flex-item.image-flex-holder .image-container img{
    position: relative;
	image-rendering: auto;
}
.section-title-holder{
    position: relative;
    display: block;
    padding: 0px 40px;
    min-height: 200px;
}
.section-title-holder .title{
    margin-bottom: 0;
    max-width: 60%;
}
.section-title-holder .sub-title{
    margin-bottom: 0;
    font-weight: normal;
    /* max-width: 60%; */
    font-size: 32px;
    letter-spacing: 0px;
}
.sub-section-title-holder{
    position: relative;
    display: block;
    padding: 20px 40px;
}
/*/////////// sub-section-menu ///////////////*/
.sub-section-menu{
    position: absolute;
    display: block;
    border: 1px solid #CBCBCB;
    /*max-width: 30%;
    min-width: 260px;*/
    width: 300px;
    top: 0px;
    right: calc((100vw - 1280px)/2);
    z-index: 200;
}
.sub-section-menu .btn-sub-section-menu{
    position: relative;
    display: block;
    border-bottom: 1px solid #CBCBCB;
    padding: 13px 20px 5px 35px;
    color: #000000;
    background-color: #ffffff;
}
.sub-section-menu .btn-sub-section-menu.active, 
.sub-section-menu .btn-sub-section-menu:hover,
.sub-section-menu .btn-sub-section-menu:focus{
    background-color: #000000;
    color: #ffffff;
}
.sub-section-menu .btn-sub-section-menu.active .TitleFont:before, .sub-section-menu .btn-sub-section-menu:hover .TitleFont:before, .sub-section-menu .btn-sub-section-menu:focus .TitleFont:before{
    background-image: url(../images/arrow_right_w.svg);
}
.sub-section-menu .btn-sub-section-menu .TitleFont{
    font-weight: bold;
    font-size: 1.5rem;
}
.sub-section-menu .btn-sub-section-menu .TitleFont:before{
    /*position: relative;
    display: inline-block;
    content: "\f105";
    font-family: FontAwesome;
    font-size: 1.8rem;
    line-height: 1;
    text-align: left;
    margin-top: 4px;
    margin-right: 15px;
    vertical-align: top;*/
    position: absolute;
    top: 13px;
    left: 5px;
    content: "";
    background-image: url(../images/arrow_right.svg);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center 100%;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    color: #ffffff;
    width: 25px;
    height: 25px;
    padding: 0px;
    text-align: center;
    z-index: 10;
    box-sizing: content-box;    
    
}
.sub-section-menu .btn-sub-section-menu .TitleFont span{
    display: inline-block;
    width: 100%;
    /*width: calc(100% - 30px);*/
    vertical-align: top;
}
.sub-section-menu .btn-sub-section-menu:last-child{
    border-bottom: none;
}
/*////////// main content section ////////////*/
.content-section{
    padding: 20px 40px;
}
/*/////////// social button ///////////*/
.btnSocial-holder{
    position: relative;
    display: inline-block;
}
.btnSocial{
    position: relative;
    display: inline-block;
    color: #000000;
    width: 24px; 
    margin: 0 10px;
}
.btnSocial:before{
    display: inline-block;
    font-family: FontAwesome;
    font-size: 3rem;
    line-height: 1;
    text-align: center;
}
.btnSocial.btn-facebook{
    width: 20px;
    margin-left: 0;
}
.btnSocial.btn-facebook:before{
    content: "\f09a";
    margin-left: 2px;
}
.btnSocial.btn-instagram:before{
    content: "\f16d";
    margin-left: 2px;
}
.btnSocial.btn-linkedIn:before{
    content: "\f0e1";
    margin-left: 2px;
}
.btnSocial.btn-Twitter:before{
    content: "\f099";
    margin-left: 2px;
}

.btnSocial.btn-youtube:before{
    content: "\f16a";
    margin-left: 0px;
}
.btnSocial.btn-envelope:before {
    content: "\f003";
    margin-left: 2px;
}
.btnSocial.btn-twitter:before {
    content: "\f099";
    margin-left: 2px;
}
.btnSocial.btn-wechat:before {
    content: "\f1d7";
    margin-left: 2px;
}
.btnSocial:hover,
.btnSocial:focus{
    color: #00d7be;
}
/*////////////// figure photo ///////////////*/
figure.figure-box{
    margin: 0 0 20px 0;
}
figure.figure-box figcaption{
    font-size: 14px;
    font-weight: 100;
    font-family: 'Noto Sans HK', "Helvetica Neue Roman";
}
/*////////////// details tab /////////////////*/
.accordion-container{
    padding: 40px 40px 100px;
}
.accordion-tab{
    position: relative;
    display: block;
    border: 1px solid #c0c0c0;
    margin: 0 10px 20px 10px;
}
.columns:first-child .accordion-tab{
    margin-left: 0;
}
.columns:last-child .accordion-tab{
    margin-right: 0;
}
.accordion-tab .accordion-tab-btn{
    position: relative;
    display: block;
    cursor: pointer;
    text-decoration: none;
}
.accordion-tab .contentTitle{
    position: relative;
    display: block;
    padding: 10px 0;
    margin-bottom: 0;
    padding: 13px 0 10px 60px;
    height: 45px;
    box-sizing: border-box;
    font-size: 1.6rem;
    background-color: #ffffff;
}
.accordion-tab li > p{
    display: inline-block;
    max-width: 90%;
    vertical-align: top;
}
.accordion-tab .accordion-tab-btn:before{
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-image: url("../images/plus_w.svg");
    background-size: 45px;
    background-repeat: no-repeat;
    background-position: center 100%;
    font-family: FontAwesome;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    color: #ffffff;
    width: 45px;
    height: 45px;
    padding: 0px;
    background-color: #000000;
    text-align: center;
    z-index: 10;
    box-sizing: content-box;
}
.accordion-tab .accordion-tab-btn{
    color: #000000;
}
.accordion-tab.active .accordion-tab-btn:before{
    background-image: url("../images/arrow_up_w.svg");
}
.accordion-tab .accordion-tab-content-holder{
    display: none;
    padding: 20px 60px;
}
.accordion-tab.active .accordion-tab-content-holder{
    display: block;
}
.accordion-tab:after{
    content: "";
    clear: both;
}
.accordion-tab.active .contentTitle,
.accordion-tab:hover .contentTitle,
.accordion-tab:focus .contentTitle{
    background-color: #000000;
    color: #ffffff;
}
/*.accordion-tab:hover .accordion-tab-btn:before,
.accordion-tab:focus .accordion-tab-btn:before{
    background-image: url(../images/arrow_down_w.svg);
}*/
.accordion-tab.active .accordion-tab-btn:before{
    background-image: url(../images/minus_w.svg);
}

.accordion-tab.direct-link .accordion-tab-btn:before{
    background-image: url("../images/arrow_right_w.svg");
}
.accordion-tab.direct-link:hover .accordion-tab-btn:before,
.accordion-tab.direct-link:focus .accordion-tab-btn:before{
    background-image: url("../images/arrow_right_w.svg");
}
/*//////////// About HKUMed /////////////////*/
.AboutHKUMedTheme #Milestone-box .flex-item{
    flex: 0 50%;
    margin-bottom: 30px;
    padding-right: 20px;
}
.AboutHKUMedTheme #Milestone-box .flex-item .columns{
    padding-right: 20px;
}
.AboutHKUMedTheme #Milestone-box .flex-item .image-container{
    position: relative;
}
.AboutHKUMedTheme #Milestone-box .flex-item .image-container img{
    position: relative;
    max-height: 150px;
	width:70%;
}
.About-Dean .sub-section-title-holder{
    min-height: 200px;
}
.About-Leadership #dean-portrait{
    max-height: 480px;
    overflow: hidden;
    padding-right: 20px;
}
.About-Leadership .dean-info .dean-name{
    margin-top: 30px;
}
.About-Leadership .dean-info .btn-features{
    position: absolute;
    bottom: 0;
}
.About-Leadership .dean-info .email-btn:hover{
    text-decoration: underline;
    color: #000000;
}
/*//////////// staff box ///////////////*/
.staff-row{
    margin: 20px 0;
}
.staff-row .title{
    margin-bottom: 20px;
}
.staff-box-wrapper{
    width: 100%;
}
.staff-box.flex-box {
    padding: 0 20px 20px 0;
    flex-direction: column;
    min-height: 440px;
    width: 33.333333%;
    max-width: 33.333333%;
    color: #000000;
    flex: auto;
    box-sizing: border-box;
}
.staff-box.flex-box *{
    color: #000000;
}
.staff-box.flex-box .flex-item.staff-box-image{
    min-height: 300px;
    max-height: 220px;
    margin-bottom: 10px;
}
.staff-box.flex-box .flex-item.staff-box-text {
    min-height: auto;
    display: block;
    margin-top: 0;
    color: #000000;
}
.staff-box.flex-box .ButtonMore {
    position: absolute;
    display: none;
    top: 0;
    z-index: 90;
}
.staff-box.flex-box:hover .email-btn,
.staff-box.flex-box:hover .staff-box-btn .staff-name,
.staff-box.flex-box:hover .staff-box-btn .flex-item.staff-box-text .text-container p{
    color: #00d7be;
}
.staff-box.flex-box .staff-box-btn:hover .ButtonMore{
    display: block;
}
.staff-box.flex-box .flex-item.staff-box-text .text-container {
    padding: 0;
}
.staff-box.flex-box .flex-item.staff-box-text .text-container p{
    margin-bottom: 0;
}
.staff-box.flex-box .flex-item.staff-box-text .text-container .staff-name{
    font-size: 20px;
    margin-bottom: 10px;
}
.staff-box.flex-box > a{
    margin-bottom: 0;
}
.staff-box.flex-box .email-btn:hover{
    text-decoration: underline;
}
/*//////////// School & Departments /////////////////*/

/*//////////// Teaching & Learning /////////////////*/

/*//////////// Research /////////////////*/

/*//////////// Knowledge Exchange /////////////////*/

/*///////// CSS animation ///////////*/
.hover-zoom > .image-container{
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;    
}
.transitionBackground {
    transition: background 0.1s linear;
    -webkit-transition: background 0.1s linear;
    -moz-transition: background 0.1s linear;
    -ms-transition: background 0.1s linear;
    -o-transition: background 0.1s linear;
}
/*///////// Object fit ///////////*/
.image-container.compat-object-fit{
    position: absolute;
    width: 100% !important;
    height: 100% !important;
    height: auto\0;/* IE8, IE9 */
    height: auto\9\0;/*Only works in IE9*/    
    background-size: cover !important;
    background-position: center center !important;
}
.image-container.compat-object-fit img{
    opacity: 0;
}

/*//////////////// fix sidemenu ///////////////////*/
.fixSideMenu #header{
    max-width: 1920px;
}
.fixSideMenu .section-title-holder{
    position: fixed;
    width: 100%;
    z-index: 300;
    max-width: 1920px;
    box-sizing: border-box;
}
.fixSideMenu .sub-section-menu{
    position: fixed;
    padding-top: 108px;
    z-index: 301;    
}
.InnerPage.fixSideMenu .content-section{
    top: 200px;
    padding-bottom: 320px;
}
.fixSideMenu #footer{
    z-index: 302;
}
@media (min-width: 2000px){
    .fixSideMenu .sub-section-menu {
        right: calc((100vw - 1280px)/2);
    } 
}

/*/////////// events detail page ////////////*/
.events-content__container-left--content {
    margin-bottom: 20px;
}
.events-content__container-left--label--share {
    margin-bottom: 10px;
}
.events-content__container-left--label {
    font-size: 18px;
}


/*/////////// news and events landing ////////////*/
.header-container--flex-title {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    min-width: 600px;
}
.header-container--flex-filter {
    min-width: 600px;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}
.flex-filter--block {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 15px 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-height: 40px;
    display: block;
    min-width: 180px;
    max-width: 180px;
}

.flex-filter--block---button {
    border: 1px solid #000000;
    color: #000000;
    padding: 7px 0 7px 10px;
    font-size: 15px;
    display: block;
    text-align: left;
    position: relative;
}


/* The container must be positioned relative: */
.custom-select {
    position: relative;
  }
  
  .custom-select select {
    display: none;
  }
  
  /* Style the arrow inside the select element: */
  .select-selected:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background-image: url(../images/plus.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    font-family: FontAwesome;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    color: #000000;
    width: 30px;
    height: 100%;
    padding: 0px;
    text-align: center;
    z-index: 10;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
  }
  
  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  /* style the items (options), including the selected item: */
  .select-items div {
    border-top: 0px;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    color: #000000;
    padding: 7px 0 7px 10px;
    cursor: pointer;
  }

  .select-selected {
    background-color: #ffffff;
    border: 1px solid #000000;
    color: #000000;
    padding: 7px 0 7px 10px;
    cursor: pointer;
  }
  
  /* Style items (options): */
  .select-items {
    background-color: #ffffff;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  
  /* Hide the items when the select box is closed: */
  .select-hide {
    display: none;
  }
  
  .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
  }
.flex-filter--block---button.filter-view:hover {
    color: #000000;
}

  .flex-filter--block---button.filter-year {
      position: relative;
      display: block;
  }
  .flex-filter--block---button.filter-year:hover {
      color: #000000;
  }
  

  .flex-filter--block---button.filter-year:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background-image: url(../images/plus.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    font-family: FontAwesome;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    color: #000000;
    width: 30px;
    height: 100%;
    padding: 0px;
    text-align: center;
    z-index: 10;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
  }

  .flex-filter--block---button.filter-view:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background-image: url(../images/arrow_right.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    font-family: FontAwesome;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    color: #000000;
    width: 30px;
    height: 100%;
    padding: 0px;
    text-align: center;
    z-index: 10;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    -webkit-transition: .3s all;
    -o-transition: .3s all;
    transition: .3s all;
  }

  .flex-filter--block---button.filter-year.filter-year-active:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .content-section--content-block {
    border-bottom: 1px solid #CBCBCB;
    color: #000000;
    display: block;
  }
  .content-section--content-block_date {
      display: block;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
  }
  .content-section--content-block_title {
      display: block;
      -webkit-box-flex: 6;
          -ms-flex: 6;
              flex: 6;
  }

  .content-section--content-block:hover {
    background: #00d7be;
  }

  .content-section--content-block:hover .content-section--content-block_date {
      color: #ffffff;
  }
   .content-section--content-block:hover .content-section--content-block_title {
      color: #ffffff;
  }

  .filter-year-popup {
      background-color: #000000;
      color: #ffffff;
      
  }

  .filter-item--row a {
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 5px 15px;
    font-size: 15px;
    display: block;
    text-align: left;
  }
  .filter-item--row .filter-item--row---link {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    margin: 15px 10px;
    max-width: 180px;
    position: relative;
    font-size: 15px;
    max-height: 36px;
    min-width: 180px;
  }
  .filter-item--row .filter-item--row---link:after {
    background-image: url(../images/arrow_right_w.svg);
    position: absolute;
    top: 3px;
    right: 2px;
    content: "";
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    font-family: FontAwesome;
    font-size: inherit;
    line-height: 1;
    display: inline-block;
    color: #ffffff;
    width: 30px;
    height: 30px;
    padding: 0px;
    background-color: #000000;
    text-align: center;
    z-index: 10;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
  }

  .filter-item--row .filter-item--row---search {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    margin: 15px 10px;
    background-color: #000000;
    color: #ffffff;
    line-height: 1;
    font-size: 15px;
    position: relative;
    max-height: 36px;
    min-width: 380px;
    max-width: 380px;
  }

  .filter-item--row .filter-item--row---search input {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    background-color: #000000;
    border-radius: 0;
    color: #ffffff;
    line-height: 1;
    font-size: 16px;
    width: 100%;
    height: auto;
    padding: 8px 10px;
  }

  .filter-item--row .filter-item--row---search .search-icon {
    display: block;
    position: absolute;
    right: 9px;
    top: 9px;
    width: 18px;
    height: 18px;
  }

  .filter-item--row .filter-item--row---search .search-icon:after {
    display: block;
    content: "\f002";
    font-family: FontAwesome;
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
}



  .filter-item--row .filter-item--row---search input::-webkit-input-placeholder {
    color: #ffffff;
  }
.filter-item--row .filter-item--row---search::-moz-placeholder {
    color: #ffffff;
  }
.filter-item--row .filter-item--row---search:-ms-input-placeholder {
    color: #ffffff;
  }
.filter-item--row .filter-item--row---search::-ms-input-placeholder {
    color: #ffffff;
  }
.filter-item--row .filter-item--row---search::-webkit-input-placeholder {
    color: #ffffff;
  }
.filter-item--row .filter-item--row---search::placeholder {
    color: #ffffff;
  }

  .filter-year-popup-container {
    padding: 30px 40px 15px 40px;
  }

  .filter-item--row .filter-item--row---link:hover:after {
    background-color: #00d7be;
}
.filter-item--row .filter-item--row---link:hover {
    background-color: #00d7be;
}

.slideup, .slidedown {
    max-height: 0;            
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
}
.slidedown {
    max-height: 700px;
}



/* datepicker */

.datepicker-inline .datepicker {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 500px;
    background-color: #000000;
    color: #ffffff;
    border-radius: 0;
    border: 0;
}
.datepicker--nav {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    max-height: 30px;
    border: 0 !important;
}
.datepicker--nav-title-custom i {
    font-style: normal;
    color: #ffffff !important;
    margin-left: 5px;
}
.datepicker--content {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
}
.datepicker--day-name {
    color: #ffffff !important;
}
.datepicker--cell.-current- {
    color: #ffffff !important;
}
.-other-month-.-disabled- {
    opacity: 0;
}
.event-date {
    color: #00d7be;
}
.datepicker--cell.datepicker--cell-day:hover {
    background-color: #5cc4ef;
}
.datepicker--cell.datepicker--cell-month:hover {
    background-color: #5cc4ef;
}
.datepicker--cell.datepicker--cell-year:hover {
    background-color: #5cc4ef;
}
.datepicker--nav-action:hover, .datepicker--nav-title:hover {
    background: none !important;
}
.datepicker--cell.-focus- {
    background: #5cc4ef !important;
}

#pop-up-overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 15;
}

.pop-up-overlay-active {
    display: block !important;
}

/* load more */

.load-more-row .box-container {
    padding: 10px 40px;
}
#load-more-btn {
    position: relative;
    display: inline-block;
    right: 0;
    text-decoration: none;
    color: #000000;
}
.body-overflow {
    overflow: hidden;
}
/* news and events landing */
.news-and-events-landing .secondary-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .news-and-events-landing .secondary-row .normal-news-box-wrapper {
    padding: 0 0 0 20px;
    max-width: 300px;
  }
  .news-and-events-landing .secondary-row .normal-news-box-wrapper:first-of-type {
    padding: 0;
  }
  .news-and-events-landing .secondary-row .normal-news-box-wrapper .normal-news-box.flex-box .image-container {
    height: 220px;
  }
  .news-and-events-landing .secondary-row .flex-item-two-col {
    -webkit-box-flex: 2;
        -ms-flex: 2;
            flex: 2;
    padding-left: 20px;
    max-width: 600px;
  }
  .news-and-events-landing .secondary-row .flex-item-two-col:first-of-type {
    padding: 0;
  }
  .news-and-events-landing .secondary-row .flex-item-two-col #news-highlight-secondary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -ms-flex-positive: 1;
        flex-grow: 1;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -ms-flex-preferred-size: 0;
        flex-basis: 0;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    width: 100%;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    vertical-align: top;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .news-and-events-landing .filter-btn-active {
    background-color: #00d7be;
  }
  .news-and-events-landing .filter-btn-active:after {
    background-color: #00d7be;
  }
  .datepicker--nav-title-custom {
    border-radius: 4px;
    padding: 0 8px;
}
.datepicker--nav-title-custom {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
}
.leadership-inner .staff-box.flex-box{
    width: 23.333333%;
    max-width: 23.333333%;
}
@media (max-width: 991.98px) {
    .news-and-events-landing .header-container > .flex-box {
        display: block;
    }

    .header-container--flex-title {
        width: 100%;
        min-width: auto;
    }

    .header-container--flex-filter {
        width: 100%;
        min-width: auto;
    }
    #news-and-events--content .full-width-container.content-section--content-block .flex-box {
        display: block;
    }
  }
  @media (max-width: 768px) 
  {
	  #section-quicklinks .flex-item .image-container img{
	      object-position: initial;
	  }
    .news-and-events-landing .secondary-row {
      display: block;	
    }
    .news-and-events-landing .secondary-row .normal-news-box-wrapper {
      max-width: none;
      padding: 0;
    }
    .news-and-events-landing .secondary-row .flex-item-two-col {
      max-width: none;
      padding: 0;
    }
	.slick-dots{
top:55%;
right:2%;
}
.slick-arrow{
top:30%!important;
}
  }
  @media (max-width: 575.98px) {
    .news-and-events-landing .secondary-row .flex-item-two-col #news-highlight-secondary {
      display: block;
    }
    .news-and-events-landing .calendar-filter .datepicker-inline .datepicker {
        display: block;
        width: 100%;
      }
      .news-and-events-landing .filter-item--row .filter-item--row---link {
        max-width: none;
      }
      .news-and-events-landing .filter-item--row .filter-item--row---search {
        max-width: none;
      }
      .news-and-events-landing .slidedown {
        max-height: auto;
        position: fixed;
        z-index: 10;
        height: calc(100vh);
      }
      .news-and-events-landing .select-selected {
          padding: 9px 0 9px 10px;
      }
      .news-and-events-landing .select-items div {
        padding: 9px 0 9px 10px;
    }
  }
@media (max-width: 425px) {
	.slick-arrow{
		top:20%!important;
	}
	.slick-dots{
		top:35%;
		right:2%;
	}
	.slick-dots li{
		width:8px!important;
		height:8px!important;
	}
}
  
#section-news .news-box-text{
	color:black;
	text-align: justify;
}
.slick-list.draggable{
	max-height: 650px;
}
#btn-language{
	display:none;
}
.site-map-row{
	width:100%;
}
.banner-text-container{
	    cursor: pointer;
} 
.EventPage .sub-title{
	max-width:100%!important;
}
#searchform{
	display:inline-block;
}
.searchfield {
	max-width:121px;
}
.search-result{
	width:65%;
	margin:0 auto;
	font-size: 18px;
}
#btn-search {
width: 30px;
height: 30px;
}
 .leadership-inner .flex-item .image-container img{
	     object-position: center 0;
 }
.no-padding-left{
padding-left:0px;
}
#section-news .news-pagination{
display:none;
}
.leadership-inner .flex-item .image-container img{
    object-position: top;
}
.accordion-tab-content-holder ul{
list-style: disc;

}
#siteMap h5, 
#siteMap span{
color:black;
}
.content-section ol{
list-style: decimal;
}
.content-section ul{
list-style: disc outside;
}
.contentTitle{
    font-size: 18px;
    font-family:  "Helvetica Neue Bold";
}
.content-section ul li span, .content-section ul li, .content-section ol li, .content-section ol li span, .accordion-tab-content-holder ul li span, .accordion-tab-content-holder ul li, .accordion-tab-content-holder ol li{
font-family: "Helvetica Neue Roman", "Helvetica Neue Medium", "Noto Sans HK", 'arial', sans-serif;
}

.LandingPage .news-box .flex-item.news-box-text .text-container{
padding-right: 10%;
}
.box-container img{
image-rendering: auto;
}
.gallery-holder img{
image-rendering: auto;
}
.header-container .btnSocial:hover,.header-container .btnSocial:focus{
color:black;
}

.backPage{
float:left;
    position: relative;
    display: inline-block;
    right: 0;
    text-decoration: none;
    color: #000000;
font-size:20px;
}


.backPage span:before{
    position: relative;
    content: "";
    background-image: url(../images/arrow_left.svg);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center 100%;
    font-size: inherit;
    display: inline-block;
    width: 30px;
    height: 30px;
    padding-right: 10px;
    text-align: center;
   /*z-index: 980;*/
    box-sizing: content-box;
    vertical-align: bottom;
}
#footer .col-4 .box-container{
    padding-right: 0px;
    max-width: 295px;
    margin-right: 0px;
}
.sub-souvenirs .staff-box{
	max-width: 400px;
padding-bottom:0px;
padding-right:10px!important;
}
.sub-souvenirs .staff-box img{
	width:100%;
}
.sub-souvenirs .staff-box .staff-box-text.flex-item{
	margin-top: 33%;
}
.sub-souvenirs{
padding-bottom:0px!important;
}
.sub-souvenirs .staff-row
{
padding-bottom:0px;
margin-bottom:0px;
}
.news-mod .news-content{
padding-top:20px!important;
padding-bottom:20px!important;
}

/* accessibility fix css */
.sub-title-padding{
    display: block;
    margin-top: 20px;
}


/* #section-banner .content-container.box-container h2 {
    display: inline;
    background-color: #ffffff;
    color: black;
    font-size: 60px;
    box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff;
    -webkit-box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff;
    -moz-box-shadow: 20px 0 0 #ffffff, -20px 0 0 #ffffff;
    padding: 10px 2px 10px 2px;
    line-height: 80px;
}

#section-banner .content-container.box-container.on h2 {
    background-color: #000000;
    color: #ffffff;
    box-shadow: 20px 0 0 #000000, -20px 0 0 #000000;
    -webkit-box-shadow: 20px 0 0 #000000, -20px 0 0 #000000;
    -moz-box-shadow: 20px 0 0 #000000, -20px 0 0 #000000;
} */

#section-banner .content-container .more-btn {
    position: relative;
    display: inline-block;
    line-height: 1.2em;
    background-color: #ffffff;
    color: #000000;
    padding: 15px 30px;
    margin: 40px -20px;
}

#section-banner .dot-align-vertical{
    vertical-align: top;
    overflow: hidden;
}
#section-banner .dot-align-vertical .pause-slide-btn{
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}
#section-banner .dot-align-vertical .pause-slide-btn:hover{
    background-color: white;
}
#section-banner .dot-align-vertical .pause-slide-btn::before {
    content: '';
    height: 8px;
    width: 8px;
    position: absolute;
    left: 4px;
    top: 3.5px;
    margin-top: 0;
    margin-left: 0;
    border-style: double;
    border-color: white;
    border-width: 0px 0px 0px 7px;
}
#section-banner .dot-align-vertical .pause-slide-btn:hover::before {
    border-color: #888888;
}

#section-banner .dot-align-vertical.active{
    background-color: white;
}
#section-banner .dot-align-vertical.active .pause-slide-btn::before {
    border-color: #888888;
}
.year-select-action{
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    color: #000000;
    font-weight: bold;
    /* margin: 20px 20px; */
    width: 20px;
    height: 20px;
	border: none;
    float: right;
    margin-top: 5px;
    cursor: pointer;
}
.year-select-action::after{
    display: inline-block;
    content: "\f002";
    font-family: FontAwesome;
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    margin-top: 4px;
    margin-left: 10px;
}
.year-select-action:hover{
    color:#00d7be;
}

/* accessibility fix color contrast */
.news-box:hover .flex-item.news-box-text .text-container {
    color: #158481;
}

#footer a:hover, #footer a:focus {
    color: #158481;
}
a{
    color: #326CE2;
}
a:hover{
    color: #158481;
}
a .text-container{
    color:#000;
}
a:hover .text-container{
    color:#FFF;
}
#footer a.btnSocial:hover{
    color: #00d7be;
}
a.langEn, a.langZh{
    color: black;
}
.filter-item--row .filter-item--row---link:hover{
    background-color: #158481;
}
.filter-item--row---link:hover a{
    color: white;
}
.content-section--content-block:hover{
    background: #158481;
}
.datepicker--cell.datepicker--cell-day:hover {
    background-color: #004E4A !important;
}
.datepicker--cell.-selected-, .datepicker--cell.-selected-.-current- {
    color: #fff;
    background: #004E4A !important;
}

.slick-next:focus, .slick-prev:focus{
    outline: auto !important;
}
.staff-box.flex-box:hover .email-btn, .staff-box.flex-box:hover .staff-box-btn .staff-name, .staff-box.flex-box:hover .staff-box-btn .flex-item.staff-box-text .text-container p{
    color: #158481;
}
.AboutHKUMedTheme .btn-features{
    color: #158481;
}
.searchfield::placeholder{
    color: black;
}

@media (max-width: 425px) {
    #section-banner .dot-align-vertical .pause-slide-btn::before {
        margin-top: -2px;
        margin-left: -2px;
        height: 5px;
        width: 5px;
        border-width: 0px 0px 0px 4px;
    }
}

// 20211006
.btn-instagram {
    display: none;
}