/* Container */
.container {
    background-color: #ffffff;
    min-height: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 0;
}


/* Common */
html,body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}
#MainNavigation, 
#ContactFooter {
    position: fixed;
    z-index: 999;
    width: 100%;
}

/* Lang Navigation */
#LangNavigation {
    position: fixed; 
    top: 30px; 
    right:30px; 
    z-index: 9999;    
}
#LangNavigation a {
    color: #9FA0A0;
}

/* Main Navigation */
#MainNavigation {
    top: 0;
    background-color: #fff;
}
#MainNavigation .container {
    height: 100px;
}
#MainNavigation #LogoRow{
    margin-top: -35px;
    margin-bottom: 33px;
}
#MainNavigation #LogoRow img {
    width: 270px;
}
#MainNavigation .nav-pills li a,
#MobileNavigationList li a{
   color: #3E3A39;
   background-color: #ffffff;
}
#MainNavigation .nav-pills,
#MainNavigation .nav-pills li a:hover,
#MainNavigation .nav-pills li.active a{
    background-color: #ffffff;
}
#MainNavigation .nav-pills li a span,
#MainNavigation .nav-pills li a:hover span,
#MainNavigation .nav-pills li a:focus span,
#MainNavigation .nav-pills li a:visited span,
#MobileNavigationList li a span,
#MobileNavigationList li a:hover span,
#MobileNavigationList li a:focus span,
#MobileNavigationList li a:visited span{
  border-bottom: 1px solid #3E3A39;
}


/* Main */
main {
    margin-top: 180px; /*  start from body 's top */
    margin-bottom: 80px;
    padding-top: 0;
}
main .container {
    min-height: 230px; 
}
#MainLeftCol,
#MainRightCol{
    position: relative;
    float: left;
    padding: 0;
    width: 100%;
    border: none;
}

/* Main  Left Column */
#MainLeftCol{
    max-width: 230px;
    /*margin-right: 78px;*/
}
#MainLeftCol h1 {
    padding: 0;
    margin: 0;
    width: 170px;
    margin-bottom: 80px;
}
#MainLeftCol h1 img {
    width: 170px;
    height: 150px; /*  Must be use specific number */
}


/* Catalog */
#CatalogUL {
    list-style: none;
    padding: 0;
    /*
    background-color: #fff;
    max-height: 100px;
    overflow-y: auto;
    */
}
#CatalogUL li {
    padding: 0;
    margin-bottom: 10px;
}
#CatalogUL li a {
    color:  #231815;
    text-decoration: none;
}


/*  Project Spec Col*/
.ProjectSpecCol {
    background-color: #fff;
    height: 540px;
}
.ProjectSpecCol h1{
    height: 345px;
}

/*  Project Spec Table */
#ProjectSpecTable {
    width: 170px;  /*  same with #MainLeftCol h1 */
    padding: 0;
}
#ProjectSpecTable  tr td {
    padding: 0;
    padding-bottom: 4px;
}
#ProjectSpecTable  tr td:first-child {
    width: 60px;
}


/* AboutRow, Philosophy Row */
#AboutRow,
#PhilosophyRow {
    background-color: #fff;
    padding: 0;
    margin: 0;
}
#AboutRow .prc,
#PhilosophyRow .prc {
    background-color: #fff;
    padding: 0;
    margin-left: 80px;
    margin-bottom: 80px;
}
/*#AboutRow .prc:first-child,
#PhilosophyRow .prc:first-child {
    margin-left: 80px;
    margin-bottom: 80px;    
}*/
#AboutRow .prc p {
    margin-bottom: 50px; /*  set to be  50px or 80px */
}

#PhilosophyRow .prc .thumbnail {
    border:none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}
#PhilosophyRow .prc .thumbnail a {
    color:  #231815;
}
#PhilosophyRow .prc .thumbnail img {
    width: 100%;
    display: block;
}
#PhilosophyRow .prc .thumbnail img:last-child {
    display: none;
}
#PhilosophyRow .prc:hover .thumbnail img{
    display: none;
}
#PhilosophyRow .prc:hover .thumbnail img:last-child{
    display: block;
}
#PhilosophyRow .prc .thumbnail h2 {
    position: absolute;
    top: 0;
    margin: 0;
    padding: 15px;
    width: 100%;
}

/* Under ProjectBody */
#PhilosophyBody #PhilosophyRow .prc .thumbnail img:last-child, 
#ProjectBody #PhilosophyRow .prc .thumbnail img:last-child, 
#PublicationBody #PhilosophyRow .prc .thumbnail img:last-child {
    display: block;
}
#PhilosophyBody #PhilosophyRow .prc:hover .thumbnail img, 
#ProjectBody #PhilosophyRow .prc:hover .thumbnail img, 
#PublicationBody #PhilosophyRow .prc:hover .thumbnail img {
    display: block;
}
#PhilosophyBody #PhilosophyRow .prc .thumbnail .layer-cover,
#ProjectBody #PhilosophyRow .prc .thumbnail .layer-cover, 
#PublicationBody #PhilosophyRow .prc .thumbnail .layer-cover {
    background-color: black;
    position: absolute;
    top: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    opacity: 0.7;
    display: none;
}
#PhilosophyBody #PhilosophyRow .prc:hover .thumbnail .layer-cover, 
#ProjectBody #PhilosophyRow .prc:hover .thumbnail .layer-cover, 
#PublicationBody #PhilosophyRow .prc:hover .thumbnail .layer-cover {
    display: block;
}
#PhilosophyBody #PhilosophyRow .prc .thumbnail h2, 
#ProjectBody #PhilosophyRow .prc .thumbnail h2, 
#PublicationBody #PhilosophyRow .prc .thumbnail h2 {
    color: #fff;
    display: none;
}
#PhilosophyBody #PhilosophyRow .prc:hover .thumbnail h2, 
#ProjectBody #PhilosophyRow .prc:hover .thumbnail h2, 
#PublicationBody #PhilosophyRow .prc:hover .thumbnail h2 {
    display: block;
}
/*#projectBody #PhilosophyRow .prc .thumbnail a {
    color: #fff;
}*/


/* Slide Wrapper */
.slide-wrapper {
    position: relative;
    background-color: #F7F8F8;
    height: 540px;
    margin-bottom: 80px;
}
.slide-wrapper .carousel,
.slide-wrapper .carousel-inner {
    height: 100%;
}
.slide-wrapper .carousel-inner .item {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.slide-wrapper .carousel-inner .item img,
.slide-wrapper .carousel-inner .item a img {
  width: 100%;
  display: block;
  max-width: 100%;
  height: auto;
}
.slide-wrapper .carousel-inner .item-width {
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.slide-wrapper .carousel-inner .item-height {
  background-size: contain;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
}

/* Carousel-control */
.carousel-control.left,
.carousel-control.right {
    background-image: none;
}
.carousel-control .glyphicon {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
    background-color: #999;
    color: #ffffff;
    text-shadow: none;
    margin-top: -10px; 
    width: 30px;
    height: 30px;
    display: none;
}
.carousel-control .glyphicon i {
    margin-top: 3px;
    font-style: normal;
}
.carousel-control .arrow-left {
    left: 0px;    
}
.carousel-control .arrow-left i {
    float: left;
    margin-left: -1px;
}
.carousel-control .arrow-right {
    right: 0px;
}
.carousel-control .arrow-right i {
    float: right;
    margin-right: -1px;
}
.carousel:hover .carousel-control .glyphicon {
    display: block;
}
/*
.carousel-control {
    opacity: 1;
}
.carousel-control.left,
.carousel-control.right {
    background-image: none;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
    background-color: #666666;
    color: #ffffff;
    text-shadow: none;
}
.carousel-control .icon-prev {
    margin-left: -50px;
}
.carousel-control .icon-next {
    margin-right: -50px;
}
*/


/* Contact Footer */
#ContactFooter {
    /*bottom: -72px;*/
    background-color: #F7F8F8;
}
#ContactFooter .container {
    min-height: 72px;
    padding-right: 40px;
    padding-left: 40px;
    background-color: #F7F8F8;
}
.nav {position: relative}
#ContactFooter .nav li {
    padding-top: 15px;
    margin-right: 9%;
}
#ContactFooter .nav li:nth-child(4) {
    margin-right: 0;
} 

#ContactFooter .nav li,
#ContactFooter .nav li a,
#ContactFooter .nav li a:link {
    color:  #898989;
}
#ContactFooter .indicator {
    position: absolute;
    color: white;
    background-color: #e1e1e1;
    width: 90px;
    height: 27px;
    vertical-align: middle;
    text-align: center;
    top: -27px;
}


/* Back */
a.back {
    position: absolute; 
    left:-40px;
    cursor: pointer;
}
a.back img {
    width: 100%;
    max-width: 30px;
}


/*  Line Height CSS */
.ProjectSpecCol h1{
    line-height: 1.2;
}
#AboutRow .prc p {
    line-height: 1.5;
}

/* carousel-caption */
.carousel-caption {
    /*background-color: yellow; */
    width: fit-content;
    margin: 0 auto;
    padding: 5px 10px;
}
.carousel-caption .layer-cover {
    background-color: black;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    opacity: 0.7;
    z-index: -1;
}