/*
Theme Name: EX3 Labs 2020v1.3.7
Description: EX3 Labs Website Theme
Author: EX3 Labs
Author URI: http://www.ex3labs.com
Version: 1.3.7
License: Private
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/******************COLORS****************************/
:root {
  --black: rgba(0,0,0,1.0);
  --grey: rgba(77,77,77,1.0);
  --light-grey: rgba(255,255,255,0.7);
  --medium-grey: rgba(0,0,0,0.6);
  --dark-grey: rgba(255,255,255,0.6);
  --very-dark-grey: rgba(255,255,255,0.3);
  --input-background: rgba(21,21,21,1.0);
  --input-border: rgba(41,41,41,1.0);
  --grey-gradient: linear-gradient(rgba(241,241,241),rgba(211,211,211)); 
  --white: rgba(255,255,255,1.0);
  --aqua-dark: rgba(12,59,67,1.0);
  --transparent-black-gradient: linear-gradient(rgba(0,0,0,1.0), rgba(0,0,0,0.4), rgba(0,0,0,1.0));
  --radial-gradient: radial-gradient(rgba(64,61,65,0.8), rgba(64,61,65,0.4), rgba(0,0,0,1.0)) !important;
  --white-gradient: linear-gradient(to top right, rgba(255,255,255,1.0), rgba(255,255,255,0.95), rgba(255,255,255,0.0), rgba(255,255,255,0.0), rgba(255,255,255,0.0));
  --box-shadow: rgba(0,0,0,0.3);
  --section-gradient-black: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,1.0));
  --hologram: linear-gradient(to right, rgba(252,234,230,1.0), rgba(211,156,198,1.0), rgba(179,203,234,1.0), rgba(255,255,255,1.0));
    --tile-hover-dark: rgba(0,0,0,0.4);
    --mark-gradient: linear-gradient(to right, rgba(255,255,255,0.0), rgba(255,255,255, 0.2), rgba(255,255,255, 0.4), rgba(255,255,255, 0.4)); 
}

/*******************COLOR THEMES*********************/
.ultralight-text {
    color:var(--white);
}

.light-text {
    
}

.dark-background {
    background:var(--black) !important;
}

/*******************GLOBAL***************************/
* {
	-webkit-user-select:none;
	-moz-user-select:none;
	user-select:none;
}

/******************GLOBAL********************/
html, body {
	height:100%;
	width:100%;
	padding:0;
	margin:0 !important;
    font-family: 'Assistant', sans-serif;
	font-weight:100;
}

body {
    display: flex;
    /*flex-direction: column; THIS DOESN'T WORK IN WP SO I HID IT*/
	background:var(--dark-grey);
	height:100%;
	overflow: hidden;/*prevents scrolling*/
    position:fixed;/*prevents scrolling*/
	-webkit-tap-highlight-color: rgba(0,0,0,0);
    color:var(--white);
    text-align: center;
}

h1, h2, h3, h4, h5, p, blockquote, span, ul, li, ol {
    font-family: 'Assistant', sans-serif;
    margin: 0;
    color:var(--gray);
}

/*h5.percent {
    position: fixed;
    top:10%;
    font-size: 5vh;
    color:red;
    z-index: 9000;
}*/

h1 {
    font-weight: bold;
    font-size: 3.8vh;
    color:var(--black);
    animation-name: h1-fadeIn;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-duration: 0.2s;
    animation-delay: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: h1-fadeIn;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-delay: 0.5s;
    -webkit-animation-timing-function: ease-in-out;
}

@keyframes h1-fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@-webkit-keyframes h1-fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@-moz-keyframes h1-fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}


h2 {
    font-size: 4.5vh;
    line-height: 6vh;
    font-weight: 400;
}

p, ul, li, ol, address, a[href^=tel] {
    font-size: 2.4vh;
    line-height: 3.6vh;
    text-align: left;
    margin:0 0 2% 0;
    color:var(--light-grey);
}


/*********CONTACT***************/
input, textarea {
    background:var(--input-background);
    border:1px solid var(--input-border) !important;
    outline: none;
    border: none;
    font-size: 2vh;
    padding:2%;
    color:var(--light-grey) !important;
    -webkit-user-select:auto;
	-moz-user-select:auto;
	user-select:auto;
}

input[type="button"] {
    background:transparent;
    color:var(--white);
    float: right;
    padding:2% 5%;
}

address, a[href^=tel] {
    font-style: normal;
    text-decoration: none;
}

a[href^=tel] {
    font-family: roboto;
    font-size: 2vh;
    line-height: 2.5vh;
}

ul.contact_info {
    padding: 5% 0 0 30%;
    list-style: none;
}

ul.contact_info li {
    padding:7% 0;
    border-bottom: 1px solid rgba(255,255,255, 0.2);
}

ul.contact_info li:last-of-type {
    border-bottom: none;
}

ul.contact_info li h1 {
    margin:2.5% 0;
}

ul.contact_info li img {
    float: right;
    width:20%;
}

ul.contact_info.subscribe {
    display: flex;
    flex-wrap: wrap;
}

ul.contact_info.subscribe li {
    width:50%;
    border-bottom: none;
}

ul.contact_info.subscribe li a {
    text-decoration:none;
    color:var(--white);
}

ul.contact_info.subscribe h1, ul.contact_info.subscribe span {
    text-align: center;
    width:100%;
    display: block;
}

ul.contact_info.subscribe h1 {
    font-size: 9vh;
}

img {
    min-height: 60%;
    height: 80%;
    min-width: 60%;
}

article, section, aside, footer, header {
    display: flex;
    align-content: center;
    justify-content:center;
    width: 80%;
    padding: 1% 10%;
}

article, section, aside {
    height:100%;
    margin:auto;
    flex-direction: column;
    flex: 1 1 auto;
}


.vertical_break {
    font-weight: 100;
    margin:0 5%;
    color:var(--very-dark-grey);
}

header, footer {
    flex-direction: row;
}

header {
    position: fixed;
    height: 6%;
    top: 0;
    z-index: 6000;
    width: 70%;
    padding: 1.5% 15% 0 15%;
    background: rgba(255,255,255,0.0);
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
    color: var(--black);
    transition: background 0.3s ease-in-out;
    -webkit-transition:background 0.3s ease-in-out;
    -moz-transition:background 0.3s ease-in-out;
}

header.breadcrumb_background {
    background:rgba(255,255,255,1.0);
}

header a {
    color: var(--black) !important;
    text-decoration: none;
    font-weight: bolder;
}

header .break {
    margin:0 1%;
}

div.logo {
    transition: top 0.2s, width 0.2s;
    -webkit-transition: top 0.2s, width 0.2s;
    -moz-transition: top 0.2s, width 0.2s;
    position: absolute;
    z-index: 7000;
    top: 4%;
    left: 1%;
    width: 20%;
    height: 10%;
    background: url(assets/img/ex3_logo_dark.png) no-repeat;
    background-size: contain;
}

div.logo a {
    height:100%;
    width: 100%;
    display: flex;
}

div.logo.small {
    width:10%;
    top:1.5%;
}

div.menu {
    position: absolute;
    top: 0;
    right: 2%;
    z-index: 8500;
    background:var(--black);
    color:var(--white) !important;
    font-size: 6vw;
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 5vw;
    height: 7vh;
    cursor: pointer;
}

div.menu span {
    padding: 0;
    margin:0;
    line-height: 2vh;
}

.menu-active {
    visibility:visible !important;
}

/*div.menu:hover {
    background:var(--blue);
}*/

aside {
    position: absolute;
    z-index: 10000;
    top:-4%;
    right:-40%;
    width: 20%;
    height: 100%;
    box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.8);
    background: url(assets/img/ex3_logo_dark.png) ;
    background-color:var(--white);
    background-repeat:no-repeat;
    background-size:35%;
    background-position:  right 95%;*/
    background-size: 25%;
    padding:1% 5% !important;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
}

aside.open {
    animation-name: open_nav;
    animation-fill-mode:both;
    animation-direction: alternate;
    animation-duration: 0.7s;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: open_nav;
    -webkit-animation-fill-mode:both;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: ease-in-out;
}

@keyframes open_nav {
  from {right:-40%;}
  to {right:0%;}
}

@-webkit-keyframes open_nav {
  from {right:-40%;}
  to {right:0%;}
}

@-moz-keyframes open_nav {
  from {right:-40%;}
  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;
    -webkit-animation-name: close_nav;
    -webkit-animation-fill-mode:both;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-out;
}

@keyframes close_nav {
  from {right:0%; }
  to {right:-40%; }
}

@-webkit-keyframes close_nav {
  from {right:0%; }
  to {right:-40%; }
}

@-moz-keyframes close_nav {
  from {right:0%; }
  to {right:-40%; }
}

nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: normal;
    text-align: left;
    width: 100%;
    height: 100%;
}

nav dt {
    color:var(--black);
    opacity: 0;
    font-size: 2.5vh;
    padding: 3% 0 1% 0;
    animation-name: nav-header-in;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
    animation-delay: 0.3s;
    -webkit-animation-name: nav-header-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: 0.3s;
}

@keyframes nav-header-in {
  from {padding: 3% 0 1% 5%; opacity: 0; }
  to {padding: 3% 0 1% 0; opacity: 1; }
}

@-webkit-keyframes nav-header-in {
  from {padding: 3% 0 1% 5%; opacity: 0; }
  to {padding: 3% 0 1% 0; opacity: 1; }
}

nav dt.close {
    text-align: right;
    cursor: pointer;
    z-index: 90000;
}

nav dd {
    font-size: 2.1vh;
    opacity: 0;
    cursor: pointer;
    color:var(--medium-grey);
    padding: 2% 0 2% 7%;
    border-left: 0.25vw var(--white) solid;
    margin:1% 2%;
    animation-name: nav-item-in;
    animation-fill-mode: forwards;
    animation-direction: alternate;
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
    animation-delay: 0.4s;
    -webkit-animation-name: nav-item-in;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-direction: alternate;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: 0.4s;
    transition: border 0.05s ease-in-out;
    -webkit-transition: border 0.05s ease-in-out;
     -moz-transition: border 0.05s ease-in-out;
}

@keyframes nav-item-in {
  from {padding: 2% 0 2% 14%; opacity: 0; }
  to {padding: 2% 0 2% 7%; opacity: 1; }
}

@-webkit-keyframes nav-item-in {
  from {padding: 2% 0 2% 14%; opacity: 0; }
  to {padding: 2% 0 2% 7%; opacity: 1; }
}


nav dd:hover {
    border-left: 0.25vw var(--black) solid;
}

nav dd a:link, nav dd a:visited {
    color:var(--medium-grey);
    text-decoration: none;
}

section.footer {
    width: 90%;
    padding: 2% 5%;
    height: auto;
    background: var(--white);
    color:var(--black);
    flex-direction: row;
    background-image: url('assets/img/EX3_Labs_Square_Logo.png');
    background-size: 5%;
    background-repeat: no-repeat;
    background-position: 6% 35%;
}

section.footer dl {
    flex:1 1 21%;
    text-align: left;
    justify-content:center;
    align-items: center;
}

section.footer dl:first-of-type {
    min-width: 35%;
}

section.footer dt {
    color:var(--black);
    font-size: 2vh;
} 

section.footer p {
    color: var(--medium-grey);
    font-size: 2vh;
    width: 65%;
    line-height: 3vh;
    padding: 0 5% 0 25%;
}

section.footer dd {
    color:var(--medium-grey);
    line-height: 3.3vh;
    margin: 0 1.5vh;
    font-size: 1.6vh;
}

section.footer dd a:link, section.footer dd a:visited {
    text-decoration: none;
    color:inherit;
}

span.blank_space_with_border {
    border-bottom: 0.05vh solid var(--grey);
    min-width: 17%;
    margin: 0 0 -4px 0;
    display: inline-block;
}

footer {
    height: 5%;
    align-items: center;
    background:var(--black);
    color:var(--light-grey);
}


section.footer ul.social-links {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0 0 0 17%;
}

section.footer ul.social-links li {
    text-decoration: none;
    min-width: 13.6%;
}

section.footer ul.social-links li a {
    color:var(--grey);
}


div.page_frame {
    background-color: var(--white);
    height:100%;
    width:100%;
    padding:3% 0 0 0;
    padding:0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 0 0; /* Another wordpress quirck to get the page where it needs to be*/
}

section > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 1 1 auto;
}

section.site-cta {
    background: var(--black);
    height: 75%;
}

section.site-cta a:link, div.row-break a.cta:link, section.site-cta a:visited, div.row-break a.cta:visited  {
    width:auto;
    text-decoration: none;
    font-size: 2.5vh;
    margin: 2% auto 0 auto;
    min-width: 20%;
    padding: 1.3% 2%;
    border:1px solid var(--very-dark-grey);
    color:var(--white);
    border-radius: 40px;
    transition: background 0.2s ease-in-out, min-width 0.2s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out, min-width 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out, min-width 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out, min-width 0.2s ease-in-out;
}

section.site-cta a:hover, div.row-break a.cta:hover {
    background:var(--white);
    color:var(--black);
    min-width: 22%;
}

section.site-cta p {
    text-align: center;
}

div.row-break {
    flex-direction: row !important;
    flex-basis: 100%;
}

div.row-break.with-extra-padding {
    padding: 0 0 10% 0;
}


/*************INDIVIDUAL PAGES********************/

/*HOME*/
section.home-hero {
    width: 100%;
    padding: 0;
    height: 90%;
    background-image: url('assets/img/hero_images/hero-background-healthcare.jpg'), url('assets/img/hero_images/food_beverage.jpg'), url('assets/img/hero_images/hero-background-energy.jpg'), url('assets/img/hero_images/hero-background-healthcare.jpg'), url('assets/img/hero_images/food_beverage.jpg'), url('assets/img/hero_images/hero-background-energy.jpg');
    background-size: 27.3%;
    background-position:-150% bottom, -100% bottom, -50% bottom, 0% bottom, 50% bottom, 100% bottom;
    background-repeat:  no-repeat;
     -webkit-transition: background-position 0.7s ease-in-out, background-image 0.3s ease-in;
    transition: background-position 0.7s ease-in-out, background-image 0.3s ease-in;
    -o-transition: background-position 0.7s ease-in-out, background-image 0.3s ease-in;
    -moz-transition: background-position 0.7s ease-in-out, background-image 0.3s ease-in;
    
}


section.home-hero.hero_one {
   background-position:-150% bottom, -100% bottom, -50% bottom, 0% bottom, 50% bottom, 100% bottom;
    transition: none;
    -webkit-transition:none;
    -o-transition:none;
    -moz-transition:none;
}

section.home-hero.hero_two {
    background-position:-100% bottom, -50% bottom, 0% bottom, 50% bottom, 100% bottom, 150% bottom;
    /*background-image:var(--hero-background);*/
}

section.home-hero.hero_three {
    background-position:-50% bottom, 0% bottom, 50% bottom, 100% bottom, 150% bottom, 200% bottom;
    /*background-image:var(--hero-background);*/
}

section.home-hero.hero_four {
    background-position:0% bottom, 50% bottom, 100% bottom, 150% bottom, 200% bottom, -250% bottom;
    /*background-image:var(--hero-background);*/
}


section.home-hero h1 {
    font-size:6vh;
    font-weight: bold;
    position: relative;
    top:120%;
    /*top:150%;*/
    width:100%;
    text-align: center;
    z-index: 6000;
    opacity: 0;
}

section.home-hero h1 span {
    opacity: 0;
}

section.home-hero h2 {
    font-size: 2.6vh;
    line-height: 3.5vh;
    color:var(--medium-grey);
    text-shadow: 0.5px 1px 0px var(--white);
    position: relative;
    top: 65%;
    z-index: 6000;
    width: 100%;
    opacity: 0;
}

section.home-hero > div {
    justify-content: flex-start;
    padding:0;
}

section.home-hero div:nth-of-type(1) {
    height: 30%;
}

section.home-hero div:nth-of-type(2) {
    height: 75%;
}

section.home-hero div ul {
 list-style: none;
    margin:0;
    padding:0;
    display: flex;
    flex-direction: row;
    height: 100%;
}

section.home-hero div ul li {
    flex-basis: 20%;
    flex-grow: 1;
    overflow: hidden;
    /*background-color:transparent;*/
    background-color:var(--white);
    padding: 0;
    margin: 0;
    opacity: 1;
}

section.home-hero div ul li:nth-child(even) {
    
}

section.home-deliver {
    background-color: var(--black);
    background-image: var(--radial-gradient);
    position: relative; /*keeps watermark inline*/
    width:100%;
    height: 90%;
    padding:0;
}


section.home-deliver::after {
    content: '';
    width: 100%;
    height: 100%;
    z-index: 0;
    position: absolute;
    background: url(assets/img/testimony_logo.png);
    background-repeat: repeat;
    background-attachment: fixed;
    background-size: 90%;
    background-position: 0 0;
    /*animation: logo_anim 10s linear infinite;*/
    animation-fill-mode: forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes logo_anim {
    from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

@-moz-keyframes logo_anim {
    from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

@keyframes logo_anim {
    from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

section.home-end-to-end {
    height:30%;
    background-color: var(--black);
}

section.home-end-to-end ul {
    list-style: none;
    display: flex;
    flex-direction: row;
}

section.home-end-to-end ul li:first-of-type {
    min-width:20%;
    padding:0 1% 0 0;
    margin:0;
}

section.home-end-to-end ul li {
    margin:0 2%;
}

section.home-end-to-end ul li h2 {
    font-size: 4.7vh;
    line-height: 5vh;
    border-left:3px solid var(--white);
    padding: 0 0 0 10%;
}

section.home-end-to-end ul li p {
    font-size: 2.1vh;
}


section.home-deliver div {
    width: 46%;
    height: 50%;
    padding: 2% 26%;
}

section.home-deliver div p {
    text-align: center;
}

section.home-projects {
    background:var(--black);
    flex-direction: row;
    flex-wrap: wrap;
    height:70%;
    max-height: 530px;
    padding:10% 10% 20% 10%;
    position: relative;
}

section.home-projects div.project-background-frame, section.subpage-our-work div.project-background-frame {
    flex: 1 0 30%;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 2% 1%;
    min-height: 100%;
    box-shadow: 1px 4px 10px 4px var(--box-shadow);
    overflow: hidden;
    background-color: var(--white);
}

section.home-projects div.project-background-frame a, section.subpage-our-work div.project-background-frame a {
    height:100%;
    /*max-height: inherit;*/
    width: 100%;
    text-decoration: none;
    color:var(--black);
}

section.home-projects div div.project-background, section.subpage-our-work div div.project-background {
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-repeat:  no-repeat;
    background-position: 55% center;
    background-size:300% !important;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

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:330% !important; /*Important to animating background image only*/
}

section.home-projects div.project-background-frame h3, section.home-projects div.project-background-frame span {
    font-size: 2.8vh;
    font-weight: 100;
    text-shadow: 0.5px 1px 0px var(--white);
    width:90%;
    padding: 2% 5% 20% 5%;
    color:var(--black);
    line-height: 4vh;
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    /*position: relative;
    z-index: 5000;
    top:40%;*/
}

section.home-projects div.project-background-frame h3 {
    font-weight: 900;
}

section.home-projects div.project-background-frame span {
    padding: 2% 5% 0% 5%;
    font-size: 2.5vh;
    top: 42%;
    z-index: 4000;
    color:var(--medium-grey);
}

div.one {
    display: flex;
    height:30%;
}

div.two {
    height:40%;
}

div.three {
    height:30%;
}


/***************SUB PAGES********************/
section.subpage-hero {
    height: 80%;
    background-image: url('assets/img/background_default.jpg');
    background-position: right center;
    transition: background-image 0.6s ease-in-out;
    -webkit-transition: background-image 0.6s ease-in-out;
    -moz-transition: background-image 0.6s ease-in-out;
    -o-transition: background-image 0.6s ease-in-out;
    position: relative;
}



section.blur-background {
    background-image: url('assets/img/background_default.jpg') !important;
    animation-name: fade_in_background;
    animation-fill-mode:forwards;
    animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: fade_in_background;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-timing-function: ease-in-out;
     -moz-animation-name: fade_in_background;
    -moz-animation-fill-mode:forwards;
    -moz-animation-duration: 0.8s;
    -moz-animation-timing-function: ease-in-out;
}

@keyframes fade_in_background {
  from {background-size: 100%;}
  to {background-size: 120% !important;}
}

@-webkit-keyframes fade_in_background {
  from {background-size: 100%;}
  to {background-size: 120% !important;}
}

@-moz-keyframes fade_in_background {
  from {background-size: 100%;}
  to {background-size: 120% !important;}
}

section.subpage-hero > div {
    justify-content: flex-end;
    align-items: baseline;
    padding: 0 0 7% 0;
    position: relative;
    z-index: 5000;
    pointer-events: none;
    width:100%;
}

section.subpage-hero > div.breadcrumb_header_animation {
    position: fixed;
    top:0;
    animation-name: breadcrumb_header_animation;
    animation-fill-mode:forwards;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: breadcrumb_header_animation;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: breadcrumb_header_animation;
    -moz-animation-fill-mode:forwards;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: ease-in-out;
}

@keyframes breadcrumb_header_animation {
  from {transform: translate(0%, 0%) scale(1.0); position: relative;}
    to {transform: translate(-30%, -7%) scale(0.4); padding:0; position: fixed; top:0; z-index: 6001;}
  /*to {position: fixed; top:0; left: inherit; z-index: 6001; padding:0; transform: translate(-20%, 10%) scale(0.6);}*/
}

@-webkit-keyframes breadcrumb_header_animation {
  from {transform: translate(0%, 0%) scale(1.0); position: relative;}
    to {transform: translate(-30%, -7%) scale(0.4); padding:0; position: fixed; top:0; z-index: 6001;}
}

@-moz-keyframes breadcrumb_header_animation {
  from {transform: translate(0%, 0%) scale(1.0); position: relative;}
    to {transform: translate(-30%, -7%) scale(0.4); padding:0; position: fixed; top:0; z-index: 6001;}
}

mark {
    background-image:var(--mark-gradient);
    background-color: transparent;
}

section.subpage-hero div.subpage-hero-gradient::before {
    width: 112%;
    height: 105.5%;
    background-image: var(--white-gradient);
    margin: 0;
    padding: 0;
    content: "";
    position: absolute;
    top: -3%;
    left: -13%;
    z-index: unset;
}

section.subpage-hero > div h1 {
    font-size: 5.5vh;
    line-height: 7vh;
    font-weight: 100;
    width: 60%;
    margin-left: -5%;
    text-align: left;
    text-shadow: 0px 1px 0px var(--white);
    opacity: 0;
    animation-name: slide_text_in;
    animation-fill-mode:both;
    animation-delay: 1.8s;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    -webkit-animation-name: slide_text_in;
    -webkit-animation-fill-mode:both;
    -webkit-animation-delay: 1.8s;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-name: slide_text_in;
    -moz-animation-fill-mode:both;
    -moz-animation-delay: 1.8s;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: ease-out;
}

section.subpage-hero > div h1.breadcrumb_header_title_animation {
    height: 10%; 
    max-height: 80px; 
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

section.subpage-hero > div span.bread-crumb {
    font-size: 3.5vh;
    font-weight: 100;
    color:var(--medium-grey);
    margin-left: -5%;
    opacity: 0;
    animation-name: slide_text_in;
    animation-delay: 1.2s;
    animation-fill-mode:both;
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
    -webkit-animation-name: slide_text_in;
    -webkit-animation-delay: 1.2s;
    -webkit-animation-fill-mode:both;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-name: slide_text_in;
    -moz-animation-delay: 1.2s;
    -moz-animation-fill-mode:both;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: ease-in;
}

@keyframes slide_text_in {
  from {margin-left: -5%; opacity: 0; }
  to {margin-left: 0%; opacity: 1; }
}

@-webkit-keyframes slide_text_in {
  from {margin-left: -5%; opacity: 0; }
  to {margin-left: 0%; opacity: 1; }
}

@-moz-keyframes slide_text_in {
  from {margin-left: -5%; opacity: 0; }
  to {margin-left: 0%; opacity: 1; }
}



section.subpage-hero-subsection {
    background:var(--black);
    min-height:30%;
    max-height: 50%;
    flex-wrap: wrap;
    flex-direction: row;
}

section.subpage-hero-subsection.insights {
    min-height:20%;
    max-height: 30%;
}

section.subpage-hero-subsection.insights div.subsection-title.centered, section.subpage-hero-subsection.insights div.subsection-title.centered p {
    text-align: center !important;
}

section.subpage-hero-subsection.contact {
    max-height: 140%;
    height: auto;
    min-height: 100%;
    /*max-height: fit-content;*/
}

section.subpage-hero-subsection div.subsection-title, section.subpage-project-profile div.subsection-title {
    flex-basis: 100%;
    padding: 0 0 2% 0;
    max-height: fit-content;
}

div.subsection-title h1 {
    font-size: 4.3vh;
}

div.subsection-subtext h2, h2.excerpt_subheader p {
    font-size: 3vh;
    line-height: 4.5vh;
    margin: 0 0 5% 0;
    width:90%;
    text-align: left;
}

h2.excerpt_subheader p {
    color:white;
    width:100%;
    margin: 0;
    font-size: 3vh;
}

section.subpage-hero-subsection div, section.subpage-project-profile div {
    justify-content: flex-start;
    text-align: left;
}

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:90%;
}

section.subpage-hero-subsection div.subsection-subtext {
    padding:0 2% 0 0;
    width:90%;
}

section.subpage-mid-hero {
    /*background:url('assets/img/mid-hero-image-1.jpg') center center no-repeat;*/
    background-size: cover;
    background-color:var(--white);
    height: 30%;
}

section.subpage-mid-hero div {
    flex-basis: 40%;
    justify-content: flex-end;
    text-align: left;
}

section.subpage-mid-hero div h3 {
    color:var(--black);
    margin-top: 3vh;
    font-size: 2.7vh;
    font-weight: 100;
    text-align: right;
}


section.subpage-body {
    flex-direction: row;
    height: auto;
    min-height: 80%;
    background:white;
}

img.subsection-image {
    min-height: 400px;
    max-height: 264px;
    width: 80%;

}

section.image-on-right {
   flex-direction: row-reverse;
}

section.image-on-right img {
    text-align: right;
}

section.subpage-body div {
    flex-basis: 100%;
    text-align: left;
}

.fifty-percent-width {
    flex-grow: 1;
    flex-basis: 40% !important;
}

.thirty-percent-width {
    flex-grow: 1;
    flex-basis: 25% !important;
    justify-content: flex-start;
}

.seventy-percent-width {
    flex-grow: 8;
    flex-basis: 60% !important;
    justify-content: flex-start;
}

.seventy-percent-width p, .seventy-percent-width ul, .seventy-percent-width span, .seventy-percent-width h2 {
    width:80%;
}

.seventy-percent-width a {
    color:inherit;
    text-decoration: none;
    color:var(--white);
    font-weight: bolder;
}


.seventy-percent-width a:hover {
    text-decoration: underline;
}


section.subpage-body div.subsection-subtext h1, section.subpage-body div.subsection-subtext p, section.subpage-body div.subsection-subtext ul {
    padding: 0 15%;
}

section.subpage-body div.subsection-subtext p {
    color:var(--light-grey);
}

section.subpage-body div.subsection-centered {
    text-align: center;
    width: 50%;
    padding: 2% 25%;
}

/*****************PROJECT PROFILE**********************/
section.subpage-project-profile { 
    background: var(--black);
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
}

img.project-profile-logo {
    position: absolute;
    top: 80%;
    z-index: 5000;
    height: 30%;
    min-height: 0;
    right: 14%;
    min-width: 14%;
    max-width: 17%;
    width: auto;
    border: 1.25vh black solid;
    background: var(--white);
}

img.project-profile-logo.small {
    border: none !important;
    margin:0 0 0 5%;
    top: auto;
    width: auto;
    min-width: 18vh;
    min-height: auto;
    height: auto;
    background-color: transparent;
    position: static;
}

ul.project-profile-list-items {
    list-style: none;
    line-height: 4.5vh;
    font-size:3vh;
    margin:10% 0 0 10%;
    position: relative;
    top: 0%;
}

ul.project-profile-list-items li {
    margin: 0 0 7% 0;
    font-size: 2.4vh;
    line-height: 3vh;
    color:var(--white);
}

ul.project-profile-list-items li b {
    font-size:2.3vh;
    color: var(--dark-grey);
    font-weight:100;
}

section.quote {
    background:var(--white);
}

section.quote div {
    justify-content: center;
}

section.quote div h1 {
    position: relative;
    line-height: 5vh;
}

section.quote div h1:before, section.quote div h1:after {
    position: absolute;
    content: '"';
    font-size: 9vh;
}

section.quote div h1:before {
    left:-3%;
    top:10%;
}

section.quote div h1:after {
    /*right:-5%;*/
    bottom: -10%;
}


/*******************OUR WORK****************************/
section.subpage-our-work {
    background: var(--black);
    width:100%;
    height: auto;
    /*min-height: 75%;*/
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
}

section.subpage-our-work div.project-background-frame {
    flex: 1 0 21%;
    max-width: 21%;
    max-height: 75%;
    height: 445px;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    margin: 2% 1%;
    min-height: auto;
    box-shadow: 1px 4px 10px 4px var(--box-shadow);
    overflow: hidden;
    background-color: var(--white);
}


section.subpage-our-work div.project-background-frame h3, section.subpage-our-work div.project-background-frame span {
    font-size: 2.3vh;
    font-weight: 400;
    width: 90%;
    padding: 2% 5% 20% 5%;
    color: var(--black);
    text-shadow: 0.5px 1px 0px var(--white);
    line-height: 3.5vh;
    text-align: left;
    display: flex;
}

section.subpage-our-work div.project-background-frame span {
    font-weight: 100;
    padding: 2% 5% 0% 5%;
    font-size: 2vh;
    top: 42%;
    z-index: 4000;
    color:var(--medium-grey);
}

ul.our-work-filter, ul.insights-filter {
    list-style: none;
    display: flex;
    width: 90%;
    padding:2%;
}

ul.our-work-filter li, ul.insights-filter li {
    cursor: pointer;
    text-align: center;
    width: 100%;
    font-weight: bolder;
    font-size: 1.5vh;
    border: 1px solid rgba(255,255,255,0.0);
    color: var(-white);
}

ul.our-work-filter li.active-filter, ul.insights-filter li.active-filter {
    border:1px solid rgba(255,255,255,0.3);
    background: white;
    color: black;
    font-weight: bold;
    border-radius: 15px;
}



/*******************GIVING BACK*************************/
ul.giving-back-list-items {
    list-style: none;
}

ul.giving-back-list-items li {
    margin:0 0 30% 0;
}

ul.giving-back-list-items li a {
    text-decoration: none;
    color:inherit;
}

ul.giving-back-list-items h4 {
    font-size: 2.5vh;
    line-height: 4vh;
    color:var(--white);
}

ul.giving-back-list-items li img {
    clip:rect(0px,25px,25px,0px);
}

ul.giving-back-list-items li img.attachment-post-thumbnail {
    height:130px;
    min-height: 6vh;
    width:90%;
    margin:0 0 5% 0;
}

ul.giving-back-list-items p  {
    font-size: 2vh;
    line-height: 3vh;
    color:var(--light-grey);
}

ul.giving-back-list-items .post-link {
    color: var(--white);
    float: right;
    font-size: 2vh;
}

.post-link {
    font-size: 1.5vh !important;
}

#eighteen-seventy-one {
    background: url('assets/img/1871_logo.png') bottom center no-repeat;
    background-size: contain;
    background-position: bottom center;
}

#google {
    background: url('assets/img/google_logo.png') bottom center no-repeat;
    background-size: contain;
}

#best-buy {
    background: url('assets/img/best_buy_education_logo.png') bottom center no-repeat;
    background-size: contain;
}

#microsoft {
    background: url('assets/img/microsoft_logo.png') bottom center no-repeat;
    background-size: contain;
}

/*******************NEWS & INSIGHTS & EVENTS*************************/
section.subpage-news, section.subpage-insights, section.subpage-events {
    background: var(--black);
    height: auto;
    min-height: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
}

section.subpage-news input[type=text], section.subpage-events input[type=text] {
    background: transparent;
    color: var(--white);
    outline: none;
    width: 100%;
    font-size: 1.8vh;
    margin: 0 auto;
    padding: 2% 0 2% 5% !important;
    border: none;
    border-bottom: 1px solid var(--very-dark-grey);
    padding: 1%;
    cursor: auto;
    flex-basis: 80%;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

div.subsection-signup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 3% 25%;
    width: 50%;
}

div.subsection-signup label {
    font-size: 4vh;
    margin:0 0 5% 0;
    flex-basis: 100%;
}

div.subsection-signup input[type=button] {
    outline: none !important;
    border: 1px var(--very-dark-grey) solid !important;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    flex-basis: 20%;
    transition: background 0.2s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out;
} 

input[type=button]:hover {
    background:var(--white);
    color:var(--black) !important;
}

section.subpage-news div.news-items-holder, section.subpage-insights div.insights-items-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: fit-content;
    justify-content: flex-start;
}

article.news-items, article.insights-items {
    flex-direction: column;
    justify-content: space-between;
    margin: 0 0 5% 0;
    padding: 2% 2.5%;
    text-align: left;
    flex: 1 0 25%;
    height: auto;
    max-height: 35%;
}

article.insights-items.archive { /*this keeps the list items slender on news and insight archive page*/
    max-width: 20%;
}

article.insights-items.archive span.hidden_tag, span.hidden_tag {
    display: none !important;
}

article.insights-items.archive img {
    min-height: 15vh;
}

article.insights-items {
    margin:0 0 10% 0;
}

article.news-items img, article.insights-items img {
    margin: 0 0 5% 0 !important;
    height: 10vh;
    min-height:22vh;
    width: 100%;
}

article.news-items:nth-of-type(1), article.news-items:nth-of-type(2) {
    flex: 1 0 35%;
}

article.news-items:nth-of-type(1) h4, article.news-items:nth-of-type(2) h4 {
    margin: 0 0 1% 0;
    padding: 0 0 2% 0;
    min-height: 15%;
    max-height: 20%;
    line-height: 4.5vh;
    font-size: 3.2vh;
}

article.news-items:nth-of-type(1) p, article.news-items:nth-of-type(2) p {
    font-size: 2.2vh;
    line-height: 3.8vh;
}

article.news-items:nth-of-type(1) img, article.news-items:nth-of-type(2) img {
    height: 33vh;
}

article.news-items h4, article.insights-items h4 {
    font-size: 2.6vh;
    line-height: 4vh;
    color: var(--white);
    margin: 0 0 3% 0;
    padding: 0 0 7% 0;
    min-height: 15%;
    max-height: 15%;
}

article.insights-items {
    max-width: 29%;
}

article.insights-items span {
    border: 1px solid rgba(255,255,255,0.3);
    padding: 2%;
    width: max-content;
    margin: 0 0 2% 0;
}

article.insights-items span a {
    font-size: 1.3vh;
    text-transform: uppercase;
    color: wheat;
}

article.insights-items h4 {
    font-size: 2vh;
    line-height: 3vh;
    padding: 0 0 5% 0;
    min-height: 17%;
    max-height: 20%;
}

article.news-items p, article.insights-items p {
    font-size: 1.9vh;
    line-height: 2.9vh;;
    color:var(--light-grey);
}

section.home-end-to-end a, article.news-items a, article.insights-items a, article.event-items a {
    font-size: 2vh;
    text-decoration: none;
    color:var(--white);
    float: right;
}

article.event-items a {
    margin-bottom: 5%;
}

.post-link, article.event-items a {
    border: 1px solid var(--very-dark-grey);
    border-radius: 25px;
    padding: 1% 5%;
    transition: background 0.2s ease-in-out, min-width 0.2s ease-in-out;
    -webkit-transition: background 0.2s ease-in-out, min-width 0.2s ease-in-out;
    -moz-transition: background 0.2s ease-in-out, min-width 0.2s ease-in-out;
    -o-transition: background 0.2s ease-in-out, min-width 0.2s ease-in-out;
}

.post-link:hover, article.event-items a:hover {
    background:var(--white);
    color:var(--black) !important;
}

/********************SINGLE POST INSIGHT ****************/
section.subpage-insights-single-post {
    background: var(--black);
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
}

/********************AUDIO PLAYER**********************/
ul.insights-podcast-list-items, ul.insights-article-list-items {
    list-style: none;
    padding: 0 15% 0 0;
}

ul.insights-podcast-list-items li, ul.insights-article-list-items li {
    margin:0 0 2% 0;
}

ul.insights-podcast-list-items li.podcast_guest_name {
    font-size: 3vh;
    font-weight: bold;
    color:var(--white);
}

ul.insights-podcast-list-items li.podcast_guest_title {
    font-size: 2.5vh;
}

ul.insights-podcast-list-items li.podcast_guest_description, ul.insights-article-list-items li.author_description {
    font-size: 2vh;
    line-height: 3vh;
    margin:5% 0 0 0;
    padding:0 0 10% 0;
    border-bottom: 1px solid rgba(255,255,255, 0.2);
}

ul.insights-article-list-items li.author_description {
    font-size: 2vh;
    line-height: 3vh;
}

ul.insights-article-list-items li.author_name {
    font-size: 3vh;
    color:var(--white);
    margin: 10% 0 0 0;
}

ul.insights-article-list-items li.author_name::before {
    content:"By  ";
    font-size: 2vh;
    color:var(--light-grey);
    margin:0 2% 0 0;
}

ul.insights-podcast-list-items li.podcast_guest_image, ul.insights-article-list-items li.author_image  {
    height: 36vh;
    position: relative;
    top:40px;
}

ul.insights-article-list-items li.author_image {
    height: 24vh;
}

ul.insights-podcast-list-items li.podcast_length, ul.insights-article-list-items li.article_length {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.6vh;
    padding:5% 0;
}

/*Events*/
article.event-items {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding:0;
    margin:0 0 7% 0;
    border-bottom: 1px solid var(--very-dark-grey);
    max-height: 40%;
}

article.event-items:last-of-type {
    border:none;
}

article.event-items div.date_block {
    width: 20%;
    font-size: 4vh;
}

article.event-items div.description_block {
    width: 60%;
}

article.event-items div.description_block h4 {
    text-align: left;
    font-size: 3.5vh;
    line-height: 4.5vh;
    padding: 0 0 1% 0;
    min-height: 17%;
    max-height: 35%;
}

article.event-items div.description_block div.event_details {
    font-size:2.5vh;
    color:var(--light-grey);
    text-align: left;
}

article.event-items div.description_block div.event_details span.vertical_break {
    margin:0 1%;
}

article.event-items div.details_block {
    width: 30%;
    padding: 0 5% 5% 5%;
}

article.event-items div.details_block img {
    height: auto;
    width:100%;
}

/*****************WHAT WE DO**********************/
section.subpage-what-we-do { 
    background: var(--black);
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    padding: 1% 0;
    height: 90%;
}

section.subpage-what-we-do div.services-list {
    height: 100%;
    width:100%;
}

section.subpage-what-we-do ul.services-list-items {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background:url('assets/img/enterprise-agility-services-digital-transformation.jpg');
    background-size: cover;
    transition:background 0.2s ease-in-out;
    -webkit-transition:background 0.2s ease-in-out;
    -moz-transition:background 0.2s ease-in-out;
}

#digital-transformation {
    background:url('assets/img/enterprise-agility-services-digital-transformation.jpg') center center;
    background-size: cover;
}

#design-thinking-training {
    background:url('assets/img/experience-design-services-lx.jpg') center center;
    background-size: cover;
}

#center-of-excellence {
    background:url('assets/img/digital-development-services-modern-delivery.jpg') center center;
    background-size: cover;
}

#agile-coaching {
    background:url('assets/img/enterprise-agility-services-agile-coaching.jpg') center center;
    background-size: cover;
}

/*Emerging Tech*/
#artificial-intelligence {
    background:url('assets/img/artificial_intelligence_services.jpg') center center;
    background-size: cover;
}

#iot {
    background:url('assets/img/internet_of_things_services.jpg') center center;
    background-size: cover;
}

#rpa {
    background:url('assets/img/internet_of_things_services.jpg') center center;
    background-size: cover;
}

#mixed-reality {
    background:url('assets/img/mixed_reality_services.jpg') center center;
    background-size: cover;
}

/*Experience Design*/
#cx {
    background:url('assets/img/experience-design-services-cx.jpg') center center;
    background-size: cover;
}

#ex {
    background:url('assets/img/experience-design-services-ex.jpg') center center;
    background-size: cover;
}

#wx {
    background:url('assets/img/experience-design-services-wx.jpg') center center;
    background-size: cover;
}

#lx {
    background:url('assets/img/experience-design-services-lx.jpg') center center;
    background-size: cover;
}

/*Digital Develop*/
#strategy-ideation {
    background:url('assets/img/digital-development-services-strategy-ideation.jpg') center center;
    background-size: cover;
}

#rapid-prototyping {
    background:url('assets/img/experience-design-services-ex.jpg') center center;
    background-size: cover;
}

#pilot-programs {
    background:url('assets/img/experience-design-services-wx.jpg') center center;
    background-size: cover;
}

#modern-delivery {
    background:url('assets/img/digital-development-services-modern-delivery.jpg') center center;
    background-size: cover;
}



section.subpage-what-we-do ul.services-list-items li {
    border-left:1px var(--very-dark-grey) solid;
    margin:0;
    height: 100%;
    max-width: 48%;
    min-width: 15%;
    width:24%;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    background:transparent;
    transition: background 0.3s ease-in-out;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
}


section.subpage-what-we-do ul.services-list-items li:hover {
    background:var(--tile-hover-dark);
}

section.subpage-what-we-do ul.services-list-items li:first-of-type {
    border-left:none;
}

section.subpage-what-we-do ul.services-list-items li div {
    position: relative;
    bottom: -5%;
}

section.subpage-what-we-do ul.services-list-items h4, section.subpage-what-we-do ul.services-list-items p {
    text-align: center;
}

section.subpage-what-we-do ul.services-list-items h4 {
    color: var(--white);
    font-size: 3vh;
    line-height: 3.5vh;
    margin: 0 0 3% 0;
}

section.subpage-what-we-do ul.services-list-items p {
    font-size: 1.7vh;
    line-height: 2.4vh;
    margin: 0 auto 5% auto;
    width: 80%;
    opacity: 0;
}

section.subpage-what-we-do ul.services-list-items a {
    text-decoration: none;
    color:var(--white);
    border: 1px var(--very-dark-grey) solid;
    border-radius: 20px;
    padding:2% 10%;
    opacity: 0;
}
/*********TECH ECO SYSTEM****************/
section.subpage-mid-hero.tech-ecosystem, section.subpage-mid-hero.industries, section-subpage  {
    height: 40%;
    background:var(--white);
    overflow: hidden;
}

section.subpage-mid-hero.industries  {
    height: 56%;
    width: 100%;
    padding: 0;
}

section.subpage-mid-hero.tech-ecosystem div, section.subpage-mid-hero.industries div {
    text-align: center;
    justify-content: center;
    padding: 3% 0 0 0;
}

section.subpage-mid-hero.tech-ecosystem div h1, section.subpage-mid-hero.industries div h1 {
    font-size: 4.7vh;
    line-height: 8vh;
}

section.subpage-mid-hero.tech-ecosystem div span, section.subpage-mid-hero.industries div span {
    font-size: 2.2vh;
    color:var(--medium-grey);
    width: 80%;
    margin: 0 auto;
}

section.subpage-mid-hero.tech-ecosystem ul, section.subpage-mid-hero.industries ul {
    list-style: none;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    width:100%;
    padding: 0;
    margin:0;
}

section.subpage-mid-hero.tech-ecosystem ul li, section.subpage-mid-hero.industries ul li {
    justify-content: flex-start;
    align-content: flex-start;
    color:var(--medium-grey);
    margin:0;
    height: 200px;
    max-height: 100%;
    min-width: 15%;
    width: 24%;
    max-width: 25%;
    text-align: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

section.subpage-mid-hero.industries ul li {
    max-height: 530px;
    height: 330px;
    min-height: 193px;
    min-width:15%;
    padding:0;
    margin: 0;
}

section.subpage-mid-hero.industries ul li span {
    color:var(--black);
    font-weight: bold;
    text-shadow: none;
    margin:20% 0 0 0;
}

#microsoft_azure {
    background: url('assets/img/microsoft_azure_logo.png') center center no-repeat;
    background-size: contain;
}

#amazon_aws {
    background: url(assets/img/amazon_aws_logo.png) center center no-repeat;
    background-size: contain;
}

#salesforce_cloud {
    background: url('assets/img/salesforce_cloud_logo.png') center center no-repeat;
    background-size: contain;
}

#google_cloud {
    background: url('assets/img/google_cloud_logo.png') center center no-repeat;
    background-size: contain;
}
/*************Digital Development*************/
#ios {
    background: url('assets/img/ios_logo.png') center center no-repeat;
    background-size: contain;
}

#android {
    background: url(assets/img/android_logo.png) center center no-repeat;
    background-size: contain;
}

#windows {
    background: url('assets/img/windows_logo.png') center center no-repeat;
    background-size: contain;
}

#unity {
    background: url('assets/img/unity_logo.png') center center no-repeat;
    background-size: contain;
}

#web {
    background: url('assets/img/web_logo.png') center center no-repeat;
    background-size: contain;
}

#alexa {
    background: url('assets/img/alexa_logo.png') center center no-repeat;
    background-size: contain;
}

/**************EXPERIENCE DESIGN********************/
#manufacturing {
    background: url('assets/img/hero-background-manufacturing.jpg') bottom center no-repeat;
    background-size: contain;
    background-position: bottom center;
}

#healthcare {
    background: url('assets/img/hero-background-healthcare.jpg') bottom center no-repeat;
    background-size: contain;
}

#food {
    background: url('assets/img/hero-background-food.jpg') bottom center no-repeat;
    background-size: contain;
}

#energy {
    background: url('assets/img/hero-background-energy.jpg') bottom center no-repeat;
    background-size: contain;
}

#financial {
    background: url('assets/img/hero-background-financial.jpg') bottom center no-repeat;
    background-size: contain;
}

#cpg {
    background: url('assets/img/hero-background-consumer.jpg') bottom center no-repeat;
    background-size: contain;
}

/*****************SERVICES AREAS**********************/
section.subpage-service-areas  {
    max-height: 100%;
    height: auto;
}

section.subpage-service-areas h1 {
    color:var(--black);
}

div.service-areas {
    flex-basis: 100%;
    padding:5% 0;
}

div.service-areas ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
}

div.service-areas ul li {
    justify-content: flex-start;
    flex-basis: 18%;
    text-align: center;
}

div.service-areas ul li h4 {
   color:var(--white);
}

div.service-areas ul li p {
   color:var(--light-grey);
    font-size: 2vh;
    line-height: 3vh;
    text-align: center;
}


iframe {
    width:100%;
    height: 360px;
}