/************************************************************************************
GENERAL
*************************************************************************************/
*, # {
	
	padding-top:0px;
	padding-bottom:0px;	

}

/* for the footer */ 

html, body {

	height: 100%;

}

/*Opera Fix for footer*/

body:before {
	
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/

}

body {

	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #000000;
	padding:0px;
	margin:0px;
	letter-spacing:0.05em;
	/*background: transparent url(../images/bg_2.png) repeat;*/
	background-color: #fafafa;
	font-weight:200;

}

a {

	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	text-decoration: none;
	color: #000;
	margin:0px;
	padding:0px;
	font-size:0.9em;
	line-height:120%;
}

.whitetext, #summary.whitetext > p, #nav.whitetext > li a {

	color: #fff;
	
}

#summary.whitetext > p {

	padding-top:2.5em;
	
}

h1 {

	font-size: .875rem;
	font-weight:200;
}


h1 a {

	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	max-width: 50%;
	/*width: 300px;*/
	height: 97px;
	/*overflow: hidden;
	text-indent: -5000px;
	background: transparent url(../images/logo.png) no-repeat;*/
	background-position: 50% 50%;
	float:left;
	margin:20px 0 0 0;
	/*margin:20px;*/
	line-height: 1.6em;
	/*line-height: 120%;*/
	color: #000;
	font-size:.875rem;
	font-weight:200;

}

h2 {

	font-size: .875rem;
	Font-weight:200;
	line-height: 110%;
	margin: 0em;
	/*margin: 0.5em;*/
	color: #000;
	width: 100%;
	margin: 5% auto 0% auto;
   	padding: 10em 0% 2em 0%;
   
    max-width:1680px;
   /* background-color: #ede618 */

}

h3 {

	margin: 0;
	color: #000;
	padding: 1.3em 0 0 0;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	font-size:2.5em;
	line-height: 110%;
	letter-spacing:0.01em;	
	Font-weight:400;

}

.white h3, .white h2 {

	color: #FFF;
padding: 6em 0 0 0;

}



p {

	margin: 0.5em 0 0.5em 0;
	font-size: 0.8em;
	max-width: 70%;

}

p#summary,  {

	font-family: 'Oswald', serif;
	font-size:3.5em;
	line-height: 110%;
	letter-spacing:0.01em;
	margin: 0 2.5% 5% 2.5%;
	width:100%;

}

blockquote {
    font-family: 'Oswald', serif;
	font-size:3em;
	letter-spacing:0.01em;
	width: 500px;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1em;
    position: relative;
    color: #383838;
}

blockquote.principle {
    font-family: 'Oswald', serif;
	font-size:2em;
	letter-spacing:0.01em;
	width: 500px;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1em;
    position: relative;
    color: #383838;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}

blockquote.principle:before {
    display: block;
    padding-left: 10px;
    content: none;
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
}

blockquote.principle#smallquote:before {
    content: "\201C";
    position: absolute;
    left: -10px;
    top: -10px;
}

blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

blockquote cite:before {
    content: "\2014 \2009";
}
	
video {

		max-width: 100.1%;
		margin: 0;
		height: auto;

	}
	
* {box-sizing: border-box;}
.mySlides, .myPartner, .myLogo, .myFRinsight {display: none;}
.mySlides img, .myPartner img, .myLogo img, .myFRinsight img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot, .Partnerdot,.Logodot, .FRInsightdot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: none;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

.section {
  position: relative;
  min-height: 30%;
  padding: 40px;
  margin: auto;
  overflow:hidden;
}

.section .bg-move {
  position: absolute;
  top: 0;
  bottom: 0;
  right: auto;
  width: 100%;
  background-image: linear-gradient(to right, rgba(242, 242, 242, 1), rgba(242, 242, 242, 1) 8%, rgba(242, 242, 242, 0), rgba(242, 242, 242, 0), rgba(242, 242, 242, 0), rgba(242, 242, 242, 0), rgba(242, 242, 242, 0), rgba(242, 242, 242, 0)), url("../images/ML/journey_illustration_2.png");
  background-size: cover;
  background-position: right;
  
}

/************************************************************************************
FONTY BITZ
*************************************************************************************/
	
lh {

	font-weight:400;
	margin-bottom:1em;

}

Ul {

	margin:0;
	padding:0;

}

.role ul > li, .sprintList ul > li,  ul#team > li {

font-weight:200;
line-height:1.2em;
List-style:none;
font-size: .875rem;

}

section.threecol > p {
	
	width:30.8%;
	min-height:6em;
	float:left;
	margin: 2.5% 5% 2.5% 0%;
	text-align:left;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #000000;
	font-size:1.1em;
	font-weight:200;
	font-style:italic;
	line-height:1.4em;
	letter-spacing:0.05em;
	
}


section.fourcol > p {
	
	width:22.5%;
	min-height:6em;
	float:left;
	margin: 2.5% 5% 2.5% 0%;
	text-align:left;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #000000;
	font-size:1.1em;
	font-weight:200;
	font-style:italic;
	line-height:1.4em;
	letter-spacing:0.05em;
	
}

/*.role {

padding: 0 5% 0 5%;

}*/

section.skillz > p {
	
	max-width:28.3%;
	float:left;
	margin: 2.5% 5% 2.5% 0%;
	text-align:left;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #000000;
	font-size: .875rem;
	font-weight:200;
	font-style:normal;
	line-height:1.4em;
	letter-spacing:0.05em;
	
}

/* outcome only */
section.twocol > p {
	
	max-width:28.3%;
	min-height:6em;
	float:left;
	margin: 2.5% 5% 2.5% 0%;
	text-align:left;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #000000;
	font-size:1.1em;
	font-weight:200;
	font-style:italic;
	line-height:1.4em;
	letter-spacing:0.05em;
	
}

section.skillz#subhead >h3 {

	max-width:28.3%;

}

section.skillz#subhead >p {

	min-height:2em;

}

p.subhead, .skillz > p.subhead, .twocolIncMedia p.subhead, .headline p.subhead {

	font-size:1.5em;
	line-height:1.3em;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #101338;
	font-weight:200;
	font-style:normal;
	

}


section.half {

	max-width: 60%;

}

p.subhead.white {

	color: #ffffff;

}

.headline p.subhead {

	padding-top:4em;
	margin:0;

}

/*.twocol p.subhead {

	height:100%;
	display: flex;
	justify-content: center;
  	align-items: center;

}*/

.twocolIncMedia div {

	height:100%;
	display: block;
	justify-content: center;
  	align-items: center;

}

h3.twocol {

	max-width:70%;
	Padding:0 0 5% 0;
	margin:0;

}

.twocolIncMedia div.Challenge {

	justify-content: inherit;

}

.twocolIncMedia div.Left {

	justify-content: left;

}

.twocolIncMedia p.subhead span, p span.number {

	display:contents;
	font-size: .875rem;
	line-height:1.2em;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #101338;
	font-weight:200;
	display:block;
	margin: 1em 0 0 0;

}

p.subhead span.bold {

	font-weight:400;
}

.white p.subhead span, .white p.subhead {

	color: #FFF;

}

h4 {
		
	color: #000;
	
}
	
.headline h3 {

	max-width:45%;

}

.headline > h3#shis {

	margin-top:0%;

}

.headline p {

	max-width:45%;
	font-size:1em;
	font-weight:300;
	margin: 1em 0 0 0;
	
}

.twocolIncMedia section ul {

	min-width:100%;
	display:grid;
	justify-content: center;

}
	
section.cv p {
	
	padding: 1.3em 0 0 0;
	
}

section.cv li, h4 {
	
	font-size:0.9em;
	line-height: 110%;
	margin: 1.3em;
	
}
	
#download_button {

	width:100px;
	max-width:20em;
	height: 34px;
	padding:0px 20px;
	overflow: hidden;
	text-indent: 0px;
	background: rgba(0, 0, 0, 0.8) url(../images/download_active@2x.png) no-repeat;
	background-position: 90% 50%;
	background-size:20px 20px;
	/*float:right;*/
	line-height: 2em;
	display:block;
	/*margin:-3em 1em 0 0;*/

}
	
#download_button a {

	display:block;
	
}
	
#clear {
	
	clear:both;

}

/************************************************************************************
TRANSITIONS
*************************************************************************************/


/* Initial state for sections */
section {
  opacity: 0; /* Start fully transparent */
  transform: translateY(20px); /* Start with a downward offset of 20px */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Smooth transitions for both opacity and position */
}

/* Class applied when sections enter the viewport */
section.fade-in {
  opacity: 1; /* Fade to fully opaque */
  transform: translateY(0); /* Move to original position */
}

/* Initial state for paragraphs */
section p {
  opacity: 0; /* Start fully transparent */
  transform: translateY(20px); /* Start with a downward offset of 20px */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Smooth transition */
  transition-delay: 0s; /* This will be dynamically set in JavaScript */
}

/* Class applied when paragraphs enter viewport */
section p.animated {
  opacity: 1; /* Fade to fully opaque */
  transform: translateY(0); /* Move to original position */
}



/* Initial state for unordered lists */
ul {
  opacity: 0; /* Start fully transparent */
  transform: translateY(20px); /* Start with a downward offset of 20px */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Smooth transition */
}

/* Class applied when unordered lists enter viewport */
ul.animated {
  opacity: 1; /* Fade to fully opaque */
  transform: translateY(0); /* Move to original position */
}

/* Class to disable animations */
.no-animation {
  opacity: 1 !important; /* Ensure element is fully opaque */
  transform: translateY(0) !important; /* Ensure element is at its original position */
  transition: none !important; /* Remove transition effects */
}

/* Initial state for images */
section img, img.fr_logo {
  opacity: 0; /* Start fully transparent */
  transform: translateY(20px); /* Start with a downward offset of 20px */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* Smooth transition */
}

/* Class applied when images enter viewport */
section img.animated, img.fr_logo.animated {
  opacity: 1; /* Fade to fully opaque */
  transform: translateY(0); /* Move to original position */
}

/******** VENN ZEN *********/

/* Full-height placeholder */
.placeholder {
  height: 100vh;
  background-color: #e0e0e0; /* or any color to fit your design */
}

/* Hero section to center the venn diagram */
.hero#venn-box {
  display: flex;
  width: 100%;
  justify-content: center;
padding:100px 0 0 0;
}

/* Container for the venn diagram */
.venn-diagram {
	
position: relative;
  width: 600px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* General circle styles */
.circle {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: rgba(0, 150, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: white;
  transform: translateY(0); /* Initial position */
  opacity: 0; /* Start with 0% opacity */
  transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition for both transform and opacity */
}

/* Class applied when circles enter viewport */
.circle.animated {
  transform: translateY(-20%); /* Move up by 20px */
  opacity: 1; /* Fade to 100% opacity */
  transition-delay: var(--delay, 0s); /* Use a custom property for delay */
}
/* Apply individual delays to circles */
.circle.delayed {
  transition-delay: var(--delay);
}



/* Specific positions for each circle */
.circle1 {
  top: 2%;
  left: 25%;
  
}

.circle2 {
  top: 25%;
  left: 2%;
}

.circle3 {
  top: 25%;
  right: 2%;
}

.circle4 {
  bottom: 2%;
  left: 25%;
}

/************************************************************************************
GRIDS
*************************************************************************************/

/* Style for the image grid container */
.image-grid section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust the minmax value as needed */
    gap: 10px; /* Space between grid items */
    padding: 10px; /* Padding around the grid */
	padding: 2em 5% 2em 5%;
   	max-width: 1680px;
	width: 90%;
	margin: 0% auto 0% auto;
}

/* Style for the images */
.image-grid section img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any extra space below images */
    border-radius: 8px; /* Optional: rounded corners for images */
    object-fit: cover; /* Ensure images cover their containers without distortion */
}

/************************************************************************************
STRUCTURE
*************************************************************************************/

section.textcolumns {
  display: flex; /* Enables flexbox layout */
  flex-wrap: wrap; /* Allows content to wrap to the next line if needed */
  gap: 10px; /* Adds spacing between items */
}

section.textcolumns p {
  margin: 0; /* Removes default margin from paragraphs */
  flex: 1; /* Allows paragraphs to expand and take equal width */
}

.flex-container {

	display:flex;
	flex-direction: row;
	/*background-color: DodgerBlue;*/
	width:90%;
	height:100%;
	position: relative;
	padding:0;
	padding:5% 5% 5% 5%;
	margin:auto;

}

.flex-container > section.sprintDay {
  /* background-color: #f1f1f1; */
  width:20%;
  margin: 0;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  
 }

.sprintCircle {

	background-image: url("../images/ML/sprint_circle.png");
	background-size: contain;
  	background-repeat: no-repeat;
  	background-position: center;
  	width:100%;
  	height:65%;
  	display:block;
	align-items:center;

}

.sprintDiamond{

	background-image: url("../images/Diamond.png");
	background-size: contain;
  	background-repeat: no-repeat;
  	background-position: center;
  	width:100%;
  	height:65%;
  	display:block;
	align-items:center;

}

.sprintCircle h4, .sprintDiamond h4  {

	width:100%;
  	height:100%;
  	display: flex;
  	align-items: center;
  	text-align:center;
	margin:0;
	padding:25%;
	justify-content: center;
	font-family: 'Oswald', serif;
	font-size:0.7em;
}

.daySummary p {


	/*width:100%;
  	height:100%;
  	display: flex;*/
  	align-items: center;
  	text-align:left;
	margin:0;
	padding: 20% 5% 0 5%;
	justify-content: center;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #101338;
	font-weight:200;
	font-size:0.5em;
	max-width:100%;

}

.AdidasDaySummary p {

	align-items: center;
  	text-align:left;
	margin:0;
	padding: 0% 5% 0 5%;
	justify-content: center;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #101338;
	font-weight:200;
	font-size:0.5em;
	max-width:100%;

}

.shisBG {

	background-image: url("../images/Shis/ShisBG.jpg");
	background-size: cover;
  	background-repeat: no-repeat;


}

.shisBG > .insetImage, #wrapper > .shisBG {

	padding:0 5% 0 5%;

}

.shisBG > .height {

	height:100%;

}

.shispink {

	background-color: #ffe0f2;
	

}

.shissprint {

	display:flex;
  	align-items:center;

}

.shissprint section.insetImage {

	padding:5% 5% 5% 5%;

}

#ShisWoW {

	padding:7% 5% 5% 5%;

}

section#GIVoutcome {

	/*background-image: linear-gradient(to right, rgba(242, 242, 242, 1), rgba(242,242,242, 0), rgba(242, 242, 242, 0), rgba(242, 242, 242, 0), rgba(242, 242, 242, 0)), url("../images/ML/journey.png");*/
	background-image: url("../images/GIV/GIVcampaign.png");
	background-size: cover;
  	background-repeat: no-repeat;
  	height:30%;
  	background-color: #f2f2f2;
  	overflow:hodden;
  	
  	

}



.twocolIncMedia {
	
		content: " "; 
		display: table; 
		/*border-color: #666;
    	border-style: solid;
    	border-width: 0 0 1px 0;*/
    	width:90%;
    	/* height:110px; */
    	margin: 0% auto 0% auto;
    	padding: 2em 5% 2em 5%;
    	max-width:1680px;
    	/* background-color: #4ba4a6;*/
    	display:flex;
   
	
	}

.twocolIncMedia section {	
		
		margin: 2.5% 2.5% 0 0;
  		border-bottom: none;
  		float: left;
 		text-align: left;
 		text-overflow: ellipsis;
		padding:0px;
		/*background-color: rgba(255, 255, 255, 1);*/
		width:46.25%;
		flex: 1 0 46.25%;

	}

.sprintInfinity section {	
		
		margin: 2.5% 2.5% 0 0;
  		border-bottom: none;
  		float: left;
 		text-align: left;
 		text-overflow: ellipsis;
		width:46.25%;
		flex: 1 0 46.25%;

	}

.sprintInfinity > .sprintList{

	padding:2.5% 0% 5% 10%;

	}

.insetImage.sprintInfinity{

	
	background-image: url("../images/MBS369/Sprint.png");
	background-size: auto 90%;
  	background-repeat: no-repeat;
  	background-position: left;
	align-items:center;
	padding:5% 5% 5% 0;
	
	}
	
.twocolIncMedia section.itemFour {	
		
		overflow:hidden;

	}
	
#ShisProvocation {	
		
		min-height:70%;	
		display:flex;
  		align-items:center;

	}
	
#ShisProvocation .twocolIncMedia section {	
		
		margin: 0 2.5% 0 0;

	}
	
.twocol#textOnly section  {
		
		margin: 2.5% 2.5% 0 0%;	

	}
	
.twocolIncMedia section > img {
		
		padding:0px;
		width:100%;
		height:auto;

	}
	
.twocol section h2, .twocol section p, .twocol section ul {
	
		padding:5% 0 5% 0;	
		margin: 0 2.5% 0 0;
		width:100%;
		height:auto;

	}
	
.twocol section p, .twocol section ul {
	
		font-size: .875rem;
		font-weight:200;
		width:46.25%;
		float:left;

	}

section.twocol.outcome#SolutionOutcome, section.threecol.outcome#threecolbottompadding {

	padding: 0 1.25% 10% 1.25%;

}

section.threecol.outcome > div, section.threecol > div {

	margin: auto;

}

section.threecol > div {
	
	width:33.33%;
	float:left;
	
}

section.threecol > div img {
	
	align:center;
	
}


.three-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 5% 0 5%;
    Margin: 0 auto 0 auto;
    Width:90%;
    /* height: 100%; */
align-items: center;
}

.column {
    flex: 1 1 calc(33.33% - 20px); /* Each column takes 1/3 of the row */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: stretch; /* Ensures all images stretch to the full column height */
    max-width: 23%;
}

.column.mobile {
   max-width: 100%;
}

.column img {
    max-width: 100%;
    max-height: 100%;
    object-fit: scale-down; /* Ensures the images fill the area without distortion */
    display: block;
}	

	
section.twocol.outcome p, section.threecol.outcome p, section.fourcol.outcome p {
	
	font-size:1em;
	line-height:1.2em;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #101338;
	font-weight:200;
	display:block;
	font-style:normal;
	margin: 2.5% 1.25% 0 1.25%;
	text-align:center;

	}

section.threecol.outcome.white p, p span.number.white, .headline.role.white,  .headline.role.white p.subhead {


	color: #FFF;

	}

p span.number.white {


	margin: 0 0 0.1em 0;

	}
	
section.threecol p, section.fourcol p {
	
	font-size:1em;
	line-height:1.2em;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #101338;
	font-weight:200;
	display:block;
	font-style:normal;
	margin: 2.5% 1.25% 0 1.25%;
	text-align:left;

	}
	
	
section.twocol.outcome p {

	width: 28.3%;
	margin: 0 10.85% 0 10.85%;

}

p span.number {

	display:contents;
	font-size:5em;
	line-height:1.2em;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	text-align:center;
	color: #101338;
	font-weight:300;
	font-style:italic;
	display:block;
	margin: 1em 0 0.1em 0;

}

p.plus {
	
	display:contents;
	font-size:5em;
	line-height:1.2em;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	text-align:center;
	color: #101338;
	font-weight:300;
	font-style:italic;
	display:block;
	margin: 0.1em 0 0.1em 0;
	width:100%;
	max-width:100%;

}
	
	.twocol section h2 {
	
		padding:0px
		margin:0px;
		max-width:100%;

	}

.wrapper, footer {

	margin: 0 auto 0 auto;
	width:100%;
	/*background-color:#f2f2f2;*/

}

.height {

		
		height:67%;
		width:100%;

	}

#summary {

		margin: 0 auto 0 auto;
		width:100%;
		/*background-color:#4287f5;*/
		position:relative;
		width:90%;
		padding: 0 5% 0 5%;
		max-width:1680px;

	}
	

/* #header {

	background-color: #f00;

} */

/*

	#summary {

		background-color: #f00;

	}

*/

	#skillz, .grey {

		background-color:#f2f2f2;

	}

	.blue {

		background-color:#0a0a11;

	}

	.graphite {

		background-color:#3c3c48;

	}


	.graphiteMP4 {

		background-color:#454450;

	}

	.diamond {

		background-color:#fefefe;

	}

	.whitebg {

	background-color:#ffffff;

}

	.carbon {

	background-color:#282832;

}

	.black {

	background-color:#111111;

}

		

.headline {

	margin: 0 auto 0 auto;
	/*background-color:#f56342;*/
	position:relative;
	width:90%;
	padding: 0 5% 5% 5%;
	max-width:1680px;

}

.title, .CTA {

		margin: 0 auto 0 auto;
		width:90%;
		height:auto;
		/*background-color:#4287f5;*/
		position:relative;
		padding:0;
		max-width:1680px;
		padding: 0 5% 5% 5%;

}

.CTA h2 {

	padding: 0;
	margin: 0 auto 1em auto;
	
}
	
/*.title > h2, .headline h3 {
	
		padding: 2.5% 2.5% 2.5% 2.5%;
		width:95%;
	
	} */

.heroVid {

		margin: 0 auto 0 auto;
		width:100%;
		height:90%;
		/*background-color:#4287f5;*/
		position:relative;
		width:100%;
		max-width:1680;
		overflow:hidden;
		display: flex;
  		justify-content: center;
  		align-items: center;

	}
	
.hero {

	max-width:100%;
	height:auto;
	position: relative;
	padding:0;
	display:block;
	object-fit: scale-down;
	/*background-color:#4287f5;*/

}

.hero img {
	
	width:100%;
	object-fit: scale-down;

}

.ecoGrey {

	background-color: #e6e7e7;

}

.insetImage {

	width:90%;
	height:auto;
	position: relative;
	padding:0;
	display:block;
	/*background-color:#54248;*/

}

.insetImage > img {

	width:100%;

}

#MLHero1 {

	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/ML/Magic-Leap-Butterfly-16_9_home_optim.jpg");
	width:100%;
	height:100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	padding:0;
	display:block;
	/*background-color:#4287f5;*/

}

#MLHero2 {

	width:100%;
	height:100%;
	position: relative;
	padding:0;
	display:block;
	/*background-color:#4287f5;*/

}

.heroVid video {

	margin: 0;
  	/*position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);*/

}
	
section.skillz, .insetImage, .threecol, .twocol, .fourcol {
	
	/* height: 50%; */
/*	padding: 10em 0 10em 0; */
	/*background-color:#4bf542;*/
	margin:0 auto 0 auto;
	width:90%;
	padding: 7% 5% 7% 5%;
	max-width:1680px;
	display: flow-root;
	
}

section.skillz#subhead {

	padding: 7% 5% 0% 5%;

}

section.skillz.small {

	padding: 0% 5% 0% 5%;

}

.threecol {
	
	padding: 7% 5% 0 5%;
	
}

.threecol.NoVerticalMargin, .insetImage.NoVerticalMargin {

	padding: 0% 5% 0 5%;

}

.threecol.FullVerticalMargin, .twocol.FullVerticalMargin {

	padding: 7% 5% 10% 5%;

}

.threecol.BottomVerticalMargin, .twocol.BottomVerticalMargin {

	padding: 0% 5% 10% 5%;

}

.threecol.outcome, twocol .outcome, .section.outcome.grey {
	
	padding: 0% 5% 0 5%;
	
}

.section.outcome.grey {

	min-height:10%;

}

.twocol {

	padding: 0% 5% 1% 5%;

}

.insetImage {

	padding: 0 5% 7% 5%;

}

.insetImage.card {

	padding: 0 5% 3% 5%;

}

.insetImage#GIVworkshop {

	padding: 0 5% 0% 5%;

}

#center {
	
	visibility: visible;
	margin:0px auto;
	min-width:240px;
	max-width: 1023px;
	border:0px solid #f00;
	Padding: 0px;
	background: transparent;
	overflow:visible;
	min-height: 100%;

}

#content {
	
	width:100%;
	min-height:100%;
	/*background-color: #ffffff;*/
	border:0px solid #f00;
	padding: 0px 0px 0px 0px;
	/*-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);
    box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);*/
    overflow:auto
    

}

.slider{
	
	background-color: rgba(136, 128, 137, 0.8);
	padding: 0 0 1px 0;
	
}
	
a#back {
	
	display:none;
	
}


	
/********** FOOTER **********/

footer {

		position: relative;
		margin: 0 2.5% 0 2.5%;
		clear:both;
		background-color: rgba(255, 255, 255, 1);
		visibility: visible;
		min-width: 240px;
		max-width: 95%;
		text-overflow:ellipsis;
		overflow:hidden;

	}

	footer section {

		width:50%;
		display:block;
		clear:left;
		padding: 0;
		margin: 2.5% 2.5% 0 2.5%;
		text-overflow:ellipsis;
		overflow:hidden;
	

	}

footer p, footer address {

	color: rgba(0, 0, 0, 1);
	letter-spacing:0.2em;
	text-overflow:ellipsis;
	overflow:hidden;
	;

}

/********** THUMBS **********/

div.WorkHighlight {

	margin: 0 0 2.5% 0;
  	border-bottom: none;
  	float: left;
 	text-align: left;
 	text-overflow: ellipsis;
 	max-width: 300px;x
 	overflow: hidden;
	padding:0px;
	/*background-color: rgba(255, 255, 255, 1);*/
	width:100%;
	
}
	
	/*div.WorkHighlight img:hover, a > p:hover {
	
		opacity:0.5;
		filter:Alpha(opacity=50);
	
	} */  /* IE8 and earlier */

div.WorkHighlight img

{
  
	display: inline;
	padding:0px;
	margin:0px;
	width:100%;
	height:auto;

}


div.desc

{

	text-align: left;
	font-weight: normal;
	width: 120px;
	margin: 0px;
	padding:0px;

}


a > p {
	
	white-space: nowrap; */
	text-align:left;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	font-size:0.8em;
	text-decoration: none;
	font-weight:lighter;
	line-height: 1.4em;
	padding:0.1em 1em 0.5em 0.9em;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0px;
	text-align:left;
	background: transparent url(../images/desktop_chevron.png) no-repeat right top;
	background-size:auto 50%;
	background-position: 96% 25%;

}



/************************************************************************************
NAV
*************************************************************************************/

#nav-wrap {

	margin: 0px;

}

/* menu icon */
#menu-icon {

	display: none; /* hide menu icon initially */

}

#nav, 
#nav li {

	margin: 0;
	padding: 0;

}

#nav li {

	list-style: none;
	/*float:left;*/
}

/* nav link */
#nav a {
	
	/*padding: 4px 15px 4px 4px;*/
	line-height:1.6em;
	display: block;
	color: #000;
	/*background: #ecebeb;*/

}

#nav a.currentPage {
	
	text-decoration:underline;
	
}

#nav a:hover {

	background: #f8f8f8;

}

/* nav dropdown */
#nav ul {

	background: #fff;
	padding: 2px;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 200px;
	
}

#nav ul li {

	float: none;
	margin: 0;
	padding: 0;

}

#nav li:hover > ul {

	display: block; /* show dropdown on hover */

}

/************************************************************************************
DETAILS
*************************************************************************************/

#details {
	
	width: 100%;
	overflow:hidden;
	float:left;
	background-color: rgba(255, 255, 255, 1);

}

#details ul {

	

}

#details ul li {

	font-size: .875rem;
	line-height: 110%;
	margin: 0.8em;

}

/************************************************************************************
Carousel
*************************************************************************************/


/*.carousel-container {
  width: 90%;
  max-width: 1680px;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* Arrange carousel and buttons vertically */
  align-items: center;
  margin: 0 auto 0 auto;
  padding: 2em 0% 2em 5%;
}

.carousel-wrapper {
  width: 100%;
  overflow: visible;
}

.carousel {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%;
  display: flex;
  /*padding: 20px;*/
  box-sizing: border-box; /* Include padding in width calculation */
  /*background-color: #ffffff;*/
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
}


.carousel-text {
  padding: 0 10% 0 0;
  box-sizing: border-box; /* Include padding in width calculation */
}

.large-text, .small-text {
  flex: 1; /* Equal width for both columns */
  overflow: visible; /* Prevent content overflow */
}

.large-text {
  font-size: 9em;
  Line-height:1.05em;
  font-weight: bold;
  font-family: 'Oswald', serif;
  color:#000;
}

.small-text p {
  font-size: 1.2em;
  Font-weight:200;
  color: #333;
width: 400px;
}



.carousel-buttons {
  display: flex;
  justify-content: flex-start; /* Align buttons to the left */
  width: 100%; /* Full width to align buttons to the left side */
  margin-top: 30px;
}


.carousel-button {
  background-color: #000;
  color: white;
  border: none;
  padding: 17px 20px; /* Increase padding for better button size */
  cursor: pointer;
  margin: 0 10px; /* Space between buttons */
}*/

.carousel-container {
  width: 90%;
  max-width: 1680px;
  overflow: hidden; /* Ensures only one image is visible at a time */
  display: flex;
  flex-direction: column; /* Arrange carousel and buttons vertically */
  align-items: center; /* Center align carousel items */
  margin: 0 auto; /* Center the entire carousel container */
  padding: 2em 0 2em 0; /* Remove extra left padding */
  position: relative;
}

.carousel-wrapper {
  width: 100%;
  overflow: hidden; /* Hide overflow to prevent other images from showing */
}

.carousel {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  min-width: 100%; /* Each image takes up the full width of the carousel container */
  flex-shrink: 0; /* Prevent flex items from shrinking */
  display: flex;
  justify-content: center; /* Center the image within the carousel item */
  align-items: center;
  box-sizing: border-box;
}

.carousel-item img {
  max-width: 100%; /* Ensure the image doesn’t exceed the width of the carousel */
  max-height: 80vh; /* Set a max height so the image doesn't overflow vertically */
  object-fit: contain; /* Ensures the image maintains aspect ratio and stays fully visible */
  display: block;
}

/* Center align the carousel buttons */
.carousel-buttons {
  display: flex;
  justify-content: center; /* Center buttons horizontally */
  margin-top: 30px; /* Space between carousel and buttons */
  width: 100%; /* Full width of the container */
}

.carousel-button {
  background-color: #000;
  color: white;
  border: none;
  padding: 17px 20px;
  cursor: pointer;
  margin: 0 10px; /* Space between buttons */
}


/************************************************************************************
MOBILE
Landscape and portrait in a two column
*************************************************************************************/

@media screen and (max-width: 767px) {
	
	
	section.threecol > p, section.twocol.outcome p {
	
	max-width:95%;
	width:95%;
	min-height:4em;
	float:left;
	margin: 2.5% 5% 2.5% 0%;
	/*text-align:left;*/
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #000000;
	font-size:1.1em;
	font-weight:200;
	font-style:italic;
	line-height:1.4em;
	letter-spacing:0.05em;
	
}

section.twocol.outcome p, section.threecol.outcome p {
	
		font-size:1em;
		line-height:1.2em;
		font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
		color: #101338;
		font-weight:200;
		display:block;
		font-style:normal;
		margin: 2.5% 2.5% 0 0

	}
	
section.twocol.outcome > p {
	
	margin: 5% 5% 5% 0%;
	
	}
	
	.twocolIncMedia {
	
		display:flex;
		flex-direction:column;
		width:95%;
		padding: 2em 0 2em 0;
	
	}
	
	.twocolIncMedia section {	
		
		margin: 2.5% 2.5% 0 0;
  		border-bottom: none;
 		text-align: left;
 		text-overflow: ellipsis;
		padding:0px;
		/*background-color: rgba(255, 255, 255, 1);*/
		width:100%;
		flex: 1 0 100%;

	}
	
	.CTA {
	
	width:100%;
	padding-left: 2.5%; 
	
	}

	
	.twocol#textOnly section  {
		
		margin: 2.5% 2.5% 0 0%;	

	}
	
	.twocolIncMedia section > img {
		
		padding:0px;
		width:100%;
		height:auto;

	}
	
	.twocol, .twocol.outcome {
	
		padding: 7% 5% 7% 5%;
		width:90%;
	
	}
	.headline {
	
		margin: 0 auto 0 auto;
		width:100%;
		height:auto;
		position:relative;
		padding:0;
	
	}
	
	.headline.role {
	
		margin: 0 auto 7% auto;

	
	}
	
	section.skillz {
	
		width:95%;
		padding: 5% 5% 5% 0;
	
	}
	
	.skillz section {
	
		padding: 2.5% 0 2.5% 0;
		margin: 0;
	
	}
	
	#summary {

		margin: 0 auto 0 auto;
		width:100%;
		/*height:70%;*/
		/*background-color:#4287f5;*/
		position:relative;
		padding:0;
		display:flow-root;

	}
	
	#summary > p {

		font-family: Neue Haas Grotesk Text Pro,system-ui,sans-serif
		font-size:2.4em;
		line-height: 110%;
		letter-spacing:0.01em;
		font-weight:400;
		width:100%;
		height:90%;
		color:#101338;
		position: absolute;
  		top: 50%;
 		 -ms-transform: translateY(-50%);
  		transform: translateY(-50%);	

	}
	
	.title {

		margin: 0 auto 0 auto;
		width:100%;
		height:auto;
		/*background-color:#4287f5;*/
		position:relative;
		padding:0;

	}
	
	.title > h2, .headline h3, .headline ul {
	
		padding: 2.5% 0% 2.5% 0%;
		width:95%;
		max-width:95%;
		margin: auto 2.5% auto 2.5%;
	
	}
	
	body {
	
		font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
		color: #000000;
		padding:0px;
		margin:0px;
		background: #fafafa;
	
	}

	/* nav-wrap */
	#nav-wrap {
	
		position: relative;
	
	}
	
	header {
	
		content: " "; 
		display: table; 
		background-color: #ffffff;
	    /*background: transparent url(../images/masthead.png) repeat; */
	    background-position: 0% 0%;
	    background-size:44px 44px;
	    /*border-color: #666;
	    border-style: solid;
	    border-width: 0 0 1px 0;*/
	    width:100%;
	    height:44px;

	}

	/* menu icon */
	#menu-icon {
	
		color: #000;
		width: 35px;
		height: 29px;
		background: transparent url(../images/menu-icon@2x.png) no-repeat 10px center;
		background-size:35px 29px;
		background-position: 50% 50%;
		padding: 0px;
		cursor: pointer;
		border: solid 0px #666;
		display: block; /* show menu icon */
		float:right;
		position:absolute;
		right:7px;
		margin: 7px 7px;
	
	}
	
	#menu-icon:visited {
	
		background: transparent url(../images/mobile_loading.gif) no-repeat 10px center;
		background-size:35px 29px;
		background-position: 50% 50%;

	}

	#menu-icon:hover {

		background: transparent url(../images/menu-icon-visited.png) no-repeat 10px center;
		background-size:35px 29px;
		background-position: 50% 50%;

	}

	#menu-icon.active {

		background: transparent url(../images/menu-icon-visited.png) no-repeat 10px center;
		background-size:35px 29px;
		background-position: 50% 50%;
	}
	
	/* main nav */

	#nav {

		clear: both;
		position: absolute;
		top: 100px;
		width: 100%;
		z-index: 10000;
		padding: 0px;
		background: #ffffff;
		border: solid 0px #999;
		display: none; /* visibility will be toggled with jquery */
		-webkit-box-shadow:  0px 5px 5px 0px rgba(0, 0, 0, 0.5);
         box-shadow:  0px 5px 5px 0px rgba(0, 0, 0, 0.5);

	}

	#nav li {

		clear: both;
		float: none;
		margin: 0px 2.5% 0px 2.5%;
		padding: 22px 0px 22px 0px;
		border-bottom: solid 1px #e6e6e6;
		-webkit-box-shadow:  0px 1px 0px 0px rgba(255, 255, 255, 1);
        box-shadow:  0px 1px 0px 0px rgba(255, 255, 255, 1);
       /* background: transparent url(../images/mobile_chevron.png) no-repeat right top;*/
		background-size:auto 30%;
		background-position: 98% 50%;
		font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
		font-size:0.8em;

	}
	
	#nav li a {
	
		display:block;
	
	}
	
	#nav li:last-child {
		
		border-bottom: solid 0px #e6e6e6;
		-webkit-box-shadow:  0px 0px 0px 0px rgba(255, 255, 255, 1);
         box-shadow:  0px 0px 0px 0px rgba(255, 255, 255, 1);
	}
	
	#nav a, 
	#nav ul a {

		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #000000;
		border: none;

	}

	#nav a:hover, 
	#nav ul a:hover {

		background: none;
		color: #000;

	}
	
	#nav li:hover {
		
		background: transparent url(../images/mobile_chevron_active.png) no-repeat right top;
		background-size:auto 30%;
		background-position: 98% 50%;
		
	}

	#nav li:visited {
		
		background: transparent url(../images/mobile_loading.gif) no-repeat right top;
		background-size:auto 30%;
		background-position: 98% 50%;
		
	}
	
	/* dropdown */
	#nav ul {

		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;

	}

	#nav ul li {

		margin: 3px 0 3px 15px;
	}
	
	h1 a {

		width: 100%;
		/*height: 30px;
		overflow: hidden;
		text-indent: -5000px;*/
		/* background: transparent url(../images/mobile_logo.png) no-repeat; */
		background-position: 50% 50%;
		background-size:50px 29px;
		margin: 7px 2.5% 0 2.5%;
		font-size:0.7em;

	}
	
	a#back {
	
		width: 38px;
		height: 29px;
		overflow: hidden;
		text-indent: -5000px;
		background: transparent url(../images/back@2x.png) no-repeat;
		background-position: 50% 50%;
		background-size:38px 29px;
		margin: 7px 0;
		position:absolute;
		left:7px;
		display:block;
	
	}
	
	a#back:hover {
		
		background: transparent url(../images/back_active@2x.png) no-repeat;
		background-position: 50% 50%;
		background-size:38px 29px;
		
	}
	
	/****** CV ******/
	


	h3 {
	
		font-size:1.8em;
		line-height: 110%;

	}
	
	h4 {
	
		font-size:0.9em;
		line-height: 110%;
		margin: 0.5em;
		color: #000;
	
	}

	section.cv li {

		font-size:0.9em;
		line-height: 110%;
		margin: 0.5em;

	}
	
	section.cv p {

		margin: 0.5em;
	
	}

	#download_button {

		width:100px;
		max-width:20em;
		height: 34px;
		padding:0px 20px;
		overflow: hidden;
		text-indent: 0px;
		background: rgba(0, 0, 0, 0.8) url(../images/download_active@2x.png) no-repeat;
		background-position: 90% 50%;
		background-size:20px 20px;
		float:right;
		line-height: 2em;
		display:block;
		margin:-2.6em 0.5em 0 0;

	}
	
	#download_button:hover {
		
		width:100px;
		max-width:20em;
		height: 34px;
		padding:0px 20px;
		overflow: hidden;
		text-indent: 0px;
		background: rgba(0, 0, 0, 0.8) url(../images/mobile_button_loading.gif) no-repeat right top;
		background-position: 90% 50%;
		background-size:20px 20px;
		float:right;
		line-height: 2em;
		display:block;
		margin:-2.6em 0.5em 0 0;
		
	}

	p {

		display: block;
		padding:0px;
		margin: 2.5% 2.5% 2.5% 2.5%;
		font-size: 0.8em;
		max-width: 95%;	

	}
	
	.square > p, .square > .casestudylink {
	
		margin: 2.5% 0 2.5% 0;
	
	}
	
	.casestudylink {
	
		margin: 2.5%;
	
	}

	p#summary {

		font-family: 'Oswald', serif;
		font-size:2.3em;
		line-height: 110%;
		letter-spacing:0.01em;
		margin: 0 2.5% 2.5% 2.5%;

	}
	
	footer p, footer section {
	
		margin: 2.5% 0 0 0;
	
	}

}

@media

	screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5),
	screen and (max-width: 767px) and (-o-min-device-pixel-ratio: 3/2),
	screen and (max-width: 767px) and (min--moz-device-pixel-ratio: 1.5),
	screen and (max-width: 767px) and (min-device-pixel-ratio: 1.5)
	
{
		
	header {
			
		background: transparent;
		background-position: 0% 0%;
		background-size:44px 44px;
		
	}
		
	h1 {

		background: transparent url(../images/mobile_logo@2x.png) no-repeat;
		background-position: 50% 50%;
		background-size:58px 29px;

	}
		
	#menu-icon {
		
		background: transparent url(../images/menu-icon@2x.png) no-repeat 10px center;
		background-size:35px 29px;
		background-position: 50% 50%;
		
	}
		
	#menu-icon:visited {
		
	background: transparent url(../images/menu-icon-visited@2x.png) no-repeat 10px center;
	background-size:35px 29px;
	background-position: 50% 50%;
		
	}
		
	#nav li:hover {
		
	background: transparent url(../images/mobile_loading.gif) no-repeat right top;
	background-size:auto 30%;
	background-position: 98% 50%;
		
	}

}

@media screen and (min-width: 768px) {

	/* ensure #nav is visible on desktop version */
	#nav, #team {
		
		display: block !important;
		float:right;
	
	}
	
	#team {
	
		margin: 5% 0 5% 0%;
		font-weight:200;
		font-size: .875rem;
	
	}
	
	#nav {
		
		margin: 20px 0 0 0;
		/*margin: 45px 0 0 0;*/
		padding: 0;
	
	}
	
	header {
	
		content: " "; 
		display: table; 
		/*border-color: #666;
    	border-style: solid;
    	border-width: 0 0 1px 0;*/
    	width:90%;
    	height:110px;
    	margin: 0% auto 0% auto;
    	padding: 2em 5% 2em 5%;
    	max-width:1680px;
    	/*background-color: #f00;*/
	
	}
	

}

/************************************************************************************
RESPONSIVE LAYOUTS
*************************************************************************************/

/* Desktop, laptop or tablet (landscape orientation) 4 column*/

@media only screen and (min-width: 1366px) {

	section.skillz > p{
	
	max-width:28.3%;
	min-height:6em;
	float:left;
	margin: 2.5% 5% 2.5% 0%;
	text-align:left;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #000000;
	font-size: .875rem;
	font-weight:200;
	font-style:normal;
	line-height:1.4em;
	letter-spacing:0.05em;
	
}
	
	#center {
	
		visibility: visible;
		margin:0px auto;
		min-width:240px;
		max-width: 100%;
		border:0px solid #f00;
		Padding: 0px;
		background: transparent;
		overflow:visible;

	}

	#content {
		
		width:90%;
		min-height:100%;
		background-color: #ffffff;
		border:0px solid #f00;
		padding: 0px 0px 0px 0px;
		/*-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);
    	box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);*/
    	overflow:auto;
    	margin: 0 5% 0 5%;
	}
	
	.FullWidth {
		
		width:100%;
		min-height:100%;
		background-color: #ffffff;
		border:0px solid #f00;
		padding: 0px 0px 0px 0px;
		/*-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);
    	box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);*/
    	overflow:auto;
    	margin: 0%;
	}
	
	#nav {
		
		margin: 20px 0 0 0;
		padding: 0;
	
	}
	
	h1 a {
	
		margin-left:0;
	
	}
	
	.slider{
	
		width:66.66%;
		float:right;
		background-color: rgba(136, 128, 137, 0.8);
	
	}
	
	a#back {
	
		display:none;
	
	}
	
	.overview {

		margin: 2.5% 0 2.5% 2.5%;
  		border-bottom: none;
  		float: left;
  		width:46.25%;
 		text-align: left;
 		overflow: hidden;
		padding:0px;
		background-color: rgba(255, 255, 255, 1);

	}
	
	.overview > p {
	
		max-width:100%;
	
	}
	
	#context {
	
	margin: 2.5% 0 0 2.5%;
	max-width: 40%;
	
	}
	
	
	#summary > p {

		font-family: Neue Haas Grotesk Text Pro,system-ui,sans-serif;
		font-size:3.5em;
		line-height: 110%;
		letter-spacing:0.01em;
		/*margin: 0 5% 5% 5%;*/
		width:100%;
		height:100%;
		color:#101338;
		position: absolute;
  		top: 75%;
 		 -ms-transform: translateY(-50%);
  		transform: translateY(-50%);	
		font-weight:400;

	}
	
	.height#MLtitle{
	
		height:50%;
	
	}

	.height.logos {
	
		height:50%;
		display:flex;
		align-items: center;
	
	}
	
	.height#research {
	
		height:50%;
	
	}
	
	.height#nextsteps {
	
		height:90%;
		padding:6em 0 6em 0;
	
	}
	
	.height#GIVtitle {
	
		height:70%;
	
	}
	
	.height#ADtitle {
	
		height:90%;
		background-image: url("../images/brandx/image1-17_BW.jpg");
  		background-size: cover;
  		background-position: center;
	
	}
	
	.MLblack {
	
		background-color:#171717;
	
	}

	
	/********** ABOUT **********/
	
	section.cv {
		
		width:33.33%;
		float:left;

	}
	
	h4 {
		
		color: #000;
	
	}
	
	.overview > h2  {
	
		font-family: 'Oswald', serif;
		margin: 0 5% 5% 5%;
		font-size:2em;
	
	}
	
	section.cv p {
	
		margin: 1.5em;
	
	}

	section.cv li, h4 {
	
		font-size:0.9em;
		line-height: 110%;
		margin: 1.5em;
	
	}

	/********** FOOTER **********/

	footer {

		position: relative;
		margin: 0 auto 0 auto;
		width:100%;
		clear:both;
		background-color: rgba(255, 255, 255, 1);
		visibility: visible;
		min-width: 240px;
		max-width: 1680px;
		text-overflow:ellipsis;
		overflow:hidden;

	}

	footer section {

		width:50%;
		display:block;
		clear:left;
		padding: 0;
		margin: 2.5% 2.5% 0 5%;
		text-overflow:ellipsis;
		overflow:hidden;
	

	}

	footer p, footer address {

		color: rgba(0, 0, 0, 0.8);
		letter-spacing:0.2em;
		text-overflow:ellipsis;
		overflow:hidden;

	}

	#container {
	
		padding-bottom: 200px;
	
	}
	
/************************************************************************************
DETAILS
*************************************************************************************/

	#details {
	
		width: 33.33%;
		overflow:hidden;
		float:left;

	}

	#details ul {

	

	}

	#details ul li {

		font-size: .875rem;
		line-height: 110%;
		margin: 0.8em;

	}

	/********** THUMBS **********/

	div.WorkHighlight {

		margin: 2.5% 2.5% 0 2.5%;
  		border-bottom: none;
  		float: left;
 		text-align: left;
 		text-overflow: ellipsis;
 		overflow: hidden;
		padding:0px;
		background-color: rgba(255, 255, 255, 1);
		width:95%;
	
	}
	
	

	div.WorkHighlight img {
	
		display: inline;
		padding:0px;
		margin:0px;
		width:100%;
		height:auto;

	}


	div.desc {
	
		text-align: left;
		font-weight: normal;
		width: 120px;
		margin: 0px;
		padding:0px;

	}

	a > p {
	
		white-space: nowrap; */
		text-align:left;
		font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
		font-size:0.8em;
		text-decoration: none;
		font-weight:lighter;
		line-height: 1.4em;
		padding:0.1em 0 0.5em 0.9em;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0px;
		text-align:left;
		background: transparent url(../images/desktop_chevron.png) no-repeat right top;
		background-size:auto 70%;
		background-position: 98% 20%;

	}
	
	p.description {

		max-width: 40%;

	}
	
	.square p.description {
	
		max-width: 100%;	
	
	}

}

/*Smaller than standard 960 (devices and browsers)
@media only screen and (max-width: 959px) {

	#summary {

		margin: 0 auto 0 auto;
		width:100%;
		background-color:#4287f5;
		position:relative;
		width:90%;
		padding: 0 5% 0 5%;
		max-width:1680px;
		display:flow-root;

	}

}*/

/* 960 screens to 1440 screens (devices and browsers) 3 column*/
@media only screen and (min-width: 1024px) and (max-width: 1365px) {

	.itemOne {
	
		order:1;
	
	}
	
	.itemTwo {
	
		order:2;
	
	}
	
	.itemThree {
	
		order:4;
	
	}
	
	.itemFour {
	
		order:3;
	
	}
	
	.itemFive {
	
		order:5;
	
	}
	
	.itemSix {
	
		order:6;
	
	}
	
	.itemSeven {
	
		order:8;
	
	}
	
	.itemEight {
	
		order:7;
	
	}
	
	.itemNine {
	
		order:9;
	
	}
	
	.itemTen {
	
		order:10;
	
	}

	.itemEleven {
	
		order:12;
	
	}

	.itemTwelve {
	
		order:11;
	
	}

	
	#summary > p {

		font-family: 'Oswald', serif;
		font-size:3.5em;
		line-height: 110%;
		letter-spacing:0.01em;
		width:100%;
		height:90%;
		color:#101338;
		position: absolute;
  		top: 65%;
 		 -ms-transform: translateY(-50%);
  		transform: translateY(-50%);	

	}
	
	section.skillz > p{
	
	max-width:28.3%;
	min-height:9em;
	float:left;
	margin: 2.5% 5% 2.5% 0%;
	text-align:left;
	font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
	color: #000000;
	font-size: .875rem;
	font-weight:200;
	font-style:normal;
	line-height:1.4em;
	letter-spacing:0.05em;
	
}

	#center {
	
		visibility: visible;
		margin:0px auto;
		min-width:240px;
		max-width: 80%;
		border:0px solid #f00;
		Padding: 0px;
		background: transparent;
		overflow:visible;

	}
	
	

	#content {
		
		width:100%;
		min-height:100%;
		background-color: #ffffff;
		border:0px solid #f00;
		padding: 0px 0px 0px 0px;
		/*-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);
    	box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);*/
    	overflow:auto;
    	margin: 0 2.5% 0 2.5%;
	}
	
	.slider{
	
		width:66.66%;
		float:right;
		background-color: rgba(136, 128, 137, 0.8);
	
	}
	
	a#back {
	
		display:none;
	
	}
	
	/********** ABOUT **********/
	
	section.cv {
		
		width:50%;
		float:left;

	}
	
	h4 {
		
		color: #000;
	
	}
	

	
	
	h3, section.cv p {
	
		padding: 1.3em 0 0 0;
	
	}

	section.cv li, h4 {
	
		font-size:0.9em;
		line-height: 110%;
		margin: 1.3em;
	
	}

	/********** FOOTER **********/

	footer {

		position: relative;
		margin: 0 2.5% 0 2.5%;
		clear:both;
		background-color: rgba(255, 255, 255, 1);
		visibility: visible;
		min-width: 240px;
		max-width: 95%;
		text-overflow:ellipsis;
		overflow:hidden;

	}

	footer section {

		width:50%;
		display:block;
		clear:left;
		padding: 0;
		margin: 2.5% 2.5% 0 2.5%;
		text-overflow:ellipsis;
		overflow:hidden;
	

	}

	footer p, footer address {

		color: rgba(0, 0, 0, 0.8);
		letter-spacing:0.2em;
		text-overflow:ellipsis;
		overflow:hidden;

	}
		

	

	
/************************************************************************************
DETAILS
*************************************************************************************/

	#details {
	
		width: 33.33%;
		overflow:hidden;
		float:left;
		background-color: rgba(255, 255, 255, 1);

	}

	#details ul {

	

	}

	#details ul li {

		font-size: .875rem;
		line-height: 110%;
		margin: 0.8em;
		font-weight:200;

	}
	
	

	/********** THUMBS **********/

	div.WorkHighlight {

		margin: 2.5% 0 0 2.5%;
  		border-bottom: none;
  		float: left;
 		text-align: left;
 		overflow: hidden;
 		text-overflow: ellipsis;
		padding:0px;
		background-color: rgba(255, 255, 255, 1);
		width:100%;
	
	}
	
	div.square {
	
		
		margin: 2.5% 0 0 2.5%;
  		border-bottom: none;
  		float: left;
 		text-align: left;
 		overflow: hidden;
 		text-overflow: ellipsis;
		padding:0px;
		background-color: rgba(255, 255, 255, 1);
		width:47.5%;

	}
	

	div.WorkHighlight img {
	
		display: inline;
		padding:0px;
		margin:0px;
		/*width:30%; */
		height:auto;

	}


	div.desc {
	
		text-align: left;
		font-weight: normal;
		width: 120px;
		margin: 0px;
		padding:0px;

	}


	/*	a > p {
	
		white-space: nowrap; / - WAS BROKEN
		text-align:left;
		font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
		font-size:0.8em;
		text-decoration: none;
		font-weight:lighter;
		line-height: 1.4em;
		padding:0.1em 0 0.5em 0.9em;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0px;
		text-align:left;
		background: transparent url(../images/desktop_chevron.png) no-repeat right top;
		background-size:auto 70%;
		background-position: 98% 20%;

	} */

	p .description {

	max-width: 50%;

	}
	
}


/* Tablet Portrait size to standard 960 (devices and browsers) 2 column*/
@media only screen and (max-width: 900px) {
	
	section.skillz > p {
	
	max-width:45%;
	
	
}

}

/* Tablet Portrait size to standard 960 (devices and browsers) 2 column*/
@media only screen and (min-width: 768px) and (max-width: 1023px) {

	
	.itemOne {
	
		order:1;
	
	}
	
	.itemTwo {
	
		order:2;
	
	}
	
	.itemThree {
	
		order:4;
	
	}
	
	.itemFour {
	
		order:3;
	
	}
	
	.itemFive {
	
		order:5;
	
	}
	
	.itemSix {
	
		order:6;
	
	}
	
	.itemSeven {
	
		order:8;
	
	}
	
	.itemEight {
	
		order:7;
	
	}
	
	.headline h3 {

	max-width:100%;
	margin: 5% auto 0 auto;


}

	
	#summary > p {

		font-family: 'Oswald', serif;
		font-size:3em;
		line-height: 110%;
		letter-spacing:0.01em;
		
		width:100%;
		height:90%;
		color:#101338;
		position: absolute;
  		top: 70%;
 		 -ms-transform: translateY(-50%);
  		transform: translateY(-50%);	

	}
	
	section.skillz > p {
	
	max-width:45%;
	min-height:9em;
	float:left;
	margin: 0 5% 0 0;
	text-align:left;	
	font-size: .875rem;
	line-height:1.3em;
	letter-spacing:0.05em;
	
}
	
	#center {
	
		visibility: visible;
		margin:0px auto;
		min-width:240px;
		max-width: 80%;
		border:0px solid #f00;
		Padding: 0px;
		background: transparent;
		overflow:visible;

	}

	#content {
		
		width:95%;
		min-height:100%;
		background-color: #ffffff;
		border:0px solid #f00;
		padding: 0px 0px 0px 0px;
		/*-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);
    	box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);*/
    	overflow:auto;
    	margin: 0 2.5% 0 2.5%;
	}
	
	#nav {
	
		margin: 20px 2.5% 0 0;
		/*margin: 45px 0 0 0;*/
		padding: 0;
	
	}
	
	.slider{
	
		background-color: rgba(136, 128, 137, 0.8);
		padding: 0 0 1px 0;
	
	}
	
	a#back {
	
		display:none;
	
	}
	
	h4 {
		
		color: #000;
	
	}
	
	p {
	
		max-width:80%;
	
	}
	
	p#summary {

		font-family: 'Oswald', serif;
		font-size:3em;
		line-height: 110%;
		letter-spacing:0.01em;
		margin: 0 2.5% 8% 2.5%;

	}

	section.cv li, h4 {
	
		font-size:0.9em;
		line-height: 110%;
		margin: 1.3em;
	
	}

	/********** FOOTER **********/

	footer {

		position: relative;
		margin: 0 2.5% 0 2.5%;
		clear:both;
		background-color: rgba(255, 255, 255, 1);
		visibility: visible;
		min-width: 240px;
		max-width: 95%;
		text-overflow:ellipsis;
		overflow:hidden;

	}

	footer section {

		width:50%;
		display:block;
		clear:left;
		padding: 0;
		margin: 2.5% 2.5% 0 2.5%;
		text-overflow:ellipsis;
		overflow:hidden;
	

	}

	footer p, footer address {

	color: rgba(0, 0, 0, 1);
	
	letter-spacing:0.2em;
	
	text-overflow:ellipsis;
	
	overflow:hidden;

}
	
	/************************************************************************************
	DETAILS
	*************************************************************************************/

/*	#details {
	
		width: 100%;
		overflow:hidden;
		float:left;
		background-color: rgba(255, 255, 255, 1);

	}

	/********** THUMBS **********/

	div.WorkHighlight {

		margin: 2.5% 0 0 2.5%;
  		border-bottom: none;
  		float: left;
 		text-align: left;
 		text-overflow: ellipsis;
 		max-width: 300px;
 		overflow: hidden;
		padding:0px;
		background-color: rgba(255, 255, 255, 1);
		width:95%;
	
	}
	
	

	div.WorkHighlight img {
	
		display: inline;
		padding:0px;
		margin:0px;
		width:100%;
		height:auto;

	}


	div.desc {
	
		text-align: left;
		font-weight: normal;
		width: 120px;
		margin: 0px;
		padding:0px;

	}
	
	div.square {
	
		
		margin: 2.5% 0 0 2.5%;
  		border-bottom: none;
  		float: left;
 		text-align: left;
 		overflow: hidden;
 		text-overflow: ellipsis;
		padding:0px;
		background-color: rgba(255, 255, 255, 1);
		width:46.25%;

	}
	
	div.square img {
	
		display: inline;
		padding:0px;
		margin:0px;
		width:100%;
		height:auto;

	}


	a > p {
	
		white-space: nowrap; */
		text-align:left;
		font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
		font-size:0.8em;
		text-decoration: none;
		font-weight:lighter;
		line-height: 1.4em;
		padding:0.1em 0 0.5em 0.9em;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0px;
		text-align:left;
		background-size:auto 70%;
		background-position: 98% 20%;

	}
	
	video {

		/*max-width: 50%;*/
		height: auto;

	}

}

/* All Mobile Sizes (devices and browser)
@media only screen and (max-width: 767px) {} */



/* Mobile Landscape to Tablet Portrait (devices and browsers) 3 column*/
@media only screen and (min-width: 480px) and (max-width: 767px) {

	
	#summary > p {
	
		font-size:2.8em;
	
	}


}

All Mobile Sizes (devices and browser)
@media only screen and (min-width: 641px) {

	section.skillz > p {
	
	width:45%;
	max-width:45%;
	min-height:9em;
	float:left;
	margin: 0 2.5% 5% 0%;
	text-align:left;
	
	font-size: .875rem;
	line-height:1.3em;
	letter-spacing:0.05em;
	
}

	

}



/* Mobile Portrait to Mobile Landscape Size(devices and browsers) 2 column*/
@media only screen and (max-width: 640px) {

	.headline h3 {

	max-width:100%;
	margin:5% auto 0 auto;

}

.headline > h3#shis {

	margin:0% auto 0 auto;

}

.twocol section p {

	width:100%;
	margin:5% auto 0 auto;

}

.twocol {

	width:95%;
	padding:0;

}
	
	.section.skillz {
	
		height:auto;
	
	}

	section.skillz > p {
	
	width:100%;
	max-width:100%;
	/*min-height:5em;*/
	margin: 0 2.5% 5% 0%;
	text-align:left;
	font-size: .875rem;
	line-height:1.3em;
	letter-spacing:0.05em;
	
}
	
	#center {
	
		visibility: visible;
		margin:0px auto;
		min-width:240px;
		max-width: 100%;
		border:0px solid #f00;
		Padding: 0px;
		background: transparent;
		overflow:visible;

	}

	#content {
		
		width:100%;
		min-height:100%;
		background-color: #ffffff;
		border:0px solid #f00;
		padding: 0px 0px 0px 0px;
		/*-webkit-box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);
    	box-shadow:  0px 0px 10px 1px rgba(0, 0, 0, 0.6);*/
    	overflow:auto
	}
	
	/********** FOOTER **********/

	footer {

		position: relative;
		margin: 0 2.5% 0 2.5%;
		clear:both;
		background-color: rgba(255, 255, 255, 1);
		visibility: visible;
		min-width: 240px;
		max-width: 95%;
		text-overflow:ellipsis;
		overflow:hidden;

	}

	footer section {

		width:50%;
		display:block;
		clear:left;
		padding: 0;
		margin: 2.5% 2.5% 0 2.5%;
		text-overflow:ellipsis;
		overflow:hidden;
	

	}

	footer p, footer address p {

		color: rgba(0, 0, 0, 1);
		letter-spacing:0.2em;
		text-overflow:ellipsis;	
		overflow:hidden;

	}

	footer address p {
	
		line-height: 2.5em;

	}

	#container {
	
		padding-bottom: 320px;

	}

	a > p {
	
		white-space: nowrap; */
		text-align:left;
		font-family: Neue Haas Grotesk Text Pro, system-ui, sans-serif;
		font-size:0.8em;
		text-decoration: none;
		font-weight:lighter;
		line-height: 1.4em;
		padding:0.1em 1em 0.5em 0.9em;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0px;
		text-align:left;
		background: transparent url(../images/desktop_chevron.png) no-repeat right top;
		background-size:auto 70%;
		background-position: 98% 20%;
		letter-spacing:0.3em;

	}

}

/* Mobile Portrait to Mobile Landscape Size(devices and browsers) 2 column*/
@media only screen and (max-width: 370px) {

	.section.skillz {
	
		height:auto;
		margin:0;
		padding:0;
	
	}

	section.skillz > p {
	
	
	font-size: .875rem;
	margin:2.5% 0 2.5% 0;
	
}

.skillz section {
	
		padding: 2.5% 0 2.5% 0;
		margin: 2.5% 0 2.5% 0;
	
	}

}

/* Mobile Portrait to Mobile Landscape Size(devices and browsers) 2 column*/
@media only screen and (min-width: 568px) and (max-width:767px) {

	.height {
	
		height:90%;
	
	}

}

@media only screen and (min-width: 1024px) and (orientation: portrait) {


	.height { 
	
		height:37%
	
	}
	
	.shisBG.height {

		height:100%;

	}

}

@media only screen and (min-width: 812px) and (orientation: landscape) {


	.height { 
	
		height:90%;
	
	}
	
	.shisBG.height {

		height:100%;

	}
	
	.itemOne {
	
		order:1;
	
	}
	
	.itemTwo {
	
		order:2;
	
	}
	
	.itemThree {
	
		order:4;
	
	}
	
	.itemFour {
	
		order:3;
	
	}
	
	.itemFive {
	
		order:5;
	
	}
	
	.itemSix {
	
		order:6;
	
	}
	
	.itemSeven {
	
		order:8;
	
	}
	
	.itemEight {
	
		order:7;
	
	}

	

	.itemNine {
	
		order:9;
	
	}

	.itemTen {
	
		order:10;
	
	}
	
	

	.itemEleven {
	
		order:12;
	
	}

	.itemTwelve {
	
		order:11;
	
	}

}

@media only screen and (min-height: 1024px) and (orientation: landscape) {


	.height { 
	
		height:60%;
	
	}
}

@media only screen and (orientation: portrait) {


	.heroVid { 
	
		height:50%;
	
	}
}