/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; }

/* TYPE */
body { font-family: Arial, Verdana, sans-serif; font-size: 13px;  color: #666666; width: 100%; height: 100%; line-height: 1.6em; /* min-width:970px; width: 100%;  */background-color: #f7f7f7; }
#bg { position:absolute; background-color: #4d7b71; width: 100%; height: 190px; top: 60px; z-index: -1; }
ul { list-style-type: none; float: left; }
li { float: left; }
a img { border: 0;}
a { display: block; }
a:link { text-decoration: none;}
div:hover { cursor: default; }

/* LAYOUT */
#wrapper { position: relative; }

/* HEADER */
#header { height:60px; }
#rthklogo { position: absolute; left: 30px; top: 15px; z-index: 99; }

/* SLIDESHOW */
/* a img:hover { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } */
#slide-title-image { pointer-events: none; }
#photo-slider { position: relative; }
#slide-title-image { position: absolute; display: block; top: 60px; left: 50%; margin-left:-105px; z-index: 2; }
#slide-decor-image { position: absolute; display: block; top: 135px; left: 50%; margin-left:-105px; z-index: 3; }
#slide-line { position: absolute; display: block; background-image: url("../images/slide_line.jpg"); background-repeat: repeat-x; width: 100%; top: 190px; z-index: 1; text-indent: -999px; }

/* MAIN CONTENT CONTAINERS */
#main-content { margin: 40px 15px 0px 15px; height:100%; position:relative; padding: 0 10px; }
/* .new-section-style { margin: 15px auto; overflow: hidden; width: 870px; } */
#intro-wordings { max-width: 900px; padding: 0 10px; text-align: left; font-size: 16px; line-height: 180%; margin: 15px auto; overflow: hidden; }
#navbar { margin: 15px auto 0px; display: flex; }
#container { margin: 0 auto 20px; }

/* NAVIGATION BAR */
ul#nav-menu { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 auto;  border: 1px solid #eeeeee; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -ms-border-radius: 5px; overflow: hidden; }
ul#nav-menu li { flex: 1 1 auto; height: inherit;  }
ul#nav-menu li a { display: flex; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; color: #3ca28c; background-color: #ffffff; padding: 12px 22px; font-size: 16px; font-weight: bold; letter-spacing: 1px; }
ul#nav-menu li a.selected { color: #ffffff !important; background-color: #2da574 !important; pointer-events: none; }
ul#nav-menu li a:hover { background-color: #e1ece8; }

/* MAIN CONTENTS */
.row { clear: both; }
.content-block-style { position: relative; float: left; display: block; max-width: 290px; height: auto; padding: 10px 10px; margin: 8px; }
.content-block-style > a { aspect-ratio: 16 / 9; display: block; }
.content-block-style:hover { background-color: #eeeeee; -moz-border-radius:4px;  -webkit-border-radius:4px; border-radius:4px; -ms-border-radius: 4px; behavior: url("PIE.htc"); }
.content-block-style:nth-child(3n+1){ /* clear: both; */}
.image-block-style { position: relative; border:1px solid #c9c9c9;  margin-bottom: 8px; left: 2px; width: 285px; height: auto; aspect-ratio: 16 / 9; }
.simply-scroll .simply-scroll-list li .image-block-style { width: 338px; }
.content { padding: 0 5px; }
.content-type-style, .type-link-style:visited, .type-link-style:link  { color: #3c9f76; font-size: 15px; font-weight: bold; text-decoration: none; letter-spacing: 1px; }
/*
.type-link-style:hover, .content-link-style:hover { text-decoration: underline; }
*/
.content-link-style { float: left; display: block; width: 100%; font-size: 18px; font-weight: bold; margin: 8px 0; color: #606060; }
.content-word-style { position: relative; color: #787f7c; font-size: 14px; float: left; display: block; width: 100%; text-align: left; margin-bottom: 10px; line-height: 1.7em; }
.content-divider { position: relative; width: 100%; float: left; display: block; border-top: 1px dotted #c6c6c6; border-left: 0px; border-right: 0px; border-bottom: 0px; }
.button-style { position: relative; float: left; display: block; color: #359b74; padding: 6px 0; background-color: #ffffff; width: 85px; text-align: center; margin: 0 3px 0px 3px; border:1px solid #c9c9c9; -moz-border-radius:5px;  -webkit-border-radius:5px; border-radius:5px; -ms-border-radius: 5px; behavior: url("PIE.htc"); line-height: 22px; }
.button-style:hover { color: #ffffff; background-color: #2da574; }
.button-style.double { padding: 3px 0; margin: 0 5px 10px 5px; line-height: 14px; font-size: 12px;}
.buttons-group { width: 290px; }
li:first-child .button-style { margin-left: 0px; }
li:last-child .button-style { margin-right: 0px; }

/* BACK TO TOP */
.back-to-top {
	position: fixed;
	bottom: 15px;
	right: 15px;
	display: none;
	background: url('../images/back-to-top.png');
	background-size: 100%; 
	width: 50px;
	height: 0px;
	padding-top: 50px;
	overflow: hidden;
	z-index: 999;
	/* border-radius: 3px; */
	opacity: 0.8;
	transition: opacity 0.3s ease;
}
.back-to-top:hover {	
	opacity: 1;
}

/* FOOTER */
.footer-divider { width: 100%; border-top: 1px solid #dbddd4; border-left: 0px; border-right: 0px; border-bottom: 0px; margin-top: 20px; margin-bottom: 20px; }
#footer { text-align: center; margin:0 0 10px 0;  position: relative; color: #666666; padding-left: 20px; font-size: 15px; }
#remarks { position: relative; clear:both; color: #666666; text-align: right; padding-right: 15px; line-height: 3em; } 

/* SHARING */
#sharing { position: absolute; background: url('../images/btn_share.png') left top no-repeat; width: 57px; height: 30px; right: 25px; top: 15px; z-index: 98; _background: url('../images/btn_share.gif') left top no-repeat;  }
#sharing #icon-facebook { display: block; height: 22px; width: 22px; position: absolute; left: 5px; top: 5px; }
#sharing #icon-twitter { display: block; height: 22px; width: 22px; position: absolute; left: 30px; top: 5px; }
#sharing #icon-weibo { display: none; height: 22px; width: 22px; position: absolute; left: 55px; top: 5px; }

/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/**** Isotope filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

@media only screen and (max-width : 767px) {
	ul#nav-menu li { width: 50%; }
}

@media only screen and (max-width : 560px) {
	ul#nav-menu li { width: 100%; }
}