@charset "utf-8";
/* CSS Document */
body{font-family: 'Raleway', sans-serif; color: #222; font-size: 1.2rem; background-color: #fefefe}
p{ line-height: 2rem;}
h1{font-family: 'Playfair Display', serif; font-weight: 700; font-size:4rem; letter-spacing: 3px; }
h2{font-family: 'Playfair Display', serif; font-weight: 700; font-size:2.5rem; line-height: 4rem }
h3{font-family: 'Playfair Display', serif; font-weight: 700; font-size:2rem; line-height: 5rem;}
h4{font-family: 'Playfair Display', serif; font-weight: 700; font-size:1.3rem; line-height: 2rem;}
ul{ margin-bottom: 1rem;}
p{ margin-bottom: 0;}
a{}
a:hover{ }
blockquote{ margin-bottom: 3rem}
figure{ margin-bottom: 2.5rem;}
.container{ margin: 4.5rem auto}
.boxShadow{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);}

.navbar{background-color: #FFFFFF; opacity: 0.9;}
.navbar-nav li{ padding: 0 0.8rem;}
.navbar-light .navbar-nav li.active a{color: #0d6efd }
.intro{ padding: 2rem 0}
.error404{ padding: 4rem 0}
.caseStudy{ background-color: #fff;}
.caseStudy .caseIntro{ /*padding: 10rem 0;*/}


footer{ font-size: 1rem; background-color:#ffffff;}
#homepage footer{ background: none;}

#homepage h4{display: inline-block; padding-bottom: 5px;}
#homepage .mazen h4{background: linear-gradient(to left, #FEFEFE 0%, #4917A3 100%) left bottom no-repeat;
    background-size: 100% 4px; 
  }
#homepage .bridgeai h4{
  background: linear-gradient(to left, #FEFEFE 0%, #2eb4e4 100%) left bottom no-repeat;
    background-size: 100% 4px; 
  }
#homepage .imguide h4{
  background: linear-gradient(to left, #FEFEFE 0%, #d3410e 100%) left bottom no-repeat;
    background-size: 100% 4px; 
  }
#homepage .jobsdb h4{background: linear-gradient(to left, #FEFEFE 0%, #0d3880 100%) left bottom no-repeat;
    background-size: 100% 4px;}
#homepage .yusic h4{background: linear-gradient(to left, #FEFEFE 0%, #6ff20d 100%) left bottom no-repeat;
  background-size: 100% 4px; }
#homepage .xlive h4 {
  background: linear-gradient(to left, #FEFEFE 0%, #4451FF 100%) left bottom no-repeat;
  background-size: 100% 4px; }
#homepage .kpmgglobal h4 {
  background: linear-gradient(to left, #FEFEFE 0%, #00338D 100%) left bottom no-repeat;
  background-size: 100% 4px; }

#mazen h3{color: #4917A3}
#mazen .sectionHeader{background: #7637E7;}
#bridgeai h3{ color: #2eb4e4;}
#bridgeai .sectionHeader{background: #2eb4e4;}
#imguide h3{ color: #d3410e;}
#imguide .sectionHeader{background: #d3410e;}
#jobsdb h3{ color: #0d3880;}
#jobsdb .sectionHeader{background: #0d3880;}
#yusic h3{ color: #051E35;}
#yusic .sectionHeader{background: #051E35;}
#xlive h3{ color: #4451FF;}
#xlive .sectionHeader{background: #4451FF;}
#xccDesignSystem h3{color:#6E44FF}
#xccDesignSystem .sectionHeader{ background: #6E44FF;}
#kpmgglobal h3{ color: #00338D;}
#kpmgglobal .sectionHeader{background: #00338D;}

.whiteFont{ color: #ffffff;}
.stat{ font-size: 1.4rem; font-weight: 700;}
.ownerInfo .ownerName{ font-size: 1rem; font-weight: bold;}
.ownerInfo .ownerTitle{ font-size: 0.75rem;}
.projectHero, .projectHeroSmall{ background: #eee; }
.projectHero h1, .projectHeroSmall h1{align-self:center;}
.projectHero .projectTitle, .projectHeroSmall .projectTitle{ align-self: center;} .projectHeroSmall

.projectContent{ margin-top: 5rem; margin-bottom: 5rem; }


.projectContent .responsibilities li{float: left; padding-right:1.8rem}
.projectContent .results li, .projectContent .findings li, .projectContent .solutions li{padding-right:1.8rem; line-height: 2rem; padding-bottom: 1.5rem; padding: 0.8rem 0}
.projectContent .results li li{padding: 0;}
.sectionHeader{ color: #fff; padding: 5rem 0;}
.process img{ width: 50px; padding-bottom: 10px;}
.problemStatement{ padding: 100px 0;}

.projectContent .statBlock span{ display: block}
.projectContent .statBlock .Count{ font-size: 3rem;}


.ideate img{ width: 50px; padding-bottom: 10px;}
.ideate ul{ list-style: none; padding: 0;}

#mazen .projectHero{background: url("../img/mazen/mazenBanner01.jpg") no-repeat top center; background-size: cover}
#bridgeai .projectHero{background: url("../img/bridgeai/bridgeAIBanner01.jpg") no-repeat top center; background-size: cover}
#imguide .projectHero{background: url("../img/bridgeai/bridgeAIBanner01.jpg") no-repeat top center; background-size: cover}
#jobsdb .projectHero{background: url("../img/jobsdb/jobsdbBanner01.jpg") no-repeat top center; background-size: cover}
#yusic .projectHero{background: url("../img/yusic/yusicBanner01.jpg") no-repeat top center; background-size: cover}
#xlive .projectHero{background: url("../img/xcclive/xccLiveBanner01.jpg") no-repeat top center; background-size: cover}
#xccDesignSystem .projectHeroSmall{ background-image: linear-gradient(to right bottom, #4451ff, #6f56ff, #8e5bff, #a762ff, #bd69ff);}
#kpmgglobal .projectHero{background: url("../img/kpmgglobal/kpmgGlobalBanner01.jpg") no-repeat top center; background-size: cover}



/* Small only */
@media screen and (max-width: 39.9375em) {

h1{font-size:3rem; letter-spacing: 2.5px; }
h2{font-size:2rem; line-height: 3.5rem }
h3{font-size:1.8rem; line-height: 2.8rem;}
h4{font-size:1.2rem; line-height: 1.8rem;}
.h2{ font-weight: 700}
.h3{ font-size: 1.6rem; line-height: 2.2rem;}
.projectHero{ height: 35vh}
.projectHeroSmall{ height: 25vh}
.projectContent{ margin-top:2rem; margin-bottom: 3rem;}
.projectContent .responsibilities li{width:50%;}
.projectContent .results li{width:100%;}
.appMockup p.h2{ padding: 50px 0; font-weight: 700}
.caseStudy{background: none; row-gap:1rem;}
#yusic .appMockup p{ padding: 0 1rem 2rem;}
#yusic .projectContentNoSpace{ margin-top:2rem; margin-bottom: 3rem;}
.navbar-nav{background: #fff; opacity: .9}
}
/* Medium and up */
@media screen and (min-width: 40em) {
h1{font-size:3rem; letter-spacing: 2.5px; }
h2{font-size:2rem; line-height: 3.5rem }
h3{font-size:1.8rem; line-height: 2.8rem;}
h4{font-size:1.2rem; line-height: 1.8rem;}
    
.h2{ font-weight: 700}
.h3{ font-size: 1.6rem; line-height: 2.2rem;}
.projectHero{ height: 70vh}
.projectHeroSmall{ height: 25vh}
    .projectContent .responsibilities li{width:100%;}
    
    #yusic .appMockup p{ padding: 2rem 1rem 2rem 1rem;}
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .projectContent .responsibilities li{width:50%;}
}

/* Large and up */
@media screen and (min-width: 64em) {
    
h1{font-family: 'Playfair Display', serif; font-weight: 700; font-size:4rem; letter-spacing: 3px; }
h2{font-family: 'Playfair Display', serif; font-weight: 700; font-size:2.5rem; line-height: 4rem }
h3{font-family: 'Playfair Display', serif; font-weight: 700; font-size:2rem; line-height: 5rem;}
h4{font-family: 'Playfair Display', serif; font-weight: 700; font-size:1.3rem; line-height: 2rem;}
    
.projectContent .responsibilities li{width:25%;}
.projectContent .results li{width:100%;}

.persona .textContent{ padding: 100px 0;}
.painPoints .textContent {padding: 60px 30px;}

.appMockup p.h2{ padding: 200px 0;}
.projectContentNoSpace{ margin-top:0; margin-bottom: 0; }
        
    #yusic .appMockup p{ padding: 2rem 1rem 2rem 8rem;}
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}