@media (min-width: 2550px) {
    #section-banner .left-bottom .content-container.box-container, #section-banner .left-top .content-container.box-container{
    margin-left: calc((100vw - 2080px)/2)!important;
    }
    #section-banner .left-bottom .content-container.box-container{
    bottom: 80px!important;
    }
    #section-banner .right-bottom .content-container.box-container, #section-banner .right-top .content-container.box-container{
        margin-left: calc((100vw - 1080px)/2);
        text-align: right;
    }
    #section-banner .right-bottom .content-container.box-container{
    bottom: 80px!important;
    }
}

@media (min-width: 2000px) {
    html{
        max-width: 1920px;
        margin: 0 auto;
    }
    #megamenu .first-level{
        max-width: calc(1280px * 0.75 + (1920px - 1280px)/2);
    }
    #megamenu .first-level .MenuGroup-tab{
        padding-left: calc((1920px - 1280px)/2);
    }
    #megamenu .second-level{
        flex-basis: 25%; 
        flex-direction: column;
        /*height: calc(100% - 1px);*/
        max-width: calc(1280px * 0.25 + (1920px - 1280px)/2);
    }    
    #megamenu .menu-column.second-level > .flex-box{
        border-right: none;
        /*padding-right: calc((1920px - 1280px)/2);*/
    }
    .sub-section-menu{
        right: calc((1920px - 1280px)/2);
    }    
    #megamenu .second-level-child .btnMenuLink {
        padding-right: calc((1920px - 1280px)/2);
    }    
}

@media (min-width: 1366px) and (max-width: 2000px){
    #btn-menu.selected:before {
        left: -33px;
    }

    #section-banner .left-bottom .content-container.box-container {
        margin-left: calc((100vw - 1280px)/2)!important;
        bottom: 0px!important;
     }
    #section-banner .right-bottom .content-container.box-container{
        margin-left: calc((100vw - 721px)/2)!important;
        bottom: 0px!important;
        text-align: right;
    }
    #section-banner .right-top.content-container.box-container{
        text-align: right;
    	margin-left: calc((100vw - 720px)/2);
    }
}

@media (max-width: 1366px) {
    .section-title-holder{
        padding: 0;
    }
	.dean-image {
	    max-width: 29.5%;
	}

	.dean-photo-grid{
		max-width:30%!important;
		margin:0 auto;
	}
}


@media (min-width: 990px){

    #section-banner .left-bottom .content-container.box-container {
        margin-left: calc((100vw - 950px)/2);
        position: fixed;
        bottom: 20px;
        top: auto;
    }

    #section-banner .right-bottom .content-container.box-container {
        margin-left: calc((100vw - 1150px)/2);
        text-align: right;
        position: fixed;
        bottom: 20px;
        top: auto;
    }

}
@media (max-width: 1280px) {
    #megamenu .first-level .MenuGroup-tab{
        padding-left: 0;
    }
    #megamenu .first-level .first-level-menu-header.columns{
        border-left: 10px solid #f0f0f0;
    }
    #megamenu .first-level #MenuGroup_Programmes-Admissions:hover .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_Programmes-Admissions:focus .first-level-menu-header.columns{
        border-color: #00d7be;
    }
    #megamenu .first-level #MenuGroup_Research:hover .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_Research:focus .first-level-menu-header.columns{
        border-color: #00d7be;
    }
    #megamenu .first-level #MenuGroup_About-HKUMed:hover .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_Research:focus .first-level-menu-header.columns{
        border-color: #00d7be;
    }
    #megamenu .first-level #MenuGroup_School-Department:hover .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_Research:focus .first-level-menu-header.columns{
        border-color: #00d7be;
    }
    #megamenu .first-level #MenuGroup_HKU-Health-System:hover .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_Research:focus .first-level-menu-header.column{
        border-color: #00d7be;
    }
    #megamenu .first-level {
        flex-basis: 72%;
        max-width: calc(1280px * 0.72 + (100vw - 1280px)/2);
    }
    #megamenu .second-level {
        flex-basis: 28%;
        max-width: calc(1280px * 0.28 + (100vw - 1280px)/2);
    }
    #section-banner .content-container.box-container{
        margin-left: 20px;
        margin-top: 0;
    }
    #section-banner .content-container.box-container h1{
        font-size: 48px;
        line-height: 60px;
    }
    #section-banner .content-container.box-container h2{
        font-size: 48px;
        line-height: 60px;
    }
    #section-banner .content-container .more-btn{
        margin: 20px -20px;
    }
    .sub-section-menu{
        right: 40px;
        width: 260px;
    }
    .section-title-holder{
        padding: 0;
    }
    .InnerPage .content-section{
        padding: 20px 20px;
    }
    .InnerPage .header-container{
        padding: 30px 20px 15px 20px;
    }
    .accordion-container{
        padding: 30px 20px 60px;
    }
    .title-container.box-container{
        padding: 50px 20px 30px 20px;
    }
    /*///////// about ////////////*/    
    .About-Leadership .dean-info .dean-name{
        margin-top: 0px;
    }
    .About-Leadership .dean-info .btn-features{
        position: relative;
        bottom: auto;
    }
	#section-banner .content-container.box-container h1 {
		font-size: 48px;
		line-height: 66px;
	}
    #section-banner .content-container.box-container h2 {
        font-size: 48px;
        line-height: 66px;
    }

}


.mobile {
    display: none;
}


/*////////////// iPad view /////////////*/
@media (max-width: 1024px) {

    .mainLogo__img {
        display: none;
    }

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

    #btn-menu.selected:before {
        left: -17px;
    }

	#megamenu .btnMenuLink span.arrow:before{
	top: -1.5px;
	}
	.btnSocial, .btnSocial.btn-facebook{
	width:14px;
	}	

	#megamenu .first-level .first-level-menu-header.columns > .box-container > h5{
	font-size:14px;
	}
	.year-select{
	width:100%;
	}
	.dean-photo-grid{
	max-width:35%!important;
	margin:0 auto;
	}

	.dean-image {
	    max-width: 31.5%;
	}

    
    .mainLogo{
        /*width: 300px; */
        width: 40%;
        top: 30px;
    }
    
    .mainLogo__img{
        height: auto;
		width:100%;
    }
    .site-wrapper #header > .box-container{
        padding: 20px 30px 17px 30px;
    }
    .functional-gp a{
        margin: 10px 20px;
    }
    .box-container{
        padding: 20px 20px;
    }
    #megamenu .first-level .first-level-menu-header.columns{
        width: 25%;
    }
    #megamenu .first-level .first-level-menu-holder.columns{
        width: 75%;
    }
    #megamenu .second-level-child .btnMenuLink{
        font-size: 1.6rem;
    }
    /*/////////// Mega Menu open ////////////*/ 
    .site-wrapper.MenuOpen #header{
        background-color: #f0f0f0;
    }  
    .site-wrapper.MenuOpen .main-wrapper, 
    .site-wrapper.MenuOpen footer{
        display: none;
    }
    .site-wrapper.MenuOpen #header #megamenu{
        position: absolute;
        top: 106px;
    }
    .site-wrapper.MenuOpen #header > .box-container{
        position: fixed;
        top: 0;
        z-index: 999; 
    }    
    .site-wrapper.MenuOpen #megamenu .menu-column > .flex-box{
        height: auto;
        background-color: #f0f0f0;
    }
    #footer .box-container:first-child {
        padding-left: 20px;
    }    
    .section-title-holder .title, .section-title-holder .sub-title{
        max-width: none;
    }
    .InnerPage .content-section .columns{
        width: 100%;
    }    
    /*///////// gallery box /////////////*/
    .normal-gallery-box.gallery-box.flex-box{
        max-height: none;
    }
    .normal-gallery-box.gallery-box.flex-box .flex-item.gallery-box-text{
        display: block;
        color: #ffffff;
        background-color: rgba(0,0,0,0.5);
        position: absolute;
        padding: 10px 10px 0px 10px;
        bottom: 10px;
        height: auto;
        width: calc(100% - 10px);
        max-height: calc(100% - 10px);
    }
    .normal-gallery-box.gallery-box.flex-box .flex-item.gallery-box-text .text-container{
        padding: 0 0 10px 0;
    }
    .normal-gallery-box.gallery-box.flex-box .flex-item.gallery-box-text .text-container .title{
        margin-bottom: 0;
        font-size: 2rem;
    }
    /*///////////// staff box /////////////*/
    .staff-box.flex-box{
        width: 50%;
        max-width: 50%;
        min-height: 0;
        padding: 0 30px 30px 0;
    }
    .staff-box.flex-box .flex-item.staff-box-image{
        min-height: 300px;
        max-height: none;
    }
	#section-banner .left-bottom .content-container.box-container, #section-banner .left-top .content-container.box-container {
	    margin-left: calc((100vw - 850px)/2);
	}
	#section-banner .right-bottom .content-container.box-container, #section-banner .right-top .content-container.box-container {
	    margin-left: calc((100vw - 850px)/2);
	}
#section-banner .content-container.box-container {
     max-width:850px;
}

}
@media (max-width: 991.98px) {

    #btn-menu
    {
        margin-right:0px;
    }
    .dean-photo-grid {
        max-width: 40% !important;
        margin: 0 auto;
    }

	#section-banner .left-bottom .content-container.box-container, #section-banner .right-bottom .content-container.box-container  {
	    margin-left: calc((100vw - 720px)/2);
		max-width: 590px;
		
	}

    /*.columns{
        width: 100%!important;
    }*/
	.dean-image {
	    max-width: 40.5%;
	}
    .main-wrapper{
        margin-top: 105px;
    }
    .site-wrapper #header > .box-container{
        padding: 20px 20px 17px 20px;
    }    
    #megamenu .first-level, #megamenu .second-level{
        max-width: none;
    }
    #megamenu .first-level-child .btnMenuLink {
        display: block;
        font-size: 1.3rem;
    }
    #megamenu .second-level-child .btnMenuLink{
        font-size: 1.5rem;
    }
    #megamenu .first-level .first-level-menu-header.columns > .box-container, 
    #megamenu .first-level .first-level-menu-holder.columns > .box-container{
        padding: 10px 15px;
    }
    #megamenu .btnMenuLink span.arrow:before{
        margin-top: 0px;
    }
    #section-banner.box-container{
        padding: 40px 20px;
    }
    .ql-box{
        margin: 20px auto;
    }
    .accordion-tab .accordion-tab-content-holder {
        padding: 20px 20px;
    }
    .section-intro .title{
        margin-bottom: 10px;
    }
    /*/////////// sub-section-menu ///////////////*/
    .section-title-holder{
        min-height: 0;
    }
    .sub-section-title-holder{
        padding: 20px 20px;
    }
    .sub-section-title-holder > .row > .columns{
        width: 100%;
    }
    .sub-section-menu{
        position: relative;
        width: 100%;
        width: calc(100% - 40px);
        max-width: none;
        margin: 20px auto;
        top: 0;
        right: 0;
    }
    /*///////////// Inner page ////////////*/
    .InnerPage .section-intro .flex-item:first-child {
        padding-right: 20px;
    }    
    /*///////////// About HKUMed ////////////*/
    .About-Dean .sub-section-title-holder{
        min-height: 0;
    }    
    .About-Dean #dean-portrait{
        margin-top: 0%;
    }
    .AboutHKUMedTheme #Milestone-box .flex-item {
        flex: 0 100%;
    }
    .AboutHKUMedTheme #Milestone-box .flex-item .image-container img{
        max-height: 200px;
    }
	#megamenu .first-level .first-level-menu-header.columns > .box-container > h5{
		font-size:12px;
	}

}

@media (max-width: 900px) {
	#section-banner .left-bottom .content-container.box-container, #section-banner .right-bottom .content-container.box-container  {
        margin-left: calc((100vw - 720px)/2);
		max-width: 590px;
	}

	.mobile {
	    display: none;
	}
	
	.desktop {
	    display: inline-block;
	}

    .mainLogo {
        /*width: 300px; */
        width: 40%;
    }
}
@media (max-width: 768px) {

    .mobile {
        display: inline-block;
        margin-right: 50px;
        margin-top: 18px
    }

    .desktop {
        display: none;
    }

	.slick-dots{
		top:50%;
		/* top: calc(100%/6*2); */
		max-height:20px;
    }
	.dean-photo-grid{
		max-width:50%!important;
		margin:0 auto;
    }
	.staff-box{
		max-width:33.3%!important;
    }

    #section-banner .content-container.box-container {
        color:black;
        max-width:400px;
    }
    #section-banner .left-bottom .content-container.box-container, #section-banner .right-top .content-container.box-container,  #section-banner .right-bottom .content-container.box-container{
        margin: 20px 20px;
        top:auto;
    }
#section-banner .left-bottom .content-container.box-container, #section-banner .left-top .content-container.box-container {
	    margin-left: 20px;
	}
	#section-banner .right-bottom .content-container.box-container, #section-banner .right-top .content-container.box-container {
	    margin-left: 20px;
	}
    .dean-image {
        max-width: 50%;
        min-width: 300px;
    }
	.search-result{
		width:80%;
		font-size:15px;
	}
	#search-section{
		width:700px;
	}
	#searchform{
		width:85%;
	}
	.searchfield {		
    width: 100%;
    max-width: 1500px;

	}
    .fontStyleA{
        font-size: 52px;
    }
    .fontStyleB{
        font-size: 40px;
    }
    .fontStyleC{
        font-size: 26px;
    }
    .fontStyleD1{
        font-size: 16px;
    }
    .fontStyleD2{
        font-size: 16px;
    }
    .fontStyleE1{
        font-size: 14px;/*18px;*/
    }
    .fontStyleE2{
        font-size: 14px;/*18px;*/
    }
    .fontStyleF1{
        font-size: 13px;/*15px;*/
    }
    .fontStyleF2{
        font-size: 13px;/*15px;*/
    }    
    .desktop-br{
        display: none;
    }
    .box-container{
        padding: 20px;
    }
    .mainLogo{
        /*width: 277px;*/
        width: 40%;
        top: 10px;
    }
    .mainLogo__img{
        width: 100%;
        height: auto;
    }
    /*//////////// landing banner ///////////////*/
    #section-banner .content-container.box-container{
        bottom: 0;
        top: auto;
        padding: 0;
        position: relative;
        margin: 20px 20px;
		max-width:750px;
    }
    #section-banner .content-container.box-container h1{
        font-size: 32px;
        line-height: 1.2em;
        margin: 10px 0;
        padding: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
    #section-banner .content-container.box-container h2{
        font-size: 32px;
        line-height: 1.2em;
        margin: 10px 0;
        padding: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
    }
    #section-banner .content-container .more-btn{
        margin: 20px 0px 0;
        background-color: #000000;
        color: #ffffff;
    }
    /*////// quicklink section //////*/    
    .flex-item{
        flex-basis: 100%;
    }
    .flex-item .text-container{
        padding: 10px;
    }
    .ql-box{
        margin: 20px auto;
    }
    .ql-box:first-child {
        margin-top: 0;
    }
    .ql-box .ql-box-image.flex-item{
        order: 1!important;
        min-height: 200px;
    }
    .ql-box .ql-box-text.flex-item{
        order: 2!important;
        min-height: 150px;
    }    
    .ql-box .flex-item.ql-box-text .text-container {
        padding-right: 10px;
    }
    .main-wrapper{
        margin-top: 90px;
    }
    /*//////// MegaMenu ////////*/
    #btn-menu{
        position: absolute;
        top: 0px;
        right: 0px;
    }
    .tools-gp{
        padding: 15px;
        border-bottom: 1px solid #cccccc;
    }
    .tools-gp #btn-search{
        /* float: left; */
    }
    .tools-gp #btn-language{
        float: right;
    }
    #header > .box-container{
        padding: 20px 20px;
    }
    #section-banner.box-container{
        padding: 20px 20px;
    }
    .site-wrapper.MenuOpen #header #megamenu{
        /*height: auto;*/
    }    
    .site-wrapper.MenuOpen #header{
        position: relative;
    }
    .site-wrapper.MenuOpen #header #megamenu{
        top: 90px;
        display: block;
    }    
    #megamenu .first-level,
    #megamenu .second-level{
        display: block;
        height: auto;
    }
    #megamenu .first-level.menu-column .flex-box{
        flex-direction: column;
        display: block;
    }
    #megamenu .first-level .first-level-menu-header.columns,
    #megamenu .first-level .first-level-menu-holder.columns{
        width: 100%;
        height: auto;
    }
    #megamenu .first-level .first-level-menu-holder{
        padding: 5px 0 20px 0;
    }
    #megamenu .first-level .first-level-menu-header.columns > .box-container > h5, 
    #megamenu .first-level .first-level-menu-holder.columns > .box-container > h5{
        margin-bottom: 0;
        font-size: 2rem;
    }
    #megamenu .first-level .first-level-menu-header.columns > .box-container, 
    #megamenu .first-level .first-level-menu-holder.columns > .box-container{
        padding: 10px 20px 5px 20px;
        width: calc(100% - 70px);
        margin-left: 0;
    }   
    #megamenu .second-level{
        display: block;
    }
    #megamenu .second-level-child .btnMenuLink{
        padding: 10px 10px 10px 20px;
    }
    #megamenu .second-level-child.flex-box{
        flex-basis: 100%;
        width: 100%;
        border-right: none;
    }
    #megamenu .menu-column.second-level > .flex-box{
        height: auto;
        max-height: none;
    }
    #megamenu .nav-tab-btn{
        display: block;
    }    
    #btn-menu, #btn-language, #btn-search{
        margin: 10px 10px;
    }


    /*  menu --> icon
        20210324
    */
    #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: 0px;
    }
    #btn-menu > span{
        display: none;
    }
    
    /* accessibility fix : menu */
    /* #btn-menu > span{
        display: none;
    } */
    #btn-menu .mobile-hidden{
        display: none;
    }
    #btn-menu.selected #btn-menu-icon{
        display: none;
    }
    #btn-menu.selected:before{
        position: relative;
        top: 0;
        left: 0;
        background-size: 40px;
        width: 40px;
        height: 40px;
    }
    /*//////////////// collapse menu///////////////////*/
    #megamenu .menu-column .flex-box{
        border-right: 0;
    }
    #megamenu .first-level .first-level-menu-header.columns{
        padding: 10px 0;
    }
    #megamenu .first-level .first-level-menu-holder.columns{
        display: none;
    }
    #megamenu .MenuGroup-tab.on .first-level-menu-holder.columns{
        display: block;
    }
    #megamenu .MenuGroup-tab.on .nav-tab-btn:before{
        background-image: url(../images/minus.svg);
    }
    #megamenu .MenuGroup-tab.on .first-level-menu-header.columns{
        background-color: #00d7be!important;
    }
    #megamenu .MenuGroup-tab.on .first-level-menu-holder.columns{
        background-color: #000000;
    }
    #megamenu .MenuGroup-tab.on .first-level-menu-holder .btnMenuLink{
        color: #ffffff;
    }
    #megamenu .MenuGroup-tab.on .first-level-menu-holder .btnMenuLink:before{
        background-image: url(../images/arrow_right_w.svg);
    }
    #megamenu .MenuGroup-tab .first-level-menu-holder .btnMenuLink span.arrow:before{
        background-image: url(../images/arrow_right_w.svg);
    }
    #megamenu .btnMenuLink span.title{
        font-size: 1.8rem;
    }
    #megamenu .first-level .first-level-menu-header.columns{
        border-left: none;
    }
    #megamenu .first-level #MenuGroup_Programmes-Admissions:hover .first-level-menu-header.columns, 
    #megamenu .first-level #MenuGroup_Programmes-Admissions:focus .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_Programmes-Admissions.active .first-level-menu-header.columns{
        background-color: #00d7be;
        color: #000000;
    }
    #megamenu .first-level #MenuGroup_Research:hover .first-level-menu-header.columns, 
    #megamenu .first-level #MenuGroup_Research:focus .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_Research.active .first-level-menu-header.columns{
        background-color: #00d7be;
        color: #000000;
    }
    #megamenu .first-level #MenuGroup_About-HKUMed:hover .first-level-menu-header.columns, 
    #megamenu .first-level #MenuGroup_About-HKUMed:focus .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_About-HKUMed.active .first-level-menu-header.columns{
        background-color: #00d7be;
        color: #000000;
    }
    #megamenu .first-level #MenuGroup_School-Department:hover .first-level-menu-header.columns, 
    #megamenu .first-level #MenuGroup_School-Department:focus .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_School-Department.active .first-level-menu-header.columns{
        background-color: #00d7be;
        color: #000000;
    }
    #megamenu .first-level #MenuGroup_HKU-Health-System:hover .first-level-menu-header.columns, 
    #megamenu .first-level #MenuGroup_HKU-Health-System:focus .first-level-menu-header.columns,
    #megamenu .first-level #MenuGroup_HKU-Health-System.active .first-level-menu-header.columns{
        background-color: #00d7be;
        color: #000000;
    }
    #megamenu .first-level .MenuGroup-tab.active .first-level-menu-holder.columns{
        display: block;
        background-color: #000000;
        color: #ffffff;
    }
    #megamenu .MenuGroup-tab.active .first-level-menu-holder .btnMenuLink{
        color: #ffffff;
    }
    #megamenu .third-level.menu-column > p{
        display: none;
    }
    /*////// news & events section //////*/  
    #section-news{
        padding: 50px 20px 70px 20px;
    }
    .news-box .flex-item{
        min-height: 0;
    }
    .news-box.flex-box{
        /*border-bottom: 1px solid #CBCBCB;*/
    }
    .news-box .flex-item.news-box-image{
        flex-basis: 50%;
        min-height: 300px;
    }
    #news-highlight-secondary.news-box .flex-item.news-box-text{
        min-height: 300px;
    }
    #section-news .secondary-row > .flex-box{
        width: 100%;
    }
    .InnerPage .content-section .flex-item:first-child{
        padding-right: 0px;
    }
	#section-news .normal-news-box-wrapper . flex-box-half{
		width:100%;
		display: block;
	}
    .normal-news-box-wrapper{
        padding: 0;
    }
    .normal-news-box-wrapper.flex-box{
        flex-direction: column;
    }
    .normal-news-box.news-box.flex-box{
        flex-direction: row;
        flex: 1;
        flex-wrap: nowrap;
    }
    .normal-news-box.news-box.flex-box .flex-item.news-box-image{
        height: 160px;
        min-height: 0;
        flex-basis: 40%;
    }
    .normal-news-box.news-box.flex-box .image-container{
        height: auto;
    }
    .normal-news-box.news-box.flex-box{
        min-height: 200px;
    }
    .normal-news-box.news-box.flex-box:first-child{
        padding-right: 0;
    }
    .normal-news-box.news-box.flex-box .flex-item.news-box-text{
        margin-top: 20px;
        height: 160px;
    }
    .normal-news-box.news-box.flex-box .flex-item.news-box-text .text-container{
        padding: 0 0 10px 10px;
    }
    /*////// Gallery box //////*/
    .normal-gallery-box.gallery-box.flex-box{
        width: calc(100%/2 - 10px);
    }
    /*/////////// inner page //////////////*/
    .InnerPage .section-intro .flex-item, .InnerPage .section-intro .flex-item:first-child{
        padding-right: 0;
        margin-bottom: 20px;
    }
    /*.InnerPage .top-flex-box.right-img-flex-box{
        flex-direction: column-reverse;
    }*/
    .InnerPage .content-section{
        padding: 20px;
    }
    .staff-box.flex-box .flex-item.staff-box-image {
        min-height: 220px;
        max-height: none;
    }
    /*/////////// accordion /////////////*/
    .accordion-container .columns{
        width: 100%;
    }
    .columns:first-child .accordion-tab, .columns:last-child .accordion-tab{
        margin: 0 0px 10px 0px;
    }
    .accordion-tab .contentTitle{
        height: 50px;/*65px;*/
        padding-right: 10px;
	font-size: 13px;

    }
    .accordion-tab .accordion-tab-btn:before{
        height: 50px;/*65px;*/
        background-position: 0 50%;
    } 
    .About-Leadership #dean-portrait{
        padding-right: 0;
    }
    /*/////////////// footer //////////////////*/
    #footer .columns{
        width: 100%;
        padding: 10px 0;
    }
    #footer .HKUMed-logo{
        float: none;
        text-align: left;
    }    
	.normal-news-box-wrapper.flex-box-half{
		width:100%!important;
		
	}
	.sub-souvenirs .staff-box .staff-box-text.flex-item{
		margin-top: 0%;
	}
	.sub-souvenirs .staff-box{
		display:block;
	}
}

@media (max-width: 720px){
    .accordion-tab .contentTitle{
        font-size: 14px;
        padding: 10px 0 0px 60px;
}

@media (max-width: 678px) {
    .staff-box.flex-box {
        width: 100% !important;
        max-width: 50% !important;
        min-height: 0;
        padding: 0 30px 30px 0;
    }

}

@media (max-width: 575.98px) {
	.slick-dots{
		top:30%;
		max-height:20px;
	}
	.dean-photo-grid{
		max-width:100%!important;
		margin:0 auto;
	}
    body{
        font-size: 13px;
    }
    .btn-features{
        font-size: 14px;
    }
    .fontStyleB {
        font-size: 36px;
    }
    .fontStyleC{
        font-size: 24px;
    }     
	#section-banner .content-container.box-container{
        bottom: 0;
        top: auto;
        padding: 0;
        position: relative;
        margin: 20px 20px;
		max-width:450px;
    }
    /*///// header ////*/
    .site-wrapper #header > .box-container{
        padding: 15px 10px 10px 10px;
    }
    .site-wrapper.MenuOpen #header #megamenu {
        top: 75px;
    }
    .tools-gp{
        padding: 10px 15px;
    }
    .main-wrapper {
        margin-top: 75px;
    }    
    #megamenu .first-level .first-level-menu-header.columns > .box-container > h5, #megamenu .first-level .first-level-menu-holder.columns > .box-container > h5{
        font-size: 1.8rem;
    }
    #megamenu .btnMenuLink span.title{
        font-size: 1.6rem;
    }
    #megamenu .first-level .first-level-menu-header.columns > .box-container, #megamenu .first-level .first-level-menu-holder.columns > .box-container{
        width: calc(100% - 50px);
    }
    /*/////////// landing page ////////////*/
    .news-box.flex-box{
        display: block;
    }
    .news-box.flex-box .flex-item.news-box-image,
    .news-box.flex-box .flex-item.news-box-text{
        display: block;
    }
    .normal-news-box.news-box.flex-box .flex-item.news-box-image{
        height: 250px;
    }
    .flex-item .image-container img{
        object-position: center -10px;
    }
    #section-news .secondary-row > .flex-box{
        display: block;
    }
    #news-highlight-secondary.news-box .news-box-image{
        order: 1;
    }
    #news-highlight-secondary.news-box .news-box-text{
        order: 2;
    }
    #news-highlight-secondary.news-box .ButtonMore.FuncButton{
        right: 0;
        left: auto;
    }
    .news-box .flex-item.news-box-text{
        min-height: 160px!important;
        height: auto!important;
    }
    .news-box .news-box-text .text-container{
        padding: 0 0 50px 0!important;
    }    
    .news-box .flex-item.news-box-text .text-container .title{
        font-size: 24px!important;
        line-height: 1.2!important;
    }
	.staff-box.flex-box .flex-item.staff-box-image{
		min-height:320px;
	}
    /*//////// Inner page ///////////*/
    .breadcrumb-bar .breadcrumb .breadcrumb-item a{
        font-size: 13px;
    }
    .section-title-holder .sub-title{
        font-size: 26px;
    }
    .AboutHKUMedTheme #Milestone-box .flex-item{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .AboutHKUMedTheme #Milestone-box .flex-item .columns,
    .AboutHKUMedTheme #Milestone-box .flex-item .columns:last-child{
        padding-right: 0
    }
    .AboutHKUMedTheme #Milestone-box .flex-item .image-container img {
        max-height: 250px;
    }   
    .accordion-tab .contentTitle{
        font-size: 14px;
        padding: 15px 0 0px 60px;
    }
    .accordion-tab .contentTitle.long-title{
        padding: 8px 5px 0px 60px;
        font-size: 13px;
    }
    /*////// Gallery box //////*/
    .normal-gallery-box.gallery-box.flex-box{
        width: 100%;
        padding-right:0;
        padding-bottom: 20px;
    }
    /*////////// gallery box /////////////*/
    .normal-gallery-box.gallery-box.flex-box .flex-item.gallery-box-text{
        bottom: 20px;
    }
    /* accessibility fix : menu */
    #btn-menu .mobile-hidden{
        display: none
    }
    #search-section form{
        display: flex;
        margin-top: 10px;
    }
    .slick-prev, .slick-next{
		top:20%;
    }
    #search-section form button{
        margin: 0;
    }
    #searchform{
		width:75%;
    }
}
@media (max-width: 479.98px) {

    #btn-menu #btn-menu-icon {
        top: 30px;
    }


    #btn-menu.selected::before {
        top: 29px;
    }

    .dean-image {
        max-width: 100%;
    }
	#section-banner .left-bottom .content-container.box-container, #section-banner .right-bottom .content-container.box-container , #section-banner .right-top .content-container.box-container , #section-banner .left-top .content-container.box-container{
		max-width:300px;
		padding:5px;
	}
    .mainLogo {
        width: 200px;
    }
	#section-banner .content-container.box-container{
		max-width:400px;
    }
    #btn-menu{
        top: -15px;
        right: -15px;
    }
    #header > .box-container{
        padding: 15px 10px 10px 10px;
    }
    .main-wrapper {
        margin-top: 64px;
    }
    .site-wrapper #header > .box-container{
        padding: 15px 20px 10px 20px;
    }
    .site-wrapper #header #megamenu {
        top: 65px;
    }    
    .news-box .flex-item.news-box-text .text-container .title{
        font-size: 21px!important;
    }    
    /*///////////// staff box /////////////*/
    .staff-box.flex-box{
        width: 100%;
        max-width: 100%;
        padding: 0 0 30px 0;
    } 
	.leadership-inner .staff-box.flex-box{
        width: 100% !important;
        max-width: 100%!important;
	}
	.slick-prev, .slick-next{
		top:20%;
	}
	.staff-box .image-container img{
		width:70%;
		margin-left:9%;
	}

}
@media (max-width: 414px) {
    .site-wrapper.MenuOpen #header #megamenu {
        top: 65px;
    }
    .tools-gp {
        padding: 0px 15px 5px 15px;
    }   
}
@media (max-width: 375px) {
	
    #megamenu .menu-column > .flex-box{
        overflow: visible;
    }
	#section-banner .content-container.box-container{
		max-width:320px;
    }
}
@media (max-width: 320px) {
    body{
        width: 320px;
    }
    .main-wrapper{
        width: 320px;
    }
	#section-banner .content-container.box-container{
		max-width:280px;
    }
    .accordion-tab .contentTitle{
        font-size: 10px;
    }
}
/*///////////// only IE ///////////////*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {

}
/* accessibility fix : search text color */
#search-section{
    color: #123985;
}
#search-section input[type="text"]:focus{
    border: 1px solid #123985;
}