/*IE 8*/
header, nav, section, article, aside, footer {
   display:block;
}
#main {
	xmargin-top: -130px;
	margin-top: 5px;
}
#new-intro{
	margin-top: -105px;
}
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?5522200');
  src: url('../font/fontello.eot?5522200#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?5522200') format('woff'),
       url('../font/fontello.ttf?5522200') format('truetype'),
       url('../font/fontello.svg?5522200#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;
	 
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	font-size:38px;
	/* opacity: .8; */
	 
	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;
		 
	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;
	 
	/* Animation center compensation - margins should be symmetric */
	/* remove if not needed */
	margin-left: .2em;
	 	 
	/* Uncomment for 3D effect 
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);*/ 
}
 
.icon-plus-squared:before { content: '\e805';}
.icon-minus-squared:before { content: '\e806'; }
.icon-phone:before { content: '\e801'; color:#34af23;}

.icon-mail:before { content: '\e802'; color:#3CA0D0;}
.icon-address:before { content: '\e803';	 color:#FE7569;}
.icon-time:before {	content: '\e804'; }
.icon-close:before { content: '\e807'; }
.icon-scroll-down:before { content: '\e808'; }
.icon-money:before { content: '\e80e'; }

.icon-price:before { content: '\e809'; }
.icon-products:before { content: '\e80d'; }
.icon-faq:before { content: '\e80a'; }
.icon-contact:before { content: '\e80b'; }
.icon-procedure:before { content: '\e80c'; }


.invisible{
	height:0px;
	visibility:hidden;
}

.hidden{
	display:none;
}

a:link, a:visited{
	text-decoration: none;
	color:#444;

}

a:hover{
	text-decoration: none;
	color:#AAA;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	-transition: all .2s ease;
}

header, body, footer{
	width:100%;
	xmin-width:960px;
	x-font-family:Trebuchet MS;
	font-family: 'Noto Sans HK', 'Open Sans', sans-serif;
	overflow-x:hidden;
}

header{

	background-color:#F0F0F0;
}

footer{
	background-color:#F0F0F0;
	border-top-width:6px;
	border-top-style:solid;
	border-top-color:#ffd700;
}

#branding{
	x-width: 700px;
	display: flex;
	justify-content: center;
	align-items: center;
	xwidth: 100vw;
	width: auto;
	text-align:center;
	font-size:36px;
	z-index:inherit;
	overflow:hidden;
	margin:0 auto 10px auto;
	padding-top:10px;
	height: 100px;
}

#logo{
	float:left;
	width: auto;
	margin:0 5px 0 5px;
}

#company-name,#company-name-en, 
#site-name, #site-name-en {
	line-height:87px;
	float:left;	
}



#company-name,#company-name-en {
	x-width:300px;
	width:auto;
	text-align:right;
}

#site-name, #site-name-en{
	x-width:300px;
	width:auto;
	font-weight:normal;
	text-align:left;
}

#main-menu{
	width:100vw;
	background-color:#FFD700;
	xline-height:40px;
	line-height:45px;
	text-align:center;
	vertical-align: middle;
	font-weight:bold;
	font-size:18px;
	x-font-size:1.25em;
	border-top:1px solid #AAA;
	border-bottom:1px solid #AAA;
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	overflow-x: hidden;
	overflow-y: auto;
}

#main-menu.en {
	line-height:24px;
}
h1 {
	margin-top:0px !important;
	margin-bottom: 0px !important;
}
#site-name-en, #company-name-en {
	font-size:30px;
	line-height:25px !important;
}
@media screen and (max-width: 792px) {
	#branding,#site-name, #company-name {
		font-size:28px;
		line-height:25px !important;
		xborder:1px solid red;
	}
	#site-name-en, #company-name-en {
		font-size:26px;
	}
	#logo {		
		width: 60px;		
	}
}
@media screen and (max-width: 728px) {
	#branding,#site-name, #company-name {
		font-size:24px;
		line-height:25px !important;
		xborder:1px solid red;
	}
	#logo {		
		width: 60px;		
	}
}
@media screen and (max-width: 512px) {
	#branding,#site-name, #company-name {
		font-size:16px;
		line-height:25px !important;
		height: auto;
		xborder:1px solid red;
	}
	#branding-en,#site-name-en, #company-name-en,
	#company-name-en>a,#site-name-en >a {
		font-size:12px;
		line-height:25px !important;
	}
	#main-menu{ 
		font-size:10px;
		width:100vw;
	}
	#main-menu.en {
		font-size:10px;
		width:100vw;
	}
	#logo {
		width:10vw;
	}
	
}

#main-menu ul{
	overflow:hidden;
	text-align:center;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

#main-menu li{
	float:left;
	x-width:20%;
}

#main-menu a:before{
	font-size:18px;
}

#main-menu a:link, #main-menu a:visited{
	color:#444;
}

#main-menu a:hover{
	text-decoration: none;
	color:#AAA;
}

.active-menu a{
	color:#000 !important;
	border-bottom: 2px solid #000;
	padding-bottom: 1px;
}

.active-menu a:before{
	display:none;
}


#help-message{
	margin:60px 30px 30px 30px;
	text-align:center;
}

#help-message h3{
	font-size:48px;
	font-weight:bold;
	line-height:70px;
}

#help-message p{
	font-size:28px;
	line-height:30px;
}

#contact{
	width:960px;
	margin:30px auto 30px auto;
	overflow:hidden;
	
}

#contact-info{
	width:460px;
	height:360px;
	margin:9px 9px 9px 9px;
	float:left;
	display:table;
	border-width:1px;
	border-style:solid;
	border-color:#AAA;	
	background-color:#FFF;
}

#contact-info li{
	display: table-row;
}

#contact-info p{
	display: table-cell;
	vertical-align:middle;
	width:65%;
	text-align:left;
	padding-left:5%;
	font-size:30px;
}

.chinese-size-22{
	font-size:24px !important;
	line-height: 30px;
}
.chinese-size-22.en{
	font-size:18px !important;
	line-height: 28px;
}
#contact-info span{
	display: table-cell;
	vertical-align:middle;
	width:20%;
	text-align:center;
	padding-left:10%;
}

.icon-address {
	font-size:22px;
}
.icon-time {
	font-size:22px;
}

#map{
	width:460px;
	height:360px;
	margin:9px 9px 9px 9px;
	float:left;
	border-width:1px;
	border-style:solid;
	border-color:#AAA;	
}

#legal{
	width:100%;
	text-align:center;
	font-size:12px;
	padding:20px 0px 50px 0px;
}

.AAA-1-border{
	border-width:1px;
	border-style:solid;
	border-color:#AAA;	
}

.round-corner{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.shadow{
	-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

.divider{
	border-top:1px solid #AAA;
	width:80%;
	xmin-width:960px;
	margin:0 auto 0 auto;
}
.d-none {
	display: none !important;
}
.section-content {
	min-height: 100px;
	padding:30px 10px 10px 10px;
}
.section-content.en {
	padding:30px 10px 10px 10px;
}

.image-slider {
	display: flex;
	justify-content: center;
	margin: 10px 4px 20px 4px;	
	width:100vw;
}

.x-carousel.slide {
	height: 40vh;
	width: calc( 40vh + 40vh + 40vh);
}
/* moved to products.css
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
	width: 60vw;
	height: 28vw;

}
*/
a.nav-link {
	color:green;
}
.tf-lang {	
	margin-left: 12px;
    height: 24px;
    x-width: 30px;
    width: 52px;
    padding: 2px 0px 2px 0px;
    text-align: center;
    margin-top: 0px;
	font-size:15px;
}

.shadow {
	box-shadow:  0.15rem 0.25rem 0.1 0.15rem rgba(58, 59, 69, 0.15) !important
}
.rounded{
	border-radius: 0.35rem !important;
}
@media ( max-width: 1024px) {
	#help-message {
		margin: 20px 10px 10px 10px;
	}
	#help-message h3{
		font-size:38px;
		margin: 0px 10px 0px 10px;
	}
	#help-message p{
		font-size:20px;
	}

	#contact {
		width:100vw;
		margin:10px auto 10px auto;
		display: flex;
		flex-direction: row;
	}
	#contact-info {
		width: 48vw;
	}
	#contact-info p {
		width:auto;
		font-size:26px;
	}
	.chinese-size-22 {
		font-size:22px !important;
	}
	#map {
		width:46vw;
	}
}
@media ( min-width: 512px) and ( max-width: 900px) {
	#help-message {
		margin: 20px 10px 10px 10px;
	}
	#help-message h3{
		font-size:38px;
		margin: 0px 10px 0px 10px;
	}
	#help-message p{
		font-size:20px;
	}

	#contact {
		width:100vw;
		margin:10px auto 10px auto;
		display: flex;
		flex-direction: row;
	}
	#contact-info {
		width: 48vw;
	}
	#contact-info p {
		width:auto;
		font-size:24px;
	}
	.chinese-size-22 {
		font-size:19px !important;
		
	}
	#map {
		width:46vw;
	}
}

@media ( max-width: 830px) {
	#contact-info span {
		width:15%;
		padding-left: 5%;
	}
	
}
@media ( max-width: 512px) {
	#help-message {
		margin: 20px 10px 10px 10px;
	}
	#help-message h3{
		font-size:24px;
		margin: 0px 10px 0px 10px;
	}
	#help-message.en h3{
		font-size:20px;
		margin: 0px 10px 0px 10px;
	}
	#help-message p{
		font-size:18px;
	}
	#contact-info span {
		width:15%;
		padding-left: 5%;
	}
	.chinese-size-22.en{
		font-size:16px !important;
		line-height: 28px;
	}
	.chinese-size-22.time.en{
		font-size:22px !important;
		line-height: 30px;
	}
	#contact {
		width:96vw;		
		margin:10px auto 10px auto;
		display: flex;		
		flex-direction: column;
		justify-content:center;
	}
	#contact-info {
		width: 92vw;
		height: 280px;
	}
	#contact-info span {
		padding-left:5%;
	}
	.chinese-size-22 {
		font-size:19px !important;		
	}
	#map {
		width:92vw;
	}
}
/* used in header.php */
.nav-menu {
	position: fixed;
	top:0px;
	z-index:999;
	width:100vw;
}
body {
	x-margin-top:150px;
	margin-top:20px;
}
.flex-row {
	display:flex;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 512px){
	body {
		margin-top:80px;
	}	
	#main {
		margin-top: -80px;
	}
	.section-content {
		padding-top:24px;
	}
	.section-content.en {
		padding-top:10px;
	}
	.image-slider {
		margin: 30px 4px 20px 4px;	
	}
	.tf-lang {	
		margin-left: 5px;
		height: 24px;
		x-width: 30px;
		width: 32px;
		padding: 2px 0px 2px 0px;
		text-align: center;
		margin-top: 2px;
		font-size:10px;
	}
	#main-menu.en {
		line-height: 15px !important;
	}
	#new-intro	{
		margin-top: -50px;
	}
}