.cd-side-nav ul,.cd-top-nav{margin-bottom:0px;}
/* --------------------------------

Main Page Content

-------------------------------- */
.cd-main-content .content-wrapper {padding:45px 0px 0px;}
.cd-main-content::before {
	/* never visible - used to check MQ in jQuery */
	display:none;
	content: 'mobile';
}
@media only screen and (min-width: 768px) {
	.cd-main-content .content-wrapper {
		margin-left:110px;
		padding-top:55px;
	}
	.cd-main-content::before {
		content: 'tablet';
	}
}
@media only screen and (min-width: 1170px) {
	.cd-main-content .content-wrapper {
		margin-left:200px;
	}
	.cd-main-content::before {
		content: 'desktop';
	}
}

/* --------------------------------

Header

-------------------------------- */
.cd-main-header {
	position:fixed;
	z-index:104;
	top:0px;
	left:0px;
	height:45px;
	width:100%;
	background:#1d2731;
	box-shadow:0px 1px 3px rgba(0, 0, 0, 0.2);
}
.cd-main-header::after {
	clear:both;
	content: "";
	display:table;
}
@media only screen and (min-width: 768px) {
	.cd-main-header {
		position:fixed;
		height:55px;
	}
}

.cd-logo {float:left;display:block;margin:3px 0px 2px;}
.cd-logo img {display:block;}
@media only screen and (min-width: 768px) {
	.cd-logo {margin:8px 0px 7px;}
}

.cd-nav-trigger {
	/* navigation trigger - visible on mobile devices only */
	float:right;
	position:relative;
	display:block;
	width:34px;
	height:44px;
	margin-right:15px;
	/* hide text */
	overflow:hidden;
	white-space:nowrap;
	color:transparent;
}
.cd-nav-trigger span, .cd-nav-trigger span::before, .cd-nav-trigger span::after {
	/* hamburger icon in CSS */
	position:absolute;
	display:inline-block;
	height:3px;
	width:24px;
	background:#FFF;
}
.cd-nav-trigger span {
	/* line in the center */
	position:absolute;
	top:50%;
	right:5px;
	margin-top:-2px;
	-webkit-transition:background 0.2s;
	-moz-transition:background 0.2s;
	transition:background 0.2s;
}
.cd-nav-trigger span::before, .cd-nav-trigger span::after {
	/* other 2 lines */
	content: '';
	right:0px;
	/* Force Hardware Acceleration in WebKit */
	-webkit-transform:translateZ(0);
	-moz-transform:translateZ(0);
	-ms-transform:translateZ(0);
	-o-transform:translateZ(0);
	transform:translateZ(0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transform-origin:0% 50%;
	-moz-transform-origin:0% 50%;
	-ms-transform-origin:0% 50%;
	-o-transform-origin:0% 50%;
	transform-origin:0% 50%;
	-webkit-transition:-webkit-transform 0.2s;
	-moz-transition:-moz-transform 0.2s;
	transition:transform 0.2s;
}
.cd-nav-trigger span::before {
	/* menu icon top line */
	top:-6px;
}
.cd-nav-trigger span::after {
	/* menu icon bottom line */
	top:6px;
}
.cd-nav-trigger.nav-is-visible span {
	/* hide line in the center */
	background:rgba(255, 255, 255, 0);
}
.cd-nav-trigger.nav-is-visible span::before, .cd-nav-trigger.nav-is-visible span::after {
	/* keep visible other 2 lines */
	background:white;
}
.cd-nav-trigger.nav-is-visible span::before {
	-webkit-transform: translateX(4px) translateY(-3px) rotate(45deg);
	-moz-transform: translateX(4px) translateY(-3px) rotate(45deg);
	-ms-transform: translateX(4px) translateY(-3px) rotate(45deg);
	-o-transform: translateX(4px) translateY(-3px) rotate(45deg);
	transform: translateX(4px) translateY(-3px) rotate(45deg);
}
.cd-nav-trigger.nav-is-visible span::after {
	-webkit-transform: translateX(4px) translateY(2px) rotate(-45deg);
	-moz-transform: translateX(4px) translateY(2px) rotate(-45deg);
	-ms-transform: translateX(4px) translateY(2px) rotate(-45deg);
	-o-transform: translateX(4px) translateY(2px) rotate(-45deg);
	transform: translateX(4px) translateY(2px) rotate(-45deg);
}
@media only screen and (min-width: 768px) {
	.cd-nav-trigger {display:none;}
}

.cd-search {position:relative;margin:15px;}
.cd-search.is-hidden {opacity:0;}
.cd-search::before {
	/* lens icon */
	content: '';
	position:absolute;
	left:8px;
	top:50%;
	bottom:auto;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	height:16px;
	width:16px;
	background:url(../images/cd-search.png)/*tpa=http://www.kungfuconstruction.com.tw/themes/CADCH_00014A/images/cd-search.png*/ no-repeat 0px 0px;
}
.cd-search input {
	padding-left:32px;
	width:100%;
	height:36px;
	border:none;
	border-radius:3px;
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	-o-appearance:none;
	appearance:none;
	box-shadow:none;
}
.cd-search input:focus {outline:none;}
@media (min-width: 768px) {
	.cd-search input:focus {
		outline:none;
		border:none;
		border-left:1px solid #51575D;
		box-shadow:none;
	}
}
@media only screen and (min-width: 768px) {
	.cd-search {
		float:left;
		display:inline-block;
		width:200px;
		height:100%;
		margin:0px 0px 0px 2px;
	}
	.cd-search.is-hidden {
		/* reset style */
		opacity:1;
	}
	.cd-search::before {background-position:0px -17px;left:12px;	}
	.cd-search form, .cd-search input {height:100%;width:100%;}
	.cd-search input {
		border:none;
		padding-left:34px;
		border-radius:0px;
		background-color:#3E454C;
		border-left:1px solid #51575D;
		color:#FFF;
	}
	.cd-search input::-webkit-input-placeholder {color:#777C81;}
	.cd-search input::-moz-placeholder {color:#777C81;}
	.cd-search input:-moz-placeholder {color:#777C81;}
	.cd-search input:-ms-input-placeholder {color:#777C81;}
}

/* --------------------------------

Top Navigation

-------------------------------- */
.cd-nav {
	/* top nav - not visible on mobile devices */
	display:none;
}
@media only screen and (min-width: 768px) {
	.cd-nav {
		display:block;
		float:right;
		height:100%;
	}
}

.cd-top-nav > li > a::before {
	/* reset style */
	display:none;
}
.cd-top-nav > li a {padding:12px 10px!important;}
.cd-top-nav img {
	/* avatar image */
	position:absolute;
	left:14px;
	top:50%;
	bottom:auto;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	height:26px;
	width:26px;
	border-radius:50%;
	display:none;
}
@media only screen and (min-width: 768px) {
	.cd-top-nav {height:100%;}
	.cd-top-nav a {
		display:block;
		font-size:14px;
		color:#FFF;
	}
	.cd-top-nav > li {
		display:inline-block;
		margin-right:0px;
		height:100%;
	}
	.cd-top-nav > li:last-of-type {
		margin-right:0px;
	}
	.cd-top-nav > li a {padding:12px 10px!important;}
	.cd-top-nav img {display:block;}
}
@media only screen and (min-width: 1170px) {
	.cd-top-nav li:not(.has-children) a:hover,.cd-top-nav li:not(.has-third) a:hover {color:#d9b310;}
}

/* --------------------------------

Sidebar

-------------------------------- */
.cd-side-nav {
	position:fixed;
	z-index:103;
	left:0px;
	top:0px;
	width:100%;
	padding:45px 0px 0px;
	background-color:#0b3c5d;
	visibility:hidden;
	opacity:0;
	max-height:100vh;
	overflow:hidden;
	-webkit-transition:opacity 0.2s 0s, visibility 0s 0.2s;
	-moz-transition:opacity 0.2s 0s, visibility 0s 0.2s;
	transition:opacity 0.2s 0s, visibility 0s 0.2s;
}
.cd-side-nav.nav-is-visible {
	opacity:1;
	visibility:visible;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	-webkit-transition:opacity 0.2s 0s, visibility 0s 0s;
	-moz-transition:opacity 0.2s 0s, visibility 0s 0s;
	transition:opacity 0.2s 0s, visibility 0s 0s;
	max-height:none;
	height:100vh;
	box-shadow:0px 2px 10px rgba(0, 0, 0, 0.2);
}
.cd-side-nav > ul {padding:0px 0px;}
.cd-side-nav > ul:last-of-type {
  padding-bottom: 0;
}
.cd-side-nav .cd-label, .cd-side-nav a {display:block;padding:12px 10px;}
@media (max-width: 767px) {
	.cd-side-nav  .has-third ul a {padding:12px 10px 12px 24px;}
}
.cd-side-nav .cd-label {
	text-transform:uppercase;
	font-weight:bold;
	color:#646A6F;
	font-size:10px;
	letter-spacing:1px;
}
.cd-side-nav a {
	position:relative;
	color:#FFF;
	font-size:12px;
}
.cd-side-nav ul.cd-top-nav > li:last-of-type > a {border-bottom:none;}
.cd-side-nav > ul > li > a {padding-left:40px;border-bottom:1px solid #373D44;}
.cd-side-nav .count {
	/* notification badge */
	position:absolute;
	top:50%;
	bottom:auto;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	right:40px;
	padding:4px 6px;
	background-color:#FF7E66;
	border-radius:3px;
	color:#FFF;
	font-weight:bold;
	font-size:12px;
	text-align:center;
	line-height:12px;
}
.cd-side-nav .action-btn a {
  display:block;
  margin:0px 15px;
  padding:10px 0px;
  background-color:#d9534f;
  border-radius:3px;
  border:none;
  box-shadow:0px 1px 3px rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.2);
  text-align:center;
  color:#FFF;
  font-weight:bold;
}
.cd-side-nav .action-btn a::before {display:none;}
@media only screen and (min-width: 768px) {
	.cd-side-nav {
		position:relative;
		float:left;
		top:auto;
		width:110px;
		min-height:100vh;
		padding-top:55px;
		/* reset style */
		visibility:visible;
		opacity:1;
		overflow:visible;
		max-height:none;
	}
	.cd-side-nav.nav-is-visible {box-shadow:none;}
	.cd-side-nav.is-fixed {position:fixed;}
	.cd-side-nav > ul {
		/* reset style */
		padding:0px;
	}
	.cd-side-nav .cd-label {
		/* remove labels on minified version of the sidebar */
		display:none;
	}
	.cd-side-nav a {font-size:13px;text-align:center;}
	.cd-side-nav > ul > li > a {padding:46px 0px 34px;}
	.cd-side-nav .active > a {
		/* current page */
		box-shadow:inset 3px 0px 0px #d9534f;
		background-color:#33383E;
	}
	.cd-side-nav .action-btn a {margin:8px 8px 0px;}
	.cd-side-nav .count {
		height:8px;
		width:8px;
		border-radius:50%;
		box-shadow:0px 0px 6px rgba(0, 0, 0, 0.2);
		padding:0px;
		top:20px;
		-webkit-transform:translateX(-50%);
		-moz-transform:translateX(-50%);
		-ms-transform:translateX(-50%);
		-o-transform:translateX(-50%);
		transform:translateX(-50%);
		left:calc(50% + 20px);
		right:auto;
		color:transparent;
	}
}
@media only screen and (min-width: 1170px) {
	.cd-side-nav {width:200px;}
	.cd-side-nav > ul {padding:15px 0px;}
	.cd-side-nav > ul > li:not(.action-btn):hover > a {background-color:#33383E;box-shadow:inset 3px 0px 0px #d9534f;}
	.cd-side-nav > ul > li > a {
		padding:15px 15px 15px 42px;
		text-align:left;
		border-bottom:none;
	}
	.cd-side-nav .cd-label {display:block;padding:0px 15px 15px;}
	.cd-side-nav .action-btn {text-align:left;}
	.cd-side-nav .action-btn a {margin:0px 18px;}
	.no-touch .cd-side-nav .action-btn a:hover {background-color:#1A93DE;}
	.cd-side-nav .count {
		/* reset style */
		color:#FFF;
		height:auto;
		width:auto;
		border-radius:3px;
		padding:4px 6px;
		top:50%;
		bottom:auto;
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		-o-transform:translateY(-50%);
		transform:translateY(-50%);
		right:15px;
		left:auto;
		box-shadow:none;
	}
}

.has-children ul,.has-third ul {
	position:relative;
	width:100%;
	display:none;
	background-color:#1C1F22;
}
.has-children > a::after,.has-third > a::after {
	/* arrow icon */
	position:absolute;
	content: '';
	height:8px;
	width:12px;
	right:15px;
	top:50%;
	bottom:auto;
	-webkit-transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	-o-transform:translateY(-50%);
	transform:translateY(-50%);
	background:url(../images/cd-arrow.png)/*tpa=http://www.kungfuconstruction.com.tw/themes/CADCH_00014A/images/cd-arrow.png*/;
}
.has-children.selected > ul,.has-third.selected > ul {display:block;}
.has-children.selected > a::after,.has-third.selected > a::after {
	-webkit-transform:translateY(-50%) rotate(180deg);
	-moz-transform:translateY(-50%) rotate(180deg);
	-ms-transform:translateY(-50%) rotate(180deg);
	-o-transform:translateY(-50%) rotate(180deg);
	transform:translateY(-50%) rotate(180deg);
}
@media only screen and (min-width: 768px) {
	.has-children,.has-third {position:relative;}
	.has-children ul,.has-third ul {
		position:absolute;
		top:0px;
		left:100%;
		width:160px;
		padding:0px;
		box-shadow:0px 2px 10px rgba(0, 0, 0, 0.3);
	}
	.has-children ul a,.has-third ul a {
		text-align:left;
		border:none;
		padding:15px;
	}
	.no-touch .has-children ul a:hover,.no-touch .has-third ul a:hover {color:#d9534f;}
	.has-children > a::after,.has-third > a::after {display:none;}
	.cd-side-nav .has-children.selected > a,.cd-side-nav .has-third.selected > a {
		/* focus state -> show sub pages */
		background-color:#33383E;
	}
	.cd-top-nav .has-children,.cd-top-nav .has-third {
		position:relative;
		background-color:#2C3136;
	}
	.cd-top-nav .has-children > a,.cd-top-nav .has-third > a {
		height:100%;
		padding:0px 50px!important;
		line-height:55px;
	}
	.cd-top-nav .has-children > a::after,.cd-top-nav .has-third > a::after {
		display:block;
		right:15px;
	}
	.cd-top-nav .has-children ul,.cd-top-nav .has-third ul {
		background-color:#1C1F22;
		width:200px;
		top:100%;
		right:0px;
		left:auto;
		box-shadow:0px 1px 10px rgba(0, 0, 0, 0.2);
	}
	.cd-top-nav .has-children ul a,.cd-top-nav .has-third ul a {padding-left:15px!important;}
}

@media only screen and (min-width: 1170px) {
	.has-children > ul,.has-third > ul {
		width:100%;
		z-index:103;
	}
	.has-children ul a,.has-third ul a {padding-left:15px;}
	.has-children.active > ul,.has-third.active > ul {
		/* if the item is active, make the subnavigation visible */
		position:relative;
		display:block;
		/* reset style */
		left:0px;
		box-shadow:none;
	}
	.no-touch .cd-side-nav .has-children:hover > ul, .cd-side-nav .has-children.hover > ul,
	.no-touch .cd-side-nav .has-third:hover > ul, .cd-side-nav .has-third.hover > ul  {
		/* show subnavigation on hover */
		display:block;
		opacity:1;
		visibility:visible;
	}
}

/* --------------------------------

my fabg

-------------------------------- */
.fabg01,.fabg02,.fabg03,.fabg04,.fabg05,.fabg06 {position:relative;}
.fabg01:before,.fabg02:before,.fabg03:before,.fabg04:before,.fabg05:before,.fabg06:before {
    font-family:FontAwesome;
    font-style:normal;
    font-weight:normal;
    text-decoration:inherit;
	/*--adjust as necessary--*/
    color:#FFF;
    font-size:20px;
    padding-right:0px;
    position:absolute;
    top:calc(50% - 14px);
    left:16px;
}
.fabg01:hover,.fabg02:hover,.fabg03:hover,.fabg04:hover,.fabg05:hover,.fabg06:hover {
    font-size:14px;
    color:#D9B310;
}
.fabg01:before{content: "\f19c";}
.fabg02:before{content: "\f247";}
.fabg03:before{content: "\f085";}
.fabg04:before{content: "\f274";}
.fabg05:before{content: "\f098";}
.fabg06:before{content: "\f013";}
@media (min-width:768px) and (max-width:1169px){
	.fabg01:before,.fabg02:before,.fabg03:before,.fabg04:before,.fabg05:before,.fabg06:before {left:calc(50% - 9px);top:20px;font-size:22px;}
}