*{
	padding: 0px; margin: 0px; outline: none; text-decoration: none; list-style: none; 
}

@font-face {
    font-family: 'antonio-title';
    src: url(../fonts/Antonio-Regular.ttf);
}

@font-face {
    font-family: 'lato-content';
    src: url(../fonts/Lato-Regular.ttf);
}

/* Jerry Remark */
.more-padding-zh{
	padding-top: 150px!important;
}
.keep-reading:lang(en)::before {
    content: "KEE";
    border-top: 1px solid #57b88f;
}
.keep-reading:lang(zh)::before {
    content: "了";
    border-top: 1px solid #57b88f;
}
.keep-reading {
    color: #57b88f;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1px;
    font-style: italic;
    text-decoration: none;
}
.keep-reading:lang(en)::after {
    content: "ING";
    border-bottom: 1px solid #57b88f;
}
.keep-reading:lang(zh)::after {
    content: "多";
    border-bottom: 1px solid #57b88f;
}
.empty_space {
	height: 185px!important;
}
/*hide chinese language option
ul#myTopnav#myTopnav li:last-child {
    display: none;
}
div#responsive-menu-container #responsive-menu-wrapper ul li:last-child {
    display: none;
}
.footernav ul#menu-footer-menu li:last-child {
    display: none;
}
hide chinese language option*/
/* Project Portfolio */

.grids { margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; }
.grids:before, .grids:after { display: table; content: ""; }
.grids:after { clear: both; }
.grids [class*="grid"] { float: left; padding: 15px; vertical-align: top; width: 99.99999%; }

.grid.xs1 { width: 8.33333%; }
.grid.xs2 { width: 16.66666%; }
.grid.xs3 { width: 24.99999%; }
.grid.xs4 { width: 33.33333%; }
.grid.xs5 { width: 41.66666%; }
.grid.xs6 { width: 49.99999%; }
.grid.xs7 { width: 58.33333%; }
.grid.xs8 { width: 66.66666%; }
.grid.xs9 { width: 74.99999%; }
.grid.xs10 { width: 83.33333%; }
.grid.xs11 { width: 91.66666%; }
.grid.xs12 { width: 99.99999%; }

@media only screen and (min-width: 768px) { .grid.s1 { width: 8.33333%; }
  .grid.s2 { width: 16.66666%; }
  .grid.s3 { width: 24.99999%; }
  .grid.s4 { width: 33.33333%; }
  .grid.s5 { width: 41.66666%; }
  .grid.s6 { width: 49.99999%; }
  .grid.s7 { width: 58.33333%; }
  .grid.s8 { width: 66.66666%; }
  .grid.s9 { width: 74.99999%; }
  .grid.s10 { width: 83.33333%; }
  .grid.s11 { width: 91.66666%; }
  .grid.s12 { width: 99.99999%; } }
@media only screen and (min-width: 992px) { .grid.m1 { width: 8.33333%; }
  .grid.m2 { width: 16.66666%; }
  .grid.m3 { width: 24.99999%; }
  .grid.m4 { width: 33.33333%; }
  .grid.m5 { width: 41.66666%; }
  .grid.m6 { width: 49.99999%; }
  .grid.m7 { width: 58.33333%; }
  .grid.m8 { width: 66.66666%; }
  .grid.m9 { width: 74.99999%; }
  .grid.m10 { width: 83.33333%; }
  .grid.m11 { width: 91.66666%; }
  .grid.m12 { width: 99.99999%; } }
@media only screen and (min-width: 1200px) { .grid.l1 { width: 8.33333%; }
  .grid.l2 { width: 16.66666%; }
  .grid.l3 { width: 24.99999%; }
  .grid.l4 { width: 33.33333%; }
  .grid.l5 { width: 41.66666%; }
  .grid.l6 { width: 49.99999%; }
  .grid.l7 { width: 58.33333%; }
  .grid.l8 { width: 66.66666%; }
  .grid.l9 { width: 74.99999%; }
  .grid.l10 { width: 83.33333%; }
  .grid.l11 { width: 91.66666%; }
  .grid.l12 { width: 99.99999%; } }
.portfolio-terms { margin: 0 0 10px; border-bottom: 1px solid #57b88f; padding-bottom: 5px; }
.portfolio-terms:before, .portfolio-terms:after { display: table; content: ""; }
.portfolio-terms:after { clear: both; }
.portfolio-terms .filter-options { float: right; }
.portfolio-terms button { 
	font-size: 15px;
    line-height: 1;
    padding: 8px 16px;
    margin-right: 5px;
    background-color: transparent;
    border: none!important;
    color: rgba(169,183,206,0.7)!important;
    display: inline-block;
    cursor: pointer;
    font-family: 'lato-content'!important; 
}
.portfolio-terms button.active:after {
    display: block;
    clear: both;
    content: "";
    position: relative;
    left: 0;
    bottom: 0;
    max-width: 250px;
    height: 1px;
    width: 50%;
    border-bottom: 3px solid #57b88f;
    margin: 0 auto;
    padding: 4px 0px;
}
.portfolio-terms button.active{
    color: #57b88f!important;
    background-color: transparent!important;
}
.portfolio-terms button:hover, .portfolio-terms button:focus { 
	border: 0px!important; 
	background-color: transparent!important; 
	color: #57b88f!important; 
}
.portfolio-terms button:last-child { margin-right: 0; }
.portfolio-items { font-size: 18px; font-size: 1.125rem; }
.portfolio-items *:not(a) { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.portfolio-items figure { position: relative; overflow: hidden; text-align: center; }
.portfolio-items figure:hover figcaption:after { 
	/*left: 0;*/ 
	opacity: 1!important;
	-webkit-transform: rotateX(0deg)!important;
	-moz-transform: rotateX(0deg)!important;
    -o-transform: rotateX(0deg)!important;
	transform: rotateX(0deg)!important;
}
.portfolio-items figure:hover figcaption h4 { 
	right: auto!important; 
	opacity: 1;
	-webkit-transform: rotateX(0deg)!important;
	-moz-transform: rotateX(0deg)!important;
    -o-transform: rotateX(0deg)!important;
	transform: rotateX(0deg)!important;
}
.portfolio-items figure:hover figcaption .button { 
	/* bottom: 15px;*/
	opacity: 1;
	-webkit-transform: rotateX(0deg)!important;
	-moz-transform: rotateX(0deg)!important;
    -o-transform: rotateX(0deg)!important;
	transform: rotateX(0deg)!important;
 }
 
.portfolio-items figcaption { 
	text-align: content; 
	/* position: absolute; */ 
	width: 100%; 
	height: 100%; 
	left: 0; 
	/*top: 0;*/ 
	bottom:0; 
	transition: .4s; 
}
.portfolio-items figcaption:after { 
	background-color: #000; 
	content: ""; 
	/*height: 100%;*/ 
	height:40%!important; 
	left:0!important; 
	/*left: -100%; */ 
	opacity: 0!important; 
	position: absolute; 
	top: auto!important;
	bottom:0!important; 
	width: 100.1%!important; 
	transition: .4s; 
	-webkit-transform: rotateX(-180deg)!important;
	-moz-transform: rotateX(-180deg)!important;
    -o-transform: rotateX(-180deg)!important;
	transform: rotateX(-180deg)!important;
}
.portfolio-items figcaption h4 { 
	font-size: inherit; 
	position: absolute!important; 
	/*right: -100%;*/
	opacity: 0; 
	bottom: 70px!important; 
	text-align: center!important; 
	padding: 0 15px!important; 
	color: #ffffff!important; 
	width: 100%!important; 
	font-family: 'antonio-title'!important;
	font-size: 30px!important;
	z-index: 10!important; 
	transition: .4s!important; 
	-webkit-transform: rotateX(-180deg)!important;
	-moz-transform: rotateX(-180deg)!important;
    -o-transform: rotateX(-180deg)!important;
	transform: rotateX(-180deg)!important;
}
.portfolio-items figcaption .button { 
	position: absolute; 
	/*left: 50%;*/ left: 36%!important; 
	/*bottom: -25%;*/ 
	bottom: 18px!important; 
	opacity: 0; 
	*-webkit-transform: translateX(0)!important; 
	transform: translateX(0)!important;
	/*transform: translate(-50%,-50%); */ 
	display: table; 
	font-size: 15px; 
	line-height: 1; 
	padding: 8px 33px; 
	background-color: #57b88f; 
	color: #ffffff; 
	z-index: 10; 
	transition: .4s; 
	-webkit-transform: rotateX(-180deg)!important;
	-moz-transform: rotateX(-180deg)!important;
    -o-transform: rotateX(-180deg)!important;
	transform: rotateX(-180deg)!important;
}
.port-title{
	margin-top: 30px; 
	margin-bottom: 100px;
}
.sp-full-screen-button:before {
    content: ''!important;
}
.sp-buttons {
    display: none;
}
.sp-fade-full-screen {
    opacity: 0;
    -webkit-transition: all 0s ease 0s!important;
    transition: all 0s ease 0s!important;
}
.sp-full-screen-button {
	top: 0px!important;
    right: 0px!important;
    cursor: pointer;
    width: 100%;
    height: 100%;
    -webkit-transform: none!important;
    -ms-transform: none!important;
    transform: none!important;
}
.sp-horizontal .sp-arrows {
    z-index: 100;
}
.proj-img-desktop{
	display: block;
}
.proj-img-mobile{
	display: none;
}
/* Project Portfolio */
.slider-pro img.sp-image {
    max-width: 100%!important;
    max-height: 100%!important;
}
img.sp-image.vertical-image {
    display: block;
   /* height: 100%;
    margin: 0px auto 0px auto;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
img.sp-image.horizontal-image {
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /*margin: auto;
    top: 50%;
    transform: translate(0%,-50%);*/
}
.more_padding_top{
    padding-top: 34px;
}
.more_margin_top{
	margin-top: 40px;
}
.about-section-pad {
	padding-left: 75px;
}
.mission-font-size{
	font-size:16px;
}
.vc_section{
	padding-left: 0!important;
	padding-right: 0!important;
	margin-left: 0!important;
	margin-right: 0!important;
}
.pro-detail-nav{
    color: #666;
    margin-top: 10px;
    margin-bottom: 0px;
    line-height: 50px;
}
.pro-detail-nav-left{
	/* margin-left: 20%;*/
	text-align: center;
}
.pro-detail-nav-right{
	/* margin-right: 20%; */
	text-align: center;
}
.about-pic-padding {
    padding-top: 15px;
    padding-left: 24px!important;
}
.extra-padding{
	padding-top: 50px;
}
.mission-pic-pos{
	margin-top:-357px;
	margin-right:-150px;
}
.responsive-menu-open #responsive-menu-container.slide-top {
    transform: translateY(25%)!important;
    -ms-transform: translateY(25%)!important;
    -webkit-transform: translateY(25%)!important;
    -moz-transform: translateY(25%)!important;
}
#responsive-menu-container {
	bottom: auto!important;
	width: 100%!important;
}
span.proj-each-title{
	color: rgba(169, 183, 206, 0.8);
    font-size: 20px;
}

p.proj-detail-content{
	color:rgba(169,183,206,0.7); 
	letter-spacing: 0.01em;
}
.fixed-item-top {
    color: rgba(169,183,206,0.5);
    letter-spacing: 1px;
}
.fixed-item-bottom {
    color: #a9b7ce;
    letter-spacing: 1px;
}
div.wpcf7-validation-errors {
    color: red;
}
.lowermenu ul li:last-child {
    border-right: none;
    padding-left: 5px;
}
ul.topnav li a.active{
	color: #57b88f;
    border-top: 1px solid #57b88f;
}
ul.topnav li:nth-last-child(1) a {
    font-size: 14px;
}

ul.topnav li:nth-last-child(1) {
    float: right;
    padding-top: 2px;
}

p.ls-preloaded:hover {
    color: #57b88f!important;
    background: white;
}
.navbar-brand{
	width: 96px!important;
}
.antonio-font{
	font-family: 'antonio-title';
}
.lato-font{
	font-family: 'lato-content';
}
#map {
  height: 576px;
}
.vc_row
{
    margin-left: auto !important;
    margin-right: auto !important;
}
div#about, div#projects, div#contact, div#mission, .projects-portfolio {
    /*width: 1170px;
    margin: 0 auto!important;*/
}
div#mission {
/*	width: 1400px;
    padding-top: 160px;
    margin: 0 auto!important;
    */
}
.project-detail-head{
	color: #9098a4;
	font-size: 45px;
	font-weight: 600;	
}
.fixed-item{
	font-family: 'antonio-title';
	color: #9098a4;
}
.proj-head{
	padding-top: 30px;
	padding-bottom: 30px;
}
.proj-head h2{
    font-family: 'antonio-title';
    font-size: 38px;
}
.proj-head p{
	font-size: 20px;
    color: rgba(218, 226, 238, 0.5)!important;
}
.vc_column_container>.vc_column-inner{
	padding-left: 0!important;
	padding-right: 0!important;
}
body{
	/*font-family: 'lato-content'!important;*/
	background-color: #151f2f!important;
}
/* Jerry Remark */
.banner{
	position: relative;
}

.banner img{
	width:100%; 
	max-width: 100%;
}

.write h1{color:#fff; 
	
}
.besgate{
	background: #151f2f;
	margin: 30px;
}

.besgate h5{
	color:#5f6b7f;
}

.besgate p{
	color:#5f6b7f;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    margin-top: 10px;
    text-align: center;

    }

/* Float the list items side by side */
ul.topnav li { display: inline-block;
				padding-left:8%; 
}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    
    font-size: 17px;
}

ul.topnav li a:hover{
	color:#57b88f;
	border-top: 1px solid #57b88f;
	padding-top: 13px;
}

/* Change background color of links on hover */


/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

.about{
	background: url('../img/Aboutbg.png');  background-size:cover; width: 100%;
}

.about h2{
	color:#dce2ec;
	font-size: 30px;
}

.about article{
	color:#434e60;
	font-size: 17px;
	margin-bottom:10%;
}

.about p{
	color:#808a9c;
	margin-left:12%;
	padding-top: 20px;
	line-height: 2;
	
}

.about a{
	color:#57b88f;
	margin-left:12%;
	border-top: 1px solid #57b88f;
	border-bottom: 1px solid #57b88f;
	margin-top: 10%;
	
	
}

.about img{
	width: 100%;
	
}

.m-t{margin-top: 15%; margin-bottom: 15%;
	
}
.mt{
	margin-top: 15%;
}

.mission{
	background: url('../img/missionbg.png')
}



.mission img{
	width: 100%;
}


.mission h2{
	color:#dce2ec;
	font-size: 30px;
}

.mission article{
	color:#434e60;
	font-size: 17px;
	margin-bottom:10%;
}

.mission p{
	color:#808a9c;
	margin-left:12%;
	padding-top: 20px;
	line-height: 2;
	
}

.round{
	border: 1px solid #fff;
	border-radius: 50px;
	width: 60px ;
	height: 60px;
	display: inline-block;
}

.round h6{
	display: inline-block;
}

.tar{
	text-align: right;
}


.product{
	background: url('../img/bg.jpg'); background-size:cover; width: 100%;
}

.product h2{
	color:#dce2ec;
	font-size: 30px;
}

.product article{
	color:#434e60;
	font-size: 17px;
	margin-bottom:10%;
}

.product p{
	color:#808a9c;
	margin-left:12%;
	padding-top: 20px;
	line-height: 2;
	
}

.product img{
	width: 100%;
}


.product ul{
	
}

.product ul li{ display: inline-block; padding: 0 10px 0 0;


	
}

.product ul li a{
	color:#778293; text-decoration: none;
}

.product ul li a:hover{
	color:#57b88f; border-bottom: 1px solid #57b88f;
}

.Contact{
	background: url(../img/contactbg.png); background-size:cover; width: 100%;
}

.Contact h2{
	color:#dce2ec;
	font-size: 30px;
}

.Contact article{
	color:#434e60;
	font-size: 17px;
	margin-bottom:10%;
}

.Contact p{
	color:#808a9c;
	margin-left:12%;
	padding-top: 20px;
	line-height: 2;
	
}

.Contact img{
	width: 100%;
}

.Contact ul{
	text-align: center;
	
	
}

.Contact ul li{
	display: inline-block;
	border-right: 1px solid #666;
	font-size: 12px;
	padding: 0 10px;
	
}

.Contact ul li{
	color:#fff;
	
}

.Contact ul li:last-child{
	
	border-right:none;
	
	
}
.Contact ul li a{
	
	font-size: 10px;
	
}

.Contact ul li h6{
	display: inline;
	
}
.formbgboder{
	background: none;
	border: none;
	
	border-bottom: 1px solid #666;
	
}

.lastbg{
	
}
.lastbg a img{
	width: 100%;
}
.lastbg p{
	color:#FFF;
	font-size: 2vw;
	left: 35%;
	top: 40%;
	position: absolute;
}
.lower{
	background: #101824; 
	
}

.footernav{
	border-bottom: 1px solid #666; 
}

.footernav ul{
	
}

.footernav ul li{
	display: inline-block;
	padding: 20px 80px 20px 0;
}

.footernav ul li:last-child {
    float: right;    
    padding-right: 5%;
}

.footernav ul li a{
	color:#666;
	text-transform: capitalize;
}

.lowermenu ul{
	
}

.lowermenu ul li{
	display: inline-block;
	border-right: 1px solid #333;
	padding: 0 8px 0 0;
}

.lowermenu ul li a{
	color:#666;
}

.lastbg img{
	width: 100%;
}


/* project css*/


.banners{
	background: url('../img/project-banner.jpg');
	background-size:cover; width: 100%;
}
	
}
.atria{
	background:rgba(0,0,0,0.4);
	
	width: 100%;
	max-width: 100%;
	
}

.atria h2{
	color:#fff;
}

.atria p{
	color:#9098a4;
}

.date{
	text-align: center;
}

.date ul{
	margin-top: 17px;
}


.date ul li{
	display: inline-block;
	padding: 10px 27px 10px 27px; /* Jerry Remark */
	border-right: 1px solid rgba(144, 152, 164, 0.47); /* Jerry Remark 1px solid #9098a4 */
}

.date ul li:last-child{
	
	border-right:none;
}

.date ul li a article{
	display: inline-block;
}

.date ul li a p{
	display: inline-block;
}


.project-bg{
	background: #151f2f;
	width: 100%;
	max-width: 100%;
}

.item img{
	width: 100%;
}

.project{
	background: #0f1724;
	padding: 15px 30px;
	border:1px solid #000;
}

.project:hover{
	background: #000;
	
}

.project-bg h2{
	color:#
}

@media screen and (max-width:1366px){
	.portfolio-items figcaption:after { 
		/*left: 0;*/ 
		opacity: 1!important;
		-webkit-transform: rotateX(0deg)!important;
		-moz-transform: rotateX(0deg)!important;
	    -o-transform: rotateX(0deg)!important;
		transform: rotateX(0deg)!important;
	}
	.portfolio-items figcaption h4 { 
	    font-size: 24px!important;
		right: auto!important; 
		opacity: 1;
		-webkit-transform: rotateX(0deg)!important;
		-moz-transform: rotateX(0deg)!important;
	    -o-transform: rotateX(0deg)!important;
		transform: rotateX(0deg)!important;
	}
	.portfolio-items figcaption .button { 
		/* bottom: 15px;*/
		opacity: 1;
		-webkit-transform: rotateX(0deg)!important;
		-moz-transform: rotateX(0deg)!important;
	    -o-transform: rotateX(0deg)!important;
		transform: rotateX(0deg)!important;
	}
}

@media screen and (max-width:991px) {
	ul.topnav li {
	    padding-left: 3%;
	}
	.mission-pic-pos{
		margin-top:0px;
		margin-right:0px;
	}
}

@media screen and (max-width:768px){
	.empty_space {
		height: 0px!important;
	}
	.mobile-down {
	    margin-bottom: 50px;
	}
	.portfolio-items figcaption .button{
	    left: 50%!important;
        transform: translate(-50%,0%)!important;
	}
	.portfolio-items figure:hover figcaption .button { 
		/* bottom: 15px;*/
		opacity: 1;
		-webkit-transform: translate(-50%,0%)!important;
		-moz-transform: translate(-50%,0%)!important;
	    -o-transform: translate(-50%,0%)!important;
		transform: translate(-50%,0%)!important;
	 }
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li{display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
	
	
	
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
   
    
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
     background: #333;
  }
  ul.topnav {
    margin: -31px 0 0;
  }
}

@media screen and (max-width:480px) {
	/*img.sp-image.horizontal-image {
	    width: auto;
	    margin: 0 auto;
	    top: auto;
     	left: auto; 
     	transform: none; 
	}*/
	.align-text-left {
		text-align: left!important;
	    padding-left: 10px;
	}
	.proj-img-desktop{
		display: none;
	}
	.proj-img-mobile{
		display: block;
	}
	.more_padding_top{
	    padding-top: 0px;
	}
	.more_margin_top{
		margin-top: 0px;
	}
	img.logo-resize {
	    width: 50%;
	}
	.about-section-pad {
		padding-left: 0px;
	}
	.about-pic-padding {
	    padding-left: 0px!important;
	}
	.no-show-on-mobile{
		display:none;
	}
	.port-title{
		margin-top: 30px; 
		margin-bottom: 20px;
	}
	.date ul {
	    text-align: left;
	}
	.date ul li {
    		border-right: none;
	}
	.proj-head {
	    padding-top: 10px;
	    padding-bottom: 0px;
	}
	.date ul li {
	    padding: 10px 32px 10px 20px;
	}
	.footernav ul li {
	    padding: 20px 8px 20px 0;
	}
	.pro-detail-nav-left{
		margin-left: 0;
		font-size:12px;
	}
	.pro-detail-nav-right{
		margin-right: 0;
		font-size:12px;
	}
	.portfolio-terms button {
    		font-size: 14px;
    		padding: 8px 6px;
	}
	.mission-font-size{
		font-size:14px;
	}
	.left-on-mobile{
		text-align: left !important;
	}
}

@media only screen and (max-width: 980px) {
  .atria {
    position: static !important;
    
   }
	.project{
		text-align: center;
		padding: 15px 10px!important;
	}
}

 
 .ndnavbar{
 	background: #000;
 }
 
 
 .ndnavbar img{
 	width: 40px;
 }
 

 
 .ndnavbar. navbar {
 	background:rgba(0,0,0,0.4);
 }
 /*added by Connor*/
 .projects-description{
 	color:#f7f5f5;
 	line-height:1.8;
 }