/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	/* line-height: 1; */
	line-height: 0; /* modify on January 8, 2019 */
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*start*/
body {
  min-height: 100vh;
  margin: 0;
  font-size: 18px;
  /* font-size: 1.11vw; */
  font-family: Microsoft JhengHei, Ariel;
  overflow-x: hidden;
}
table, th, td {
    border: 0px solid #494949;
}
a {
  text-decoration: none;
}
.clear{
  clear: both;
}

/*define font-large and font-small for any change-able font class*/
.h0{font-size: 4.5em	;}
.h1{font-size: 3.750em	;}
.h2{font-size: 1.875em	;line-height: 1.5em;}

.p1				{font-size: 0.9em	;line-height: 1.5em;}
.p1.font-large	{font-size: 1.3em	;line-height: 1.5em;}
.p1.font-small	{font-size: 0.7em	;line-height: 1.5em;}

.p1				{font-size: 0.9em	;line-height: 1.5em;}
.p1.font-large	{font-size: 1.0em	;line-height: 1.5em;}
.p1.font-small	{font-size: 0.8em	;line-height: 1.5em;}

td#header {
    background-color: white;
    width: 200px;
    white-space: nowrap;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
}
/* tr.tai_kok_tsui_workshops-head td#header:hover { background-color: #c7e89d; } */

/* tr.estates-head td#header:hover, tr.wanda-head td#header:hover { background-color: #9dade8; } */

/* tr.tai_kok_tsui_workshops-head td#header:hover a, tr.estates-head td#header:hover a, tr.wanda-head td#header:hover a { color: #fff; } */

tr#fontsizerChanger td {
  width: 48px;
  height: 48px;
  background: white;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  font-weight: bold;
}
/* tr#fontsizerChanger.tai_kok_tsui_workshops-head td, tr#fontsizerChanger.estates-head td, tr#fontsizerChanger.wanda-head td { background-color: #ffffff; text-align: center; } */

/* tr#fontsizerChanger.estates-head a, tr#fontsizerChanger.wanda-head a { color: #4a1b60; text-decoration: none;} */

tr#fontsizerChanger a#fontSmall {
    font-size: 0.75em;
}
tr#fontsizerChanger a {
    font-size: 1em;
}
tr#fontsizerChanger a#fontLarge {
    font-size: 1.3em;
}

/* tr#fontsizerChanger.tai_kok_tsui_workshops-head td:hover { background-color: #c7e89d; cursor: pointer; } */

/* tr#fontsizerChanger.estates-head td:hover, tr#fontsizerChanger.wanda-head td:hover { background-color: #9dade8; cursor: pointer; } */

/* tr#fontsizerChanger.tai_kok_tsui_workshops-head td:hover a, tr#fontsizerChanger.estates-head td:hover a, tr#fontsizerChanger.wanda-head td:hover a { color: #ffffff; cursor: pointer; } */

/* tr#fontsizerChanger.tai_kok_tsui_workshops-head a.active, tr#fontsizerChanger.estates-head a.active, tr#fontsizerChanger.wanda-head a.active { color: #ffffff; } */

.header-aaa{
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
}

/* .bg-estates > img, .bg-tai_kok_tsui_workshops > img{ width: 100%; } */
.bg-estates > img { width: 100%; margin-top: 0;}

/* .estates, .tai_kok_tsui_workshops{ background-color: #ffffff; color: #494949; } */

/* .estates-color td, .estates-color a, tr#fontsizerChanger.estates-head a, .estates-head a{ color: #4a1b60; } */

/* .tai_kok_tsui_workshops-color td, .tai_kok_tsui_workshops-color a, tr#fontsizerChanger.tai_kok_tsui_workshops-head a, .tai_kok_tsui_workshops-head a { color: #695b24; } */

.estates-shadow{
  -webkit-box-shadow: 4px 4px 0px 0px rgba(74,27,96,0.75);
  -moz-box-shadow: 4px 4px 0px 0px rgba(74,27,96,0.75);
  box-shadow: 4px 4px 0px 0px rgba(74,27,96,0.75);
}

/*
.tai_kok_tsui_workshops-shadow{
  -webkit-box-shadow: 4px 4px 0px 0px rgba(105,91,36,0.75);
  -moz-box-shadow: 4px 4px 0px 0px rgba(105,91,36,0.75);
  box-shadow: 4px 4px 0px 0px rgba(105,91,36,0.75);
}
*/

/* .estates-back, .tai_kok_tsui_workshops-back{ background: #fff; padding-right: 6px; } */

.slide {
    width: 100%;
    display: table;
}
.main-para {
    text-align: justify;
    max-width: 60%;
    padding: 30px 0px 30px 0px;
    margin: 0px auto;
}

.table-vcenter {
    display: table-cell;
    vertical-align: middle;
	padding: 30px 0px 30px 0px; /* added on January 8, 2019 */
}

.table-hcenter { margin: 0px auto; }

/* .p1 { font-size: 0.9em; line-height: 1.5em; } */

/* .estates-content, .tai_kok_tsui_workshops-content{ background-size: 10px; background-repeat: repeat; } */

/* .estates-content{ background-image: url('../images/estates/bg.jpg'); } */

/* .tai_kok_tsui_workshops-content{ background-image: url('../images/tai_kok_tsui_workshops/bg.jpg'); } */

.footer {
    margin: auto;
    width: 60%;
    padding-bottom: 30px;
    padding-top: 30px;
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1.5em;
}

.gallery{
  /* max-width: 80%; modify on January 8, 2019 */
  /* margin: 50px auto 50px auto; modify on January 8, 2019 */
  margin: 10px 5px 10px 5px;
  border-collapse: separate;
  border-spacing: 10px;
  max-height: 350px;
  display: inline-block; /* modify on January 8, 2019 */
  overflow: hidden; /* modify on January 8, 2019 */
}

/*
.gallery td{
  width: 350px;
  height: 350px !important;
  max-height: 350px;
  position: relative;
  box-sizing: border-box;
  padding: 35px;
}
*/

/* .gallery div { modify on January 8, 2019 */
  /* opacity: 0; modify on January 8, 2019 */
  /* position: relative; modify on January 8, 2019 */
  /* padding: 10% 10%; OLD */
  /* font-size: 0.8em; modify on January 8, 2019 */
  /* color: #494949; modify on January 8, 2019 */
  /* height: 100% !important;
  /* max-height: 250px; OLD */
  /* z-index: 99; modify on January 8, 2019 */
  /* line-height: 1.5em; modify on January 8, 2019 */
/* } modify on January 8, 2019 */

/*
.gallery td:hover::before{
	content: '';
	background: #fff;
	position: absolute;
	display: inline;
	top: 25px;
  left: 25px;
	height: calc(100% - 50px);
	width: calc(100% - 50px);
	height: 300px; OLD
	width: 300px; OLD
	max-height: 300px;
	z-index: 1;
}
*/

/*
.estates-sub .gallery td:hover::after{
	content: '';
	background: rgba(74, 27, 96, 0.5);
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	height: 350px; OLD
	width: 350px; OLD
	max-height: 350px;
}
*/

/*
.tai_kok_tsui_workshops-sub .gallery td:hover::after{
  content: '';
  background: rgba(105, 91, 36, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  height: 350px; OLD
  width: 350px; OLD
  max-height: 350px;
}
*/

.gallery div img {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/*
.gallery td:hover div {
    opacity: 1;
}
*/

/*top right menu*/

/*
tr#fontsizerChanger a{font-size: 1em;}
tr#fontsizerChanger a#fontSmall{font-size: 0.75em;}
tr#fontsizerChanger a#fontLarge{font-size: 1.3em;}
tr#fontsizerChanger.tai_kok_tsui_workshops-head a {color:#695b24;text-decoration:none;}
tr#fontsizerChanger.estates-head a, tr#fontsizerChanger.wanda-head a {color:#4a1b60;text-decoration:none;}
tr#fontsizerChanger.tai_kok_tsui_workshops-head td, tr#fontsizerChanger.estates-head td, tr#fontsizerChanger.wanda-head td {background-color: #ffffff;text-align: center;}
tr#fontsizerChanger.tai_kok_tsui_workshops-head a.active, tr#fontsizerChanger.estates-head a.active, tr#fontsizerChanger.wanda-head a.active {color:#ffffff;}
tr#fontsizerChanger.tai_kok_tsui_workshops-head td.active {background-color: #c7e89d;}
tr#fontsizerChanger.estates-head td.active, tr#fontsizerChanger.wanda-head td.active {background-color: #9dade8;}
tr#fontsizerChanger.tai_kok_tsui_workshops-head td:hover a, tr#fontsizerChanger.estates-head td:hover a, tr#fontsizerChanger.wanda-head td:hover a {color: #ffffff;cursor: pointer;}
tr#fontsizerChanger.tai_kok_tsui_workshops-head td:hover {background-color: #c7e89d;cursor: pointer;}
tr#fontsizerChanger.estates-head td:hover, tr#fontsizerChanger.wanda-head td:hover {background-color: #9dade8;cursor: pointer;}
tr#fontsizerChanger.bus-head a {color:#ee4823;text-decoration:none;}
tr#fontsizerChanger.bus-head td {background-color: #ffffff;text-align: center;}
tr#fontsizerChanger.bus-head a.active {color:#ffffff;}
tr#fontsizerChanger.bus-head td.active {background-color: #ee4823;}
tr#fontsizerChanger.bus-head td:hover a {color:#ffffff;cursor: pointer;}
tr#fontsizerChanger.bus-head td:hover {background-color: #ee4823;cursor: pointer;}
*/

/* .gallery.font-large div{font-size: 1.1em;} */
/* .gallery.font-small div{font-size: 0.5em;} */

.gallery.font-large div{font-size: 1.0em;}
.gallery.font-small div{font-size: 0.8em;}


/* .bus-sub .gallery.font-large div.too-long{font-size: 0.95em;} */
/* .wanda-sub .gallery.font-large div.too-long{font-size: 0.95em;} */

 /* Start added on January 8, 2019 */
td.common_header{
	width: 200px;
    white-space: nowrap;
    font-size: 1em;
    cursor: pointer;
    font-weight: bold;
	height: 48px;
	vertical-align:middle;
	text-align:center;
}

/* design01 */
td#design01_header {background-color: #41230f;}
tr.design01_estates-head td#design01_header a {color: #ffffff;}
tr.design01_estates-head td#design01_header:hover {background-color: #ffffff;}
tr.design01_estates-head td#design01_header:hover a {color: #41230f;}
tr#fontsizerChanger.design01_estates-head a {color:#ffffff;text-decoration:none;}
tr#fontsizerChanger.design01_estates-head td {background-color: #41230f;text-align: center;}
tr#fontsizerChanger.design01_estates-head a.active {color:#41230f;}
tr#fontsizerChanger.design01_estates-head td.active {background-color: #ffffff;}
tr#fontsizerChanger.design01_estates-head td:hover a {color: #41230f;cursor: pointer;}
tr#fontsizerChanger.design01_estates-head td:hover {background-color: #ffffff;cursor: pointer;}

.design01_estates-shadow{
  -webkit-box-shadow: 4px 4px 0px 0px rgba(65,35,15,0.5);
  -moz-box-shadow: 4px 4px 0px 0px rgba(65,35,15,0.5);
  box-shadow: 4px 4px 0px 0px rgba(65,35,15,0.5);
}
div.design01_gallery > div:hover::after{ background: rgba(155,215,235,0.5); }

#design01_estates_slide_bg {background-color: #fdf5e8;}
.design01_estates-content{background-color: #9bd7eb;}

div.design01_footer{background-color: #41230f;}

/* design02 */
td#design02_header {background-color: #373737;}
tr.design02_estates-head td#design02_header a {color: #ffffff;}
tr.design02_estates-head td#design02_header:hover {background-color: #ffffff;}
tr.design02_estates-head td#design02_header:hover a {color: #373737;}
tr#fontsizerChanger.design02_estates-head a {color:#ffffff;text-decoration:none;}
tr#fontsizerChanger.design02_estates-head td {background-color: #373737;text-align: center;}
tr#fontsizerChanger.design02_estates-head a.active {color:#373737;}
tr#fontsizerChanger.design02_estates-head td.active {background-color: #ffffff;}
tr#fontsizerChanger.design02_estates-head td:hover a {color: #373737;cursor: pointer;}
tr#fontsizerChanger.design02_estates-head td:hover {background-color: #ffffff;cursor: pointer;}

.design02_estates-shadow{
  -webkit-box-shadow: 4px 4px 0px 0px rgba(55,55,55,0.5);
  -moz-box-shadow: 4px 4px 0px 0px rgba(55,55,55,0.5);
  box-shadow: 4px 4px 0px 0px rgba(55,55,55,0.5);
}
div.design02_gallery > div:hover::after{ background: rgba(220,220,220,0.5); }

#design02_estates_slide_bg {background-color: #ffffff; border-style:solid; border-width:10px 0px 10px 0px; border-color:#000000;}
.design02_estates-content{background-image: url("../images/kowloon_walled_city/kowloon_walled_city_bg.jpg");}

div.design02_footer{background-color: #373737;}

/* design03 */
td#design03_header {background-color: #c30f23;}
tr.design03_estates-head td#design03_header a {color: #ffffff;}
tr.design03_estates-head td#design03_header:hover {background-color: #ffffff;}
tr.design03_estates-head td#design03_header:hover a {color: #c30f23;}
tr#fontsizerChanger.design03_estates-head a {color:#ffffff;text-decoration:none;}
tr#fontsizerChanger.design03_estates-head td {background-color: #c30f23;text-align: center;}
tr#fontsizerChanger.design03_estates-head a.active {color:#c30f23;}
tr#fontsizerChanger.design03_estates-head td.active {background-color: #ffffff;}
tr#fontsizerChanger.design03_estates-head td:hover a {color: #c30f23;cursor: pointer;}
tr#fontsizerChanger.design03_estates-head td:hover {background-color: #ffffff;cursor: pointer;}

.design03_estates-shadow{
  -webkit-box-shadow: 4px 4px 0px 0px rgba(195,15,35,0.5);
  -moz-box-shadow: 4px 4px 0px 0px rgba(195,15,35,0.5);
  box-shadow: 4px 4px 0px 0px rgba(195,15,35,0.5);
}
div.design03_gallery > div:hover::after{ background: rgba(182,85,79,0.5); }

#design03_estates_slide_bg {background-color: #e1cdb9;}
.design03_estates-content{background-color: #b6554f;}

div.design03_footer{background-color: #763c3c;}

/* design04 */
td#design04_header {background-color: #c30f23;}
tr.design04_estates-head td#design04_header a {color: #ffffff;}
tr.design04_estates-head td#design04_header:hover {background-color: #ffffff;}
tr.design04_estates-head td#design04_header:hover a {color: #c30f23;}
tr#fontsizerChanger.design04_estates-head a {color:#ffffff;text-decoration:none;}
tr#fontsizerChanger.design04_estates-head td {background-color: #c30f23;text-align: center;}
tr#fontsizerChanger.design04_estates-head a.active {color:#c30f23;}
tr#fontsizerChanger.design04_estates-head td.active {background-color: #ffffff;}
tr#fontsizerChanger.design04_estates-head td:hover a {color: #c30f23;cursor: pointer;}
tr#fontsizerChanger.design04_estates-head td:hover {background-color: #ffffff;cursor: pointer;}

.design04_estates-shadow{
  -webkit-box-shadow: 4px 4px 0px 0px rgba(195,15,35,0.5);
  -moz-box-shadow: 4px 4px 0px 0px rgba(195,15,35,0.5);
  box-shadow: 4px 4px 0px 0px rgba(195,15,35,0.5);
}
div.design04_gallery > div:hover::after{ background: rgba(160,203,176,0.5); }

/* #design04_estates_slide_bg {background-color: #fff2e6;} */
/* .design04_estates-content{background-color: #ff4040;} */
/* div.design04_footer{ background-color: #ff4040; } */

div.design04_footer td{ color:#000000; }

.design04_body{ background-color: #a0cbb0; line-height: 0; }
.design04_estates-content { width:90%; margin:auto; background-color:#ffffff; margin-top:50px; border-radius:25px;}
.design04_contect_text { width: 95%; margin: auto; margin-top: 20px; }
/* #design04_gallery { margin:20px auto 50px auto; } */
.design04_gallery{ margin: 10px 0.5% !important; }

.common_footer_color td{ color:#ffffff;}

/* other */
.gallery > div {
	width: 350px;
	height: 350px !important;
	max-height: 350px;
	position: relative;
	box-sizing: border-box;
	padding: 35px;
}
.gallery .gallery-photo div{
    opacity: 0;
    position: relative;
    /*padding: 10% 10%;*/
    /* font-size: 0.8em; */
    color: #494949;
	height: 100% !important;
	/*max-height: 250px;*/
	z-index: 99;
	line-height: 1.5em;
}

div.information_photo{
    opacity: 0;
	position: relative;
    /* font-size: 0.8em; */
	font-size: 0.9em;
    color: #494949;
	height: 100% !important;
	z-index: 99;
	line-height: 1.5em;
	overflow:hidden;
}

.gallery > div:hover::before{
	content: '';
	background: #fff;
	position: absolute;
	display: inline;
	top: 25px;
    left: 25px;
	height: calc(100% - 50px);
	width: calc(100% - 50px);
	/*height: 300px;
	width: 300px;*/
	max-height: 300px;
	z-index: 1;
}

.gallery > div:hover .information_photo {
    opacity: 1;
}

.gallery > div:hover::after{
	content: '';
	position: absolute;
	top: 0;
    left: 0;
	height: 100%;
	width: 100%;
	/*height: 350px;
	width: 350px;*/
	max-height: 350px;
}

#photoGallery_js {
  width: 1110px;
  margin: 0 auto;
  min-height: 500px;
}

.toggleMenu {
  width: 50px;
  height: 43px;
  display: none;
  background-size: contain;
  position: absolute;
  left: 25%;
  PADDING-TOP: 5PX;
}

.design01_estates-shadow{ background: #41230f;}
.design02_estates-shadow{ background: #373737;}
.design03_estates-shadow{ background: #c30f23;}
.design04_estates-shadow{ background: #c30f23;}

span.icon-bar {
    display: block;
    /* width: 38px; */
    /* height: 3px; */
    /* border-radius: 1px; */
    /* background-color: #fff; */
    /* MARGIN: 7PX AUTO 7PX AUTO; */
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 14px 35px 14px 0;
	border-color: transparent #ffffff transparent transparent;
	position: absolute;
	top: 20%;
	left: 12.5%;
}

/* End added on January 8, 2019 */

@media only screen and (max-width: 1124px){
	#back{
		display: none;
	}
	td#header{
		padding-right: 0px;
		min-width: 45px;
		float: left;
		width: auto;
	}
	/* added on January 8, 2019 */
	#photoGallery_js {
		width: 100vw;
		min-height: 500px;
	}

	#photoGallery_js > div { margin: 10px 4%; }



	.gallery > div {
		width:40vw;
		height:40vw !important;
	}

	.toggleMenu { display: block; }

	#design01_header{ display:none; }
	#design02_header{ display:none; }
	#design03_header{ display:none; }
	#design04_header{ display:none; }
	#desktop_header_menu{ border-spacing:1px; }

	/* .design04_estates-content{ width:98%; margin-top:30px } */
	/* div.design04_gallery { margin: 10px 4.5% !important; } */
}

@media only screen and (max-width: 767px){
	#back{
		display: none;
	}
	.bg-estates > img {
		margin-top: 55PX;
}
	td#header{
		padding-right: 0px;
		min-width: 45px;
		float: left;
		width: auto;
	}
	/* added on January 8, 2019 */
	#photoGallery_js {
		width: 100vw;
		min-height: 500px;
	}
	/* #photoGallery_js > div { margin: 10px 10%; } */

	/* .gallery > div { */
		/* width:80vw; */
		/* height:80vw !important; */
	/* } */

	.toggleMenu { display: block; }

	#design01_header{ display:none; }
	#design02_header{ display:none; }
	#design03_header{ display:none; }
	#design04_header{ display:none; }
	#desktop_header_menu{ border-spacing:1px; }

	/* .design04_estates-content{ width:94%; } */
	/* div.design04_gallery { margin: 10px 7% !important; } */
	
	.gallery div img {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 5px;
    right: 5px;
}	
	.gallery > div {
    padding: 10px;
	}

	.gallery > div:hover::before {
    content: '';
    top: 10px;
    left: 10px;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
	}

}

@media only screen and (max-width: 1600px){
  .design04_gallery > div {
	width: 22vw !important;
    height: 22vw !important
  }
}

@media only screen and (max-width: 1440px){
  .design04_gallery > div {
	width: 33vw !important;
    height: 33vw !important
  }
  .design04_estates-content > .estates-sub.slide > div > #photoGallery_js { width:70vw; }
}
@media only screen and (max-width: 800px){
	.design04_estates-content > .estates-sub.slide > div > #photoGallery_js {
      width: 55vw !important;
      min-height: 55vw !important;
	}
	.design04_gallery > div {
      width: 55vw !important;
      height: 55vw !important;
	}
	.design04_gallery{ margin: 10px 0 !important; }
}