/*
Theme Name: Total
Theme URI: https://hashthemes.com/wordpress-theme/total/
Author: Hash Themes
Author URI: https://hashthemes.com
Description: Total as its name suggest is a complete package theme with all the feature that you need to make a complete website. The theme has clean and elegant design with vibrant color(Theme Color Changable Option) and parallax sections. The home page consist of slider, featured section with icon, about us section with progress bar, portfolio section with masonary layout, team section, testimonial section, counter section, blog section with option to add 3, 6 or 9 blog posts, clients logo carousel slider and call to action section. The theme is fully responsive and is built on customizer that enable you to configure the website with live preview. The theme is SEO friendly, Cross browser compatible, fully translation ready and is compatible with WooCommerce - an ecommerce plugin and all other major plugins. The theme can also be used with all major page builder plugins like Elementor, SiteOrigin, WpBakery VisualComposer and Beaver Builder. The theme provides option to import the demo with just one click. DEMO: https://demo.hashthemes.com/total/
Version: 1.2.23
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: total
Tags: two-columns, right-sidebar, custom-background, custom-menu, editor-style, featured-images, footer-widgets, theme-options, threaded-comments, translation-ready, portfolio, education, blog, custom-logo
*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
@font-face {
  font-family: 'noto-chinese';
  src: url(/20250708214654oe_/https://cspds.cuhk.edu.hk/wp-content/uploads/site/font/NotoSerifCJKtc-Regular.otf);
}
@font-face {
  font-family: 'roboto-light';
  src: url(/20250708214654oe_/https://cspds.cuhk.edu.hk/wp-content/uploads/site/font/Roboto-Light.ttf);
}
@font-face {
  font-family: 'roboto-bold';
  src: url(/20250708214654oe_/https://cspds.cuhk.edu.hk/wp-content/uploads/site/font/Roboto-Bold.ttf);
}

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
	margin: 0;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
	display:inline;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}


input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	color: inherit;
	font: inherit;
	overflow: visible;
	margin: 5px 5px 5px 5px;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
	}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"]{
	padding: 0;
	margin: 0;
}
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
	margin-right: 10px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #444;
	font-size: 18px;
	line-height: 1.6;
	font-family: roboto-light, noto-chinese, sans-serif;
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 300;
	line-height: 1.2;
	font-family: 'Oswald', noto-chinese, sans-serif;
}

h1{
	font-size: 28px;
	margin-bottom: 15px;
}

h2{
	font-size: 26px;
	margin-bottom: 15px;
}

h3{
	font-size: 24px;
	margin-bottom: 15px;
}

h4{
	font-size: 22px;
	margin-bottom: 10px;
}

h5{
	font-size: 20px;
	margin-bottom: 10px;
}

h6{
	font-size: 18px;
	margin-bottom: 10px;
}
p {
	margin:0 0 15px;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 15px;
}

address {
	margin: 0 0 15px;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 15px;
	max-width: 100%;
	overflow: auto;
	padding: 15px;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #fff; /* Fallback for when there is no custom background color defined. */
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 15px;
}

ul,
ol {
	margin: 0 0 15px 20px;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 15px;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 15px 15px;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
	vertical-align: middle;
}

table {
	margin: 0 0 15px;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background: #FFC107;
	padding: 0 20px;
    height: 40px;
	color: #FFF;
	border: 0;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	background: #333;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	outline: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #404040;
	border: 1px solid #EEE;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
	vertical-align: top;
}

select {
	border: 1px solid #EEE;
    height: 40px;
	padding: 0px 40px 0px 8px;
	background-color: transparent;
	line-height: 100%;
	outline: 0;
	background-image: url("images/arrow.png");
	background-position: right center;
	background-repeat: no-repeat;
	position: relative;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	outline: 0;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"] {
	padding: 3px 8px;
    height: 40px;
}

textarea {
	padding: 8px;
	width: 100%;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #FFC107;
	text-decoration: none;
    transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
}

a:visited {
	
}

a:hover{
	color: #FFC107;
	text-decoration: none;
}

a:focus {
	outline: 0;
}

a:hover,
a:active {
	outline: 0;
}


/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 15px;
}

.alignright {
	display: inline;
	margin-left: 15px;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.ht-clearfix:before,
.ht-clearfix:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-footer:before,
.site-footer:after,
.ht-container:before,
.ht-container:after {
	content: "";
	display: table;
}

.ht-clearfix:after,
.entry-content:after,
.comment-content:after,
.site-footer:after,
.ht-container:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 15px;
}

/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}

/* Search widget. */
.widget_search .search-submit {
	display: none;
}


/* Contact Info Widget */
.ht-contact-info ul li{
	padding-left: 30px !important;
}

.ht-contact-info ul li .fa{
	margin-left: -30px;
	float: left;
	margin-top: 6px;
}

.ht-contact-info p{
	margin: 0;
}

/* Personal Info Widget */
.ht-personal-info .ht-pi-image{
	margin-bottom: 20px;
	text-align: center;
}

.ht-personal-info .ht-pi-image img{
	border-radius: 50%;
	max-width: 150px;
}

.ht-personal-info .ht-pi-name{
	margin-bottom: 15px;
	font-size: 1.4em;
	text-align: center;
}

.ht-personal-info .ht-pi-intro{
	text-align: center;
}

/* Latest Post */
.ht-latest-posts li{
	padding: 12px 0 !important;
	font-size: 14px;
	line-height: 1.5;
}

.ht-latest-posts .ht-lp-title{
	margin-bottom: 0;
}

.ht-lp-image {
    float: left;
    width: 30%
}

.ht-lp-image+.ht-lp-content {
    width: 70%;
    float: right;
    padding-left: 20px
}

.ht-lp-title a {
    color: inherit
}

.ht-lp-excerpt {
    margin-top: 10px
}
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 30px;
}

.total-hentry {
	margin: 0 0 50px;
}

.byline,
.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content{
	margin-bottom: 50px;
}

.page-template-page-builder-template .page-content{
	margin-bottom: 0;
}

.page-links {
	clear: both;
	margin: 0 0 15px;
}

#primary{
	width: 92%;
	float: left;
	margin-left: 3%;
}

#secondary{
	width: 5%;
	float: right;
}

.ht_no_sidebar #primary{
	width: auto;
	float: none;
}

.ht_no_sidebar_condensed #primary{
	width: 90%;
	float: none;
	margin: 0 auto;
}

.ht_left_sidebar #primary{
	float: right;
}

.ht_left_sidebar #secondary{
	float: left;
}

.ht-post-info{
	float: left;
	width: 80px;
	text-align: right;
    font-family: 'Oswald', noto-chinese, sans-serif;
}

.single .ht-post-info{
	margin-right: 30px;
	margin-bottom: 20px;
}

.ht-post-info .entry-date{
	display: block;
    font-size: 0.9em;
    margin-bottom: 20px;
}

.ht-post-info .entry-date span{
	display: block;
	text-transform: uppercase;
}

.ht-post-info .entry-date span.ht-day{
	display: none;
}

.ht-post-info a{
	display: block;
	text-decoration: none;
	line-height: 1.4;
	padding: 20px 0 0;
	text-transform: uppercase;
    border-top: 1px solid #EEE;
    font-size: 12px;
    color: #444;
    font-weight: 300;
}

.ht-post-wrapper{
	padding-left: 105px;
}

.entry-figure{
	background: #f9f9f9;
	text-align: center;
	margin-bottom: 15px;
}

.entry-header .entry-title{
	font-weight: 300;
	letter-spacing: 1px;
	margin-bottom: 10px;
}

.entry-figure + .entry-header{
	background: #FFF;
	position: relative;
	margin-top: -65px;
	width: 90%;
	padding: 15px 0 1px;
}

.entry-header .entry-title a{
	text-decoration: none;
	color: #333;
}

.entry-categories{
	font-size: 14px;
	color: #666;
	font-style: italic;
	margin-bottom: 15px;
}

.entry-categories .fa{
	color: #FFC107;
	margin-right: 8px;
}

.entry-categories a{
	color: #666;
	text-decoration: none; 
}

.entry-readmore{
	margin-top: 20px;
}

.entry-readmore a{
	background: #FFC107;
	padding: 0 20px;
    line-height: 40px;
	color: #FFF;
	border: 0;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: inline-block;
}

.entry-readmore a:hover{
	background: #333;
	color: #FFF;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.widget-area .widget-title{
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.widget-area .widget-title:after{
	content:"";
	position: absolute;
	left: 0;
	top: 100%;
	width: 30px;
	background: #FFC107;
	height: 2px;
}

.widget-area ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget-area ul ul{
	border-top: 1px solid #f9f9f9;
	margin-top: 5px;
}

.widget-area ul ul li{
	padding-left: 10px;
}

.widget-area ul ul li:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

.widget-area li{
	padding: 5px 0;
	border-bottom: 1px solid #f9f9f9;
}

.widget-area a{
	text-decoration: none;
	color: #404040;
}

.widget-area a:hover{
	color: #FFC107
}

.widget-area .widget{
	margin-bottom: 35px;
}

.widget-area .widget .search-field{
	width: 100%;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

.author-email-url{
	margin-left: -2%;
}

.comment-form-author,
.comment-form-email,
.comment-form-url{
	float: left;
	margin-left: 2%;
	width: 31.33333%;
}

.author-email-url input{
	width: 100%;
}

.comment-form .form-submit{
	margin-bottom: 0
}

#comments{
	margin-bottom: 50px;
}

h3#reply-title,
h3.comments-title{
	position: relative;
	padding-bottom: 15px;
    margin-bottom: 30px;
}

h3#reply-title:after,
h3.comments-title:after{
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 30px;
    background: #FFC107;
    height: 2px;
}

.logged-in-as,
.comment-notes{
	font-size: 0.9em;
}

#comments ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

#comments li.comment{
	margin: 0 0 40px;
}

#comments li.comment .children{
	display: block;
    margin: 20px 0 0 30px;
    padding: 0px;
    list-style: none;
}

article.comment-body {
    background: #fff;
    margin: 0px;
    position: relative;
}

.comment-list a{
	color: #404040;
}

.comment-list a:hover{
	color: #FFC107 !important;
}

.comment-list .comment-respond{
	margin-top: 20px;
	background: #FFF;
	padding: 20px;
}

.comment-list .vcard img {
	border-radius: 50%;
	margin-right: 10px;
}

.comment-list .vcard .fn{
	font-weight: normal;
	font-size: 16px;
}

.comment-list .edit-link{
	position: absolute;
	right: 0;
	top: 0;
}

.comment-list .edit-link a{
	font-size: 14px;
	display: inline-block;
	padding: 10px;
}

.comment-list .comment-meta {
	margin-bottom: 15px;
} 

.comment-list .comment-metadata {
	border-top: 1px solid #EEE;
	padding-top: 10px;
	font-size: 14px;
}

.comment-list .comment-metadata a {
	float: left;
}

.comment-list .comment-metadata .reply {
	float: right;
}

#cancel-comment-reply-link {
	float: right;
}

.nav-previous a,
.nav-next a{
	background: #FFC107;
	color: #FFF;
	display: inline-block;
	padding: 0 10px;
	font-size: 12px;
	line-height: 22px;
	position: relative;
}

.nav-next a{
	margin-right: 13px;
}

.nav-next a:after{
	content: "";
	position: absolute;
	border-left: 11px solid #FFC107;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	top: 0;
	right: -11px;
}

.nav-previous a{
	margin-left: 11px;
}

.nav-previous a:after{
	content: "";
	position: absolute;
	border-right: 11px solid #FFC107;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	top: 0;
	left: -11px;
}

.no-comments{
	color: #FFC107;
}

.pagination,
.woocommerce nav.woocommerce-pagination{
    text-align: center;
    margin-bottom: 50px;
}

.home.blog .pagination{
    margin-bottom: 40px;
}

.pagination .page-numbers{
    display: inline-block;
    margin: 0 2px;
    background: #FFC107;
    color: #FFF;
    padding: 10px 15px;
    line-height: 1;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover{
    background: #333;
    color: #FFF;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 15px;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin: 0 auto;
}

.wp-caption-text {
	text-align: center;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 15px;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
.ht-container{
	width: 1050px;
	margin: 0 auto;
}

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
#ht-masthead{
	border-top: 4px solid #FFC107;
	background: #FFF; 
	height: 94px;
    border-bottom: 0px solid #F1F1F1;
    z-index: 99;
    transition: height 0.3s ease;
    -moz-transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
}

.ht-sticky-header #ht-masthead{
	position: fixed;
	left: 0;
	right: 0;
}

.ht-sticky#ht-masthead{
	height: 74px;
}

#ht-content{
	clear: both;
}

.ht-sticky-header #ht-content{
	position: relative;
	z-index: 9;
	padding-top: 94px;
}

#ht-site-branding{
	float: left;
	width: 53%;
	padding: 15px 0;
	transition: padding 0.3s ease;
	-moz-transition: padding 0.3s ease;
	-webkit-transition: padding 0.3s ease;
}

.ht-sticky #ht-site-branding{
	padding: 0;
}

#ht-site-branding img{
	max-height: 60px;
	width: auto;
}

@media only screen and (min-width: 480px){
.ht-main-header{
	background: #f9f9f9;
	padding: 30px 50px 30px 50px;
	margin-bottom: 0px;
}
}
@media only screen and (max-width: 480px){
.ht-main-header{
	background: #f9f9f9;
	padding: 30px 10px 30px 10px;
	margin-bottom: 0px;
}
}
.ht-main-title{
	margin: 0 0 15px;
	letter-spacing: 1px;
	font-weight: 400;
	text-transform: uppercase;
}

.ht-main-title:last-child{
	margin-bottom: 0;
}

.ht-site-title{
	font-family: 'Oswald';
	font-weight: 400;
	margin: 0 0 8px;
	letter-spacing: 1px;
	text-transform: uppercase;
    font-size: 32px;
    line-height: 1;
}

.ht-site-title a{
	text-decoration: none;
	color: #FFC107;
}

.ht-site-description{
	color: #EEE;
	margin: 0;
	font-size: 15px;
	font-style: italic;
	line-height: 1;
}

.ht-site-description a{
	color: #333;
}

.breadcrumb-trail,
.woocommerce .woocommerce-breadcrumb{
	font-size: 15px;
	margin: 0;
	color: inherit;
}

.breadcrumb-trail ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumb-trail ul li{
	display: inline-block;
}

.breadcrumb-trail ul li:after{
	content: "/";
	margin: 0 6px;
}

.breadcrumb-trail ul li:last-child:after{
	display: none;
}

.woocommerce .woocommerce-breadcrumb a,
.breadcrumb-trail a{
	color: #000;
}

.woocommerce .woocommerce-breadcrumb a:hover,
#total-breadcrumbs a:hover{
	color: #FFC107;
}

.taxonomy-description,
.term-description{
	margin-bottom: 15px;
}

.taxonomy-description p:last-child,
.term-description p:last-child{
	margin-bottom: 0;
}


/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
.ht-section{
	padding: 60px 0;
    background: #FFF;
}

.ht-section-title-tagline{
	margin-bottom: 60px;
	text-align: center;
}

.ht-section-title{
	font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 36px;
    width: 60%;
    margin: 0 auto 15px;
}

.ht-section-title:last-child{
	margin-bottom: 0;
}

.ht-section-tagline{
	font-size: 20px;
	width: 70%;
	margin: 0 auto;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#ht-site-navigation{
	float: right;
	width: 47%;
	padding: 27px 0px 0px 0px;
	transition: padding 0.3s ease;
	-moz-transition: padding 0.3s ease;
	-webkit-transition: padding 0.3s ease;
}

.ht-sticky #ht-site-navigation{
	padding: 17px 0;
}

.ht-main-navigation .ht-menu{
	float: right;
}

.ht-main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.ht-main-navigation li {
	float: left;
	position: relative;
	margin-left: 10px;
}

.ht-main-navigation a {
	position: relative;
	display: block;
	text-decoration: none;
	color: #444;
	text-transform: uppercase;
	font-size: 14px;
	font-family: 'Oswald';
	line-height: 36px;
	padding: 0 15px;
	font-weight: 400;
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
}

.ht-main-navigation ul ul {
	display: none;
	position: absolute;
	left: 0;
	top: 100% ;
	background: #FFF;
	min-width: 200px;
	z-index: 999;
	padding: 8px;
	margin-top: 27px;
	border-top: 2px solid #FFC107;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.05)
}

.ht-sticky .ht-main-navigation ul ul{
	margin-top: 17px;
}

.ht-main-navigation .ht-menu > ul > li:last-child > ul{
	left: auto;
	right: 0;
}

.ht-main-navigation ul ul ul {
	left: 100%;
	top: 0;
	margin: 0 0 0 8px;
	border-top: 0;
}

.ht-sticky .ht-main-navigation ul ul ul{
	margin-top: 0
}

.ht-main-navigation ul ul a {
	text-transform: none;
	font-weight: 400;
	color: #444;
	line-height: 1.5;
	padding: 10px 15px;
	font-size: 14px;
}

.ht-main-navigation ul ul li {
	float: none;
	margin: 0 0 5px;
}

.ht-main-navigation ul ul li:last-child{
	margin-bottom: 0;
}

.ht-main-navigation ul li:hover > ul {
	display: block;
	color:black;
}

.page-template-home-template .ht-main-navigation .current_page_item > a,
.page-template-home-template .ht-main-navigation .current-menu-item > a,
.page-template-home-template .ht-main-navigation .current_page_ancestor > a,
.home.blog .ht-main-navigation .current_page_item > a,
.home.blog .ht-main-navigation .current-menu-item > a,
.home.blog .ht-main-navigation .current_page_ancestor > a{
	background: none;
	color: black;
}

.ht-main-navigation li:hover > a,
.page-template-home-template .ht-main-navigation li:hover > a,
.home.blog .ht-main-navigation li:hover > a,
.ht-main-navigation .current_page_item > a,
.ht-main-navigation .current-menu-item > a,
.ht-main-navigation .current_page_ancestor > a,
.page-template-home-template .ht-main-navigation .current > a,
.home.blog .ht-main-navigation .current > a {
	color: black;
}


/* styling for both css and generated arrows */

.menu-item-has-children .ht-dropdown{
	position: relative;
	right: -5px;
}

.menu-item-has-children .ht-dropdown:after {
	content: '\f107';
	font-family: FontAwesome;
}

/* styling for right-facing arrows */
.menu-item-has-children ul .ht-dropdown{
	position: absolute;
	top: 50%;
	right: 5px;
	-webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.menu-item-has-children ul .ht-dropdown:after {
	content: '\f105';
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 15px;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}


/*--------------------------------------------------------------
## Home Slider
--------------------------------------------------------------*/
#ht-home-slider-section{
	clear: both;
}

.ht-slide{
	position: relative;
}

.ht-slide img{
	width: 100%;
}

.ht-slide-overlay{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0,0,0,0.2);
}

.ht-slide-caption{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1170px;
	margin-left: -585px;
	-ms-transform: translateY(-50%); 
   	-webkit-transform: translateY(-50%); 
    transform: translateY(-50%);
}

.ht-slide-cap-title{
	text-align: center;
	font-size: 38px;
	color: #FFF;
	font-weight: 400;
	margin-bottom: 25px;
	padding: 0 10%;
	line-height: 1.2;
	font-family: 'Oswald', noto-chinese, sans-serif;
	letter-spacing: 2px;
	text-transform: uppercase;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2)
}

.ht-slide-cap-title span{
	display: inline-block;
	padding: 8px 15px;
	background: #FFC107;
}

.ht-slide-cap-desc{
	text-align: center;
	font-size: 25px;
	line-height: 1.4;
	color: #FFF;
	padding: 0 20%;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2)
}

#ht-home-slider-section .owl-carousel .owl-nav .owl-prev, 
#ht-home-slider-section .owl-carousel .owl-nav .owl-next{
	position: absolute;
	top: 50%;
	text-indent: -9999px;
	height: 70px;
    width: 50px;
	margin-top: -35px;
	opacity: 0.6;
}

#ht-home-slider-section .owl-carousel .owl-nav > div:hover{
	opacity: 1;
}

#ht-home-slider-section .owl-carousel .owl-nav .owl-prev{
	background: url(images/prev.png) no-repeat center rgba(0,0,0,0.3);
	left: 0;
}

#ht-home-slider-section .owl-carousel .owl-nav .owl-next{
	background: url(images/next.png) no-repeat center rgba(0,0,0,0.3);
	right: 0;
}

#ht-home-slider-section .owl-item.active .ht-slide-cap-title,
#ht-home-slider-section .owl-item.active .ht-slide-cap-desc{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#ht-home-slider-section .owl-item.active .ht-slide-cap-title,
#ht-home-slider-section .owl-item.active .ht-slide-cap-desc {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
/*--------------------------------------------------------------
## About Section
--------------------------------------------------------------*/
#ht-about-us-section{
	background: #FFF;
}

#ht-about-us-section .ht-container{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
}

.ht-about-sec{
	width: 54%;
	padding-right: 30px;
}

.ht-about-sec h2{
	text-align: left;
    width: auto;
}

.ht-progress{
	margin-bottom: 20px;
}

.ht-progress:last-child{
	margin-bottom: 0;
}

.ht-progress h6{
	font-weight: 300;
	margin-bottom: 5px;
}

.ht-progress-bar-sec{
	margin-top: 30px;
}

.ht-progress-bar{
	height: 8px;
	width: 100%;
	position: relative;
	line-height: 20px;
	font-size: 13px;
	background: #f6f6f6
}

.ht-progress-bar-length{
	background: #FFC107;
	height: 100%;
	text-align: right;
	padding-right: 20px;
}

.ht-progress-bar-length span{
	position: absolute;
	right: 0;
	bottom: 100%; 
}

.ht-about-image{
	width: 45%;
	padding-left: 30px;
}

/*--------------------------------------------------------------
## Featured Section
--------------------------------------------------------------*/
#ht-featured-post-section{
	background: #FFC107;
	color: #FFF;
	padding-bottom: 80px;
}

.ht-featured-post-wrap{
	margin-left: -3%;
}

.ht-featured-post{
	float: left;
	margin-left: 3%;
	width: 30.33%;
	text-align: center;
	border:2px solid #FFF;
	padding: 30px;
}

.ht-featured-post h5{
	text-transform: uppercase;
	margin-bottom: 25px;
}

.ht-featured-icon{
    display: inline-block;
    color: #FFF;
    font-size: 46px;
    line-height: 80px;
    width: 180px;
    background: #FFC107;
    -ms-transform: translateY(-35px); 
    -webkit-transform: translateY(-35px); 
    transform: translateY(-35px); 
}

.ht-featured-icon .fa{
	vertical-align: bottom;
}

.ht-featured-link{
	-ms-transform: translateY(52px);
	-webkit-transform: translateY(52px);
	transform: translateY(52px); 
}

.ht-featured-link a{
	padding: 0 15px;
	display: inline-block;
	line-height: 40px;
    background: #FFF;
	color: #FFC107;
    border-right: 10px solid #FFC107;
    border-left: 10px solid #FFC107;
}

.ht-featured-link a:hover{
	background: #333;
	color: #FFF;
}

/*--------------------------------------------------------------
## Portfolio Section
--------------------------------------------------------------*/
.ht-portfolio-cat-name-list{
	text-align: center;
	margin-bottom: 30px;
	text-align: right;
}

.ht-portfolio-cat-name-list .fa{
	vertical-align: middle;
	color: #FFC107; 
}

.ht-portfolio-cat-name{
	cursor: pointer;
	display: inline-block;
	padding-left: 10px;
	margin-left: 10px;
	border-left: 1px solid #BBB;
	line-height: 1;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

.ht-portfolio-cat-name:nth-child(2){
	border-left: 0;
	margin-left: 0;
}

.ht-portfolio-cat-name:hover, 
.ht-portfolio-cat-name.active{
	color: #FFC107;
}

.ht-portfolio-post-wrap{
	margin: 0 -7.5px;
}

.ht-portfolio{
	width: 33.33%;
	float: left;
	padding: 7.5px;
}

.ht-portfolio-outer-wrap{
	position: relative;
}

.ht-portfolio-wrap{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	background-color: #f9f9f9;
}

.ht-portfolio-wrap img{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.ht-portfolio-caption{
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	top: 10px;
	padding: 30px;
	opacity: 0;
	background: rgba(255, 193, 7, 0.9);
	transition:all 0.5s ease-in-out;
	-moz-transition:all 0.5s ease-in-out;
	-webkit-transition:all 0.5s ease-in-out;
	overflow: hidden;
}

.ht-portfolio-wrap:hover .ht-portfolio-caption{
	opacity: 1;
}

.ht-portfolio-caption h5{
	color: #FFF;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	-ms-transform: translate(300px, 0); 
   	-webkit-transform: translate(300px, 0); 
    transform: translate(300px, 0);
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

.ht-portfolio-wrap:hover .ht-portfolio-caption h5{
	-ms-transform: translate(0, 0); 
   	-webkit-transform: translate(0, 0); 
    transform: translate(0, 0);
}

.ht-portfolio-caption a{
	height: 36px;
	width: 36px;
	position: absolute;
	right: 20px;
	bottom: 20px;
	text-align: center;
	display: block;
	line-height: 36px;
	color: #FFC107;
	font-size: 14px;
	background: #FFF;
	margin: 10px 5px;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}

.ht-portfolio-caption a.ht-portfolio-image{
	-ms-transform: translate(-300px, 0); 
   	-webkit-transform: translate(-300px, 0); 
    transform: translate(-300px, 0);
    right: 66px;
}

.ht-portfolio-caption a.ht-portfolio-link{
	-ms-transform: translate(-300px, 0); 
   	-webkit-transform: translate(-300px, 0); 
    transform: translate(-300px, 0);
}

.ht-portfolio-wrap:hover .ht-portfolio-caption a.ht-portfolio-link,
.ht-portfolio-wrap:hover .ht-portfolio-caption a.ht-portfolio-image{
	-ms-transform: translate(0, 0); 
   	-webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}


/*--------------------------------------------------------------
## Service Section
--------------------------------------------------------------*/
#ht-service-post-section{
	position: relative;
	padding: 40px 0;
	background: #F5F5F5;
}

.ht-service-left-bg{
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: 50%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 200px;
	width: 50%;
}

.ht-service-posts{
	float: left;
	width: 50%;
	padding-right: 40px;
}

.ht-service-post-wrap{
	position: relative;
}

.ht-service-post-wrap:after{
	content: "";
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #FFC107;
}

.ht-service-posts .ht-section-title-tagline{
	text-align: left;
	margin-bottom: 21px;
}

.ht-service-posts .ht-section-title{
    width: auto;
}

.ht-service-posts .ht-section-tagline{
	width: auto;
}

.ht-service-post{
	margin-bottom: 25px;
	position: relative;
	z-index: 99;
}

.ht-service-post:last-child{
	margin-bottom: 0
}

.ht-service-icon{
	float: left;
	font-size: 18px;
	background: #FFC107;
	width: 50px;
	text-align: center;
	color: #FFF;
	line-height: 50px;
	cursor: pointer;
	border-radius: 50%;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}

.ht-active .ht-service-icon{
    box-shadow: 0px 0px 0px 2px #FFF, 0px 0px 0px 4px #FFC107;
}

.ht-service-excerpt{
	padding-left: 65px;
}

.ht-service-text{
	display: none;
}

.ht-service-excerpt h5{
	margin: 15px 0 6px;
	cursor: pointer;
}

/*--------------------------------------------------------------
## Team Section
--------------------------------------------------------------*/
.ht-team-member-wrap{
	margin-left: -2%;
}

.ht-team-member{
	width: 23%;
	margin-left: 2%;
	float: left;
	text-align: center;
}

.ht-team-member img{
	width: 100%;
}

.ht-team-member-image{
	position: relative;
	overflow: hidden;
}

.ht-team-social-id{
	padding: 10px;

}

.ht-team-social-id a{
	display: inline-block;
	color: #FFF;
	margin: 0 5px;
	font-size: 16px;
	line-height: 32px;
	background: #FFC107;
	color: #FFF;
	height: 32px;
	width: 32px;
	border-radius: 50%;
}

.ht-team-social-id a:hover{
	background: #333;
	color: #FFF;
}

.ht-team-member-excerpt{
	background: rgba(255, 193, 7, 0.9);
	padding: 20px;
	color: #FFF !important;
	display: block;
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	top: 10px;
    opacity: 0;
	-ms-transform: scale(0.5); 
   	-webkit-transform: scale(0.5); 
    transform: scale(0.5);
    transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}

.ht-team-member:hover .ht-team-member-excerpt{
    opacity: 1;
	-ms-transform: scale(1); 
   	-webkit-transform: scale(1); 
    transform: scale(1);
}

.ht-team-member-excerpt-wrap{
	display: table;
	width: 100%;
	height: 100%;
}

.ht-team-member-excerpt-wrap .ht-team-member-span{
	display: table-cell;
	vertical-align: middle;
}

.ht-title-wrap{
	background: rgba(255, 193, 7, 0.9);
	color: #FFF;
	padding: 10px;
	position: absolute;
	left: 10px;
	bottom: 10px;
	right: 10px;
    -moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    opacity: 1;
}

.ht-team-member:hover .ht-title-wrap{
    opacity: 0;
}

.ht-team-member h6{
	text-transform: uppercase;
	font-weight: 400;
	position: relative;
	padding-bottom: 10px;
}

.ht-team-member .ht-title-wrap h6{
    padding: 0;
    margin: 0;
}

.ht-team-member h6 a{
	text-decoration: none;
	color: inherit;
}

.ht-team-member .ht-team-member-excerpt h6:after{
	content: "";
	position: absolute;
	width: 50px;
	left: 50%;
	margin-left: -25px;
	height: 2px;
	background: #FFF;
	bottom: -2px;
}

.ht-team-member .ht-team-designation{
	font-size: 0.9em;
    margin-bottom: 15px;
}

.ht-team-detail{
	background: #FFF;
	display: inline-block;
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: #FFC107;
	padding: 0 10px;
	text-decoration: none;
	line-height: 30px;
	font-size: 0.9em;
}

.ht-team-detail:hover{
    background: #333;
    color: #FFF;    
}

/*--------------------------------------------------------------
## Counter Section
--------------------------------------------------------------*/
#ht-counter-section{
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	color: #FFF;
    background-attachment: fixed;
    position: relative;
    background-position: 50% 0;
}

#ht-counter-section .ht-section{
    background: none;
}

#ht-counter-section .ht-counter-overlay{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.3);
}

#ht-counter-section .ht-container{
	position: relative;
}

.ht-team-counter-wrap{
	margin-left: -5%;
}

.ht-counter{
	float: left;
	width: 20%;
	margin-left: 5%;
	text-align: center;
	border: 2px solid #FFC107;
	border-top: 0;
	padding: 0 20px 20px;
	position: relative;
}

.ht-counter:after{
	content: "";
	position: absolute;
	width: 30%;
	left: 0;
	top: 0;
	height: 2px;
	background: #FFC107;
}

.ht-counter:before{
	content: "";
	position: absolute;
	width: 30%;
	right: 0;
	top: 0;
	height: 2px;
	background: #FFC107;
}

.ht-counter-count{
	font-size: 48px;
	line-height: 1;
	margin-bottom: 25px;
	letter-spacing: 3px;
	font-family: 'Oswald', noto-chinese, sans-serif;
	font-weight: 400;
}

.ht-counter-icon{
	display: inline-block;
    font-size: 36px;
    color: #FFC107;
    position: relative;
    -ms-transform: translate(0, -17px);
    -webkit-transform: translate(0, -17px);
    transform: translate(0, -17px);
    line-height: 36px;
}

.ht-counter-title{
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-top: 15px;
	font-weight: 400;
	margin: 0;
}

/*--------------------------------------------------------------
## Logo Section
--------------------------------------------------------------*/
.ht_client_logo_slider img{
	padding: 0 26px;
}


/*--------------------------------------------------------------
## Testimonial Section
--------------------------------------------------------------*/
#ht-testimonial-section{
	padding: 60px 0 80px;
}

.ht-testimonial-wrap .owl-item img{
	height: 100px;
	width: 100px;
	margin: 0 auto 20px;
	border-radius: 50%;
	border: 1px solid #FFC107;
	padding: 5px;
	transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;
}

.ht-testimonial-excerpt{
	width: 80%;
	margin: 0 auto 30px;
	text-align: center;
    position: relative;
}

.ht-testimonial-excerpt .fa-quote-left{
	position: absolute;
    top: 0;
    left: -65px;
    font-size: 60px;
    color: #EEE;
    z-index: -1;
}

.ht-testimonial h6{
	text-align: center;
	margin: 0;
}

.ht-testimonial-wrap  .owl-carousel .owl-nav .owl-prev, 
.ht-testimonial-wrap  .owl-carousel .owl-nav .owl-next{
	position: absolute;;
	top: 50%;
	margin-top: -25px;
	background: #FFC107;
	height: 50px;
	width: 30px;
	color: #FFF;
	text-align: center;
	line-height: 50px;
	opacity: 0;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

.ht-testimonial-wrap  .owl-carousel .owl-nav .owl-prev{
	left: 0;
}

.ht-testimonial-wrap  .owl-carousel .owl-nav .owl-next{
	right: 0;
}

.ht-testimonial-wrap  .owl-carousel:hover .owl-nav .owl-prev,
.ht-testimonial-wrap  .owl-carousel:hover .owl-nav .owl-next{
	opacity: 1;
}

.ht-testimonial-wrap  .owl-carousel .owl-nav .owl-next:hover,
.ht-testimonial-wrap  .owl-carousel .owl-nav .owl-prev:hover{
	background: #333;
}

/*--------------------------------------------------------------
## Blog Section
--------------------------------------------------------------*/
#ht-blog-section{
	background: #f6f6f6;
	padding-bottom: 30px;
}

.ht-blog-wrap{
	margin-left: -3%;
}

.ht-blog-post{
	float: left;
	margin-left: 3%;
	width: 30.333%;
	background: #FFF;
	margin-bottom: 30px;
	border-bottom: 6px solid #FFC107;
}

.ht-blog-post:nth-child(3n+1){
	clear: both;
}

.ht-blog-thumbnail a{
    display: block;
    position: relative;
}

.ht-blog-thumbnail a:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
}

.ht-blog-thumbnail:hover a:after{
    width: 100%;
}

.ht-blog-excerpt{
	padding: 20px;
}

.ht-blog-excerpt h5{
	font-weight: 400;
	margin-bottom: 15px
}

.ht-blog-excerpt h5 a{
	color: #444;
}

.ht-blog-date{
	display:none;
	font-size: 14px;
	color: #999;
	margin-bottom: 10px;
}

.ht-blog-date .fa{
	display:block;
	margin-right: 10px;
}

.ht-blog-read-more{
	padding: 0 20px 20px;
	text-align: right;
}

.ht-blog-read-more a{
	display: inline-block;
	background: #FFC107;
	color: #FFF;
	padding: 0 15px;
	line-height: 38px;
	text-align: center;
	font-size: 16px;
	border-radius: 1px;
}

.ht-blog-read-more a:hover{
	background: #333;
	color: #FFF;
}

/*--------------------------------------------------------------
## Contact Section
--------------------------------------------------------------*/
#ht-cta-section{
	color: #FFF;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; 
    background-attachment: fixed;
    background-position: 50% 0;	
}

#ht-cta-section .ht-section{
    padding: 80px 0;
    background: none;
    position: relative;
}

#ht-cta-section .ht-section-title-tagline{
	margin-bottom: 40px;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

#ht-cta-section .ht-cta-overlay{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.4);
}

#ht-cta-section .ht-container{
	position: relative;
}

.ht-cta-buttons{
	text-align: center;
}

.ht-cta-buttons a{
	display: inline-block;
	padding: 0 30px;
	line-height: 52px;
	color: #FFF;
	border-radius: 1px;
	margin: 0 4px;
	font-family: 'Oswald', noto-chinese, sans-serif;
}

.ht-cta-buttons a.ht-cta-button1{
	background: #FFC107;
}

.ht-cta-buttons a.ht-cta-button2{
	background: #333;
}

.ht-cta-buttons a.ht-cta-button1:hover{
	background: #333;
	color: #FFF;
}

.ht-cta-buttons a.ht-cta-button2:hover{
	background: #FFC107;
	color: #FFF;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
#ht-colophon{
	background: url(images/footer-bg.jpg);
	border-top: 4px solid #FFC107;
	font-size: 16px;
}

.page-template-home-template #ht-colophon,
.home.blog #ht-colophon{
	margin-top: 0
}

#ht-colophon a{
	color: #BBB;
	text-decoration: none;
}

#ht-colophon .widget-title{
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #BBB;
    margin-bottom: 15px;
}

#ht-top-footer{
	color: #BBB;
	padding: 50px 0;
}

.ht-top-footer{
	margin-left: -3%;
}

.ht-footer{
	float: left;
	width: 22%;
	margin-left: 3%;
}

.ht-footer .widget{
    margin-bottom: 30px;
}

.ht-footer .widget:last-child{
    margin-bottom: 0;
}

.ht-footer ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.ht-footer ul li{
	padding: 2px 0 2px 0;
}

#ht-bottom-footer{
	background: rgba(0,0,0,0.3);
	padding: 30px 0;
	color: #AAA;
	line-height: 1.2;
	text-align: center;
}

.ht-site-info a{
	border-bottom: 1px dotted #AAA;
}

#ht-back-top{
	position: fixed;
	right: 10px;
	bottom: 10px;
	background: #111;
	height: 60px;
	width: 40px;
	text-align: center;
	color: #FFF;
	line-height: 60px;
	z-index: 99999;
	cursor: pointer;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
}

#ht-back-top:hover{
	background: #FFC107;
}

#ht-back-top.ht-hide{
	bottom: -100px;
}

/*--------------------------------------------------------------
## 404 Page
--------------------------------------------------------------*/
.error404 .error-404{
	display: block;
	text-align: center;
	font-size: 200px;
	color: #f9f9f9;
	line-height: 1.2;
}

.error404 .oops-text{
	text-align: left;
	margin-left: 30px;
}

.toggle-bar{
	display: none;
}


/*--------------------------------------------------------------
## Odometer CSS
--------------------------------------------------------------*/
.odometer.odometer-auto-theme, 
.odometer.odometer-theme-default {
	display: block;
	vertical-align: middle;
	*vertical-align: auto;
	*zoom: 1;
	*display: inline;
	position: relative;
}
.odometer.odometer-auto-theme .odometer-digit, 
.odometer.odometer-theme-default .odometer-digit {
	display: inline-block;
	vertical-align: middle;
	*vertical-align: auto;
	*zoom: 1;
	*display: inline;
	position: relative;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, 
.odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
	display: inline-block;
	vertical-align: middle;
	*vertical-align: auto;
	*zoom: 1;
	*display: inline;
	visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, 
.odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
	text-align: left;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, 
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
	display: block;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, 
.odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
	display: block;
	-webkit-backface-visibility: hidden;
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value, 
.odometer.odometer-theme-default .odometer-digit .odometer-value {
	display: block;
	-webkit-transform: translateZ(0);
}
.odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, 
.odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
	position: absolute;
}
.odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, 
.odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
	-webkit-transition: -webkit-transform 2s;
	-moz-transition: -moz-transform 2s;
	-ms-transition: -ms-transform 2s;
	-o-transition: -o-transform 2s;
	transition: transform 2s;
}
.odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, 
.odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, 
.odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
.odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, 
.odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
	-webkit-transition: -webkit-transform 2s;
	-moz-transition: -moz-transform 2s;
	-ms-transition: -ms-transform 2s;
	-o-transition: -o-transform 2s;
	transition: transform 2s;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.odometer.odometer-auto-theme .odometer-value, 
.odometer.odometer-theme-default .odometer-value {
	text-align: center;
}

/*--------------------------------------------------------------
## WooCommerce CSS
--------------------------------------------------------------*/
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product{
	border: 1px solid #dadada;
	border-radius: 2px;
	text-align: center;
}

.woocommerce ul.products li.product:hover, 
.woocommerce-page ul.products li.product:hover{
	border-color: #FFC107
}

.woocommerce ul.products li.product a img{
	margin-bottom: 0;
}

.woocommerce ul.products li.product .total-product-title-wrap{
	padding: 20px 10px 0;
}

.woocommerce ul.products li.product a{
	color: inherit;
}

.woocommerce ul.products li.product .woocommerce-loop-category__title, 
.woocommerce ul.products li.product .woocommerce-loop-product__title, 
.woocommerce ul.products li.product h3{
	font-family: 'Pontano Sans', sans-serif;
	margin: 0 0 6px;
	padding: 0;
}

.woocommerce div.product div.images .flex-control-thumbs{
	margin: 5px -5px 0;
}

.woocommerce div.product div.images .flex-control-thumbs li{
	padding: 5px;
}

.woocommerce ul.products li.product .price{
	font-weight: 500;
	font-size: 20px;
	color: #FFC107;
	margin: 0;
}

.woocommerce ul.products li.product .price del{
	display: inline;
	color: #999;
	opacity: 1;
}
.woocommerce ul.products li.product .price ins{
	display: inline;
	font-weight: 400;
}

.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button {
    padding: 10px 20px;
    font-weight: 400;
    border-radius: 0;
    color: #FFF;
    background-color: #FFC107;
    border:1px solid #FFC107;
    height: 40px;
    margin-bottom: -20px;
    line-height: 20px;
    font-size: 0.9em;
}

.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover{
	background: #333;
	border:1px solid #333;
	color: #FFF;
}

.woocommerce ul.products li.product .button{
	margin: 0;
	transform: translateY(50%);
	-ms-transform: translateY(50%);
	-webkit-transform: translateY(50%);
	font-size: 16px;
    background-color: #FFF;
    border:1px solid #dadada;
    border-radius: 3px;
}

.woocommerce ul.products li.product:hover .button{
	border-color: #FFC107;
	background-color: #FFC107;
	color: #FFF;
}

.woocommerce ul.products li.product .button.loading{
	opacity: 1;
}

.woocommerce a.added_to_cart{
	padding-top: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 25px;
	font-size: 13px;
}

.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt{
	border-color: #FFC107;
	background-color: #FFC107;
}

.woocommerce #respond input#submit.alt:hover, 
.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover{
	background: #333;
	border-color: #333;
	color: #FFF;
}

.woocommerce nav.woocommerce-pagination ul{
	border: 0;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li{
	border: 0;
	margin: 0 4px;
}

.woocommerce nav.woocommerce-pagination ul li a, 
.woocommerce nav.woocommerce-pagination ul li span{
	display: block;
    background: #FFC107;
    color: #FFF;
    padding: 10px 15px;
    line-height: 1;
}

.woocommerce nav.woocommerce-pagination ul li a:focus, 
.woocommerce nav.woocommerce-pagination ul li a:hover, 
.woocommerce nav.woocommerce-pagination ul li span.current{
	background: #333;
    color: #FFF;
}

.woocommerce span.onsale{
    min-height: 0;
    min-width: 0;
    padding: 0 15px;
    font-weight: 400;
    line-height: 26px;
    border-radius: 0;
    background-color: #FFC107;
    color: #fff;
    font-size: 14px;
    margin: 10px 0 0 -6px;
    top: 0;
    left: 0;
}

.woocommerce span.onsale:after{
	border-color: transparent #e8ae00 #e8ae00 transparent;
    border-width: 3px;
    border-style: solid;
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0px;
}

.woocommerce ul.products li.product .onsale{
	margin: 10px -6px 0 0;
}

.woocommerce ul.products li.product .onsale:after{
    border-color: transparent transparent #e8ae00 #e8ae00;
    border-width: 3px;
    border-style: solid;
    right: 0px;
    left: auto;
}

.woocommerce div.product p.price, 
.woocommerce div.product span.price{
	color: #FFC107
}

.woocommerce div.product p.price ins, 
.woocommerce div.product span.price ins{
	font-weight: 400;
}

.woocommerce .product_meta{
	font-size: 15px;
}

.woocommerce .product_meta a{
	color: inherit;
}

.woocommerce .product_meta a:hover{
	color: #FFC107;
}

.woocommerce div.product .woocommerce-tabs ul.tabs{
	padding: 0;
	border-bottom: 2px solid #FFC107;
	padding-bottom: 10px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:after,
.woocommerce div.product .woocommerce-tabs ul.tabs li:before,
.woocommerce div.product .woocommerce-tabs ul.tabs li:after,
.woocommerce div.product .woocommerce-tabs ul.tabs:before{
	display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 10px 0;
    font-weight: 400;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: 0;
    background-color: #333;
    border-radius: 0;
    margin: 0 6px 0 0;
    padding: 0 20px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
	background: #FFC107;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a{
	color: #FFF !important;
}

.woocommerce #reviews #comments h2,
.woocommerce #reviews h3{
	font-size: 22px;
	margin-bottom: 30px;
}

.woocommerce-Reviews .comment-form-author, 
.woocommerce-Reviews .comment-form-email{
	width: 100%;
}

.woocommerce-Reviews .comment-form-author input,
.woocommerce-Reviews .comment-form-email input{
	width: 100%;
}

.related.products h2{
	margin-bottom: 30px;
}

.woocommerce #respond input#submit.disabled, 
.woocommerce #respond input#submit:disabled, 
.woocommerce #respond input#submit:disabled[disabled], 
.woocommerce a.button.disabled, .woocommerce a.button:disabled, 
.woocommerce a.button:disabled[disabled], 
.woocommerce button.button.disabled, 
.woocommerce button.button:disabled, 
.woocommerce button.button:disabled[disabled], 
.woocommerce input.button.disabled, 
.woocommerce input.button:disabled, 
.woocommerce input.button:disabled[disabled]{
	background: #FFC107;
	padding: 10px 20px;
	color: #FFF;
}

.woocommerce #respond input#submit.disabled:hover, 
.woocommerce #respond input#submit:disabled:hover, 
.woocommerce #respond input#submit:disabled[disabled]:hover, 
.woocommerce a.button.disabled:hover, 
.woocommerce a.button:disabled:hover, 
.woocommerce a.button:disabled[disabled]:hover, 
.woocommerce button.button.disabled:hover, 
.woocommerce button.button:disabled:hover, 
.woocommerce button.button:disabled[disabled]:hover, 
.woocommerce input.button.disabled:hover, 
.woocommerce input.button:disabled:hover, 
.woocommerce input.button:disabled[disabled]:hover{
	background: #333;
	color: #FFF;
}

.woocommerce #respond input#submit.alt.disabled, 
.woocommerce #respond input#submit.alt.disabled:hover, 
.woocommerce #respond input#submit.alt:disabled, 
.woocommerce #respond input#submit.alt:disabled:hover, 
.woocommerce #respond input#submit.alt:disabled[disabled], 
.woocommerce #respond input#submit.alt:disabled[disabled]:hover, 
.woocommerce a.button.alt.disabled, 
.woocommerce a.button.alt.disabled:hover, 
.woocommerce a.button.alt:disabled, 
.woocommerce a.button.alt:disabled:hover, 
.woocommerce a.button.alt:disabled[disabled], 
.woocommerce a.button.alt:disabled[disabled]:hover, 
.woocommerce button.button.alt.disabled, 
.woocommerce button.button.alt.disabled:hover, 
.woocommerce button.button.alt:disabled, 
.woocommerce button.button.alt:disabled:hover, 
.woocommerce button.button.alt:disabled[disabled], 
.woocommerce button.button.alt:disabled[disabled]:hover, 
.woocommerce input.button.alt.disabled, 
.woocommerce input.button.alt.disabled:hover, 
.woocommerce input.button.alt:disabled, 
.woocommerce input.button.alt:disabled:hover, 
.woocommerce input.button.alt:disabled[disabled], 
.woocommerce input.button.alt:disabled[disabled]:hover{
	background: #FFC107;
	border-color: #FFC107;
}

#add_payment_method .wc-proceed-to-checkout a.checkout-button, 
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, 
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button{
	line-height: 40px;
    font-size: inherit;
    padding: 0;
}

.select2-container .select2-choice{
	border: 1px solid #EEE;
	font-size: 0.9em;
	color: inherit;
	border-radius: 0;
}

.select2-results{
	font-size: 0.9em;
	color: inherit;
}

.select2-drop-active{
	border-color: #EEE;
}

.select2-drop.select2-drop-above.select2-drop-active{
	border-color: #EEE;
}

.woocommerce-error, 
.woocommerce-info, 
.woocommerce-message{
	border-top-color: #FFC107;
	font-size: 0.9em;
}

.woocommerce-error:before, 
.woocommerce-info:before, 
.woocommerce-message:before{
	color: #FFC107;
}

.woocommerce-error a.button, 
.woocommerce-info a.button, 
.woocommerce-message a.button{
	padding: 5px 20px;
    line-height: 1;
    height: auto;
}

.woocommerce table.shop_table tbody th, 
.woocommerce table.shop_table tfoot td, 
.woocommerce table.shop_table tfoot th{
	font-weight: 400;
}

#customer_details{
	margin-bottom: 40px;
}

.woocommerce form.checkout_coupon, 
.woocommerce form.login, 
.woocommerce form.register{
	border: 1px solid #EEE;
	border-radius: 0;
}

.woocommerce #payment #place_order, 
.woocommerce-page #payment #place_order{
	float: none;
}

.woocommerce .widget_shopping_cart .cart_list li, 
.woocommerce.widget_shopping_cart .cart_list li{
	padding-top: 4px;
}

.woocommerce ul.cart_list li a, 
.woocommerce ul.product_list_widget li a{
	font-weight: 400;
}

.woocommerce a.remove{
	font-family: Arial;
	font-weight: normal;
}

.woocommerce .widget_shopping_cart .cart_list li a.remove, 
.woocommerce.widget_shopping_cart .cart_list li a.remove{
	top: 8px;
}

.woocommerce .widget_layered_nav ul li{
	padding: 5px 0;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{
	background-color: #FFF;
	border: 4px solid #FFC107;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range{
	background-color: #FFC107
}

.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content{
	background-color: #EEE;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{
	height: 20px;
	width: 20px;
	top: -6px;
    margin-left: -10px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul{
	list-style: none;
}

.woocommerce-MyAccount-navigation-link a{
	background: #FFC107;
	color: #FFF;
	padding: 10px 20px;
	margin-bottom: 5px;
	display: block;
}

.woocommerce-MyAccount-navigation-link.is-active a,
.woocommerce-MyAccount-navigation-link a:hover{
	background: #333;
}

/*
 * list view image
 */
.listviewimage {
   	 	width: 100%;
    	height: auto;
}

/*
 * single post first image
 */
.singlepostimage {
	margin: 0px 0px 0px 0px
}

@media screen and (min-width: 1601px){
	.searchplusfilter{
		font-size: 100%;
	}	
}


@media screen and (max-width: 1600px){
	.searchplusfilter{
	font-size: 100%;	
}
}

@media screen and (max-width: 1200px){
	.searchplusfilter{
	font-size: 100%;	
}
	.ht-container{
		width: auto;
		padding: 0 15px;
	}

	.ht-slide-caption{
		width: 80%;
		margin-left: -40%;
	}
}

@media screen and (max-width: 1050px){
	.toggle-bar{
		display: block;
		position: absolute;
		top: 22px;
		right: 20px;
		height: 50px;
		width: 50px;
		background: #FFC107;
		cursor: pointer;
	}

	.toggle-bar span{
		position: absolute;
		top: 50%;
		margin-top: -2px;
		height: 4px;
		left: 8px;
		right: 8px;
		background: #FFF;
		box-shadow: 0 10px 0 0 #FFF, 0 -10px 0 0 #FFF;
	}

	.ht-sticky-header #ht-masthead{
		position: relative;
	}

	.ht-sticky#ht-masthead{
		height: 94px;	
	}

	#ht-site-navigation{
		width:20%;
		background: transparent;
	}

	#ht-site-branding{
		width: 80%;
		float: left;
	}

	.ht-sticky #ht-site-branding{
		padding: 0;
	}

	.ht-sticky-header #ht-content{
		padding-top: 0;
	}

	.ht-main-navigation .ht-menu{
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 90px;
		background: #FFC107;
		z-index: 999;
	}

	.ht-main-navigation li{
		float: none;
		margin-left: 0;
		text-align: center;
			}

	.ht-main-navigation a,
	.ht-main-navigation ul ul a{
		line-height: 1.3;
		padding: 15px 20px;
		border-bottom: 5px solid rgba(0,0,0,0.05);
		
	}

	.page-template-home-template .ht-main-navigation .current_page_item > a,
	.page-template-home-template .ht-main-navigation .current-menu-item > a,
	.page-template-home-template .ht-main-navigation .current_page_ancestor > a,
	.home.blog .ht-main-navigation .current_page_item > a,
	.home.blog .ht-main-navigation .current-menu-item > a,
	.home.blog .ht-main-navigation .current_page_ancestor > a,
	.ht-main-navigation a{
		color: black;
	}

	.ht-main-navigation ul ul{
		position: static;
		padding: 0;
        margin-top: 0;
        box-shadow: none;
			}

	.ht-main-navigation ul ul ul{
		margin: 0;
	}

		.menu-item-has-children .ht-dropdown,
	.menu-item-has-children ul .ht-dropdown{
		position: absolute;
		height: 26px;
		width: 26px;
		border: 0px solid rgba(255, 252, 252, 0.6);
		top: 50%;
		right: 10px;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		border-radius: 0px;
	}

	.menu-item-has-children .ht-dropdown:after,
	.menu-item-has-children ul .ht-dropdown:after{
		content: '\f107';
	    font-family: FontAwesome;
		font-size: 30px;
		right: 10px;
	    vertical-align: middle;
	    line-height: 20px;
		color:white;
	    display: block;
	}

	.menu-item-has-children .ht-opened.ht-dropdown:after,
	.menu-item-has-children ul .ht-opened.ht-dropdown:after{
		content: '\f106';
	}

	.ht-main-navigation ul li:hover > ul{
		display: none;
	}

	.ht-main-navigation ul ul{
		background: none;
	}

	.ht-main-navigation ul ul a{
		color: black;
	}

	#ht-team-section{
		padding-bottom: 30px;
	}

	.ht-team-member{
		width: 48%;
		margin-bottom: 30px;
	}

	.ht-team-member:nth-child(2n+1){
		clear: both;
	}
}

@media screen and (max-width: 768px){
	.ht-section-title,
	.ht-section-tagline{
		width: auto;
	}

	#ht-about-us-section .ht-container{
		display: block;
	}

	.ht-about-sec{
		width: auto;
		float: none;
		padding: 0;
		margin-bottom: 30px;
	}

	.ht-about-image{
		width: auto;
		float: none;
		padding: 0;
		text-align: center;
	}

	.ht-featured-post-wrap{
		margin-left: 0;
	}

	.ht-featured-post{
		float: none;
		margin: 0 auto 80px;
		width: 75%;
	}

	.ht-featured-post:last-child{
		margin-bottom: 0;
	}

	.ht-portfolio-cat-name-list{
		text-align: center;
	}

	.ht-service-left-bg{
		display: none;
	}

	.ht-service-posts{
		float: none;
		width: auto;
		padding: 0;
	}

	#ht-service-post-section{
		padding: 60px 0;
	}

	#ht-counter-section{
		background-size: cover;
		background-position: center !important;  
	}

	.ht-counter{
		width: 45%;
		margin-bottom: 60px;
	}

	#ht-counter-section{
		padding-bottom: 0;
	}

	.ht-blog-wrap{
		margin: 0;
	}

	.ht-blog-post{
		width: 75%;
		margin: 0 auto 30px;
		float: none;
	}

	.ht-blog-post img{
		width: 100%;
	}

	#ht-cta-section{
		background-size: cover;
		background-position: center !important;  
	}

	.ht-top-footer{
		margin-left: 0;
	}

	.ht-footer{
		width: auto;
		margin: 0 0 30px;
		float: none;
	}

	.ht-footer:last-child{
		margin-bottom: 0;
	}

	.ht-slide-cap-title{
		font-size: 24px;
		font-size: 4vw;
		margin-bottom: 10px;
	}

	.ht-slide-cap-desc{
		font-size: 14px;
		font-size: 3vw;
	}

	#primary{
		width: auto !important;
		float: none !important;
		margin-bottom: 30px;
	}

	#secondary{
		width: auto !important;
		float: none !important;
		margin-bottom: 30px;
	}
}


@media screen and (max-width: 580px){
	#ht-home-slider-section .bx-wrapper .bx-controls-direction a,
	.ht-testimonial-wrap .bx-wrapper .bx-controls-direction a{
		display: none;
	}

	.ht-team-member-wrap{
		margin-left: 0;
	}

	.ht-team-member{
		width: 75%;
		float: none;
		margin: 0 auto 30px;
	}

	.ht-team-counter-wrap{
		margin-left: 0;
	}

	.ht-counter{
		width: 75%;
		float: none;
		margin: 0 auto 60px;
	}

	.ht-portfolio{
		width: 50%;
		padding: 4px;
	}

	.ht-portfolio-caption{
		background: none !important;
		opacity: 1;
	}

	.ht-portfolio-caption h5,
	.ht-portfolio-caption a.ht-portfolio-link,
	.ht-portfolio-caption a.ht-portfolio-image{
		-ms-transform: translate(0, 0);
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	.ht-portfolio-caption h5{
		background: rgba(0,0,0,0.2);
		padding: 10px;
		left: 0;
		right: 0;
		top: 0;
		text-align: center;
	}

	.ht-portfolio-caption a{
		right: 0;
		bottom: 0;
		margin: 0 5px;
	}

	.ht-portfolio-caption a.ht-portfolio-image{
		right: 46px;
	}
}

@media screen and (max-width: 480px){
	.searchplusfilter{
	font-size: 100%;	
}
	.ht-blog-post,
	.ht-featured-post{
		width: auto;
	}

	.ht-team-member-wrap{
		margin-left: 0;
	}

	.ht-team-member,
	.ht-counter{
		width: auto;
		float: none;
	}

	.ht-testimonial-excerpt{
		width: auto;
	}

	.ht-testimonial-excerpt .fa-quote-left{
		left: 0;
	}

	.ht-cta-buttons a{
		display: block;
		margin: 0 0 15px;
	}

	.ht-post-info{
		float: none;
		width: auto;
		margin-bottom: 20px;
	}

	.ht-post-wrapper{
		padding-left: 0; 
	}

/*
 * media screen of list view images
 */
	.listviewimage {
   	 	width: 100%;
    	height: auto;
	}
	.listviewitem {
		padding-left: 0px;
		padding-right: 10px;
		padding-bottom:5px;
	}
	/*
	 * single post first image
 	 */
	.singlepostimage {
		padding: 0px 10px 0px 0px
}
	
}
/*navigation bar*/
@media screen and (min-width: 1051px){
	.ht-main-navigation .ht-menu{
		display: block !important;
	}
	
}

/*
 * people
 */

.people-div {
	padding-top: 2px;
	padding-right:8px;
	padding-bottom:2px;
	padding-left:8px;
    border: 0;
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
	font-style:inherit;
    margin-bottom: 10px;
	margin-right:5px;
	background-color:grey;
	color:white;
	border-radius:5px;
}
.people-div:hover{ 
	background-color: #FFC107;
}
.people-div:active{ 
	background-color: #FFC107;
}
.people-div:focus{ 
	background-color: #FFC107;
}
.people-div:target{ 
	background-color: #FFC107;
}
.people-div-link{
	color:black;
}
.people-div-link:hover{ 
	color: #FFC107;
}
.people-image img {
	border-radius:1000px;
}
.people-personal-profile-tab{
	display:inline-block;
	margin-top:10px;
}

/*title font
 */

.display-title {
	font-size:20px;
	font-weight:700;
	color: black;
	font-family: roboto-bold, noto-chinese;
}

/*
 * search and filter fields
 */
.searchdiv {
    border: 0;
    display: inline-block;
    margin-top: 0px;
	margin-right:5px;
}
.filterdiv {
    border: 0;
    display: inline-block;
    margin-bottom: 10px;
	margin-right:5px;
	margin-top:0px;
}


/*
 *single.php breadcrumb
 */
.singlebreadcrumb {
	color: #E8E6E3;
	font-size: 12px;
}

/* image hover effect for research list, publication list and event list page
 */

.figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  z-index:9999;
  position: relative
}
.figure:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  z-index:9999;
  position: relative
}


/*image swap between desktop and mobile view
 */
.image1 {
	display:block;
	position: relative;
}
	
.image2{
   display: none;
}

@media only screen and (max-width: 576px){           
	.image1{
     display: none;
   }

   .image2{
     display: block;
   }
}

/* tag
*/
.tag{
	font-size: small;
}

/*image swap*/

.swapthumbnail {
    position: relative;
    margin-bottom: 0;
    border: 0;
    border-color: transparent;
}
.swapcaption {
    position: absolute;
    top: 20%;
    left: 0%;
    width: auto;
	background-color: #FFC107;
	opacity: 0.8;
	color: black;
	font-size: xx-large;
	font-family:'Oswald', noto-chinese, sans-serif;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 20px;
	letter-spacing: 2px;
}
.caption-pad{
	padding-left:50px;
	padding-right:50px;
}

/* custom post type index design*/

.mainthumbnail {
    position: relative;
    margin-bottom: 1px;
    border: 0;
    border-color: transparent;
}
.maincaption {
    position: absolute;
    top: 10%;
    left: 4%;
    width: auto;
	background-color: #FFC107;
	opacity: 0.9;
	color: black;
	font-size: xx-large;
	font-family:'Oswald', noto-chinese, sans-serif;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 5px;
	letter-spacing: 2px;
}
.maincaption:hover{
	opacity: 1;
}
.maincaption-pad{
	padding-left: 20px;
	padding-right: 20px;
}

.seccaption {
	font-size: large;
	color: black;
	font-family:'Oswald', noto-chinese, sans-serif;
	text-align: left;
	letter-spacing: 1px;
	padding-left: 5px;
}

/*image swap between desktop and mobile view for research area banners
 */
.maincaption {
	position: absolute;
}
	
@media only screen and (max-width: 850px){           
	.maincaption{
     position: static;
   }
}

.brighten img {
-webkit-filter: brightness(80%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.brighten img:hover {
-webkit-filter: brightness(100%);
}

/*collapse menu*/

.collapsible-menu {
    background-color: transparent;
	color: black;
    padding: 0px 0px 5px 10px;
    box-shadow: 1px 3px 3px rgba(0,0,0,0.2);
	border: 1px;
	border:solid;
	border-color:grey;
	border-radius:5px;
}
.collapsible-menu ul {
    list-style-type: none;
    padding: 0;
}
.collapsible-menu a {
    display:block;
    padding: 0px;
    text-decoration: none;
}
.collapsible-menu:hover {
    background-color:lightgray;
}
.collapsible-menu label {
    font-family: 'Pontano Sans', sans-serif;
    font-size: 20px;
	font-weight: 600;
    display: block;
    cursor: pointer;
    padding: 20px 0px 0px 0px;
	text-align: center;
}
.menu-content {
    font-family: 'Pontano Sans', sans-serif;
	color: black;
    padding: 0px 7px 0px 0px;
	margin: 0px 10px 12px 10px;
	max-height: 0;
    overflow: hidden;
}
input#menu {
    display: none;
}
/* Toggle Effect */
input:checked ~ .menu-content {
    max-height: 100%;
}

/*home page line*/
.homepage-line{
	border: solid;
	border-bottom:0.2px;
	border-color: rgba(215, 215, 215, 0.8);
	margin-right:auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
@media only screen and (max-width: 576px){           
	.homepage-line{
     margin-right: 10px;
   }
}

/*carousel*/
.carousel-image {
	
}
.carousel-image img {
    width: 100%;
    height: auto;
}
.carouselcaption {
    position: absolute;
    top: 0%;
    width: 100%;
	background-color: #FFC107;
	opacity: 0.8;
	color: black;
	font-size: xx-large;
	font-family:'Oswald', noto-chinese, sans-serif;
	font-weight: 900;
	text-align: center;
	padding-top: 18px;
	padding-bottom: 8px;
	letter-spacing: 1px;
	left: 0;
}
.carouselcaption:hover{
	opacity: 1;
}
.carouselcaption-pad{
	padding-left:15px;
	padding-right:15px;
}
/*carousel and caption's positions change between desktop and mobile view for flagship research projects
 */
.carousel-size{
	width: 60%;
	margin: auto;
}
.carouselcaption {
	position: static;
}
.carouselcontrol-left{
	position: absolute;
	left:10%;
	top: 25px;
	}
.carouselcontrol-right{
	position: absolute;
	right:10%;
	top:25px;
	}	
@media only screen and (max-width: 850px){           
	.carouselcaption{
     position: static;
   }
	.carousel-size{
	width:100%;
	margin: auto;
	}
	.carouselcontrol-left{
	position: absolute;
	left:20%;
	top: 20px;
	}
	.carouselcontrol-right{
	position: absolute;
	right:35%;
	top:20px;
	}
}

/*carousel for front page*/

.frontcarousel-image {
}
.frontcarousel-image img {
	border-radius:8px;
    width: auto;
    height: auto;
	margin:0px auto 0px;
	-webkit-filter: brightness(100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.frontcarousel-image img:hover {
	-webkit-filter: brightness(120%);
}

@media only screen and (min-width: 576px){
.frontcarousel-image img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}
.frontcarousel-image :hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
}

.frontcarousel-image-com img{
	height:30px;
}
@media only screen and (min-width: 850px){
.frontcarousel-image-res img{
	max-height:120px;
}
.frontcarousel-image-pub img{
	max-height:200px;
}
.frontcarousel-image-event img{
	max-height:220px;
}
}
@media only screen and (max-width: 849px){
.frontcarousel-image-res img{
	max-height:120px;
}
.frontcarousel-image-pub img{
	max-height:180px;
}
.frontcarousel-image-event img{
	max-height:180px;
}
}
@media only screen and (max-width: 800px){
.frontcarousel-image-res img{
	max-height:180px;
}
.frontcarousel-image-pub img{
	max-height:220px;
}
.frontcarousel-image-event img{
	max-height:250px;
}
}
@media only screen and (max-width: 480px){
.frontcarousel-image-res img{
	max-height:220px;
}
.frontcarousel-image-pub img{
	max-height:320px;
}
.frontcarousel-image-event img{
	max-height:450px;
}
}

.front-carouselcaption{
	color: black;
	font-size: large;
	font-family:'Oswald', noto-chinese, sans-serif;
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
}
.front-carouselcaption-date{
	color: grey;
	font-size: 16px;
	font-family:'Oswald', noto-chinese, sans-serif;
	margin-top: 0px;
	margin-left: 5px;
	margin-right: 5px;
}
.justpad{
	margin:10px;
}
@media only screen and (max-width: 480px){           
	.justpad{
	margin:0px;
}
}
/*logo image swap between desktop and mobile view
 */ 

.logoimage1 {
	display:inline-block;
	position: relative;
}
	
.logoimage2{
   display: none;
}

@media only screen and (max-width: 700px){           
	.logoimage1{
     display: none;
   }

   .logoimage2{
     display: inline-block;
   }
}

.insidecarousel{
	display:inline-block;
}

/*carousel dots*/
.slick-dots li img:nth-child(1) {
    display: inline;
}
.slick-dots li img:nth-child(2) {
    display: none;
}
.slick-dots li.slick-active img:nth-child(1) {
    display: none;
}
.slick-dots li.slick-active img:nth-child(2) {
    display: inline;
}
ul.slick-dots,
li.slick-dots,
li.slick-active,
a.slick-dots, 
a.slick-active,
img.slick-dots,
img.slick-active{
	white-space: nowrap;
	list-style-type:none;
}

ul.slick-dots{
	display:block;
	text-align:center;
}

.carouseldot-image{
	display: inline;
	cursor:pointer;
	white-space: nowrap;
}

/*front page button for more*/
.front-more-button{
	display:block;
	text-align:center;
}
@media only screen and (min-width: 480px){ 
.front-more-button{
	padding-left:8px;
}
}

/*research, publication archive page for listing items*/
.listcontainer{
	width:auto;
	height:auto;
	padding-top:15px;
	padding-left:10px;
	padding-bottom:15px;
	margin-right:1px;
	border-left:5px solid transparent;
	background-color:white;
}
.listcontainer:hover{
	border-left:5px solid orange;
	border-collapse: collapse;
	background-color: transparent;
	box-shadow: 3px 5px 4px #888888;
}

/*search and sort box*/
.searchandsort{
	border:none;
	background-color: transparent;
	margin:0px auto;
	padding-left:8%;
	padding-top:20px;
	padding-bottom:5px;
}

/*collapse*/
.collapse-wrap{
	width: 900px;
}
@media only screen and (max-width:900px){
	.collapse-wrap{
		width: 700px;
	}
}
@media only screen and (max-width:750px){
	.collapse-wrap{
		width: 600px;
	}
}
@media only screen and (max-width:620px){
	.collapse-wrap{
		width: 500px;
	}
}
@media only screen and (max-width:520px){
	.collapse-wrap{
		width: 400px;
	}
}
@media only screen and (max-width:420px){
	.collapse-wrap{
		width: 350px;
	}
}

/*collapse badge*/
.collapse-badge{
	background-color: rgb(240,240,240);
	color:black;
	border-radius:5px;
	font-size:14px;
	font-weight:500;
	padding:2px 4px 2px 4px;
}
.collapse-badge:hover{
    filter:brightness(0.8);
}

/*collapse title*/
.collapse-title{
	font-family: 'Oswald', noto-chinese, sans-serif;
	font-weight:500;
	font-size:18px;
}


/*filterby font and badge*/
.filterby-font{
	font-family: 'Oswald', noto-chinese, sans-serif;
	font-size:18px;
	font-weight:500;
}
.filterby-badge{
	background-color: #FFC107;
	color:black;
	border-radius:5px;
	font-size:16px;
	font-weight:400;
	font-family: 'Oswald', noto-chinese, sans-serif;
	padding:3px 7px 5px 5px;
	
}
.filterby-badge:hover{
    filter:brightness(0.8);
	color:black;
}

/*content php badge*/
.content-badge{
	font-size: 12px;
	font-weight: 500;
	color: black;
}

/*filter button's wrap*/
.filter-button-wrap{
	display:block;
	height:20px;
}

/*leaflet map at contact us*/
.leafletmap{
	width: 95%;
	margin-left:50px;
	height:400px;
}
@media only screen and (max-width:1000px){
	.leafletmap{
		width: 100%;
		margin-left:0px;
	}
}
/*expandable search bar*/

#expand-search input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	font-family: inherit;
	font-size: 100%;
}
#expand-search input::-webkit-search-decoration,
#expand-search input::-webkit-search-cancel-button {
	display: none; 
}


#expand-search input[type=search] {
	background: #ededed url(/20250708214654oe_/https://cspds.cuhk.edu.hk/wp-content/uploads/site/search-icon.png) no-repeat 11px center;
	background-size:18px 18px;
	border: none;
	padding: 0px 0px 0px 0px;
	margin:0px 0px 0px 8px;
	-webkit-border-radius: 10em;
	-moz-border-radius: 10em;
	border-radius: 10em;
	
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}

#expand-search input:-moz-placeholder {
	color: #999;
	font-family: inherit;
	padding-left:40px;
}
#expand-search input::-webkit-input-placeholder {
	color: #999;
	font-family: inherit;
	padding-left:40px;
}


#expand-search input[type=search] {
	font-size: 16px;
	width: 30px;
	padding-left: 10px;
	color: transparent;
	cursor: pointer;
}
#expand-search input[type=search]:hover {
	background-color:rgb(200,200,200);
}
#expand-search input[type=search]:focus {
	width: 280px;
	padding-left: 40px;
	color: #000;
	background-color: #fff;
	cursor: auto;
}
#expand-search input[type=search]:focus {
	border-color: #66CC75;
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/*menu hover*/
.sub-menu{
    display: none;
}

.menu-item:hover .sub-menu {
     display: block;  
}
.sub-menu:hover .sub-menu {
     display: block;  
}

/*index carousel*/
@media only screen and (min-width:1000px){
.index-carousel{
	width:80%;
	background:grey;
}
}