:root {
  --dark: #222222;
  --white: #ffffff;
  --bright-green: #D7F554;
  --dark-green:  #023A18;
  --dark-green2:  #285E53;
  --mid-green:  #008743;
  --hot-pink:  #E963BF;
  --light-gray:  #f6f6f6;
  --light-gray2:  #e4e4e4;
 
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight:normal;
	font-style:normal;
	font: inherit;
}

	/* HTML5 display-role reset for older browsers */
	/*
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
*/

.hex_logo {
height:80px;
padding-left:80px;
}


.logo {
	float: left;
	padding-left: 12px
}
.logo_old {
    margin-top: 1em;
    width: 600px; 
    height: 600px;
    position: absolute;
}

/*
.logo #stage canvas {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
.logo #stage canvas img {
    display: block;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}
*/

#wrapper {
	width: 100%;
	/* max-width: 1410px; */
	/* margin: 0 auto; */
	text-align: left;
	overflow: hidden;
}

#wrapper-inner {
	width: 100%;
	margin: 0 auto;
	max-width: 1410px;
}

@font-face {
    font-family: 'metropolis_black_italic';
    src: url('../fonts/metropolis/Metropolis-BlackItalic.eot');
    src: url('../fonts/metropolis/Metropolis-BlackItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis/Metropolis-BlackItalic.woff2') format('woff2'),
         url('../fonts/metropolis/Metropolis-BlackItalic.woff') format('woff'),
         url('../fonts/metropolis/Metropolis-BlackItalic.ttf') format('truetype');
   font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metropolis_bold_italic';
    src: url('../fonts/metropolis/Metropolis-BoldItalic.eot');
    src: url('../fonts/metropolis/Metropolis-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis/Metropolis-BoldItalic.woff2') format('woff2'),
         url('../fonts/metropolis/Metropolis-BoldItalic.woff') format('woff'),
         url('../fonts/metropolis/Metropolis-BoldItalic.ttf') format('truetype');
   font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'metropolis_regular_italic';
    src: url('../fonts/metropolis/Metropolis-RegularItalic.eot');
    src: url('../fonts/metropolis/Metropolis-RegularItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis/Metropolis-RegularItalic.woff2') format('woff2'),
         url('../fonts/metropolis/Metropolis-RegularItalic.woff') format('woff'),
         url('../fonts/metropolis/Metropolis-RegularItalic.ttf') format('truetype');
   font-weight: normal;
    font-style: normal;

}

/* body font */
.scope-one-regular {
  font-family: "Scope One", serif;
  font-weight: 400;
  font-style: normal;
}

.noticia-text-regular {
  font-family: "Noticia Text", serif;
  font-weight: 400;
  font-style: normal;
}

.noticia-text-bold {
  font-family: "Noticia Text", serif;
  font-weight: 700;
  font-style: normal;
}

.noticia-text-regular-italic {
  font-family: "Noticia Text", serif;
  font-weight: 400;
  font-style: italic;
}

.noticia-text-bold-italic {
  font-family: "Noticia Text", serif;
  font-weight: 700;
  font-style: italic;
}

/* utility classes */
.pb-sm {
padding-bottom: 8px;
}

.pb-m {
padding-bottom: 16px;
}

.header {
	min-height: 100px;
	background-color: var(--bright-green);
	color:  var(--dark-green);
}

.header_inner {
	width:100%;
max-width:1410px;
margin:0 auto;
padding:8px 0 0 0;

}

body {
	/* font-family: 'metropolis_bold_italic', sans-serif; */
	  
	  font-family: "Scope One", serif;
		font-weight: 400;
		font-style: normal;
		
		font-family: "Noticia Text", serif;
		  font-weight: 400;
		  font-style: normal;

}

p.heading {
font-size:1.5em;
color: #339999;
font-weight:normal;
font-style: normal;
margin:0 1em 0.4em 0;
}

.quote {
	padding: 16px 16px 1px 16px;
	margin-bottom:16px;
	color:var(--dark-green);
	background-color: var(--light-gray);
	border-left:8px solid var(--bright-green);
}

p.quote_body {
	padding:0;
	margin:0;
}
p.quote_source {
	padding: 0;
	margin: 0;
}

p.toptip {
	font-family: 'metropolis_black_italic', sans-serif;
}

p, ul {

font-size:1.2em;
line-height:1.5em;
margin:0 0.25em 1em 0;
color:  var(--dark);
}



h1, h2, h3, h4 {
	font-family: 'metropolis_black_italic', sans-serif;
	/* text-transform: uppercase; */
}

h1 {
	color: var(--hot-pink);
font-size:1.6em;
line-height:0.8em;
margin-top:0.1em;
}


h1.header {
	color: var(--dark-green2);
font-size:2.2em;
}

h1.casestudy {
	color: var(--mid-green);
	font-size:6em;
	padding-top:0.02em;
	overflow: hidden;
}





h2 {
color: var(--mid-green);
font-size:2em;
overflow: hidden;
}

h2.large {
	color: var(--mid-green);
	font-size:3em;
	overflow: hidden;
}

.anim-up  {
	display: inline-block; 	position: relative;
	transform: translate(0px, 200px);
	animation: moveup 0.7s ease-out;
	animation-timing-function:cubic-bezier(0, 0, 0.58, 1);
	animation-delay: 0.25s;
	animation-fill-mode: forwards;
}



.delay-05 {
	/* delay 0.5s */
	animation-delay: 0.5s;
}

@keyframes moveup {
	from {transform: translate(0px, 200px);}
	to {transform: translate(0px, 00px);}
}

.transition-transform {
	transition-duration: .15s;
	transition-property: transform;
	transition-timing-function:cubic-bezier(.23, 1, .32, 1)
}

h3 {
color: var(--dark-green);
font-size:1.6em;
margin-bottom: 0.5em;
}

h3.casestudy, h3.ls {
	color: var(--mid-green);
font-size:2em;
	padding-bottom:16px;
	padding-right:16px;
	text-transform: uppercase;
}

h4 {
	padding-bottom: 2px;
}

h4.casestudy {
	font-family: "Noticia Text", serif;
	  font-weight: 700;
	color: var(--dark-green);
	font-size:1.2em;
padding-bottom:8px;
}

h4.goals {
	color: var(--mid-green);
	font-size:1.2em;
	font-weight: 600;
}

h4.index{
	color: var(--dark-green);
}

p.light {

}

p.summary {
	font-family: 'metropolis_regular_italic', sans-serif;
	font-size: 1.2em;
	line-height: 1.2em;
	font-weight: 400;
}

.caption {
	font-family: 'metropolis_regular_italic', sans-serif;
	font-size: 1em;
	margin-bottom: 32px;
	font-weight: 400;
	padding: 4px;
	background-color: var(--light-gray);
	border-left: 2px solid var(--mid-green);
}

p.small {
	font-family: 'metropolis_regular_italic', sans-serif;
	font-size: 1em;
}

p.disabled {
	color: #aaa;
}

p.footer {
	font-family: 'metropolis_regular_italic', sans-serif;
	color: var(--bright-green);
	font-size: 1.2em;
}

span.bold {
font-family: 'metropolis_black_italic', sans-serif;
}

span.white {
	color:  var(--white);
}

span.outcomes {
	color: var(--mid-green);
	font-family: 'metropolis_regular_italic', sans-serif;
	font-size: 1.2em;
	display: inline-flex;
	padding: 4px 0px;
	align-items: center;
	gap: 16px;
}


/* feather icons */
.feather {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.feather_24 {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.feather2 {
	width: 32px;
	  height: 32px;
}

a, a:visited {
	color: var(--mid-green);
}

a.button, a.button:visited {
	font-family: 'metropolis_black_italic', sans-serif;
	border: 2px solid var(--mid-green);
	color: var(--mid-green);
	text-decoration: none;
	border-radius: 48px;
	display: inline-flex;
	padding: 4px 16px;
	align-items: center;
	gap: 8px;
}

a.button:hover {
	color: var(--dark-green);
	border: 2px solid var(--dark-green);
}

a.icon, a.icon:visited {
	text-decoration: none;
	font-size: 2em;
	color: var(--bright-green);
}

a.icon:hover {
	color: var(--mid-green);
}

a.footer, a.footer:visited {
	color: var(--bright-green);
}

a.footer:hover {
	color: var(--mid-green);
}

ul.writing {
margin-left:8px;
list-style: none ;
list-style-position: inside
}

ul.writing li {
/*padding-left: 24px;*/
}

ul.writing li::before {

padding-right:4px;
content: "+";
width:24px;

}

ul.inline-list {
margin: 32px 32px 32px 32px;
list-style: none ;
font-family: 'metropolis_regular_italic', sans-serif;
}

ul.goals {
	margin: 0px !important;
}

ul.inline-list li {
padding: 6px 16px;
background-color: var(--light-gray);
margin-bottom:2px;
}

ul.inline-list li::before {
font-family: 'metropolis_black_italic', sans-serif;
font-size:1.6em;
color: var(--dark-green2);
padding-right:4px;
content: "+";
position: relative;
top:4px;
width:24px;
margin-right:8px;
}


ul.links {
font-size: 1.1em;
margin: 0 1em 1em 2em;
}

ul.links li {
color: #ff0000;
}

ul.service_chips {
display:block;
list-style: none;
position: relative;

}

ul.service_chips li {
	position: relative;
float: left;
	color: var(--bright-green);
		margin-right:8px;
	margin-bottom:8px;
	padding: 3px 12px;
	background-color: var(--dark-green);
	font-size:16px;
	border-radius: 6px;
	font-family: 'metropolis_regular_italic', sans-serif;
}

ul.service_chips li.small {
	padding: 1px 6px;
	font-size:14px;
	border-radius: 4px;
}


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.grey {
color: #666;
}

.bright-green {
	color:  var(--bright-green) !important;
}

#intro {
display:block;
width: 100%;
clear:both;

}

.row {
display:table;
width: 100%;
padding:  8px 0 16px 0;
border-top: 0px solid #ddd;
clear: both;
}

.content_block {
	padding: 64px 0;
	margin-left: 80px;
}

.margin_content {
display: block;
float: left;
width: 80px;
border: 0px solid var(--dark);
padding:  0;
}

.left_content {
display: block;
float: left;
width:100%;
max-width: 338px;
border: 0px solid var(--bright-green);
padding:  0;
margin-right:40px;
}

.right_content {
display: block;
float: left;
width: calc(100% - 466px);
max-width: 944px;
border: 0px solid var(--dark);
padding:  0 4px;
}

.full_content {
	display: block;
float: left;
width: calc(100% - 128px);
// max-width: 1320px;
border: 0px solid var(--dark);
/* margin-left:80px; */
margin:  40px 4px 0 4px;
}

.no_indent {
	margin-left:0;
}

.design_leadership {
	background-color: var(--light-gray);
	padding: 16px 16px;
}

.design_leadership > div > p, .leadership_item > p {
	font-size: 1.1em !important;
	font-family: 'metropolis_regular_italic', sans-serif !important;
}

.width_66{
	max-width: 66%;
}

.overview {
	display: block;
	background-color: var(--light-gray);
}


.r2 {
	width: 372px;
		float: left;
		background-color: #f4f4f4;
		padding: 8px 4px;
		margin-right: 8px;
		}

.r2 > p {
	font-family: 'metropolis_regular_italic', sans-serif;
	font-size: 1.1em;
}

.r2 h3 {
	color: var(--mid-green);
	font-size:1.1em;
	font-family: 'metropolis_bold_italic', sans-serif;
	padding-bottom: 8px;
}

.container {
	margin: 0 4px;
}

#inter {
clear:both;
border-bottom: 1px solid #ccc;
}

#projects {
padding: 1em 0 0 0;
}


.project {
margin: 0 0 4em 0;
}

.project p {
font-size: 1em;
}

img {
	max-width: 100%;
	margin:0;
	padding: 0;
	height: auto;
	
}

img.border {
border:1px solid #ddd;
}


 img.gry {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.7s ease;
 }

 img.gry:hover {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
 }


.sbs {
	display: flex;
	flex:1;
	flex-direction: row;
	gap: 8px;
}

.image_holder {
flex: 1 1 0;
  width: 0;
  gap: 2px;
}

.case_study {
	background-color: var(--light-gray);
	display: flex;
	flex: 1;
	flex-direction: row;
	gap: 8px;
	padding: 16px 32px;
	margin-bottom: 32px;
	cursor: pointer;
}

.cs_image {
	flex: 1 1 0;
}

.cs_text {
	flex: 1 1 0;
	/* padding-top:32px; */
}

.text_right > .cs_text {
	margin-left:40px;
}

.text_left> .cs_text {
	margin-right:40px;
}

.leadership_container {
	display: flex;
	flex: 1;
	flex-direction: row;
	gap:32px;
	background-color: #f6f6f6;
	padding: 32px 8px;
}

.leadership_item {
	flex: 1 1 0;
	
}
/* carousel */
.carousel-container {

}

.main-carousel {
margin-left:-240px;
margin-right:-240px;
width: calc(100% + 320px);
/* max-width:1080px; */
max-width: 100vw;
}

.main-carousel:focus-visible {
/* outline: none; */
}

.carousel-cell {
  width:calc(100% + 320px);
  max-width:1080px;
  padding-right: 32px;
  overflow:hidden;
}

.caro-image {
	width:100%;
	max-width: 100vw;

}

.summary_group {
	border-top: 2px var(--dark-green2) solid;
	
}

.summary_item {
	border-bottom: 1px var(--dark-green2) solid;
	padding: 1em 0;
}

.no_border {
border: 0;
}

.p-0 {
	padding:0;
}

.mr-80 {
	margin-right: 80px;
}

.ml-80 {
	margin-left: 80px;
}

.goals_group {
	display: flex;
	flex:1;
	flex-direction: row;
	gap: 8px;
	/* margin-left: 80px; */
}

.goals_item {
	background-color: var(--white);
	flex: 1 1 0;
	  padding: 16px 8px;
  }

.body_copy {
	margin-right: 240px;
}
.boxout {
	display: block;
	padding:16px;
	background-color: var(--light-gray);
	margin-bottom: 16px;
	
}

.boxout-left {
	
	display: block;
	/* margin: 0 40px 0 80px; */
	padding:8px 16px;
	background-color: var(--light-gray);
	/* width:342px; */
	font-size: 0.8em;
	margin-bottom: 16px;
	font-family: 'metropolis_regular_italic', sans-serif;
	border-left: 4px var(--mid-green) solid ;
}


.card {
display: block;
float: left;
height: 540px;
width:374px;
/* border-top: 0.5px solid #ddd; */
/* border-bottom: 0.5px solid #ddd; */
background-color: #f4f4f4;
margin-right:8px;
margin-bottom:32px;
}

.card_body > h2 {
	font-size:2.2em;
}

.card_body > h4 {
	font-family: 'metropolis_regular_italic', sans-serif; 
	font-size:1.2em;
	font-style: normal;
}

.card_header {
overflow:hidden;
}

.card_body {
padding: 4px;
}


.spacer {
	height:32px;
	border-bottom: 1px dotted #ccc;
	margin-bottom:8px;
}

.video_player {
	border: 1px solid #eee;
}


/* outcomes */
.outcomes_group{
	display: flex;
	flex-direction: row;
	gap:8px;
	/* text-align:center; */
}

.outcome_item {
	flex: 1 0 0;
background-color: var(--white);
padding: 20px;
border-radius:8px;
}

.outcome_item_sm {
	flex: 1 0 0;
background-color: var(--white);
padding: 4px 8px 8px 8px;
border-radius:0px;
}

.outcome_header {
	font-size: 3rem;
	color:var(--mid-green);
	font-family: "metropolis_bold_italic";

}

span.outcome_header_small {
	font-size: 2rem;
	font-weight:normal;
}

span.outcome_header_xs {
	font-size: 1.5rem;
	font-weight:normal;
}

.outcome_body{
	color:var(--dark-green2);
	font-family: "metropolis_black_italic";
}


footer {
/*display: block;*/
background-color: var(--dark-green);
color: var(--white);
margin: 0;
padding: 0;
overflow: hidden;
}

#soyuz {
width:1370px;
max-width:1370px;
overflow:hidden;

}

#soyuz_inner {
width:100%;
overflow:hidden;
}

.edgeLoad-EDGE-213362588 {
visibility:hidden;
}

#lwd_intro {
width:1370px;
max-width:1370px;
overflow:hidden;

}

#lwd_inner {
width:100%;
overflow:hidden;
}

.edgeLoad-EDGE-26380507 { visibility:hidden; }


nav {
width: 100%;
/* display:block; */
background-color: #D7F554;
clear:both;
margin:0;
padding:0;
overflow:hidden;
}

.nav_inner {
width:100%;
max-width:1410px;
height:100%;
margin: 25px auto;
padding:0;
}

ul.main_nav {
	font-family: 'metropolis_black_italic', sans-serif;
	display: inline-block;
	list-style: none;
	font-size:24px;
	float:right;
	margin: 0 4px 0 80px;
}

ul.main_nav li {
	height:48px;
	position: relative;
	float: left;
	padding: 2px 2px;
	margin-right: 32px;
	/* border: 1px solid #ccc; */
	display: block;
}

ul.main_nav li:first-child {

}

ul.main_nav li:last-child {
	margin-right: 4px;

}

ul.main_nav li a {
	color: var(--dark-green);
	text-decoration: none;
}

ul.main_nav li a:hover {
	text-decoration: underline;
}

ul.main_nav li.selected {
	height:44px;
	border-bottom: 4px solid var(--dark-green);
}

ul.main_nav li.selected a:hover {
	text-decoration: none;
}

/* hide hamburger */
ul.main_nav li.icon {
	display: none !important;
}


#footer_inner {
width:100%;
max-width:1410px;
margin:0 auto;
/*padding:1em 0 0 20px;*/
}

#social, #contact {
list-style: none;
margin: 0;
padding: 0;
}

#social li, #contact li {
display:inline-block;
padding: 0.5em 1em 0.5em 1em;
/* border-right: 1px solid #666; */
}

#social li:first-child, #contact li:first-child {
/* border-left: 1px solid #666 */
}

#social {
float:left;
width:100%;
margin-bottom: 16px;
}

a.socicon {
	font-size:24px;
color: var(--bright-green);
text-decoration:none;
    font-family: 'socicon' !important;
}

a:hover {
color: var(--dark-green);
}

a.external {
}

a.external::after {
	content: "";
  display: inline-block;
  vertical-align: middle;
  width: 32px;
  height: 16px;
  background: url('../images/external_link.svg') 8px 0 no-repeat;
  background-size: contain;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: block;
  height: 100%; /* Full height (cover the whole page) */
  	width:100%;
max-width:1410px;
margin:0 auto;
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0); /* Black background with opacity */
  border-left:  0.5px solid #dddddd;
  border-right:  0.5px solid #dddddd;
  z-index: 1; /* Specify a stack order in case you're using a different order for other elements */
  pointer-events: none;
}


#o2 {
	position: relative; /* Sit on top of the page content */
  display: block;
  height: 100%;
	width: 380px;
	margin-left: 80px;
border-left:  0.5px solid #dddddd;
  border-right:  0.5px solid #dddddd;

}

#o2_full {
	position: relative; /* Sit on top of the page content */
  display: block;
  height: 100%;
	width: 380px;
	margin-left: 80px;
border-left:  0.5px solid #dddddd;
  border-right:  0px solid #dddddd;

}




@media screen and (max-width: 1250px) {

.r2 {
		width:98%;
	margin-bottom:4px;
}

.body_copy {
	margin-right: 80px;
}

.main-carousel {
margin: 0 4px 0 -382px;
width: calc(100vw - 160px);
max-width: 100vw;
}

.carousel-cell {
  width:calc(100vw - 160px);
  padding-right: 32px;
  overflow:hidden;
}


}


@media screen and (max-width: 960px) {


.left_content {
	float: left;
	max-width: 640px;
	/* padding-left: 80px; */ 
}

.empty {
	/* reduce height of empty left_content */
	height: 0;
	overflow: hidden;
}

.right_content {
	width: calc(100% - 80px);
	float: left;
	/* padding-left: 80px;*/
	padding-top:32px;
}

.content_block {
	padding: 0 0 0 0;
}

.body_copy {
	margin-right: 120px;
}

.goals_group {
flex-direction: column;
}

.outcomes_group {
	flex-wrap: wrap;
}

.outcomes_item {
	flex-grow: 1;
}

h1.casestudy {
	font-size:4em;
}


h2.large {
	font-size:2em;
}

img.gry {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
 }

.r2, .boxout-left {
	/* width:98%; */
	margin-bottom:4px;
}

#social {
	width: 100%;
	float: none;
}

#o2 {
	border-right:  0px solid #eeeeee;
}

.main-carousel {
margin: 0 4px 0 0;
width: calc(100vw - 152px);
max-width: 100vw;
}

.carousel-cell {
  width:calc(100vw - 152px);
  padding-right: 32px;
  overflow:hidden;
}


/* navigation -  show hamburger */
ul.main_nav li {
	display: none;
}
ul.main_nav li.hamburger {
	display: block !important;
}

ul.responsive {
	height: 100vh;
	float: left;
	margin-left: -40px;
	margin-top: 160px;
	font-size: 3em;
}

ul.responsive li{
	float: none;
	display: block;
	text-align: left;
  }
  
  
  ul.responsive li.hamburger {
	  display: none !important;
  }
  
  ul.responsive li.close {
		display: block !important;
	}
	  
ul.responsive li.close {
	position: absolute;
	right: 32px;
	top: 1px;
}

}

@media screen and (max-width: 768px) {
.body_copy{
	margin-right: 80px;
}

.case_study {
flex-direction: column;
}

.text_right > .cs_text {
	margin-left:0px;
}

.text_left> .cs_text {
	margin-right:0px;
}

.content_block {
	padding: 16px 0;
}

.leadership_container {
flex-direction: column;
padding: 16px 0px;
}

.width_66{
	max-width: 100%;
}

h2 {
	font-size: 1.5em;
}
}

@media screen and (max-width: 469px) {
.right_content, .full_content {
	width: calc(100% - 20px);
	float:left;
	padding-left: 0;
	margin: 0 8px;
}

.summary_group {
	margin: 0 8px;
}
.body_copy {
	margin-right: 0px;
}

.content_block {
	padding: 16px 0;
	margin: 0 8px;
}

.outcomes_group {
	flex-direction: column;
	margin: 0 40px;
}

h1.casestudy {
	font-size: 3em;
}

.boxout-left {
margin: 0 4px;
}

.case_study {
	padding: 12px 12px;
}

ul.inline-list {
	margin: 16px 0;
}
#o2 {
	display:none;
}


}