/* Mobile Portrait */

/******************GLOBAL****************************/
@media (orientation: portrait) {

:root {
  --p-font-size: 2.3vh;
  --p-line-height: 3.5vh; 
  --htwo-font-size:2.6vh;
  --nav-font-size:2.2vh;
  --nav-header-font-size:2.6vh;
  --home-deliver: 70%;
}
      
      div.logo {
        top: 1%;
        left: 32%;
        width: 30%;
      }
      
      div.logo.small {
        width: 30%;
        top: 0.5%;
      }
      
      header a {
          display: none;
      }
      
      aside {
          top:0;
          right:-90%;
          width:80%;
      }
      
      aside.open {
        animation-name: open_nav;
        animation-fill-mode:both;
        animation-direction: alternate;
        animation-duration: 0.7s;
        animation-timing-function: ease-in-out;
      }

      @keyframes open_nav {
        from {right:-90%;}
        to {right:0%;}
      }
      
      aside.close {
        animation-name: close_nav;
        animation-fill-mode:both;
        animation-direction: alternate;
        animation-duration: 0.5s;
        animation-timing-function: ease-out;
      }

      @keyframes close_nav {
        from {right:0%; }
        to {right:-90%; }
      }
    
      nav dt {
        font-size: var(--nav-header-font-size);;
      }
    
      nav dd {
        font-size: var(--nav-font-size);
      }
      
      h2 {
        font-size: 3.5vh;
        line-height: 4vh;
      }
      
      p, ul, li, ol {
        font-size: var(--p-font-size);
        line-height: var(--p-line-heigt);
      }
      
        .post-link, article.event-items a {
          font-size: 1.8vh !important;
          padding: 2% 6%;
      }
      
      article, section, footer, header {
        width: 90%;
        padding: 1% 5%;
      }
    
      section {
        width: 88%;
        padding: 5% 6%;
      }
      
      section.home-hero {
        width: 100%;
        height: 80%;
        padding: 2% 0%;
        background-image: url(assets/img/hero-background-healthcare.jpg), url(assets/img/hero-background-energy.jpg), url(assets/img/hero-background-food.jpg),  url(assets/img/hero-background-manufacturing.jpg);
    background-size: 100%;
    /*background-position: 0% 100%, 100% 100%, -100% 100%, -200% 100%;*/
          background-position: -300% bottom, -200% bottom, -100% bottom, 0% bottom, 100% bottom, 200% bottom;
      }
    
    
    section.home-hero div ul li {
        background-color:transparent;
    }
      
      section.home-hero > div {
        padding: 15% 0 0 0;
      }
      
      section.home-hero h1 {
        font-size: 2.8vh;
        line-height: 4.2vh;
        margin:0 0 2% 0;
        top: 10% !important;
    }
      
      section.home-hero h2 {
        font-size: 1.8vh;
        line-height: 2.5vh;
        top: 15%;
    }
      
      section.home-end-to-end {
          height: -webkit-fit-content;
      }
      
      section.home-end-to-end ul li:first-of-type {
          margin: 0 0 10% 0;
      }
    
       section.home-end-to-end ul li {
          margin:5% 2%;
      }
      
      section.home-end-to-end ul li h3, section.home-end-to-end ul li p {
          text-align: center;
      }
      
      section.home-end-to-end ul li h3 {
          font-size:3.5vh;
      }
      
      section.home-end-to-end ul li a.post-link {
          margin: 5% auto;
          display: block;
          font-size: var(--p-font-size) !important;
          width: 30%;
          text-align: center;

          float: none;
      }
      
      section.home-end-to-end ul li h2 {
          font-size: 3vh;
          text-align: center;
          border: none;
          padding: 2% 0 0 0;
      }
      
      section.home-end-to-end ul {
          flex-direction: column;
          padding:0;
      }
      
       section.home-deliver {
          height:var(--home-deliver);
      }
      
      section.home-deliver div {
          width:80%;
          padding:2% 10%;
      }
      
      section.home-deliver div h2 {
          font-size: 3.4vh;
          line-height: 4vh;
          margin:0 0 5% 0;
      }
      
      section.home-deliver div p {
          font-size: 2.2vh;
          line-height: 3.1vh;
      }
      
      div.menu {
          width:15vw;
          font-size: 20vw;
      }
      
      section.home-projects {
          flex-direction: row;
          width:auto;
      }
      
      div.one, div.three {
          height:49%;
      }
      
      div.two {
          height:1%;
      }
      
      section.home-projects img.project-profile-logo.small {
        width: 1vh;
        min-width: 27% !important;
      }
      
      section.home-projects div.project-background-frame span {
        font-size: 1.8vh;
        top: 90px;
      }
    
      section.home-projects div.project-background-frame span.hidden_tag {
        display: none;
      }
      
      section.home-projects div.project-background-frame h3, section.home-projects div.project-background-frame span {
          font-size: 2.1vh;
          line-height: 2.7vh;
          top:-10px !important;
      }
      
      section.home-projects div.project-background-frame, section.subpage-our-work div.project-background-frame {
          flex: auto;
          margin:5% 1%;
          min-height: 30%;
          max-height: 160px;
          width:100%;
      }
    
      section.home-projects div.project-background-frame div.project-background:hover, section.subpage-our-work div.project-background-frame div.project-background:hover {
          background-size:300%; /*Important to animating background image only*/
      }
      
      
       section.home-projects div.project-background-frame a, section.subpage-our-work div.project-background-frame a {
          height: -webkit-fill-available;
          max-height: inherit;
      }
      
      section.home-projects div div.project-background, section.subpage-our-work div div.project-background {
          background-position: center top;
          background-size: 115% !important;
      }
      
      ul.our-work-filter li, ul.insights-filter li {
          visibility: hidden;
      }
      
      section.site-cta a:link, div.row-break a.cta:link, section.site-cta a:visited, div.row-break a.cta:visited {
            font-size: 2vh;
            min-width: 55%;
            padding: 4.3% 11%;
      }
      
      section.footer dl {
          display: none;
      }
      
      /*Subpages*/
      section.subpage-hero {
          height:70%;
          background-position: center !important;
          background-size: cover !important;
      }
      
      
      section.subpage-hero > div h1 {
          font-size: 3vh;
          line-height: 4vh;
          width:100%;
      }
      
      section.subpage-hero > div span.bread-crumb {
          font-size: 2.5vh;
      }
      
      section.subpage-hero-subsection {
          /*min-height: 30%;*/
          /*max-height: 55%;*/
          max-height: -webkit-fill-available;
          height: auto;
          flex-wrap: wrap;
          flex-direction: row;
      }
    
    section.subpage-hero-subsection.contact {
          /*max-height: unset;*/
          height: auto;
          /*max-height: fit-content;*/
          max-height: inherit;
          /*max-height: -webkit-fill-available;*/
    }
      
      div.subsection-title h1 {
          font-size: 3.1vh;
      }
      
       section.subpage-hero-subsection div.subsection-subtext {
          width:100%;
           padding: 5% 0;
          /*max-height: auto;*/
      }
    
      .seventy-percent-width p, .seventy-percent-width ul, .seventy-percent-width span, .seventy-percent-width h2 {
          width:100%;
      }
      
      div.subsection-subtext h2 {
        font-size: var(--htwo-font-size);
        font-weight: bold;
        letter-spacing: -0.5px;
        line-height: 4vh;
      }
      
      section.subpage-project-profile div h2, section.subpage-project-profile div p {
          width:100%;
      }
    
      section.subpage-mid-hero {
        padding: 5%;
      }
      
      section.subpage-mid-hero h1 {
          font-size: 2.25vh;
          line-height: 3.5vh !important;
          padding: 2% 8%;
          font-weight: bolder;
      }
    
      section.subpage-mid-hero div h3 {
          margin-top: 2vh;
          font-size: 2vh;
      }
      
      section.subpage-body {
         flex-direction: column-reverse;
         padding: 15% 6%;
         height: -webkit-fill-available;
      }
      
      section.subpage-body div.subsection-subtext h1, section.subpage-body div.subsection-subtext p, section.subpage-body div.subsection-subtext ul {
          padding:0;
      }
    
    section.subpage-body div.subsection-subtext ul {
        padding: 0 10%;
    }
      
      section.subpage-body div.subsection-subtext h1 {
          font-size: 3vh;
          letter-spacing: -0.5px;
          margin: 5% 0;
      }
      
      section.subpage-body div.subsection-subtext h1, section.subpage-body div.subsection-subtext p {
          text-align: center;
      }
      
      section.subpage-our-work {
          flex-direction: row;
      }
      
      section.subpage-our-work div.project-background-frame {
          margin: 5% 0;
          max-height: 180px;
          max-width: 90%;
      }
      
      ul.our-work-filter li, ul.insights-filter li {
          display: none;
      }
      
      section.subpage-our-work div.project-background-frame h3 { 
          top:-30%;
      }
      
      section.subpage-our-work div.project-background-frame span {
          top:-20%;
      }
    
      section.subpage-our-work div.project-background-frame span.hidden_tag {
          display: none;
      }
      
      section.subpage-project-profile {
          /*flex-direction: column;*/
          flex-direction: row;
          min-height: auto;
          /*min-height: -webkit-fill-available;*/
      }
    
    .seventy-percent-width, .thirty-percent-width, .fifty-percent-width { /*this fixed mobile safari issues*/
        flex-basis: 100% !important;
    }
      
      img.project-profile-logo {
            position: absolute;
            top: 32%;
            height: 25%;
            min-height: 0;
            left: 6%;
            min-width: 27%;
            max-width: 36%;
            width: auto;
            border: none;
            background: none;
      }
      
      img.project-profile-logo.small {
          width:85px;
          min-width: auto;
      }
      
      section.subpage-insights-single-post {
          flex-direction: column-reverse;
          flex-wrap: nowrap;
          height: -webkit-fit-content;
      }
      
      ul.insights-podcast-list-items, ul.insights-article-list-items {
          padding: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
      }
      
      ul.insights-article-list-items li.author_image {
          width:40%;
          display: none;
      }
    
      ul.insights-podcast-list-items li.podcast_length, ul.insights-article-list-items li.article_length {
        font-size: 1.8vh;
        padding: 2% 0;
        width: 100%;
      }
      
      ul.giving-back-list-items {
          padding:0;
      }
      
      section.subpage-news div.news-items-holder, section.subpage-insights div.insights-items-holder {
          flex-direction: column;
      }
      
      article.news-items:nth-of-type(1) img, article.news-items:nth-of-type(2) img, article.insights-items.archive img {
          height: 22vh;
      }
      
      article.news-items, article.insights-items, article.insights-items.archive {
          max-width: 100%;
          padding:0;
          margin:5% auto 10% auto;
      }
      
      /*Event*/
      article.event-items div.date_block {
          display: none;
      }
      
      article.event-items div.description_block {
          width:100%;
      }
      
      article.event-items div.description_block h4 {
            font-size: var(--htwo-font-size);
            line-height: 4vh;
            margin-bottom: 5%;
      }
      
      article.event-items div.description_block div.event_details {
            font-size: var(--p-font-size);
      }
    
      article.event-items div.description_block div.event_details p {
           
      }
      
      article.event-items div.details_block {
            width: 0;
      }
      
      section.subpage-what-we-do {
          height: auto;
      }
      
      section.subpage-what-we-do ul.services-list-items {
          flex-direction: column;
          background:none !important;
      }
      
      section.subpage-project-profile div p, section.subpage-project-profile div ol, section.subpage-project-profile div ul, section.subpage-project-profile div span {
          width:100%;
          font-size: var(--p-font-size);
          line-height: var(--p-line-height);
      }
    
      section.subpage-project-profile div ol, section.subpage-project-profile div ul {
          width:90%;
    }
      
      ul.project-profile-list-items {
          margin:0;
          padding: 0;
          display: flex;
          flex-wrap: wrap;
      }
      
      ul.project-profile-list-items li {
         margin:0 0 5% 0;
         width:49%;
      }
    
      ul.project-profile-list-items li b {
         font-size: 2vh;
      }
      
      img.subsection-image {
          min-height: auto;
          max-height: fit-content;
          height: auto;
          width: 96%;
          margin: 0 auto;
      }
      
      section.subpage-what-we-do div.services-list {
          height: -webkit-max-content;
      }
      
      section.subpage-what-we-do ul.services-list-items li {
          padding: 7% 0;
          width:100%;
          max-width: 100%;
      } 
      
      section.subpage-what-we-do ul.services-list-items li div {
          bottom:0;
      }
      
      section.subpage-what-we-do ul.services-list-items p, section.subpage-what-we-do ul.services-list-items a {
          opacity: 1;
          font-size: var(--p-font-size);
          line-height: var(--p-line-height);
      }
      
      section.subpage-mid-hero.tech-ecosystem, section.subpage-mid-hero.industries {
          height: -webkit-max-content;
          max-height: 1900px;
      }
    
    section.subpage-mid-hero.tech-ecosystem, section.subpage-mid-hero.industries div h1, section.subpage-mid-hero.tech-ecosystem, section.subpage-mid-hero.tech-ecosystem div h1 {
        font-size: 3.2vh;
        line-height: 4.3vh;
    }
    
    section.subpage-mid-hero.tech-ecosystem div span, section.subpage-mid-hero.industries div span {
        font-size: var(--p-font-size);
        line-height: 3vh;
        width: 90%;
    }
      
      section.subpage-mid-hero.tech-ecosystem ul, section.subpage-mid-hero.industries ul {
          flex-wrap: wrap;
      }
      
      section.subpage-mid-hero.tech-ecosystem ul li, section.subpage-mid-hero.industries ul li {
          width:45%;
          max-width: 48%;
          height:auto;
      }
      
      
      iframe {
            height: 225px;
      }
      
      /**CONTACT US*/
      ul.contact_info {
          padding:1%;
      }
    
/*ENDS GLOBAL PORTRAIT STYLE*/    
/******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/  /*BEGINS DEVICE SPECIFIC PORTRAIT STYLE*/  
    
/* ----------- iPhone 5 ----------- */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {    
}
    
/* ----------- iPhone 6 ----------- */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
}

/* ----------- iPhone 6+ ----------- */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
}
    
/* ----------- iPhone X ----------- */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) { 
}
    
/* ----------- iPad Pro ----------- */   
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
}
    
/****************************END ALL STYLES************************************/
}