/* CSS Document */
/* Appy in Whole Web Page */
:root {
  --e-global-color-primary: rgb(29, 68, 104);
	
	--mobile-title-font-size: 24px;
	
	--title-font-size: 36px;
	--title-font-weight: 400;
	--title-line-height: 60px;
	--title-margin-top: 2rem;
	--title-margin-bottom: 2rem;
	--title-height: calc(var(--title-margin-top) + var(--title-margin-bottom) + var(--title-line-height));
}

body{ 
  padding-top: 0;
  font-family: "Open Sans", sans-serif;
}

.bold{ font-weight: bold }
.init-list-style{ list-style: initial; }
.drawer-menu-item-head{
  cursor: default;
  text-decoration: none;
  color: rgba(136,136,136,1.00);
}
.drawer-menu-item-head:hover{
  text-decoration: none;
  color: rgba(136,136,136,1.00);
/*  color: rgb(34, 34, 34);*/
}

/* Override bootstrap */
@media screen and (min-width: 576px) and (max-width: 991px){
  .container{
    max-width: initial;
  }
}


.nav-item{
	padding-left: 1em;
	padding-right: 1em;
}



#header-phpri{ 
  font-weight: 600;
}
#header-phpri,
#header-cuhk{
  font-size: 30px;
  margin-left: 0.5rem;
  letter-spacing: 1px;
}
.page-header{
	background: url("/20250708184650oe_/https://www.phpri.cuhk.edu.hk/image/banner.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  padding-bottom: 20px;
}
.page-header-filter{
  background: rgba(0 6 21 / 0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.page-header-content{
  position: relative;
  left: 0;
  right: 0;
}
.department-slogan .slogan{
  color: #FFFFFF;
  font-family: "Open Sans", open sans;
  font-size: 41px;
  font-weight: 400;
  padding-left: 40px;
}
.separator{
  display: block;
  width: 54%;
	height: 2px;
	background-color: white;
  background-color: #efa75b;
}
@media screen and (min-width: 577px) and (max-width: 991px){
  #header-phpri,
  #header-cuhk{
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: 0px;
  }
  .department-slogan .slogan{
    font-size: 20px;
  }
}
@media screen and (max-width: 576px){
  #header-phpri,
  #header-cuhk{
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0px;
  }
  
  .department-slogan .slogan{
    font-size: 16px;
  }
}


.department-name{
	line-height: 1.4;
	letter-spacing: 2px;
  padding-top: 4px;
}
.department-name a{
  color: white !important;
  text-decoration: none;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.6rem;
}
.header-icon-container img{
  height: 80px;
}
.header-icon-container a{
  text-decoration: none;
}
@media screen and (max-width: 991px){
	.page-header{
		background-position: 60% center;
	}
  .department-name { line-height: 1.0 }
  .department-name a{
    font-size: 1.0rem !important;
  }
  .header-icon-container img{
    height: 60px;
  }
}





.dropdown-menu{
	margin-top: -2px;
}





/* Drawer */
header[role="banner"]{ display: none; }
.drawer-toggle.drawer-hamburger{
/*	border: 1px solid gray;*/
	opacity: 0.5;
	background-color: white;
	border-radius: 4px;
}
.drawer-hamburger-icon::before,
.drawer-hamburger-icon::after,
.drawer-hamburger-icon{
	background: black;
}
.drawer-menu li{
	list-style-type: none;
}
@media screen and (max-width: 991px){
	header[role="banner"]{
		display: block;
	}
}
.drawer-menu-item.disabled{
	color: gray;
	text-decoration: none;
}




/* Title */
.title-container{
  height: var(--title-height);
	position: relative;
}
.title-background,
.title{
  position: absolute;
  margin-top: var(--title-margin-top);
}

.title-background{
/*  background: #B7E8FC;*/
	background: rgb(119, 210, 255);
  background: linear-gradient(90deg, rgba(119,210,255,1) 0%, rgba(255,255,255,1) 100%);
  width: 40%;
  height: var(--title-line-height);
}
.title{
  color: #1D4468;
  font-family: "Open Sans", open sans;
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
	line-height: var(--title-line-height);
}

@media screen and (max-width: 991px){
  .title-background{
    width: 100%;
  }
  .title{
    font-size: var(--mobile-title-font-size);
  }
}




.content-header{
  font-family: "Open Sans", open sans;
  font-size: 24px;
  font-weight: 600;
  color: var(--e-global-color-primary);
}
.director-message-content,
.donor-content{
  line-height: 25px;
  color: rgb(73, 73, 73);
  font-size: 14px;
}





@media screen and (max-width: 575px){
	footer{
		font-size: 14px;
	}
}


.polygon{ -webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%); }