﻿.mid .banner .banner-wrapper {
    background-repeat: no-repeat;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
}
.mid .banner .banner-image{background-image: url("../image/Keppel_DC_ServerRacks_038.jpg");}
.mid .banner .banner-imagePF{background-image: url("../image/portfolio.jpg");}
.mid .banner .banner-imageCU{background-image: url("../image/contact-us.jpg");}

.mid section .banner-wrapper .banner-text {
text-align: right;
padding: 150px 80px 0 0;
}

.mid section .banner-wrapper .banner-text h1 {
color: #ffffff;
line-height: 0;
font-size: 55px;
text-shadow: 1px 0 10px #000000;
margin-top: 25px;
}

.mid section .banner-wrapper .banner-text h3 {
color: #ffffff;
line-height: 120%;
font-size: 45px;
text-shadow: 1px 0 10px #000000;
}

.mid section .banner-wrapper .banner-text h4 {
color: #ffffff;
line-height: 100%;
font-size: 40px;
text-shadow: 1px 0 10px #000000;
}
.mid section .banner-wrapper .banner-text h5 {
color: #ffffff;
line-height: 120%;
font-size: 34px;
text-shadow: 1px 0 10px #000000;
}

.content-layout  .navB1 {
list-style: none;
position: relative;
margin: 40px 0;
text-align: center;   
}

.content-layout .navB1 li {
display: inline-block;
margin-right: 6px;
font-size: 14px;
}

.content-layout .navB1 .bold {
font-weight: 700;
}


.content-layout .navB1 li a {
color: #575756;
font-weight: 400;
}

.content-layout .navB1 li a:hover {
color:#da2128;
text-decoration: none;
}

.content-layout .navB1 .with-line::before {
content: ">";
display: inline-block;
font-size: 14px;
font-weight: 400;
color: #575756;
margin-right: 10px;
}


.content-layout .flexbox-layout {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 0 40px 100px 40px;
max-width: 1400px;
margin: 0 auto;
}

/* sticky section menu  */
.content-layout .flexbox-layout .flexbox-item-1 {
background: #ededed;
position: sticky; top: 90px; max-height: 100%;
padding: 20px 20px;
width: 31%;
}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu {
position: relative;
padding: 0 5px;
width: 95%;
}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul {
list-style: none;
position: relative;
padding-left: 15px;
}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul li {
margin: 10px 0;
vertical-align: bottom;
line-height: 144%;
border-bottom: 1px solid #575756;
}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul li:last-child {border-bottom: none !important;}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul li a {
color: #575756;
vertical-align: text-top;
}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul li a:hover {
color: #da2128;
text-decoration: none;
}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul .on-text {
color: #da2128;
}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul .on-text:hover {
color: #575756;
}
.content-layout .flexbox-layout .flexbox-item-1 .select-container,
.content-layout .flexbox-layout .flexbox-item-1 .select-box {display: none;}

.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul li img {
margin-right: 5px;
/* jk: work on list item image */
}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul ul {
list-style: none;
margin: 0 0 0 15px; padding: 0;

}

.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul ul li:nth-child(1) {
/*border-top: 1px solid #575756;
border-bottom: 1px solid #575756;*/
border-bottom: 0px solid #ededed;
}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul ul li:nth-child(2) {border-bottom: 0px solid #ededed;}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul ul li:nth-child(3) {border-bottom: 0px solid #ededed;}

.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul ul ul li:nth-child(1) {
border-top: none;
border-bottom: none;
}

.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul ul ul {
list-style: none;
margin-left: 0;
padding-left: 15px;
}
.content-layout .flexbox-layout .flexbox-item-2 {
padding: 0;
width: 65%;
}

.content-layout .flexbox-layout .flexbox-item-2 h1 {
color: #da2128;
font-size: 25px;
font-weight: 700;
border-bottom:3px solid #da2128;
padding-bottom: 5px;
margin-bottom: 2rem;
max-width: 500px;
}
.content-layout .flexbox-layout .flexbox-item-2 .contact-list img {max-width: 100%;}
.content-layout .flexbox-layout .flexbox-item-2 .contact-list .title {color:#da2128; font-weight:700;}
.content-layout .flexbox-layout .flexbox-item-2 .contact-list td {width:150px; height:30px; white-space:nowrap;}
.content-layout .flexbox-layout .flexbox-item-2 .about-text p {line-height: 150%; text-align:justify; margin-bottom:25px;}
.content-layout .flexbox-layout .flexbox-item-2 .about-text .bold {font-weight: 700;}
.content-layout .flexbox-layout .flexbox-item-2 .about-text .title{font-weight: 700; margin-bottom:1px;}
.content-layout .flexbox-layout .flexbox-item-2 .about-text .red {color:#da2128;}
.btm {border-top: 2px solid #da2128;}

/* INVESTMENT APPROACH */
.gap100 { padding: 0 0 20px 0;}

.flexbox-layout  .flexbox-item-2 .container .row .col-md-6 h1 {
color: #da2128;
font-size: 25px;
font-weight: 700;
font-family: 'Roboto';
padding-bottom: 3px;
}

.flexbox-layout  .flexbox-item-2 .container .row .col-md-6 p {
line-height: 150%;
display: inline-block;
}
/* END OF INVESMENT APPROACH */

/* CASE STUDIES */
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3 .plus {
background-image: url(../image/case-studies/icon-open.png);
background-repeat: no-repeat;
background-size: 30px;
height: 40px;
cursor: pointer;
transition: transform 0.2s ease-in-out;
}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3 .plus:hover {
background-image: url(../image/case-studies/icon-open-red.png);
}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3.active .plus {
background-image: url(../image/case-studies/icon-close.png);
height: 40px;
}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3.active .plus:hover {
background-image: url(../image/case-studies/icon-close-red.png);
height: 40px;
}

.content-layout .flexbox-layout .flexbox-item-2 .accordion_main {    
margin: 0;
padding: 0 0 20px 0;
position: relative;
}

.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .grid-container {
display: grid;
grid-template-columns: 200px auto;
grid-auto-rows: auto;
box-sizing: border-box;
}

.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .grid-container .item-1 {grid-row: span 2;}

.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-1 img {
display: block;
margin: 15px auto;
height: auto;
max-width: 100%;
}

.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-1 img[title="icon"] {
    display: block;
    margin: 15px auto;
    height: auto;
    max-width: 50%;
}


.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-2 h3 {
margin-top: 0px;
padding: 10px 0 10px 10px;
font-weight: 700;
font-size: 23px;
color: #da2128;
}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-2 .subtitle {
color: #575756;
padding-left: 10px;
font-style: italic;
font-weight: 400;
}

.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3{border-bottom: solid 2px #575657;padding-left: 10px;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3 .sub-points {display: none;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3 .sub-points h3 { font-size: 16px; color: #575756; margin: 0 0 15px 0;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3 .diff-text {
margin-top: 0px;
padding: 30px 0px 10px 0;
font-weight: 700;
font-size: 16px;
color: #575757;
}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3 ul {padding-left: 26px; margin-bottom: 1rem;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3 ul .dropdown-text {display: none;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3.active ul .dropdown-text {display: list-item;}

/* OUR OFFICES */
.content-layout .flexbox-layout .flexbox-item-2  .row .contact-list p {display: block; line-height: 160%; text-align:justify; margin-bottom:20px; /*margin: 0 15px;*/}
.content-layout .flexbox-layout .flexbox-item-2  .row .contact-list table {width:100%; margin-bottom:20px;}
.content-layout .flexbox-layout .flexbox-item-2  .row .contact-list .em {font-style: italic;line-height: 80%;}
.content-layout .flexbox-layout .flexbox-item-2  .row .contact-list .social {display: inline-block;}
.content-layout .flexbox-layout .flexbox-item-2  .row .contact-list .social img { border: 0; width: 100px; max-height: 50px;}
.content-layout .flexbox-layout .flexbox-item-2  .row .contact-list .social img:hover {opacity: 0.5;}

.content-layout .flexbox-layout .flexbox-item-1.office-tab{padding: 90px 20px;}

.content-layout .flexbox-layout .flexbox-item-1 .nav-menu .office-menu {
list-style: none;
position: relative;
padding-left: 15px;
bottom: 75px;
left: 0;
}

/* jk: Start of mobile queries */
@media screen and (max-width: 1199px) {
.mid section .banner-wrapper .banner-text {padding: 155px 30px 0 0; }
.mid section .banner-wrapper .banner-text h1 { font-size: 36px; }
.mid section .banner-wrapper .banner-text h3 { font-size: 18px;}
.division-name h4 {font-size: 15px !important;}
.add-margin-btm-25 {margin-bottom: 0;}
.mid .banner .banner-wrapper {height: 400px;}
.content-layout .flexbox-layout .flexbox-item-1 .nav-menu ul li a { font-size: 15px; }
.content-layout .flexbox-layout .flexbox-item-2 .contact-list td {width:150px; white-space:initial;}
}

@media screen and (max-width: 769px) {
.mid section .banner-wrapper .banner-text {padding: 155px 30px 0 0; }
.mid section .banner-wrapper .banner-text h1 { font-size: 36px; }
.mid section .banner-wrapper .banner-text h3 { font-size: 30px;}
.division-name h4 {font-size: 18px !important;}
.add-margin-btm-25 {margin-bottom: 0;}
.content-layout  .navB1 {text-align: left;}
.content-layout .flexbox-layout .flexbox-item {margin: 0;}
.content-layout .flexbox-layout .flexbox-item-2 .contact-list td {width:150px; white-space:initial;}
.content-layout .flexbox-layout .flexbox-item-1 { 
    top: 0; 
    position: unset;  
    min-width: unset;
    min-height: unset;
    background: unset;
    width: 100%;
    padding: 0 40px !important;
    box-sizing: border-box;
}

.content-layout .flexbox-layout .flexbox-item-1 .nav-menu {width: unset; padding: 0;}

.content-layout .flexbox-layout .flexbox-item-1 ul { display: none;}


.content-layout .flexbox-layout .flexbox-item-1 .select-container {
    display: unset !important;
    padding: 0 40px;
}

.content-layout .flexbox-layout .flexbox-item-1 .select-box {
    display: flex !important;
    width: 100%;
    flex-direction: column;
}

.content-layout .flexbox-layout .flexbox-item-1 .select-box .options-container {
    background: #ededed;
    color: #575757;
    max-height: 0;
    width: 100%;
    opacity: 0;
    transition: all 0.4s;
    border-radius: none;
    overflow: hidden;
    order: 1;
}

.content-layout .flexbox-layout .flexbox-item-1 .selected-opt {
    display: unset;
    background: #ededed;
    border-radius: none;
    color: #575757;
    position: relative;
    border-bottom: solid 2px #da2128;
    order: 0;
}

.content-layout .flexbox-layout .flexbox-item-1 .selected-opt::after {
    content: "";
    background: url("../image/aip-about-us/icon-arrow-2.png");
    background-size: contain;
    background-repeat: no-repeat;

    position: absolute;
    height: 100px;
    width: 20px;
    right: 20px;
    top: 17px;

    transition: all 0.4s;
}

.content-layout .flexbox-layout .flexbox-item-1 .select-box .options-container.active {
    max-height: 240px;
    opacity: 1;
    overflow-y: scroll;
}

.content-layout .flexbox-layout .flexbox-item-1 .select-box .options-container.active + .selected-opt::after {
    transform: rotateX(180deg);
    top: -70px;
}

.content-layout .flexbox-layout .flexbox-item-1 .select-box .options-container::-webkit-scrollbar {
    width: 8px;
    background: #ededed;
    border-radius: none;
}

.content-layout .flexbox-layout .flexbox-item-1  .select-box .options-container::-webkit-scrollbar-thumb {
    background: #da2128;
    border-radius: none;
}

.content-layout .flexbox-layout .flexbox-item-1 .select-box .option, .selected-opt {
    padding: 12px 24px;
    cursor: pointer;
}

.content-layout .flexbox-layout .flexbox-item-1 .select-box .option:hover {background: #da2128;}

.content-layout .flexbox-layout .flexbox-item-1 .select-box .option label { margin: 0; }

.content-layout .flexbox-layout .flexbox-item-1 .select-box .option:hover label a {color: #ffffff;}


.content-layout .flexbox-layout .flexbox-item-1 .select-box label a {
    cursor: pointer;
    color: #575757;
    text-decoration: none;
}

.content-layout .flexbox-layout .flexbox-item-1 .select-box .option .radio {display: none;}

.content-layout .flexbox-layout { display: block; padding: 0; }

.content-layout .flexbox-layout .flexbox-item-2 { width: 100%; padding: 0 40px 40px 40px; margin: 0 auto;}

.content-layout .flexbox-layout .flexbox-item-2 h1 {font-size:20px; padding-bottom: 15px;}

.content-layout .flexbox-layout .flexbox-item-2 p {line-height: 140%;}

/* CASE STUDIES */
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main {padding: 0 0 40px 0;} 
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main .row .colleft img {height: auto; }
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main .header h3 {font-size: 20px;}


.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main.active .header .subtitle {display: block;}
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main.active .cnt { border-bottom: solid 2px #575756; padding: 0 0 40px 0;}
.content-layout .flexbox-layout .flexbox-item-2 .contact-list td {width:150px; white-space:nowrap;}

.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main.active .row .colright {border-bottom: unset;} 
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main .plus { left: 130px;}
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main .plus:hover { left: 130px;}
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main.active .plus { top: -80px; left: 0px; border-bottom: solid 2px #575756;width: 100%;}
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main.active .plus:hover { top: -80px; left: 0px; border-bottom: solid 2px #575756;width: 100%;}
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main .header .diff-text {padding: 20px 0px 10px 10px;}
.content-layout .flexbox-layout .flexbox-item-2 .container .accordion_main .cnt {margin-bottom: 10%;}

/* OUR OFFICES */
.container.office {
width: 100%;
padding-right: 0;
padding-left: 0;
margin-right: 0;
margin-left: 0;
}
/*END OF OUR OFFICES*/
}

@media only screen and (max-width: 600px) {
.mid section .banner-wrapper .banner-text {padding: 140px 30px 0 0; }
.mid section .banner-wrapper .banner-text h1 { font-size: 30px; }
.division-name h4 {font-size: 15px !important;}
.add-margin-btm-25 {margin-bottom: 0;}
.mid section .banner-wrapper .banner-text h3 { font-size: 25px;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .grid-container { grid-template-columns: 120px auto; }
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-1 img {margin: unset;max-width: unset;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-2 {grid-column: span 2; padding-left: 0;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-2 h3,     .content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-2 .subtitle {padding-left: 0;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3 {grid-column: span 2; padding-left: 0;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .item-3 .diff-text { padding-left: 0;}
.content-layout .flexbox-layout .flexbox-item-2 .contact-list td {width:150px; white-space:nowrap;}
}

@media screen and (max-width: 540px) {
.mid section .banner-wrapper .banner-text {padding: 140px 30px 0 0; }
.mid section .banner-wrapper .banner-text h1 { font-size: 30px; }
.division-name h4 {font-size: 15px !important;}
.add-margin-btm-25 {margin-bottom: 0;}
.mid section .banner-wrapper .banner-text h3 { font-size: 25px;}

/* CASE STUDIES */
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .row .colleft {width: 100%;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .row .colleft img {width: 100%;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .row .colright {width: 100%;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .row .colright .diff-text {display: none;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .row .colright ul {display: none;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .row .colright.active .diff-text,.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .row .colright.active ul {display: block;}
.content-layout .flexbox-layout .flexbox-item-2 .contact-list td {width:150px; white-space:nowrap;}
}

@media screen and (max-width: 480px) {
.mid section .banner-wrapper .banner-text {padding: 100px 30px 0 0;}

.mid section .banner-wrapper .banner-text h1 { font-size: 30px; }
.division-name h4 {font-size: 15px !important;}
.add-margin-btm-25 {margin-bottom: 0;}
.mid section .banner-wrapper .banner-text h3 { font-size: 25px;}

.content-layout .flexbox-layout .flexbox-item-2 {padding: 0 40px 40px 40px;}
.content-layout .flexbox-layout .flexbox-item-2 .contact-list td {width:150px; white-space:nowrap;}
}

@media screen and (max-width: 430px) {
.content-layout .flexbox-layout .flexbox-item-1 {padding: 0 2.5rem !important;}
.mid section .banner-wrapper .banner-text h1 { font-size: 30px; }
.division-name h4 {font-size: 15px !important;}
.add-margin-btm-25 {margin-bottom: 0;}
.mid section .banner-wrapper .banner-text h3 { font-size: 25px;}
.content-layout .flexbox-layout .flexbox-item-2 {padding: 0 2rem 2.5rem 2.5rem;}
.content-layout .flexbox-layout .flexbox-item-2 .contact-list td {width:150px; white-space:initial;}
.btm .navF1 ul li a { font-size: 12px;}

.btm .copyright { font-size: 12px;}

.btm .connect { font-size: 12px; }
}

@media screen and (max-width: 400px) {
section .banner-wrapper .banner-text {padding: 100px 50px 0 0;}

.mid section .banner-wrapper .banner-text h1 { font-size: 30px; }
.division-name h4 {font-size: 15px !important;}
.add-margin-btm-25 {margin-bottom: 0;}
.mid section .banner-wrapper .banner-text h3 { font-size: 25px;}

.content-layout .flexbox-layout .flexbox-item-1 .select-box {font-size: 14px;}

.content-layout .flexbox-layout .flexbox-item-2 h1 {font-size: 18px;}

.flexbox-layout .flexbox-item-2 .container .row .col-md-6 p { font-size: 14px; }

.content-layout .flexbox-layout .flexbox-item-2 .about-text {font-size: 14px;}

.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .header .subtitle {font-size: 14px;}
.content-layout .flexbox-layout .flexbox-item-2 .accordion_main .header .colright ul {font-size: 14px;}

.content-layout .flexbox-layout .flexbox-item-1 {padding: 0 2rem !important;}

.content-layout .flexbox-layout .flexbox-item-2 {padding: 0 2rem 2rem 2rem;}

.content-layout .flexbox-layout .flexbox-item-2 .contact-list td {width:150px; white-space:initial;}
}

@media screen and (min-width: 1021px) and (max-width: 1280px){
    .top .main-nav .wpMenuM1 .menu ul li .ignore-click {pointer-events: none}
}