/******************************************************************************************
   + Focus style
*******************************************************************************************/
.btn:focus {
  outline: none;
  box-shadow: none;
}
.btn-yellow:focus {
  background-color: #0d2972;
}
header .btn-yellow:focus {
  background-color: #fff;
  color: #0d2972;
}
#side-nav #mainNav li a:focus {
  color: #ee7a10;
}
.btn-search:focus {
  color: #fff;
}

/******************************************************************************************
   + Mobile & Tablet
*******************************************************************************************/
@media (max-width: 1024px) {
  .index-hero {padding-top: 6.3em;}
  .drawer-hamburger {display: block;}
}

/******************************************************************************************
   + Mobile & Tablet Portrait
*******************************************************************************************/
@media (max-width: 991px) {
  .index-hero h1 {font-size: 2.8em; line-height: 1.2em;}
  footer .footer-body>.d-flex {flex-wrap: wrap; justify-content: flex-start;}
  footer .footer-body>.d-flex>.flex-item {margin:1em 0; padding-right: 3.5em}
  .has-sidebar .sidebar {display: none}
  .inner-box-padding, #indexIntro .inner-box, #indexNews .inner-box {padding:2em 15px;}
  #indexIntro .row:first-child {min-height: 450px;}
  #indexIntro .has-bg, #indexNews .has-bg, .subsec-who-we-are .has-bg, .subsec-careers .has-bg {min-height: 280px;}
  .column-four {flex-wrap: wrap;}
  .column-four .item {flex-basis: 50%;}
  footer .sitemap li:not(:first-child) {margin-left: 0.6em}
  .footer-foot>.d-flex {flex-direction: column;}
  .footer-foot .copyright {margin-bottom: 0 !important;}
  footer .footer-foot .sitemap {margin-top: 0 !important}
  #indexNews .list-index-news h3 {font-size: 1.2em}
  .subsec-who-we-are {min-height: 400px;}
  .list-team-members .item {flex-basis: 50%;}
  .swiper-container .caption, .main-hero .caption {text-align: center;}
  .swiper .caption, .main-hero .caption {text-align: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

/******************************************************************************************
   + Mobile Only
*******************************************************************************************/
@media only screen and (max-width: 767px) {
  .hidden-xs {display: none;}
  .visible-xs {display: block;}
  .index-hero .inner-wrapper {height: 120px;}
  .index-hero .caption-holder {top: 20%}
  .index-hero .caption-holder h1, .index-hero .caption-holder .inner>p {font-size: 1.8em}
  .index-hero .caption-holder p {font-size: 1em}
  .index-hero .caption-holder p.author {font-size: 1.15em}
  section .sub-section:first-child {padding-top: 3em}
  .navbar-brand img {max-width: 80px;}
  header.shrink .navbar-brand img {max-width: 60px;}
  footer {padding-bottom: 1em;}
  footer .footer-body>.d-flex {flex-direction: column; }
  footer .footer-body>.d-flex>.flex-item {padding-right: 0}
  .column-four {flex-direction: column;}
  section h2, .modal h2 {font-size: 2.4em;}
  section h2.has-shadow:after {height: 10px;}
  footer .footer-foot {margin-top: 0}
  footer .footer-body .sitemap {flex-wrap: wrap; flex-direction: column;}
  footer .sitemap li:not(:first-child) {margin-left: 0}
  .subsec-investment-themes, .subsec-esg-focus, .subsec-contact-us {background-position: bottom center !important; background-size: 100% 270px !important; padding-bottom: 270px !important;}
  section h2.has-shadow:after {width: 97%; left: -3%}
  .footer-foot .copyright {font-size: 0.85em;}
  footer .footer-foot .sitemap {font-size: 0.85em;}
  footer .footer-foot {padding-top: 1em;}
  .main-hero .bg {background-position: center right 15%;}
  .main-hero .caption {max-width: 85%;margin:auto; transform: none;}
  .main-hero .caption p {text-align: center;}
}

/******************************************************************************************
   + Tablet Portrait above
*******************************************************************************************/
@media only screen and (min-width: 768px) {
}

/******************************************************************************************
   + Tablet only
*******************************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
}

/******************************************************************************************
   + Tablet Portrait only
*******************************************************************************************/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
}

/******************************************************************************************
   + Tablet Landscape only
*******************************************************************************************/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}

/******************************************************************************************
   + Tablet Landscape above
*******************************************************************************************/
@media screen and (min-width: 992px) {
  header.navbar {background-color: transparent; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,0) 3%, rgba(255,255,255,0.8576024159663865) 100%);}
  header.shrink {background-color: #fff;}
  .index-hero .container-fluid {padding-top: 16em; padding-bottom: 16em;}
  .index-hero .img-holder {position: absolute; bottom: -8em; right: 0; z-index: 0}
  .index-hero .img-holder img {max-width: 770px;}
  .list-counter {justify-content: space-between;}
  .list-counter .counter-item {border-left:3px solid var(--main-color); padding:0 15px 0 30px; margin-top: 80px;}
  .list-counter {display: flex; flex-wrap: wrap;}
  .list-counter .counter-item {min-width: 250px; text-align: left;}
  .swiper-container .swiper-slide {align-items: center;}
  .swiper-container .caption, .main-hero .caption {margin-bottom: 0; margin:0 0 0 5%;}
  .swiper-container .bg:before, .main-hero .bg:before {width: 90%; background: rgb(255,255,255); background: linear-gradient(-90deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.8463979341736695) 100%);}
  .swiper-container .caption h2, .main-hero .caption h2 {font-size: 6em;}
  .swiper .swiper-slide {align-items: center;}
  .swiper .caption, .main-hero .caption {margin-bottom: 0; margin:0 0 0 5%;}
  .swiper .bg:before, .main-hero .bg:before {width: 90%; background: rgb(255,255,255); background: linear-gradient(-90deg, rgba(255,255,255,0) 15%, rgba(255,255,255,0.8463979341736695) 100%);}
  .swiper .caption h2, .main-hero .caption h2 {font-size: 6em;}
  .subsec-esg-focus .row:first-child {min-height: 400px;}
}

/******************************************************************************************
   + Desktop
*******************************************************************************************/
@media screen and (min-width: 1024px) {
.is-parallax {background-attachment: fixed;}
footer .footer-body  .sitemap-wrapper {justify-content: center}
#sidemenu.affix { position: fixed; top: 90px; }
}

/******************************************************************************************
   + Desktop (to exclude ipad landscape)
*******************************************************************************************/
@media screen and (min-width: 1025px) {
  .inner-gap {padding-left: 5%; padding-right: 5%}
  .inner-gap .inner-gap {padding: 3% 5%}
}

/******************************************************************************************
   + Hover style
*******************************************************************************************/
@media (min-width: 1025px) {
.btn-site.secondary:hover, .list-index-posts .post-footer-holder .btn:hover, .btn.grey:hover {background-color: var(--main-color)}
.btn-site.main:hover {background-color: var(--vibrant-color)}
.index-list-ip-expertise .item:hover .item-wrapper {background-color: rgba(255,255,255,1)}
.footer-foot .social-links li a:hover {background-color: var(--sec-color)}
footer a:hover, footer .title a:hover {color: var(--main-color)}
section {padding-top: 6em; padding-bottom: 6em;}
section.subpage figure {padding-top: 3em; padding-bottom: 3em}
section.subpage figure:first-child {padding-top: 5em;}
section.subpage figure:last-child {padding-bottom: 4em;}
}

/******************************************************************************************
   + Most Common use desktop
/*******************************************************************************************/
@media screen and (min-width: 1366px) {
  .container {max-width: 1280px;}
  #main-menu>li+li>a {margin-left: 2.4em;}
  .index-hero {padding-top: 3.5em;}
  footer .footer-body .col-md-6:last-child:before { content: ''; width: 1px; height: 96px; background-color: #5e656e; display: block; position: absolute; top: 0; left: 0}

}

/******************************************************************************************
   + large Screen
*******************************************************************************************/
@media screen and (min-width: 1600px) {
}

/******************************************************************************************
   + IE Fixed
*******************************************************************************************/

@media screen\0 {
}

/* Firefox Fixed */
@-moz-document url-prefix() {
}