/* h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, span, a {
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif !important;
} */
*:not(i) {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif !important;
}
.text-align-justify {
  text-align: justify;
}
* {
  letter-spacing: 0.5px;
}
/* global */
.overlay {
  position: absolute;
  z-index: 5;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0) 60%,
    #000,
    #000 100%
  );
  opacity: 0.4;
}
/* Navbar Setting */
.navigation {
  border-bottom: #ecf0f1 0.5px solid;
  padding: 0px 20px 5px 20px;
}
.navbar-brand img {
  margin-top: 5px;
}
.navbar-default .navbar-nav > li > a {
  font-weight: normal;
  text-transform: initial;
  font-size: 15px;
  padding-right: 0px;
  padding-left: 24px;
}
/* Banner */
.slick-main-wrapper {
  position: relative;
}
/* Place divider directly under the slider image, not below its margin */
.slick-main-wrapper > .slick-slider {
  margin-bottom: 0; /* override slick default 40px margin */
  border-bottom: 1px solid #ecf0f1; /* divider under photo */
}
.slick-left {
  cursor: pointer;
  position: absolute;
  height: 30px;
  z-index: 11;
  left: 30px;
  top: 50%;
  margin-top: -15px;
  width: auto;
}
.slick-right {
  cursor: pointer;
  position: absolute;
  height: 30px;
  z-index: 11;
  right: 30px;
  top: 50%;
  margin-top: -15px;
  width: auto;
}
.slick-wrapper {
  position: relative;
}
.slick-description {
  position: absolute;
  color: white;
  text-align: left;
  z-index: 10;
  bottom: 20px;
  left: 30px;
  max-width: calc(100% - 60px);
}
.slick-description .slick-title {
  font-size: 25px;
  font-weight: normal;
  letter-spacing: 1px;
}
.slick-description .slick-date {
  font-size: 15px;
  letter-spacing: 1px;
}
.slick-dotted.slick-slider {
  margin-bottom: 40px;
}
/* Profolio List */
.thumbnail_home {
  position: relative;
  cursor: pointer;
}
.content-description {
  position: absolute;
  width: 100%;
  text-align: center;
  color: white;
  bottom: 20px;
  z-index: 10;
}
@media (max-width: 768px) {
  .content-description {
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.content-description h5 {
  font-size: 15px;
  letter-spacing: 1px;
}
.content-description h4 {
  font-size: 25px;
}
/* footer */
#footer {
  padding: 90px 0 20px 0;
}
.footer-logo img {
  width: 110px;
}
.site-map {
  margin-top: 40px;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
}
.footer-details p {
  margin-top: 10px;
}
.footer-details-items p a {
  color: #6d6f71;
}
.footer-terms {
  margin-top: 50px;
}
.footer-extra {
  margin-left: 60px;
}
.footer-middle-stroke {
  margin: 0 20px;
}
@media all and (max-width: 768px) {
  .footer-extra {
    margin-left: 0px;
    display: block;
  }
}
/* back to top button */
#back-to-top {
  position: fixed;
  right: 0;
  bottom: 50px;
  background-color: #636466;
  padding: 18px 9px 23px 9px;
  cursor: pointer;
  display: none;
  z-index: 99999999999;
}
/* Projects */
#portfolio {
  position: relative;
  background: #fff;
}
h4.bold {
  margin: 5px auto;
}
.title-wrapper.people-title {
  padding-bottom: 15px;
  margin-bottom: 75px;
  border-bottom: #ecf0f1 0.5px solid;
}
.title-wrapper {
  margin-top: 10px;
  position: relative;
  padding: 10px 30px;
  font-size: 25px;
}
.profolio-function {
  padding: 15px 20px 28px 20px;
}
/* search */
.select-whole-box {
  display: inline-block;
  vertical-align: bottom;
  float: none;
  width: 23%;
  margin-right: 2%;
}
.feature-description {
  padding-top: 20px;
  padding-bottom: 36px;
}
@media all and (max-width: 992px) {
  .footer-details {
    text-align: left;
  }
}
@media all and (max-width: 768px) {
  .feature-description {
    padding: 20px 20px 36px 20px;
  }
  .fa-mobile-fix {
    font-size: 20px;
    color: #6d6f71;
  }
}
@media all and (max-width: 480px) {
  .feature-description {
    text-align: left;
    position: relative;
  }
  .profolio-function {
    padding: 15px 20px;
  }
}
.select-whole-box:last-child {
  margin-right: 0%;
}
.search-input {
  width: 100%;
  border-bottom: 1px solid #515253;
  padding-bottom: 15px;
  font-size: 20px;
}
.search-input .search-icon {
  width: 10%;
  display: inline-block;
  vertical-align: bottom;
}
.search-input img {
  cursor: pointer;
  width: 20px;
}
.search-input input {
  width: 80%;
  padding-left: 5%;
  margin-left: -5px;
  display: inline-block;
  vertical-align: bottom;
  border: none;
}
.search-input input:focus {
  outline: none;
}
/* dropdown select */
.select-box {
  border-bottom: 1px solid #515253;
  padding-bottom: 15px;
  cursor: pointer;
}
.select-wrapper {
  width: 95%;
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
}
.icon-wrapper {
  margin-left: -5px;
  width: 5%;
  display: inline-block;
  vertical-align: middle;
}
.icon-wrapper img {
  width: 15px;
}
.select-dropdown {
  position: absolute;
  background-color: white;
  width: 100%;
  top: 100%;
  margin-right: 30px;
  z-index: 100;
}
.select-dropdown ul {
  list-style-type: none;
  font-size: 15px;
  margin-bottom: 0px;
}
.select-dropdown li {
  padding: 12px 20px;
  cursor: pointer;
}
.select-dropdown li.active {
  background-color: rgba(81, 82, 83, 0.1);
}
.select-dropdown .dot {
  font-size: 24px;
}
/* expertise */
.expertise-section {
  margin-top: 20px;
}
.expertise-section .gutter {
  padding-bottom: 0;
}
.expertise-description {
  position: absolute;
  color: white;
  text-align: left;
  bottom: 20px;
  left: 30px;
  z-index: 10;
  right: unset;
}
@media (max-width: 768px) {
  .expertise-description {
    right: 30px;
    margin-left: -10px;
    margin-right: -10px;
  }
}
/* news */
#news .section-content {
  /* margin-top: 20px; */
}
#news .title-wrapper {
  position: relative;
}
#news .search-input {
  width: 20%;
  right: 2.5%;
  top: 5px;
  text-align: left;
  padding-bottom: 15px;
  margin-bottom: 18px;
}
@media (max-width: 768px) {
  #news .search-input {
    margin-bottom: 10px;
  }
}
#news .search-input .search-icon {
  width: 10%;
  display: inline-block;
  vertical-align: middle;
}
#news .search-input i {
  font-size: 20px;
  cursor: pointer;
}
#news .search-input input {
  width: 80%;
  padding-left: 5%;
  margin-left: -5px;
  display: inline-block;
  vertical-align: middle;
  border: none;
}
.news-feature h5,
.news-feature h4,
.news-feature p {
  line-height: 25px;
}
.readme {
  margin-top: 10px;
  font-size: 15px;
}
/* Project Detail */
h3.detail-title {
  margin-bottom: 5px;
}
.description-tag span {
  padding: 0px 10px 0px 0px;
  font-size: 15px;
}
.description-share {
  cursor: default;
  margin-top: 20px;
}
.description-main {
  margin-top: 20px;
}
.description-share span {
  margin: 0px 10px 0px 0px;
}
.description-wrapper {
  padding-left: 200px;
  padding-right: 200px;
  padding-bottom: 40px;
}
.detail-page-wrapper {
  /* padding-left: 210px;
  padding-right: 210px; */
}
.related-projects-wrapper {
  border-top: #ecf0f1 0.5px solid;
}
/* news detail */
.news-feature h5,
.news-feature h4,
.news-feature p {
  line-height: 25px;
}
.news-feature h5 {
  font-size: 14px;
}
.office-section {
  margin-top: 30px;
}
#awards-text {
  padding: 10px 20px 5px;
}
.awards-icon {
  /* margin-left: 0px;
  width: 24px; */
  font-size: 15px;
  border-radius: 25px;
  background: white;
  width: 190px;
  border: 0.5px solid #333;
  margin-top: 0.5em;
  display: block;
  margin-top: 0px;
}
@media (max-width: 768px) {
  .awards-icon {
    width: 100%;
    margin-left: 0px;
  }
}
.awards-icon:focus {
  outline: none;
}

.awards-icon:hover {
  filter: brightness(0.9);
}
.overlay-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 100;
}
.recruitment-email {
  padding: 10px 350px 10px 20px;
  border: 0.5px solid #333;
}

.work {
  overflow: hidden;
  background: white;
  /* border-top: 1px solid #FFF; */
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  /* border-right: 1px solid #FFF; */
  display: inline-block;
  vertical-align: top;
  height: auto;
}
#home .work:nth-child(3n + 2) {
}
.f-small {
  font-size: 15px;
}
p.f-small.text-align-left {
  margin-bottom: 0px;
}
.f-smaller {
  font-size: 15px;
}
.f-big-c {
  font-size: 25px;
}
h3 {
  font-size: 25px;
}
h4 {
  font-size: 16px;
  letter-spacing: 1px;
}
.feature-description > h5 {
  font-size: 15px;
}
.feature-tag {
  margin-top: 10px;
  cursor: pointer;
}
.feature-tag > span > span {
  padding: 3px 10px 2px 0px;
  font-size: 15px;
}
.project-description {
  text-align: justify;
  line-height: 20px;
  font-size: 15px;
}
.expertise-title {
  font-size: 25px;
}

.news-title {
  margin-top: 10px;
  margin-bottom: 10px;
}
.section-content {
  margin-left: -1px;
  margin-right: -4px;
}
.relative {
  position: relative;
}
.footer-social a,
.footer-details > p,
.footer-terms,
.footer-extra,
.footer-extra > a,
.footer-extra > span,
.footer-details > p > a {
  font-size: 15px;
  color: #6d6f71;
}
.footer-details > p:first-child > span,
.footer-social a:hover {
  color: #000;
}
.footer-details > p:first-child > span > span,
.footer-social a:hover {
}
#footer {
  background-color: #f1f1f2;
}
@media (max-width: 768px) {
  .recruitment-email {
    padding: 10px 20px 10px 20px;
    border: 0.5px solid #333;
  }
}
@media all and (max-width: 768px) {
  .title-wrapper {
    padding-left: 20px;
    padding-right: 20px;
  }
  .big-text h3 {
    margin-bottom: 10px;
  }
  .search-input,
  #news .search-input {
    width: 60%;
  }
  .project-description {
    margin-top: 10px;
  }
  .select-whole-box {
    display: block;
    width: 100%;
    margin-right: 0%;
    margin-bottom: 10px;
  }
  .navbar-brand {
    padding-left: 0px;
  }
  .slick-left {
    left: 20px;
  }
  .slick-right {
    right: 20px;
  }
}
.expertise-description h4 {
  font-size: 25px;
}
h4 {
  font-size: 25px;
}
.slick-slide .mobile {
  display: none;
}
.slick-slide .desktop {
  display: block;
}
.youtube-src {
  width: 100vw;
  height: 56.25vw; /* 16:9 on desktop */
}
@media all and (max-width: 600px) {
  .slick-slide .mobile {
    display: block;
  }
  .slick-slide .desktop {
    display: none;
  }
  .transparent-block {
    height: 56px;
  }
  .slick-description {
    bottom: 50px;
    margin-left: -11px;
  }
  .youtube-src {
    height: 75vw; /* 4:3 on mobile */
  }
  .profolio-function {
    padding-top: 0px;
    padding-bottom: 10px;
  }
}
.bg-img {
  background-position: center; /* center crop */
  background-size: auto 100%;  /* use full height, crop left/right when wider */
  position: relative;
  width: 100vw;
  height: 75vw; /* 4:3 on mobile */
}
#news-detail .bg-img,
#projects-detail .bg-img,
#studio .bg-img,
#publications-detail .bg-img {
  height: 75vw; /* 4:3 for mobile sections too */
}

/* Desktop image slides: enforce 4:3 and center-crop */
@media (min-width: 601px) {
  .slick-slide img.desktop {
    width: 100vw;
    min-height: 75vw; /* 4:3 - scale UP if image is smaller */
    height: auto;
    object-fit: cover;
    object-position: center;
  }
}

@media all and (max-width: 991px) {
  /* .detail-page-wrapper {
    padding-left: 30px;
    padding-right: 30px;
  } */
  .description-wrapper {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 30px;
    width: auto;
  }
  .recruitment-email {
    padding: 10px 20px 10px 20px;
    border: 0.5px solid #333;
  }
}
.tag-things {
  display: inline-block;
  margin-right: 15px;
  font-size: 15px;
  text-indent: -1em;
  padding-left: 1em;
}
.readmorebutton:hover {
  color: #6d6f71;
}
.readmorebutton {
  color: black;
  display: none;
  margin-top: 10px;
  font-size: 15px;
  text-decoration: underline;
}
.cus-grey {
  color: #6d6f71;
}
.black {
  color: black;
  text-align: left;
  font-size: 15px;
}
.navbar-default .navbar-nav > li > a {
  color: #6d6f71;
}
.navbar-default .navbar-nav > li > a > span {
  color: black;
}
@media all and (max-width: 768px) {
  .footer-container {
    margin: auto -5px;
  }
  .footer-details > p:first-child {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-top: 20px;
  }
  .footer-details > p:first-child > span > span,
  .footer-social a:hover {
    display: inline;
    position: sticky;
    left: 90%;
  }
  .footer-details-items {
    height: 0;
    overflow: hidden;
  }
}
.pre-para {
  letter-spacing: 0.5px;
  text-align: justify;
}
h5.pre-para {
  margin-top: 5px;
}
@media all and (max-width: 768px) {
  .pre-para {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .readmorebutton {
    display: block;
    text-align: left;
  }
}
.footer-icons-container {
  margin: 5px 0px;
}

.footer-icons {
  font-size: 1.5em;
}

.hover-scale-container {
  overflow: hidden;
  display: flex;
}
.item-category {
  cursor: pointer;
}
div.col-md-10.margin-bottom {
  padding-right: 20px;
}
@media (max-width: 768px) {
  div.col-md-9.margin-bottom,
  div.col-md-10.margin-bottom,
  div.col-md-3.margin-bottom {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.work-container {
  text-align: left;
}
.project-list-enter-active,
.project-list-leave-active,
.news-list-enter-active,
.news-list-leave-active {
  transition: all 1s;
}
.project-list-enter,
.project-list-leave-to,
.news-list-enter,
.news-list-leave-to {
  opacity: 0;
}
@media (min-width: 768px) {
  .footer-details-icon {
    display: none;
  }
}
@media (max-width: 768px) {
  .footer-list-item-1,
  .footer-list-item-2,
  .footer-list-item-3,
  .footer-list-item-4 {
    opacity: 0;
    transition: all 1.5s;
  }
  .footer-list-item-1.show-item,
  .footer-list-item-2.show-item,
  .footer-list-item-3.show-item,
  .footer-list-item-4.show-item {
    opacity: 1;
    transition: all 1.5s;
  }
}
.slick-right-div {
  height: calc(100% - 15px);
  width: 80px;
  top: 22px;
  right: 0px;
}
.slick-left-div {
  height: calc(100% - 15px);
  width: 80px;
  top: 22px;
  left: 0px;
}

.outer {
  display: inline-table;
}
.award-div img,
.expertise-div img {
  width: 9999px;
}
@media (max-width: 768px) {
  .work img {
    height: 70vw;
  }
  .work.gutter img {
    height: 70vw;
    object-fit: cover;
  }
  .award-div img,
  .expertise-div img {
    width: 112%;
  }
  .award-div .outer,
  .expertise-div .outer {
    display: flex;
  }
}

@media (max-width: 768px) {
  .studio-pre-para {
    margin-bottom: 30px;
  }
}

.people-image {
  aspect-ratio: 6 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 40%;
}

.title-text {
  margin-top: 60px;
  margin-bottom: 25px;
}

.border-tl {
  border-top-left-radius: 0%;
}

.border-tr {
  border-top-right-radius: 0%;
}

.border-bl {
  border-bottom-left-radius: 0%;
}

.border-br {
  border-bottom-right-radius: 0%;
}

.grid-system {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  display: grid;
}

@media (min-width: 992px) {
  .grid-system {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.people-detail {
  padding-bottom: 30px;
  border-bottom: #ecf0f1 0.5px solid;
  font-size: 13px;
}

.people-description {
  padding-top: 30px;
  text-align: left;
}