fhtml {
	min-height: 100vh;
}
body {
	font-family: 'Open Sans', Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif;
	font-size: 14px;
	color: #808080;
	padding: 0;
	margin: 0;
}

a, a:link, a:visited {
	color: white;
	text-decoration: none;
}

a:hover, a:active {
	color: red;
}

.col {
	padding: 0;
	margin: 0;
	background: white;
}

.main-nav {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 150px;
	background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0));
}

/*.slides-container {
	background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,1));
}*/
.vignette-left, .vignette-right {
	height: 100%;
	width: 20%;
	position: absolute;
	z-index: 3;
}
.vignette-left {
	background: linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,0));
}
.vignette-right {
	right: 0;
	background: linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,0));
}

.hero-text {
	text-align: center;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 40vh;
	width: 100%;
	z-index: 2;
	background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
}
.hero-text p {
	font-size: 4.5em;
	font-weight: lighter;
	color: white;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 70px auto;
	padding: 0 5%;
}

.logo {
	height: 58px;
	width: 190px;
	vertical-align: middle;
	float: left;
	padding: 8px 0 12px 0;
	margin-left: 0;
	cursor: pointer;
}
nav {
	height: 58px;
	text-align: right;
	padding: 0 20px !important;
}
nav a {
	height: 32px;
	line-height: 23px;
	display: inline-block;
	color: black !important;
	margin: 13px 5px;
	padding: 3px 10px;
	border: 1px solid transparent;
}
nav a:hover, a:active {
	color: red !important;
	border-color: red;
}

.landing-screen {
	height: 100vh;
	background-image: url("../images/hero1.jpg");
	background-size: cover;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	color: white;
	font-size: 5em;
}

.what-we-do {
	height: 500px;
	padding: 100px 0;
	text-align: center;
	position: relative;
}

.what-we-do img {
	height: 100%;
	position: absolute;
	top: 0;
}
#do-bg-left {
	left: 0;
}
#do-bg-right {
	right: 0;
}

.what-we-do p {
	position: relative;
	z-index: 1;
}
.what-we-do p:nth-child(1) {
	font-size: 3.6em;
	margin-bottom: 0;
}
.what-we-do p:nth-child(2) {
	font-size: 1.8em;
	margin-top: 15px;
}

#our-clients p {
	font-size: 3.6em;
	color: #4D4D4D;
	padding: 20px 0;
	margin-bottom: 0;
	text-align: center;
}

.projects {
	margin-left: -4px;
}

.image {
	margin: 0 0 4px 4px;
	position: relative;
	overflow: hidden;
}

.image img {
	width: 100%;
}

.project-overlay {
	position: absolute;
	z-index: 1;
	top: 66%;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(rgba(53,51,51,0), rgba(53,51,51,0.8));
	border-bottom: 6px solid #e60011;
	opacity: 0;

	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-ms-transition: opacity 0.4s ease-out;
	-o-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
}
.project-overlay2 {
	position: absolute;
	z-index: 1;
	top: 90%;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(rgba(53,51,51,0), rgba(53,51,51,0.8));
	border-bottom: 6px solid #e60011;
	opacity: 0;
}
.show-overlay {
	opacity: 1;	
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-ms-transition: opacity 0.4s ease-out;
	-o-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
}
.project-overlay p {
	position: absolute;
	margin-bottom: 0;
	left: 20px;
	bottom: 15px;
	z-index: 2;
	font-size: 1.5em;
	font-weight: lighter;
	color: white;
}

.mission-statement {
	background: #333333;
	text-align: center;
	padding: 5% 5%;
}
.mission-statement img {
	width: 100%;
}

#our-products p {
	font-size: 3.6em;
	color: #4D4D4D;
	padding: 20px 0;
	margin-top: 80px;
	margin-bottom: 0;
	text-align: center;
}

.request-a-sample {
	height: 220px;
	background: #333333;

/*	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;*/
	text-align: center;
	line-height: 220px;
	font-size: 1.5em;
	font-weight: lighter;
	color: white;
}
.request-a-sample a {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	margin: 0 20px;
	padding: 10px 20px;
	border: 1px solid white;
}
.request-a-sample a:hover, 
.request-a-sample a:active {
	border-color: red;
}

.confidence-heading {
	text-align: center;
}
.confidence-heading p {
	font-size: 3em;
	color: #4D4D4D;
	margin: 70px 0 40px 0;
}
.confidence-text p {
	width: 400px;
	font-size: 2em;
	margin: 0 0 80px auto;
	padding: 0 10px;
}
.confidence-text p span {
	color: #4D4D4D;
}
.confidence-image img {
	height: 220px;
	display: block;
	margin: 6px auto 80px 10%;
}

#factory {
	height: 500px;
	background: #EEEEEE;
}
.poster {
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: url("../images/factory_bg.jpg");
	background-size: cover;	
	content: " ";
}
.video-overlay span.header {
	font-size: 3em;
	font-weight: normal;
	color: white;
	display: block;
	margin-bottom: 30px;
}
.video-overlay {
	padding: 50px 80px;
}
.video-overlay p {
	font-size: 2em;
	font-weight: lighter;
	color: #E6E6E6;
	line-height: 40px;
}
#factory .button {
	width: 100%;
	/*text-align: center;*/
	margin-top: 20px;
}
#factory a {
	display: inline-block;
	line-height: normal;
	padding: 10px 20px;
	border: 1px solid white;
	font-size: 1.5em;
	font-weight: lighter;
	color: white;
}
#factory a:hover, 
#factory a:active {
	border-color: red;
	color: red;
}

.contact-header p {
	font-size: 3em;
	color: #4D4D4D;
	text-align: center;
	margin: 40px auto;
}
#contact-us p:nth-child(2) {
	text-align: center;
	width: 60%;
	font-size: 1.5em;
	margin: 0 auto 80px auto;
}
#contact-us span {
	color: #4D4D4D;
	font-weight: bold;
}

.contact-office {
	font-size: 1em;
	padding-bottom: 60px;
}
.contact-office p {
	text-align: center;
	display: block;
	width: 370px;
}
#hk-office p {
	margin: 20px 10% 0 auto;
}
#shanghai-office p {
	margin: 20px auto 0 10%;
}

.office-bg {
	height: 225px;
	width: 370px;
	position: relative;
	margin-bottom: 25px;
	display: block;
}
#hong-kong-img {
	background-image: url("../images/hongkong_370x225.jpg");
	background-size: cover;	
	margin: 0 10% 0 auto;
}
#shanghai-img {
	background-image: url("..images/kunshan_370x225.jpg");
	background-size: cover;	
	margin: 0 auto 0 10%;
}
.contact-overlay {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.2);
	color: white;
	font-size: 2em;
	text-align: center;
	vertical-align: middle;
	line-height: 225px;
	position: absolute;
	z-index: 1;
}

.map {
	width: 100%;
	display: block;
}

.footer {
	background: #333333;
	height: 100px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	font-size: 1em;
	font-weight: lighter;
	color: white;
}

.header-2, .header-3 {
	height: 58px;
	padding: 0 20px !important;
}

.header-1,
.header-2,
.header-3 {
	border-bottom: 1px solid #DDDDDD;
}
.header-3 {
	margin-bottom: 4px;
}

.header-3 select {
	border: 1px solid #d3d3d3;
	height: 40px;
	position: relative;
    padding: 7px 0 7px 12px;
    float: right;
	margin: 9px 15px 9px 0;

    color: #333;
    font-size: 1em;
    background: #fff;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#ececec),color-stop(1,#fff));
    background: -ms-linear-gradient(bottom,#ececec,#fff);
    background: -moz-linear-gradient(center bottom,#ececec 0,#fff 100%);
    background: -o-linear-gradient(#fff,#ececec);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ececec', GradientType=0);
    cursor: pointer;
    /*-webkit-appearance: none;*/
}

.project-type,
.project-results,
.project-category {
	height: 58px;
	display: inline-block;
}
.project-type {
	font-size: 2em;
	color: #4D4D4D;
	padding: 12px 0;
	vertical-align: middle;
}
.project-results {
	height: 58px;
	padding: 15px 0;
}
.project-category {
	color: #4D4D4D;
	height: 58px;
	padding: 20px 0;
}
.projects img {
	display: block;
}

@media (max-width: 767px){
	.main-nav a {
		display: none;
	}
	.button_container {
		display: initial;
	}

	.hero-text p {
	}

	.what-we-do {
		height: auto;
		padding: 5% 10%;
		text-align: left;
	}
	#do-bg-left {
		display: none;
	}
	.what-we-do p:nth-child(1) {
		font-size: 2em;
/*		margin-bottom: 0;*/
	}
	.what-we-do p:nth-child(2) {
		font-size: 1.2em;
/*		margin-top: 15px;*/
	}

	#our-clients p, #our-products p, .contact-header p {
		font-size: 2em;
		padding: 0;
		margin: 40px 0 10px 0;
	}

	.project-overlay {
		opacity: 1;
		border: none;
	}
	.project-overlay p {
		left: 10px;
		bottom: 5px;
		font-size: 1.2em;
	}

	.request-a-sample {
		height: 120px;
		line-height: 120px;
		font-size: 1em;
	}

	.confidence-heading p {
		font-size: 2em;
		margin: 50px 0 40px 0;
	}
	.confidence-text p {
		width: 250px;
		font-size: 1.5em;
		margin: 0 0 50px auto;
	}
	.confidence-image img {
		height: 150px;
		display: block;
		margin: 6px auto 50px 10%;
	}
	#factory {
		height: 450px;
	}
	.video-overlay span.header {
		font-size: 2em;
		margin-bottom: 20px;
	}
	.video-overlay {
		padding: 70px 80px;
	}
	.video-overlay p {
		font-size: 1.2em;
		line-height: 30px;
	}
	#factory a {
		font-size: 1em;
	}
	#contact-us p:nth-child(2) {
		font-size: 1.2em;
		margin-top: 40px;
	}
	#hk-office p {
		margin: 20px auto;
	}
	#shanghai-office p {
		margin: 20px auto;
	}
	#hong-kong-img {
		margin: auto auto;
	}
	#shanghai-img {
		margin: auto auto;
	}
}

@media (max-width: 629px){ 
	.hero-text p {
		font-size: 3em;
	}

	/*Position hero images into view*/
	.hero1 {
		transform: translateX(180px);
	}
	.hero2 {
		transform: translateX(180px);
	}
	.hero3 {
		transform: translateX(220px);
	}
	.hero4 {
		transform: translateX(-180px);
	}

	.vignette-left, .vignette-right {
		display: none;
	}

	.projects {
		margin-left: -3px;
	}

	.image {
		margin: 0 0 3px 3px;
	}

	.header-3 {
		margin-bottom: 4px;
	}

	.mission-statement {
		padding: 5% 2%;
	}

	.request-a-sample a:nth-child(1) {
		display: none;
	}

	.confidence-heading p {
		margin: 50px 10% 10px 10%;
	}
	.confidence-text p {
		text-align: center;
		width: 70%;
		font-size: 1.2em;
		margin: 10px 15%;
	}
	.confidence-image img {
		height: 180px;
		display: block;
		margin: 40px auto 50px auto;
	}

	#factory {
		text-align: center;
	}
	.video-overlay {
		padding: 50px 80px;
	}

	.contact-header p {
		margin: 40px 0 40px 0;
	}
	#contact-us p:nth-child(2) {
		margin-top: 40px;
		width: 90%;
	}
	.contact-office {
		text-align: center;
		font-size: 1.2em;
		padding-bottom: 60px;
	}

	.office-bg {
		height: 225px;
		width: 370px;
		position: relative;
		margin: 0 auto;
		margin-bottom: 25px;
		display: block;
	}


	.contact-overlay {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.2);
		color: white;
		font-size: 2em;
		text-align: center;
		vertical-align: middle;
		line-height: 225px;
		position: absolute;
		z-index: 1;
	}
	.header-3 {
		margin-bottom: 4px;
	}
}