@import url(https://fonts.googleapis.com/css?family=Roboto:700,600,400,300);

@media (max-width: 768px) {
  html, body {
  	font-size: 9pt;
  }

  body {
    padding: 43px 0 0 0;
  }

  img.landing-image { width: 96px;  }
  .main-logo { width:110px; height:57px; }
  h3.landing { font-size: 1.4em; color: #ffffff; margin-bottom: -13px; }
  div.projects-proj-name { font-size: 1em; }

  .nav-pri li { margin-right: 34px; height: 39px; color: #5B5B5B; }
  .nav-pri li a { font-size: 1.2em; letter-spacing: 2px; }

  .nav-sub li { margin-right: 22px; height: 30px; color: #5B5B5B; }
  .nav-sub li a { font-size: 1em; }
}

@media (min-width: 769px) {
  html, body {
  	font-size: 9pt;
  }

  body {
    padding: 134px 0 0 0;
  }

  img.landing-image { width: 192px;  }
  .main-logo { width:110px; height:57px; }

  h3.landing { font-size: 1.8em; color: #ffffff; margin-bottom: -13px; }
  div.projects-proj-name { font-size: 1.1em; }  

  .nav-pri li { margin-right: 20px; height: 39px; color: #5B5B5B; }
  .nav-pri li a { font-size: 1.1em; letter-spacing: 2px; }

  .nav-sub li { margin-right: 7px; height: 30px; color: #5B5B5B; }
  .nav-sub li a { font-size: 1.1em; }

  .switch-site  a { font-size: 1.1em; letter-spacing: 2px; }
}

@media (min-width: 1200px) {
  html, body {
  	font-size: 12pt;
  }

  body {
    padding: 134px 0 0 0;
  }

  img.landing-image { width: 192px;  }
  .main-logo { width:110px; height:57px; }

  h3.landing { font-size: 1.8em; color: #ffffff; margin-bottom: -13px; }
  div.projects-proj-name { font-size: 1.1em; }  

  .nav-pri li { margin-right: 20px; height: 39px; color: #5B5B5B; }
  .nav-pri li a { font-size: 0.825em; letter-spacing: 2px; }

  .nav-sub li { margin-right: 7px; height: 30px; color: #5B5B5B; }
  .nav-sub li a { font-size: 0.825em; }

  .switch-site  a { font-size: 0.825em; letter-spacing: 2px; }
}

html, body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  margin: 0;
}

:lang(en) {
  font-family: 'Roboto', sans-serif;
}

:lang(zh) {
  font-family: SimHei, 黑体, Hiragino Sans GB, 冬青黑体, 'Roboto', sans-serif;
}

div.zenx-left {
  float: left;
  width: 140px;
  padding-left: 15px;
  padding-right: 15px;
}

div.zenx-middle {
  margin-left: 140px;
  margin-right: 140px;
  padding-left: 15px;
  padding-right: 15px;
}

div.zenx-right {
  float: right;
  width: 140px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (max-width: 768px) {
  div.zenx-left, div.zenx-right {
    display: none;
  }

  div.zenx-middle {
    margin-left: 0px;
    margin-right: 0px;
  }
}


h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: 300;
}

h1 { font-size: 6em }
h2 { font-size: 2em }
h3 { font-size: 1.5em }
h4 { font-size: 1em }

h4.similar-projects
{
  letter-spacing: 3px;
  margin-top: 70px;
  margin-bottom: 40px;
  text-align: center;
}

a.landing { color: #fff; }
a.landing:hover { text-decoration: none;  }
.landing-copyright-text { position: absolute; bottom: 30px; }
.home-copyright-text { position: absolute; bottom: 20px; }

div.project-proj-title
{
  font-size: 3.3em;
  font-weight: 700;
  margin-top: 20px;
}

span.projects-proj-location {
  font-size: 0.9em;
  color: #ffffff;
  margin-bottom: 40px;
}

div.news-news-title
{
  font-size: 2em;
}

div.news-news-latest
{
  font-size: 1em;
}

div.news-news-latest-item
{
  font-size: 0.9em;
}

div.news-news-details
{
  margin-bottom: 45px;
}

div.news-news-latest-item a
{
  color: inherit;
  font-size: 1.1em;
}

div.news-news-latest, div.news-news-latest-item
{
  margin-bottom: 1em;
}

div.no-records-found {
  padding-top: 2em;
}

ul.breadcrumb li { color: #5B5B5B; }
ul.breadcrumb li a { color: #99ca3c; }

.nav-pri	{ margin-top: 28px; margin-left: 15px; }
.nav-pri li a { text-transform: uppercase; color: inherit; padding-left: 0; padding-right: 0; margin-left: -1px; margin-right: -3px; }
.nav-pri li a:link { color: inherit; }
.nav-pri li a:visited { color: inherit; }
.nav-pri li a:hover { color: inherit; text-decoration: none; background-color: inherit; }
.nav-pri li a:active { color: inherit; height: 20px;  }
.nav-pri li.active { border-bottom: solid 2px #99ca3c; }

.nav-sub	{ margin-left: 15px; }
.nav-sub li a { color: inherit; padding-left: 0; padding-right: 0; padding-top: 8px; }
.nav-sub li a:link { color: inherit; }
.nav-sub li a:visited { color: inherit; }
.nav-sub li a:hover { color: inherit; text-decoration: none; background-color: inherit; }
.nav-sub li a:active { color: inherit; }
.nav-sub li.active { border-bottom: solid 2px #99ca3c; }
.nav-sub .navbar-nav { clear:both; }

nav.navbar-header {
  background-color: #fff;
}

div.nav-sub
{
  min-height: 30px;
}

nav.navbar-container
{
  padding: 0 15px 20px 15px;
  background-color: #fff;
}

#header .logo-margin-top
{
  height: auto;
}

#header .logo-margin-top
{
  margin-top: 20px;
}

.switch-site	{ margin-top: 43px; padding: 0 15px 0 0; color: #5B5B5B; }
.switch-site  a:link { color: inherit; }
.switch-site  a:visited { color: inherit; }
.switch-site  a:hover { color: #99ca3c; text-decoration: none; background-color: inherit; }
.switch-site  a.active { color: #99ca3c; }

div.landing-loading {
  width: 100%;
  margin: auto;
  text-align: center;
  position: absolute;
  display: none;
}

div.home-loading {
  width: 100%;
  margin: auto;
  text-align: center;
  position: absolute;
  display: none;
}

div.home-proj-text
{
  position: absolute;
  left: 9%;
  bottom: 20%;
  text-transform: uppercase;
}

div.home-proj-name
{
  font-size: 2.1em;
  margin-bottom: 3px;
}

div.home-proj-location {
  font-size: 1.5em;
  margin-bottom: 25px;
}

#home-proj-more-btn {
  background-color: transparent;
  border: solid 2px #fff;
  padding: 0.5em 1.5em;
  text-transform: uppercase;
  font-size: 1.1em;
}

div.profile-banner {
  background: url("/Cms_Data/Sites/ZENX/Files/profile_main.jpg") no-repeat center center;
  background-size: cover;
  width: 100%;
  padding-top: 13.9%;
}

div.profile-vision {
  margin: 50px 0px 50px 0px;
}

div.profile-prc {
  background: url("/Cms_Data/Sites/ZENX/Files/Practice_Huanan.jpg") no-repeat center center;
  background-size: cover;
  width: 100%;
  min-height: 612px;
}

div.profile-prc-left {
  background-color: #ffffff;
  opacity: 0.8;
  filter: alpha(opacity=80); /* For IE8 and earlier */
  min-height: 612px;
}

div.profile-prc-left-sub-title
{
  font-size: 1.4em;
  font-weight: 300;
  margin-bottom: 30px;
}

div.profile-prc-left-content
{
  margin-bottom: 40px;
}

div.profile-svc-top {
}

div.profile-svc-bottom {
  margin-top: 60px;
  margin-bottom: 50px;
}

div.projects-proj-text {
  position:absolute;
  bottom: 5px;
  left: 15px;
  padding: 6px;
  /* text-shadow: 2px 2px 3px #333333; */
  line-height: 1.1;
  text-align: center;
  width: 223px;
}

@media (max-width: 767px) {
  div.projects-proj-text {
    width: 135px;
  }
}

div.projects-proj-name {
  color: #ffffff;
}  

div.contact-main {
  margin-bottom: 60px;
}

div.contact-main a { color: inherit; }
div.contact-main a:link { color: inherit; }
div.contact-main a:visited { color: inherit; }
div.contact-main a:hover { color: inherit; text-decoration: none; background-color: inherit; }
div.contact-main a:active { color: inherit; }

div.contact-banner {
  background: url("/Cms_Data/Sites/ZENX/Files/contact_wuhan.jpg") no-repeat center center;
  background-size: cover;
  width: 100%;
  padding-top: 20.05%;
}

div.contact-enquiries {
  padding-top: 60px;
  padding-bottom: 60px;
}

div.contact-enquiries a { color: inherit; }
div.contact-enquiries a:link { color: inherit; }
div.contact-enquiries a:visited { color: inherit; }
div.contact-enquiries a:hover { color: inherit; text-decoration: none; background-color: inherit; }
div.contact-enquiries a:active { color: inherit; }

div.contact-enquiries-left {
  height: 362px;
}

div.contact-enquiries-right {
  background:url('/Cms_Data/Sites/ZENX/Files/Contact_City.jpg') no-repeat center center;
  background-size: 100% 362px;
  height: 362px;
}

div.footer {
  color: #5B5B5B;
  font-size: 0.9em;
  text-align: center;
  margin-top: 65px;
  margin-bottom: 21px;
}

div.project-proj-location {
  font-size: 1.15em;
  margin-bottom: 45px;
}

div.news-news-date {
  margin-bottom: 20px;
}

.bg-green
{
  background-color: #9ac93c;
}

.text-green
{
  color: #99ca3c;
}

.text-grey
{
  color: #5B5B5B;
}

.text-white
{
  color: #ffffff;
}

.text-drop-shadow
{
  text-shadow: 2px 2px #333333;
}

.text-hover
{
  color: #ffffff;
  text-transform: uppercase;
}

.img-full-width
{
  width: 100%;
}

a.svg:after {
  content: ""; 
  position: absolute; 
  top: 0; 
  width: 140px; 
  bottom: 0; 
  left: 0;
}

/* ---- isotope ---- */

.grid {
  width: 100%;
  height: auto;
  margin: 0 auto;
  position: relative;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.isotope-item {
  position: relative;
  width: 253px;
  height: 253px;
  cursor: pointer;
  margin: 5px;
  padding: 10px;  
  background-size: auto 100%;
}

@media (max-width: 767px) {
  .isotope-item {
    width: 165px;
    height: 165px;
  }
}

.isotope-item > * {
  margin: 0;
  padding: 0;
}

.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/*  ---- Override Bootstrap's default font color ---- */
body {
  color: #8F8F8F;
}

kbd {
  background-color: #8F8F8F;
}

pre {
  color: #8F8F8F;
}

legend {
  color: #8F8F8F;
}

.btn:hover,
.btn:focus,
.btn.focus {
  color: #8F8F8F;
}

.btn-default {
  color: #8F8F8F;
}

.btn-default:focus,
.btn-default.focus {
  color: #8F8F8F;
}
.btn-default:hover {
  color: #8F8F8F;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #8F8F8F;
}
.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
  color: #8F8F8F;
}

.btn-default .badge {
  background-color: #8F8F8F;
}

.dropdown-menu > li > a {
  color: #8F8F8F;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #8F8F8F;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #8F8F8F;
  }
}

.navbar-default .navbar-link:hover {
  color: #8F8F8F;
}

.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
  color: #8F8F8F;
}

.navbar-inverse .navbar-toggle {
  border-color: #8F8F8F;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #8F8F8F;
}

.thumbnail .caption {
  color: #8F8F8F;
}

a.list-group-item .list-group-item-heading,
button.list-group-item .list-group-item-heading {
  color: #8F8F8F;
}

.panel-default > .panel-heading {
  color: #8F8F8F;
}

.panel-default > .panel-heading .badge {
  color: #8F8F8F;
}
/*  ---- End: Override Bootstrap's default font color ---- */