body {
  font-family: "ClanPro-NarrMedium";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: #212529;
  background-color: #fff;
  width: 100vw; }
  @media(hover: hover) and (pointer: fine) {
    body {
        width: 100%;
    }
}

html:lang(my) body {
  font-family:'Padauk-Bold',Arial,"Helvetica Neue",Helvetica,sans-serif;
}
#page-wrapper, #search-background, #search-output, #nav-background, #nav-menu, #lang-background {
  opacity: 0; }

header.slide-up {
  opacity: 1; }

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  z-index: 100;
  background: #F2F2F2;
  will-change: transform;
  transition: transform 0.18s cubic-bezier(0.3, 0.73, 0.3, 0.74); }

@media (min-width: 992px) {
  header {
    height: 120px; } }

#global-head {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  will-change: transform;
  border-bottom: 1px solid #E4E6E7;
  overflow: hidden;
  height: 50px; }

@media (min-width: 992px) {
  #global-head {
    height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07); } }

#global-head a {
  font-family: "ClanPro-NarrMedium";
  display: block;
  font-size: 18px;
  color: #474D50;
  text-transform: uppercase;
  padding: 16px 20px 11px 0; }
html:lang(my) #global-head a {
  font-family:'Padauk-Bold',Arial,"Helvetica Neue",Helvetica,sans-serif;
}
@media (min-width: 992px) {
  #global-head a {
    padding: 11px 20px 9px 0; } }

#global-head #desktop-sub-menu {
  display: none;
  list-style: none;
  height: 60px;
  float: right; }

#global-head #desktop-sub-menu div {
  height: 60px;
  display: inline-block;
  width: auto;
  padding: 22px 15px 17px;
  top: 0;
  vertical-align: top;
  right: 0;
  border: none; }

#global-head #desktop-sub-menu div a, #global-head #desktop-sub-menu div span {
  text-decoration: none;
  text-transform: uppercase;
  font-family: "ClanPro-NarrMedium";
  color: #788287;
  transform: none;
  transition: color .23s ease;
  font-size: 14px;
  letter-spacing: 0.08px;
  padding: 0;
  line-height: 22px; }
html:lang(my) #global-head #desktop-sub-menu div a, html:lang(my) #global-head #desktop-sub-menu div span {
  font-family:'Padauk-Bold',Arial,"Helvetica Neue",Helvetica,sans-serif;
}
#global-head #desktop-sub-menu div a:hover, #global-head #desktop-sub-menu div span:hover {
  color: #303436;
  text-decoration: none; }

#global-head #desktop-sub-menu div.trigger-search a:before {
  display: none; }

#global-head #desktop-sub-menu .language-switcher {
  padding-right: 0; }

@media (min-width: 992px) {
  #global-head #desktop-sub-menu {
    display: block; } }

#global-head .search-open {
  position: absolute;
  display: inline-block;
  height: inherit;
  width: 64px;
  background: #F2F2F2;
  top: 0;
  right: 64px;
  user-select: none;
  cursor: pointer;
  border-left: 1px solid #E4E6E7;
  z-index: 100; }

#global-head .search-open.open {
  opacity: 0; }

#global-head .search-open a {
  position: relative;
  display: block;
  text-align: center;
  width: 100%;
  padding: 18px 0 16px;
  pointer-events: none; }

#global-head .search-open a img {
  position: relative;
  display: block;
  margin: auto auto;
  width: 16px;
  height: 16px;
  opacity: 1; }

@media (min-width: 992px) {
  #global-head .search-open {
    display: none; }
  #global-head .search-open.desktop {
    display: block;
    position: relative;
    margin-top: 2px;
    width: 14px;
    height: 14px; }
  #global-head .search-open.desktop img {
    opacity: 0.52;
    transition: opacity .23s ease; }
  #global-head .search-open.desktop:hover img {
    opacity: 1; } }

#global-head .language-switcher {
  position: absolute;
  display: inline-block;
  height: inherit;
  width: 64px;
  background: #F2F2F2;
  top: 0;
  right: 0;
  user-select: none;
  cursor: pointer;
  border-left: 1px solid #E4E6E7;
  transition: background 0.23s ease; }

#global-head .language-switcher span {
  color: #303436;
  padding: 16px 22px 13px;
  font-size: 16px;
  letter-spacing: 0.09px;
  text-transform: uppercase;
  display: block;
  transition: color 0.25s ease, opacity 0.25s ease; }

@media (min-width: 992px) {
  #global-head .language-switcher {
    display: none; }
  #global-head .language-switcher.desktop {
    display: block;
    position: relative; } }

nav {
  position: absolute;
  z-index: 100;
  top: 50px;
  left: 0;
  width: 100%;
  height: 50px; }

@media (min-width: 992px) {
  nav {
    top: 60px;
    height: 60px; } }

nav #navbar {
  position: absolute;
  overflow: hidden;
  height: inherit;
  left: 0;
  top: 0;
  right: 0;
  z-index: 200;
  background: #F8F8F6;
  border-bottom: 1px solid #E4E6E7; }

nav #navbar.no-border {
  border-bottom: none; }

nav #navbar .container, nav #navbar .row, nav #navbar .col-12 {
  height: inherit; }

@media (min-width: 992px) {
  nav #navbar {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
  nav #navbar.box-shadow {
    border-bottom: 1px solid rgba(24, 26, 27, 0.07); } }

nav #desktop-menu {
  display: none;
  list-style: none;
  float: right;
  margin: 22px 0 17px; }

@media (min-width: 992px) {
  nav #desktop-menu {
    display: block; } }

nav #desktop-menu li {
  display: inline-block;
  padding-left: 30px; }

nav #desktop-menu li:first-child {
  padding-left: 0; }

nav #desktop-menu li a {
  color: #788287;
  opacity: 1;
  transform: none;
  transition: color .23s ease;
  font-family: "ClanPro-NarrMedium";
  font-size: 15px;
  line-height: 21px;
  letter-spacing: 0.08px;
  text-transform: uppercase; }
html:lang(my) nav #desktop-menu li a {
  font-family:'Padauk-Bold',Arial,"Helvetica Neue",Helvetica,sans-serif;
}

nav #desktop-menu li a:hover, nav #desktop-menu li a.open {
  color: #303436;
  text-decoration: none; }

nav #desktop-menu li[data-click="false"] a {
  cursor: default !important; }

nav .logo-wrapper {
  position: relative;
  display: inline-block;
  height: inherit; }

nav .logo-wrapper #logo-mobile a {
  font-family: "ClanPro-NarrMedium";
  position: relative;
  display: block;
  color: #474D50;
  font-size: 14px;
  line-height: 15px;
  padding: 11px 0 9px;
  user-select: none;
  text-transform: uppercase; }

@media (min-width: 576px) {
  nav .logo-wrapper #logo-mobile a {
    font-size: 20px;
    line-height: 28px;
    padding: 12px 0 9px; }
  nav .logo-wrapper #logo-mobile a br {
    display: none; } }

@media (min-width: 992px) {
  nav .logo-wrapper #logo-mobile a {
    padding: 12px 0 12px;
    font-size: 18px;
    line-height: 20px; } }

@media (min-width: 1200px) {
  nav .logo-wrapper #logo-mobile a {
    padding: 18px 0 14px;
    font-size: 20px;
    line-height: 28px; } }

nav .logo-wrapper #logo-mobile a:hover {
  text-decoration: none; }

nav .logo-wrapper span {
  text-transform: uppercase;
  color: #A0C814; }

nav #nav-background {
  display: none; }

nav .navicon-trigger {
  position: absolute;
  display: inline-block;
  height: inherit;
  width: 64px;
  background: #F8F8F6;
  top: 0;
  right: 0;
  cursor: pointer;
  user-select: none;
  border-left: 1px solid #E4E6E7; }

@media (min-width: 992px) {
  nav .navicon-trigger {
    display: none; } }

nav .navicon-trigger .navicon {
  position: relative;
  width: 25px;
  height: 2px;
  background: #303436;
  left: 50%;
  top: 50%;
  margin-top: -1px;
  margin-left: -12.5px; }

nav .navicon-trigger .navicon:after, nav .navicon-trigger .navicon:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: #303436; }

nav .navicon-trigger .navicon:before {
  top: -6px; }

nav .navicon-trigger .navicon:after {
  top: 6px; }

@media (max-width: 991.98px) {
  nav #nav-menu {
    position: fixed;
    display: block;
    background: #f9f9f9;
    top: 50px;
    right: 0;
    height: 100vh !important;
    width: 100%;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    padding: 0; } }

@media (max-width: 991.98px) and (min-width: 576px) {
  nav #nav-menu {
    max-width: 375px; } }

@media (max-width: 991.98px) {
  nav ul.wrapper {
    position: relative;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background: transparent;
    height: 100vh;
    overflow-y: scroll; } }

@media (max-width: 991.98px) and (min-width: 576px) {
  nav ul.wrapper {
    max-width: 375px; } }

@media (max-width: 991.98px) {
  nav ul.wrapper.height-fix {
    height: calc(100vh - 50px) !important; }
  nav ul.wrapper li {
    position: relative;
    display: block; }
  nav ul.wrapper li.image {
    display: none; }
  nav ul.wrapper li.pb {
    background: #f9f9f9 !important;
    border-top: none !important; }
  nav ul.wrapper li.pb:before, nav ul.wrapper li.pb:after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100vh;
    background: #f9f9f9;
    opacity: 1 !important; }
  nav ul.wrapper li.pb::before {
    left: -20px; }
  nav ul.wrapper li.pb::after {
    right: -20px; } }