/* DHK Mega Calendar */
@import url('/content/dam/dhk/common/font/manrope/v15/font-manrope.css');
@import url('/content/dam/dhk/common/font/hkremix/font-hkremix.css');
@import url('/content/dam/dhk/common/font/notosanstc/v35/font-notosanstc.css');
@import url('/content/dam/dhk/common/font/notosanssc/v36/font-notosanssc.css');
:root{
   --mcal-main-font: 'Manrope', arial, system-ui, sans-serif;
	--mcal-title-font: 'HKRemix', 'Noto Sans TC', arial, system-ui, sans-serif;
	--mcal-title-font-size: 33px;
	--mcal-main-font-color: #3b002b;
}
@-moz-document url-prefix() {
	:root {
		--mcal-main-font: 'Manrope', arial, 'PingFang TC', 'Microsoft JhengHei', \5FAE\8EDF\6B63\9ED1\9AD4, 'MHei', PMingLiU, system-ui, sans-serif;
	}
}
html[lang="zh-CN"]{
	--mcal-main-font: 'Manrope', 'Noto Sans SC', arial, system-ui, sans-serif;
	--mcal-title-font: 'HKRemix', 'Noto Sans SC', arial, system-ui, sans-serif;
}
html[lang="zh-TW"],
html[lang="zh-CN"]{
	--mcal-title-font-size: 30px;
}

/* DHK style reset */
.navbar-container{height:auto !important;}

/* Custom component {Image with Text listing} */
.imagetext-listing > ul{
   --list-gap: 20px;
	--list-row-gap: calc(var(--list-gap) + 10px);
   list-style:none; margin:0; padding:0; display:flex; flex-direction:row; flex-wrap:wrap; gap:var(--list-gap); row-gap:var(--list-row-gap);
}
.imagetext-listing > ul > li{flex:0 0 calc(50% - ( var(--list-gap) / 2 ) );}
.imagetext-listing > ul[data-col="1"] > li{flex:0 0 100%;}
.imagetext-listing > ul[data-col="2"] > li{flex:0 0 calc(50% - ( var(--list-gap) / 2 ) );}
.imagetext-listing > ul[data-col="3"] > li{flex:0 0 calc(33.3% - ( var(--list-gap) * 2 / 3 ) );}
.imagetext-listing > ul[data-col="4"] > li{flex:0 0 calc(25% - ( var(--list-gap) * 3 / 4 ) );}
.imagetext-listing > ul > li.inactive{filter:contrast(0.7); opacity:.5;}
.imagetext-listing .list-item{position:relative; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:flex-start; gap:1.4583vw;}
.imagetext-listing :is(.list-item, .list-item *){font-family: var(--mcal-main-font);}
.imagetext-listing .list-item .list-item-cover{position:relative; flex:0 0 42.3%; border-radius:12px; overflow:hidden;}
.imagetext-listing .list-item .list-item-cover img{width:100%;}
.imagetext-listing .list-item .list-item-cover .caption{display:inline-block; width:auto; max-width:calc(100% - 5px - 5px); position:absolute; left:5px; bottom:5px; border-radius:4px; padding:2px 3px; background-color:rgba(28,0,59,.7); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.imagetext-listing .list-item .list-item-cover :is(.caption, .caption *){font-size:11px !important; color:#fff !important;}
.imagetext-listing .list-item .list-item-bio{flex:1 1 auto;}
.imagetext-listing .list-item .list-item-heading{margin-bottom:7px; font-size:21px !important; font-weight:700 !important;}
.imagetext-listing .list-item .list-item-heading.long-name{font-size:16px !important;}
.imagetext-listing .list-item :is(.list-item-heading, .list-item-heading *){line-height:1.2 !important; color:var(--mcal-main-font-color) !important;}
.imagetext-listing .list-item .list-item-annotation{margin:6px 0 8px;}
.imagetext-listing .list-item .list-item-desc{margin-top:8px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}
.imagetext-listing .list-item :is(.list-item-desc, .list-item-desc *){font-size:15px; line-height:1.35 !important;}
.imagetext-listing .list-item .list-item-tags{margin-top:12px;}
.imagetext-listing .list-item .list-item-tags > ul{padding-left:0; list-style:none; display:flex; flex-direction:row; flex-wrap:wrap; gap:5px;}
.imagetext-listing .list-item .list-item-tags > ul > li{display:inline-flex; padding:2px 7px; justify-content:center; align-items:center; border-radius:6px; background-color:#ebe5e9;}
.imagetext-listing .list-item .list-item-tags > ul > :is(li, li *){color:var(--mcal-main-font-color) !important; font-size:12px !important; font-weight:700 !important;}

.imagetext-listing .list-item .info-field{font-weight:600 !important; margin-bottom:0; background-repeat:no-repeat;}
.imagetext-listing .list-item .info-field:not(:first-child){margin-top:5px;}
.imagetext-listing .list-item :is(.info-field, .info-field *){color:#9d7f95 !important; font-size:15px; line-height:1.3 !important;}
.imagetext-listing .list-item .info-field.info-date{padding-left:25px; min-height:17px; background-image:url(/content/dam/dhk/common/theme/2024/festival/icon-event-date.svg); background-position:left top;}
.imagetext-listing .list-item .info-field.info-venue{padding-left:25px; min-height:19px; background-image:url(/content/dam/dhk/common/theme/2024/festival/icon-event-location.svg); background-position:1px top;}

.imagetext-listing a > .list-item .list-item-heading:after{
	display:inline-block; content:''; width:10px; height:16px; margin-left:8px; background-image:url("data:image/svg+xml,%3Csvg width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.78584 7.99797L0.828583 1.95035C0.389691 1.50338 0.39059 0.77964 0.830582 0.333791C1.27057 -0.112058 1.98303 -0.111144 2.42192 0.335823L9.17234 7.18817C9.59613 7.62009 9.61063 8.31427 9.20534 8.76408L2.42693 15.6642C1.98803 16.1111 1.27558 16.1121 0.835588 15.6662C0.395596 15.2204 0.394697 14.4966 0.833589 14.0497L6.78584 7.99797Z' fill='%23000000'/%3E%3C/svg%3E%0A"); background-repeat:no-repeat; background-size:auto 100%; background-position:center;
	transition:transform .2s cubic-bezier(0.25, 1, 0.5, 1), color .2s cubic-bezier(0.25, 1, 0.5, 1);
	-moz-transition:transform .2s cubic-bezier(0.25, 1, 0.5, 1), color .2s cubic-bezier(0.25, 1, 0.5, 1);
	-ms-transition:transform .2s cubic-bezier(0.25, 1, 0.5, 1), color .2s cubic-bezier(0.25, 1, 0.5, 1);
	-webkit-transition:transform .2s cubic-bezier(0.25, 1, 0.5, 1), color .2s cubic-bezier(0.25, 1, 0.5, 1);
}
.imagetext-listing a > .list-item .list-item-heading.long-name:after{width:8px; height:13px;}
.imagetext-listing a:hover > .list-item .list-item-heading:after{transform:translateX(5px);}
.imagetext-listing :is(a:hover, a:focus) *{color:var(--mcal-main-font-color) !important;}


/* Mega calendar */
#mega-calendar{
	--filter-tab-spotlight-width: 11.9%;
}
#mega-calendar .os-theme-dark{
	--os-handle-bg: rgba(59, 0, 43, .14);
	--os-handle-bg-hover: rgba(59, 0, 43, .35);
	--os-handle-bg-active: rgba(59, 0, 43, .46);
}
#mega-calendar .container-cust.xlarge{max-width:calc(1640px + 20px + 20px); padding-left:30px !important; padding-right:30px !important;}
#mega-calendar *:not(h1, h2, h3, h4, h1 *, h2 *, h3 *, h4 *, .es-single-banner-title){font-family:var(--mcal-main-font) !important;}
#mega-calendar, #mega-calendar :is(div, span, p, a, li, table th, table td):not(h1 *, h2 *, h3 *, h4 *, h5 *, h6 *){font-weight:500; line-height:1.5;}
#mega-calendar a.btn-more{display:inline-block; position:relative;}
#mega-calendar a.btn-more, #mega-calendar a.btn-more *{color:var(--mcal-main-font-color) !important;}
#mega-calendar a.btn-more:after{display:inline-block; content:''; margin-left:8px; width:16px; height:9px; background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.00203 6.78584L14.0497 0.828583C14.4966 0.389691 15.2204 0.39059 15.6662 0.830582C16.1121 1.27057 16.1111 1.98303 15.6642 2.42192L8.81183 9.17234C8.37991 9.59613 7.68573 9.61062 7.23592 9.20534L0.335822 2.42692C-0.111145 1.98803 -0.112059 1.27558 0.333791 0.835587C0.77964 0.395595 1.50338 0.394696 1.95035 0.833588L8.00203 6.78584Z' fill='%233B002B'/%3E%3C/svg%3E%0A"); background-repeat:no-repeat; background-size: 100% auto; background-position:center; transition:transform .2s cubic-bezier(0.25, 1, 0.5, 1); -moz-transition:transform .2s cubic-bezier(0.25, 1, 0.5, 1); -ms-transition:transform .2s cubic-bezier(0.25, 1, 0.5, 1); -webkit-transition:transform .2s cubic-bezier(0.25, 1, 0.5, 1);}
#mega-calendar a.btn-more:hover:after{transform:translateY(2px);}
#mega-calendar a.btn-viewall{display:block; width:100%; padding:12px 15px; border-radius:16px; background-color:#3b002b; text-align:center;}
#mega-calendar :is(a.btn-viewall, a.btn-viewall *){color:#fff;}

.mcal-filter{position:relative;}
.mcal-filter:not(.preload):before{display:block; content:''; position:absolute; left:0; bottom:10px; width:100%; height:1px; background-color:#D8CCD5;}
.mcal-filter .mcal-filter-scroll{overflow-x:hidden; padding-bottom:10px;}
.mcal-filter ul{list-style:none; padding-left:0 !important; position:relative; display:flex; flex-direction:row; flex-wrap:nowrap;}
.mcal-filter ul > li{flex:0 0 calc((100% - var(--filter-tab-spotlight-width) ) / 12); min-width:80px; position:relative;}
.mcal-filter ul > li[data-spotlight]{flex:0 0 var(--filter-tab-spotlight-width); min-width:115px;}
html[lang="zh-TW"] .mcal-filter ul > li[data-spotlight],
html[lang="zh-CN"] .mcal-filter ul > li[data-spotlight]{
	flex:0 0 var(--filter-tab-spotlight-width); min-width:145px;
}
.mcal-filter ul > li > a{display:block; position:relative; width:100%; height:100%; padding:10px 5px;}
#mega-calendar .mcal-filter :is(span.text-spotlight, span.text-spotlight *, span.text-month, span.text-month *){font-size:var(--mcal-title-font-size) !important; font-family:var(--mcal-title-font) !important; line-height:1.2 !important;}
:is(html[lang="zh-TW"], html[lang="zh-CN"]) #mega-calendar .mcal-filter :is(span.text-spotlight, span.text-spotlight *, span.text-month, span.text-month *){font-weight:800 !important;}
#mega-calendar .mcal-filter :is(span.text-year, span.text-year *){font-size:12px !important;}
.mcal-filter span.text-spotlight,
.mcal-filter span.text-month,
.mcal-filter span.text-year{display:block; position:relative; text-align:center;}
.mcal-filter ul > li:not(:last-child):after{display:block; content:''; position: absolute; right:0; top:15%; width:1px; height:45%; background-color:#D8CCD5;}
.mcal-filter ul > li[data-spotlight]:after, .mcal-filter ul > li[data-month="12"]:after{width:3px; height:60%;}
/* .mcal-filter ul > li[data-month="12"] span.text-month:after{width:3px !important;} */
.mcal-filter ul > li.active{}
/* .mcal-filter ul > li.active > a{padding-left:1.1vw;} */
.mcal-filter ul > li.active > a:after{display:block; content:''; position:absolute; left:0; bottom:0; width:100%; height:4px; border-radius:99px; background-color:#FF1700;}
/* .mcal-filter ul > li.active > a :is(span.text-month, span.text-year){padding-left:20px;} */
/* .mcal-filter ul > li.active > a span.text-month:before{display:block; content:''; position:absolute; left:5px; top:9px; width:22px; height:22px; background-image:url(/content/dam/dhk/common/icon/default/calendar.svg); background-repeat:no-repeat; background-size:100% auto;} */

.mcal-bottom{padding-top:25px;}
.mcal-listing{display:flex; gap:30px; flex-direction:row; flex-wrap:nowrap;}
.mcal-listing .monthly-theme .theme-cover{border-radius:16px; overflow:hidden; aspect-ratio:1 / 1;}
.mcal-listing .imagetext-listing > ul > li:not(.preload) .list-item-cover{border:1px solid #D8CCD5;}
@media (min-width: 991.98px) {
	.mcal-listing .imagetext-listing > ul[data-col="3"] .list-item{gap:1.2583vw;}
	.mcal-listing .imagetext-listing > ul[data-col="3"] .list-item-cover{flex:0 0 38%;}
}
.mcal-listing .list-item-cover > img{aspect-ratio:4 / 3; object-fit:contain;}
.mcal-listing .monthly-theme{flex:0 0 398px; width:398px;}
.mcal-listing .monthly-events{flex:1 1 auto;}
.mcal-listing .monthly-events-footer{padding-top:30px; text-align:center;}
.mcal-listing.spotlight{flex-direction:column;}
.mcal-listing.spotlight :is(.monthly-theme, .monthly-events){flex:auto; width:auto;}
.mcal-listing.spotlight .monthly-theme .theme-cover{border-radius:0; aspect-ratio:unset;}

@-webkit-keyframes ani_shimmer {
	0% {background-position: -468px 0;}
	100% {background-position: 468px 0;}
}
@keyframes ani_shimmer {
	0% {background-position: -468px 0;}
	100% {background-position: 468px 0;}
}
.mcal-filter ul.preload:before{display:none;}
.mcal-filter ul.preload > li{flex:1; padding:15px 5px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px;}
.mcal-filter ul.preload > li span.text-month{width:100%; /* max-width:80px; */ /* height:40px; */ aspect-ratio:3 / 1;}
.mcal-filter ul.preload > li:not(:last-child):after{display:none;}
.mcal-filter ul.preload > li span.text-year{width:100%; /* max-width:80px; */ height:6px;}
.mcal-listing .imagetext-listing > ul > li.preload .list-item-cover{aspect-ratio:4 / 3;}
.mcal-listing .imagetext-listing > ul > li.preload .list-item-heading{width:60%; height:30px; margin-bottom:20px;}
.mcal-listing .imagetext-listing > ul > li.preload .list-item-desc > ul{padding-left:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
.mcal-listing .imagetext-listing > ul > li.preload .list-item-desc > ul > li{width:80%; height:6px;}
.mcal-listing .monthly-theme .theme-cover.preload{aspect-ratio:1 / 1;}

.mcal-filter ul.preload>li :is(span.text-month, span.text-year),
.mcal-listing .imagetext-listing>ul>li.preload :is(.list-item-cover, .list-item-heading, .list-item-desc > ul > li),
.mcal-listing .monthly-theme .theme-cover.preload {
	-webkit-animation-duration: 1.25s;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: ani_shimmer;
	-webkit-animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 1.25s;
	animation-fill-mode: forwards;
	animation-name: ani_shimmer;
	animation-timing-function: linear;
	background: #F6F6F6;
	background: linear-gradient(to right, #F6F6F6 8%, #F0F0F0 18%, #F6F6F6 33%);
	background-size: 800px 104px;
	position: relative;
	border-radius:8px;
}





/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1679.98px) {
	
}


/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
	:root {
		--mcal-title-font-size: 28px;
	}	
	html[lang="zh-TW"],
	html[lang="zh-CN"] {
		--mcal-title-font-size: 26px;
	}
	
   /* Mega calendar */
   .mcal-listing .monthly-theme{flex:0 0 360px; width:360px;}
}


/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
   .imagetext-listing > ul > li{flex:0 0 100%;}
}


@media screen and (max-width: 1023px) {
	.navbar-wrapper{height:88px;}
}


/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	/* Custom component {Image with Text listing} */
	.imagetext-listing{padding:0;}
	.imagetext-listing > ul > li{flex:0 0 calc(50% - ( var(--list-gap) / 2 ) ) !important;}
	.imagetext-listing .list-item{gap:16px !important;}
	.imagetext-listing .list-item .list-item-cover{flex:0 0 135px !important;}
	.imagetext-listing .list-item .list-item-cover :is(.caption, .caption *){font-size:10px !important; line-height:1.2 !important;}
	.imagetext-listing .list-item .list-item-heading{font-size:18px !important;}
	.imagetext-listing .list-item .list-item-heading.long-name{font-size:15px !important;}
	.imagetext-listing.sticky-style{gap:20px;}
	.imagetext-listing.sticky-style .col-left{flex:0 0 calc(42% - (20px / 2)); width:calc(42% - (20px / 2));}
	.imagetext-listing.sticky-style .col-right{flex:0 0 calc(58% - (20px / 2)); width:calc(58% - (20px / 2));}

	/* Mega calendar */
	.mcal-listing{/* gap:30px; */ flex-direction:column;}
	.mcal-listing .monthly-theme{flex:auto; width:auto;}
	.mcal-listing .monthly-events{flex:auto;}
	.mcal-listing .monthly-theme .theme-cover{aspect-ratio:16 / 9;}

	.mcal-listing .monthly-theme .theme-cover.preload{aspect-ratio:16 / 9;}
}


/* `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
	#year-round-excitement{margin-left:-60px; margin-right:-60px; width:auto;}

	/* Custom component {Image with Text listing} */
	.imagetext-listing ul{flex-direction:column; margin-left:0; margin-right:0; margin-top:0 !important; margin-bottom:10px !important; gap:25px;}
	.imagetext-listing > ul > li{flex:0 0 100% !important; max-width:100% !important; margin:0;}
	.imagetext-listing > ul > li:nth-child(odd), html[lang="ar"] .imagetext-listing > ul > li:nth-child(even){padding-left:0; padding-right:0;}
	.imagetext-listing > ul > li:nth-child(even), html[lang="ar"] .imagetext-listing > ul > li:nth-child(odd){padding-left:0; padding-right:0; border-left:0;}
	.imagetext-listing .list-item .list-item-cover{flex:0 0 140px !important; border-radius:8px;}
	.imagetext-listing .list-item .list-item-heading{margin-bottom:3px; font-size:15px !important;}
	.imagetext-listing .list-item .list-item-heading.long-name{font-size:14px !important;}
	.imagetext-listing .list-item :is(.info-field, .info-field *){font-size:13px;}
	.imagetext-listing .list-item :is(.list-item-desc, .list-item-desc *){font-size:14px;}
	.imagetext-listing a > .list-item .list-item-heading:after{width:8px; height:12px; margin-left:6px;}
	.imagetext-listing.sticky-style{flex-direction:column;}
	.imagetext-listing.sticky-style .col-left{flex:auto; width:auto;}
	.imagetext-listing.sticky-style .col-right{flex:auto; width:auto;}

	/* Mega calendar */
	#calendar{margin-left:-60px; margin-right:-60px; width:auto;}
	#mega-calendar{
		--filter-tab-spotlight-width: 32%;
	}
	#mega-calendar .container-cust.xlarge{padding-left:20px !important; padding-right:20px !important;}
	#mega-calendar a.btn-more:after{margin-left:6px; width:16px; height:9px;}
	#mega-calendar a.btn-viewall{padding:8px 12px; border-radius:12px;}
	.mcal-filter ul > li{min-width:73px;}
	.mcal-filter ul > li[data-spotlight]{min-width:108px;}
	html[lang="zh-TW"] .mcal-filter ul > li[data-spotlight],
	html[lang="zh-CN"] .mcal-filter ul > li[data-spotlight]{
		min-width:130px;
	}
	.mcal-filter ul > li.active > a span.text-month:before{left:7px; top:8px; width:18px; height:18px;}
	.mcal-listing{gap:25px;}
	.mcal-listing .monthly-theme .theme-cover{border-radius:10px;}

	.mcal-bottom{padding-top:10px;}
}


/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	
}