/* @override 
	http://zonedigital.dev/assets/css/zd.css */

@charset "UTF-8";
/*-----------------------------------------------------------
 FONTS
-----------------------------------------------------------*/
@font-face {
	font-family: 'HUGEAvantGardeBold';
	src: url("../fonts/huge_agb_v5-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/huge_agb_v5-webfont.woff") format("woff"), url("../fonts/huge_agb_v5-webfont.ttf") format("truetype"), url("../fonts/huge_agb_v5-webfont.svg#svgFontName") format("svg")
}
@font-face {
	font-family: 'Galaxie';
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/GalaxieCopernicus-Bookd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/GalaxieCopernicus-Book.woff") format("woff"), url("../fonts/GalaxieCopernicus-Book.svg#svgFontName") format("svg")
}
@font-face {
	font-family: 'GalaxieItalic';
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/GalaxieCopernicus-BookItalicd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/GalaxieCopernicus-BookItalic.woff") format("woff"), url("../fonts/GalaxieCopernicus-BookItalic.svg#svgFontName") format("svg")
}
/*-----------------------------------------------------------
 COMMON
-----------------------------------------------------------*/
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, em, 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: inherit;
	font-size: 100%;
	vertical-align: baseline;
}
html {
	line-height: 1;
	position: static;
	width: 100%;
	height: 100%;
}
ol, ul {
	list-style: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
* {
	background-repeat: no-repeat;
	position: relative;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	font: 14px/1.5 "Galaxie";
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
 @media (min-width: 0) and (max-width: 656px) {
	body {
		font-size: 18px;
		background-color:
	}
}
a {
	color: inherit;
	text-decoration: none
}
a:hover {
	color: #94d600
}
h1 {
	font-family: "HUGEAvantGardeBold", sans-serif;
	font-size: 78px;
	font-weight: normal;
	line-height: 1.1;
	letter-spacing: -0.06em;
	margin-bottom: 0.2em
}
h2 {
	font-family: "HUGEAvantGardeBold", sans-serif;
	font-size: 64px;
	line-height: 1.2;
	letter-spacing: -0.06em;
	font-weight: normal;
	margin-bottom: 0.7em
}
h2.typed {
	font-size: 42px;
	color: #000;
}
h3 {
	font-family: "HUGEAvantGardeBold", sans-serif;
	font-size: 48px;
	font-weight: normal;
	line-height: 1.2;
	margin-bottom: 1em
}
h3.typed {
	font-size: 22px
}
@media (min-width: 0) and (max-width: 656px) {
	h1 {
		font-size: 34px;
	}
	h2.typed {
		font-size: 36px;
		color: #000;
	}
	h3.typed {
		/*font-size: 28px;*/
	}
}
h4 {
	font-family: "HUGEAvantGardeBold", sans-serif;
	font-size: 38px;
	line-height: 1.2;
	letter-spacing: -0.06em;
	font-weight: normal
}
h5 {
	font-family: "HUGEAvantGardeBold", sans-serif;
	font-size: 20px;
	letter-spacing: -0.06em;
	font-weight: normal;
	margin-bottom: 0.5em
}
@media (min-width: 0) and (max-width: 656px) {
h5 {
	font-size: 22px
}
}
h6 {
	font-family: "HUGEAvantGardeBold", sans-serif;
	font-size: 16px;
	letter-spacing: -0.06em;
	font-weight: normal
}
.typed {
	font-family: "Galaxie";
	line-height: 1.4;
	letter-spacing: -0.06em;
	color: #999;
	text-align: center
}
strong {
	font-weight: bold
}
em {
	font-family: "GalaxieItalic";
	font-style: italic
}
code {
	font-family: "Courier New", monospace;
	background: #fff
}
p {
	margin-bottom: 1em
}
button {
	border: 0
}
ul {
	margin-bottom: 2em;
}
ul li {
	list-style-position: inside;
}
ul li:last-child::after {
	content: '' !important;
}
/*-----------------------------------------------------------
 POSSIBLY SHARED
-----------------------------------------------------------*/
.whitebackground {
	background-color: #f7f7f7;
	text-align: center;
}
.blackbackground {
	background-color: #000;
	text-align: center;
}
.container {
	margin: 0 auto;
	width: 640px
}
 @media (min-width: 0) and (max-width: 656px) {
.container {
	width: 100%
}
}
@media (min-width: 657px) and (max-width: 977px) {
.container {
	width: 640px
}
}
@media (min-width: 977px) and (max-width: 1296px) {
.container {
	width: 960px
}
}
@media (min-width: 1297px) {
.container {
	width: 1280px
}
}
main {
	display: block
}
.button {
	cursor: pointer;
	text-decoration: none !important;
	display: inline-block;
	font-family: Arial, sans-serif;
	font-weight: bold;
	text-align: center;
	color: #fff;
	-webkit-transition: background-color 0.3s, opacity 0.3s;
	-moz-transition: background-color 0.3s, opacity 0.3s;
	-o-transition: background-color 0.3s, opacity 0.3s;
	transition: background-color 0.3s, opacity 0.3s
}
.button:hover {
	background-color: #94d600 !important;
	color: #fff
}
.button.black {
	background: #000;
	width: 160px;
	height: 54px;
	line-height: 54px;
	font-size: 13px
}

.button.green {
	background: #94d501;
	width: 160px;
	height: 54px;
	line-height: 54px;
	/*font-size: 13px*/
}
@media (min-width: 0) and (max-width: 656px) {
.button.black {
	width: 100%;
	height: 100px;
	line-height: 100px;
	font-size: 24px
}
}
@media (min-width: 657px) and (max-width: 977px) {
.button.black {
	width: 260px
}
}


/*-----------------------------------------------------------
 ABOUT
-----------------------------------------------------------*/
#aboutuspage {
	
}
#aboutuspage .teaseroverlay {
	font-size: 300px;
}
#aboutuspage .teaseroverlay {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
	color: #fff;
	margin: 0;
	background: url("../images/pixel.png")
}
#aboutuspage .teaseroverlay span {
	position: absolute;
	display: block;
	top: 50%;
	width: 100%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
#aboutuspage .video {
	overflow: hidden
}
#aboutuspage #top-overlap {
	-webkit-transition: margin-top 1s cubic-bezier(0.7, 0.01, 0.3, 1);
	-moz-transition: margin-top 1s cubic-bezier(0.7, 0.01, 0.3, 1);
	-o-transition: margin-top 1s cubic-bezier(0.7, 0.01, 0.3, 1);
	transition: margin-top 1s cubic-bezier(0.7, 0.01, 0.3, 1);
}
#aboutuspage #top-overlap.notscrolled {
	margin-top: -130px;
}
@media (min-width: 0) and (max-width: 656px) {
	#aboutuspage #top-overlap.scrolled {
		margin-top: 0px
	}
	#aboutuspage #top-overlap.notscrolled {
		margin-top: -130px
	}
}
@media (min-width: 657px) and (max-width: 977px) {
	#aboutuspage #top-overlap.scrolled {
		margin-top: 0px
	}
	#aboutuspage #top-overlap.notscrolled {
		margin-top: -130px
	}
}
#aboutuspage header+h2 {
	color: #000;
	margin: 0;
	padding-top: 84px
}
#aboutuspage header .video {
	background-color: #000;
	background-size: cover;
	min-height: 320px
}
@media (min-width: 0) and (max-width: 656px) {
	#aboutuspage header .video {
		margin-top: 80px;
		background-color: #000;
		background-size: cover;
		min-height: 100px;
	}
	#aboutuspage .teaseroverlay {
		font-size: 175px;
	}
}
@media (min-width: 657px) and (max-width: 977px) {
	#aboutuspage .teaseroverlay {
		font-size: 200px;
	}
}

#aboutuspage section {
	margin-bottom: 150px;
}
#aboutuspage #what-we-do {
	font-size: 18px
}
#aboutuspage #what-we-do .container {
	background-color: #f7f7f7;
	padding-top: 30px;
	margin-top: 0;
	-webkit-transition: margin-top 1s cubic-bezier(0.7, 0.01, 0.3, 1);
	-moz-transition: margin-top 1s cubic-bezier(0.7, 0.01, 0.3, 1);
	-o-transition: margin-top 1s cubic-bezier(0.7, 0.01, 0.3, 1);
	transition: margin-top 1s cubic-bezier(0.7, 0.01, 0.3, 1)
}
@media (min-width: 0) and (max-width: 656px) {
	#aboutuspage h3.typed {
		padding: 0 10px;
		font-size: 18px;
	}
	#aboutuspage header h1 {
		font-size: 240px
	}
	#aboutuspage #what-we-do {
		font-size: 20px
	}
	#aboutuspage #what-we-do .container {
		margin-top: 36px
	}
}
@media (min-width: 657px) and (max-width: 977px) {
	#aboutuspage header h1 {
		font-size: 200px
	}
	#aboutuspage #what-we-do .container {
		margin-top: 36px
	}
}
@media (min-width: 977px) and (max-width: 1296px) {
	#aboutuspage h3.typed {
		padding: 0 180px 32px
	}
}
@media (min-width: 1297px) {
	#aboutuspage h3.typed {
		padding: 0 280px 32px
	}
}
/*-----------------------------------------------------------
 SERVICES
-----------------------------------------------------------*/
#servicespage {
	
}
#servicespage #what-we-do {
	font-size: 36px;
	padding-top: 150px;
}
div.panelconatiner {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
div.exp {
	font: 18px "Galaxie";
	color: #666;
}
a.exp {
	display: block;
	margin: 1px 0 0 0;
	text-decoration: none;
	border: 0px solid black;
	border-radius: 4px;
	padding: 10px;
	font: 22px/1.5 "HUGEAvantGardeBold";
	color: #ccc;
	text-align: center;
}
a.exp:hover {
	color: #94d600;
}
a.exp::after {
	float: right;
}
a.exp:focus {
	border-width: 0px opx 0 0px;
 border-radius:4px 4px 0 0 outline: none;
	outline-width: 0;
}
a.exp + div {
	display: none;
}
a.exp:focus + div {
	display: block;
	border-style: solid;
	border-radius: 0 0 4px 4px;
	border-color: black;
}
a.exp:focus::after {
	content: "";
}
div.exp * {
	padding: 15px 10px 0em 10px;
}
div.exp *:last-child::after {
	float: right;
}
div.exp *:first-child {
	margin-top: 0;
}
/*-----------------------------------------------------------
 HOW WE WORK
-----------------------------------------------------------*/
#howweworkpage {
	margin: 0;
}
#howweworkpage #structure {
	padding: 50px;
	padding-top: 150px;
}

#howweworkpage #interdisciplinaryteams {
	background: #000;
	color: fff;
	padding-top: 50px;
	border: black 1px solid;
	padding: 50px;
}

#howweworkpage #clientisapartner {
	background: #000;
	color: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
	border: black 1px solid;
	padding: 50px;
}

#howweworkpage .partner {
	color: #94d600;
}

#howweworkpage #customersarekey {
	color: 000;
	padding-top: 50px;
	padding-bottom: 50px;
	padding: 50px;
}
.howweworkimage {
	max-width:460px;	 
}
@media (min-width: 0) and (max-width: 656px) {
	.howweworkimage {
		width:200px;	 
	}
	#howweworkpage h3.typed {
		font-size: 18px;
	}
	#howweworkpage #structure {
		padding: 150px 10px 10px;
	}
	#howweworkpage #interdisciplinaryteams {
		padding-top: 40px;
		padding: 10px;
	}
	
	#howweworkpage #clientisapartner {
		padding-top: 40px;
		padding-bottom: 40px;
		padding: 10px;
	}
	
	#howweworkpage #customersarekey {
		padding-top: 40px;
		padding-bottom: 40px;
		padding: 10px;
	}
}


/*-----------------------------------------------------------
 FOR WHO
-----------------------------------------------------------*/
#whoforpage {
	padding-top: 150px;
}
.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 160px;
	height: 90px;
	display: inline-block;
	margin: 20px;
}
.ch-item {
	width: 100%;
	height: 100%;
	
	position: relative;
	cursor: default;
		
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.ch-img-1 { 
	background-image: url(../images2/logos.png);
}

.ch-img-2 { 
	background-image: url(../images2/logos2.png);
}

.ch-img-3 { 
	background-image: url(../images2/logos3.png);
}
.ch-img-4 { 
	background-image: url(../images2/logos4.png);
}

.ch-img-5 { 
	background-image: url(../images2/logos5.png);
}
.ch-img-6 { 
	background-image: url(../images2/logos6.png);
}

.ch-img-7 { 
	background-image: url(../images2/logos7.png);
}

.ch-img-8 { 
	background-image: url(../images2/logos8.png);
}

.ch-img-9 { 
	background-image: url(../images2/logos9.png);
}
.ch-img-10 { 
	background-image: url(../images2/logos10.png);
}
.ch-img-11 { 
	background-image: url(../images2/logos11.png);
}
.ch-img-12 { 
	background-image: url(../images2/logos12.png);
}
.ch-img-13 { 
	background-image: url(../images2/logos13.png);
}
.ch-img-14 { 
	background-image: url(../images2/logos14.png);
}
.ch-img-15 { 
	background-image: url(../images2/logos15.png);
}
.ch-img-16 { 
	background-image: url(../images2/logos24.png);
}
.ch-img-17 { 
	background-image: url(../images2/logos17.png);
}
.ch-img-18 { 
	background-image: url(../images2/logos18.png);
}
.ch-img-19 { 
	background-image: url(../images2/logos19.png);
}
.ch-img-20 { 
	background-image: url(../images2/logos20.png);
}
.ch-img-21 { 
	background-image: url(../images2/logos21.png);
}
.ch-img-22 { 
	background-image: url(../images2/logos22.png);
}
.ch-img-23 { 
	background-image: url(../images2/logos23.png);
}
.ch-img-24 { 
	background-image: url(../images2/logos24.png);
}
.ch-img-25 { 
	background-image: url(../images2/logos25.png);
}
.ch-img-26 { 
	background-image: url(../images2/logos26.png);
}
.ch-img-27 { 
	background-image: url(../images2/logos27.png);
}
.ch-img-28 { 
	background-image: url(../images2/logos28.png);
}
.ch-img-29 { 
	background-image: url(../images2/logos29.png);
}
.ch-img-30 { 
	background-image: url(../images2/logos30.png);
}
.ch-img-31 { 
	background-image: url(../images2/logos31.png);
}
.ch-img-32 { 
	background-image: url(../images2/logos32.png);
}
.ch-img-33 { 
	background-image: url(../images2/logos33.png);
}



.ch-info {
	position: absolute;
	background: rgba(148,214,0, 0.8);
	width: inherit;
	height: inherit;

	opacity: 0;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	
	-webkit-backface-visibility: hidden;

}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 19px;
	margin-top:15px;

	height: 140px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
	opacity: 0;
	-webkit-transition: all 1s ease-in-out 0.4s;
	-moz-transition: all 1s ease-in-out 0.4s;
	-o-transition: all 1s ease-in-out 0.4s;
	-ms-transition: all 1s ease-in-out 0.4s;
	transition: all 1s ease-in-out 0.4s;
}

.ch-info p a {
	display: block;
	color: #fff;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: #fff222;
	color: rgba(255,242,34, 0.8);
}

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 1px rgba(255,255,255,0.1),
		0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.ch-item:hover .ch-info p {
	opacity: 1;
}
/*-----------------------------------------------------------
 CONTACT
-----------------------------------------------------------*/
#contactpage {
	color: #fff;
}
#contactpage #hello {
	background: #000;
	padding: 150px 0 0
}
#contactpage #hello h1 {
	text-align: center;
	margin-bottom: 0.8em;
	color: #fff
}
#contactpage #hello h1 span {
	color: #ccc;
	font-family: "Galaxie"
}
#contactpage #hello h5 {
	color: #fff
}
#contactpage #hello a {
	color: #fff;
	border-bottom: 0px solid #333
}
#contactpage #hello a:hover {
	color: #94d600
}
#contactpage #our-offices .colheader {
	padding-top: 40px;
	margin-bottom: 40px;
}
#contactpage #our-offices .row {
  margin: 0 -10px;
  margin-bottom: 0px;
}
#contactpage #our-offices .row:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
  padding: 0px;
}
@media (min-width: 0) and (max-width: 656px) {
  #contactpage #our-offices .col-1-2 {
    width: 100%;
  }
  #contactpage #our-offices .col-2-2 {
    width: 100%;
  }
  #contactpage #hello h1 span {
	font-size: 48px;
}
}
@media all and ( min-width: 657px ) {
  #contactpage #our-offices .col-1-2 {
    float: left;
    width: 50%;
  }
  #contactpage #our-offices .col-2-2 {
    float: right;
    width: 50%;
  }
}
#contactpage #our-offices h2 {
	color: #fff;
	text-align: center;
	background-color: #94d600;
}
#contactpage #our-offices h2 img {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	width: 100%;
	height: 100%;
}
#contactpage #our-offices h2:hover img {
	/*opacity: 0.3*/
}
#contactpage #our-offices address {
	padding-top: 20px;
	font: 1em/1.5 "Galaxie";
	margin-bottom: 2em
}
#contactpage #our-offices address p a {
	text-decoration: none
}
#contactpage #our-offices address p a:before {
	content: '"';
	padding: 0 8px 0 4px;
	display: inline-block;
	color: #999
}
#contactpage #our-offices h2 {
	color: #fff;
	text-align: center;
	margin-bottom: 0.0em;
	-webkit-background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover
}
#contactpage #our-offices .info {
	padding: 0 40px;
	background-color: #fff;
	color: #000;
	padding-bottom: 40px;
}
@media (min-width: 0) and (max-width: 656px) {
#contactpage #hello {
	padding: 150px 0 0;
}

#contactpage #hello .container {
	padding: 0 40px
}
#contactpage #hello h1 {
	margin-bottom: 1.5em
}
#contactpage #hello h5 {
	font-size: 64px;
	margin-bottom: 0.2em
}
#contactpage #our-offices h2 {
	font-size: 80px;
	height: 360px;
	line-height: 360px;
	margin: 0
}
#contactpage #our-offices h2 span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer
}
#contactpage #our-offices address {
	height: 64px
}
#contactpage #our-offices .info {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s
}
#contactpage #our-offices .info.expanded {
	padding-top: 36px;
	height: 212px
}
}
@media (min-width: 657px) and (max-width: 977px) {
#contactpage #hello h5 {
	font-size: 30px
}
#contactpage #our-offices h2 {
	font-size: 44px;
	height: 180px;
	line-height: 180px
}
#contactpage #our-offices address {
	height: 72px
}
}
@media (min-width: 977px) and (max-width: 1296px) {
#contactpage #hello h1 {
	padding: 0 120px
}
#contactpage #our-offices h2 {
	height: 270px;
	line-height: 270px
}
#contactpage #our-offices address {
	height: 90px
}
}
@media (min-width: 1297px) {
#contactpage #hello h1 {
	padding: 0 240px
}
#contactpage #our-offices h2 {
	height: 360px;
	line-height: 360px
}
#contactpage #our-offices address {
	height: 80px
}
}


/***************************************************************************************************/
/* FOOTER                                                                                          */
/***************************************************************************************************/
footer {
	clear: both;
	background: #000;
	z-index: 100
}
footer .container {
	font-family: "HUGEAvantGardeBold", sans-serif;
	line-height: 1;
	font-size: 11px;
	padding: 20px 0 40px;
	text-align: center;
	margin-top: 0px;
}
@media (min-width: 0) and (max-width: 656px) {
footer .container {
	font-size: 12px;
	padding: 50px 40px 30px
}
}
@media (min-width: 657px) and (max-width: 977px) {
footer {
	font-size: 10px
}
}
#footerinner ul {
	margin: 0.25em 0;
	padding: 0 1em;
	list-style: none;
	color: #fff;
	font-family: "HUGEAvantGardeBold";
}
#footerinner li {
	display: inline;
	margin: 0;
	padding: 0 0.2em 0 0.5em;
	border-left: 1px solid;
}
#footerinner .first {
	padding-left: 0;
	border: 0;
}
.zedicon {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
	width: 77px;
	height: 107px;  
	font-size: 0;
  text-indent: -9999px;
}

.zedicon-border {
  position: relative;
}

.zedicon-border::before,
.zedicon-border::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.zedicon-border::before {
  z-index: 1;
  -webkit-transition: box-shadow 0.3s;
          transition: box-shadow 0.3s;
}

.zedicon-border::after {
  z-index: 2;
}

.zedicon-border.z::before {
  box-shadow: inset 0 0 0 48px #000;
}

.zedicon-border.z:hover::before {
  box-shadow: inset 0 0 0 8px #94d600;
}

.zedicon-border.z::after {
  background: url("../images/footerz.png");
  background-position:center;
  background-repeat:no-repeat;
  background-size: 67px 97px;
}
/***************************************************************************************************/
/* HEADER BAR                                                                                      */
/***************************************************************************************************/
#header1 {
    height: 80px;
    position: fixed;
    top: 80;
    transition: top 0.5s ease-in-out;
    width: 100%;
	z-index: 90;
}

#header1 #greenlogo {
	width: 144px;
	height: 74px;
	padding: 0px 40px;
	z-index: 1000;
	background-image: url("../images/logo.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: all 0.6s cubic-bezier(1, 214, 0, 1);
	-moz-transition: all 0.6s cubic-bezier(1, 214, 0, 1);
	-o-transition: all 0.6s cubic-bezier(1, 214, 0, 1);
	transition: all 0.6s cubic-bezier(1, 214, 0, 1);
}

#header2 {
    background: #94d600;
    height: 80px;
    position: fixed;
    top: 80;
    transition: top 0.5s ease-in-out;
    width: 100%;
    color: red;
	z-index: 99;
}

#header2 #whitelogo {
	width: 144px;
	height: 100%;
	padding: 0px 40px;
	z-index: 1000;
	background-image: url("../images/logo_white.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.nav-up {
    top: -80px;
}
.nav-down {
    top: 0;
}


/* ****************** Added by Rob 090216 START ****************** */

#workpage #recent-work {
    font-size: 36px;
    padding-top: 150px;
}


.tile {
    float: left;
    width: 320px;
    height: 320px;
    overflow: hidden;
    list-style: none
}

.tile a {
    height: 100%;
    display: block
}

.tile.image {
    font: 40px "HUGEAvantGardeBold", sans-serif
}

.tile.image img {
    width: 100%;
    height: auto
}

.tile.work {
    font: 40px "HUGEAvantGardeBold", sans-serif
}

.tile.work figcaption {
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -moz-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    -webkit-transition: transform 0.4s;
    transition: transform 0.4s;
    /*font-size: 4em;*/
    /*color: #000 !important;*/
    color: #fff !important;
    line-height: 800%;
    text-align: center !important;
    /*background-color: aqua;*/
}

.tile.work img {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1)
}

.tile.work figure:hover figcaption {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1)
}

.tile.work figure:hover img {
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.tile.quote {
    background: #94d501;
    font: 32px "Galaxie"
}

.tile.quote .center span {
    text-align: left
}

.tile.quote small {
    display: inline-block;
    font-size: 0.5em;
    top: 10px
}

.tile.quote em {
    font-family: "HUGEAvantGardeBold", sans-serif
}

.tile.fact {
    font: 24px "Galaxie"
}

.tile.fact em {
    font: 100px/0.8 "HUGEAvantGardeBold", sans-serif
}

.tile.fact figure img {
    opacity: 1 !important;
    filter: alpha(opacity=100)
}

.tile.fact figure figcaption {
    opacity: 1
}

.tile.text {
    height: 480px;
    background: #fff
}

.tile.text .eyebrow {
    margin-bottom: 32px;
    color: #777
}

.tile.text h5 {
    font: 28px/36px "Galaxie"
}

.tile.text a {
    display: block;
    height: 100%;
    padding: 50px 40px
}

.tile.text a:hover {
    background: #94d501;
    
    color: #fff;
	/*background: #702777;*/
}

.tile.text a:hover .eyebrow,
.tile.text a:hover b {
    color: #fff
}

.tile.time {
    background: #333 !important;
    text-align: center
}

.tile.time .clock {
    display: inline-block
}

.tile.time .clock .minute,
.tile.time .clock .hour {
    background: #fff
}

.tile.time .analog.clock {
    margin-top: 60px;
    width: 160px;
    height: 160px
}

.tile.time .hand {
    background: #fff
}

.tile.video {
    background: #000
}

.tile.video .popout {
    -webkit-perspective: 1
}

.tile.video .popout.engage .play {
    top: 50%;
    margin-top: 50px
}

.tile.video video {
    min-height: 320px
}

.tile.video .close {
    right: 28px
}

.tile figure {
    height: 100%;
    background: #94d501;
    /*background: #f5f5f5;*/
}

.tile figure figcaption {
    opacity: 0
}

.tile figure img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

.tile figure:hover figcaption {
    opacity: 1
}

.tile figure:hover img,
.tile figure:hover canvas {
    opacity: 0.1;
}

.tile figure span {
    text-align: center;
    letter-spacing: -0.06em
}

body:not(.touch-device) .tile.video.paused .popout:not(.overlay) video {
    width: 200%;
    max-height: 320px;
    margin-left: -50%;
}

@media (min-width: 0) and (max-width: 656px) {
    #mosaic figure .center {
        vertical-align: bottom;
        text-align: left;
        /*margin-left: auto !important;*/
        /*margin-right: auto !important;*/
    }
}

@media (min-width: 657px) and (max-width: 977px) {
    #mosaic .tile.quote {
        font: 28px "Galaxie"
    }
}

@media (min-width: 1297px) {
    #mosaic .tile.time .analog.clock {
        margin-top: 92px
    }
}

#more #mosaic li {
    float: none;
}



@keyframes fade-in {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.workpage {
    background: #f7f7f7;
    text-align: center
}

.workpage header h1 {
    padding-top: 0;
    height: 100%;
    font-size: 90px
}

.workpage header .video:not(.teaser)+h1 {
    display: none
}

.workpage #mosaic {
    padding-bottom: 80px
}

.workpage #recent-work .button {
    margin-bottom: 140px
}

.workpage #client-logos-list {
    padding-top: 90px
}

@media (min-width: 0) and (max-width: 656px) {
    .workpage.touch-device header .video {
        height: 640px
    }
    .workpage #client-logos-list li {
        width: 33.3333%
    }
}

@media (min-width: 1297px) {
    .workpage #mosaic .container {
        padding: 0 1px
    }
    .workpage #mosaic .tile {
        width: 426px;
        height: 426px
    }
    .workpage #mosaic .tile img {
        width: 100%;
        height: 100%
    }
    .workpage #mosaic .tile.quote .center span {
        padding-right: 112px
    }
    .workpage #mosaic .tile.video video {
        min-height: 427px
    }
    .workpage #client-logos-list li {
        width: 20%
    }
}

.officepage #mosaic {
    margin-bottom: 90px
}

.officepage #mosaic .time .second {
    background: #94d501
}

.officepage #mosaic .time .second:before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    left: -5px;
    bottom: -7px;
    background: #94d501
}

.officepage #mosaic .time .second:after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left: -5px;
    top: -14px;
    border: 4px solid #ea158e;
    background: none
}

.officepage #mosaic .time .digital {
    color: #fff;
    font: 30px "HUGEAvantGardeBold", sans-serif;
    padding: 30px;
    display: block
}

.officepage #mosaic #job-openings-count {
    background: #000
}

@media (min-width: 0) and (max-width: 656px) {
    .officepage header {
        height: 640px;
        padding-top: 160px
    }
    .officepage header h1 {
        font-size: 160px
    }
    .officepage header .button {
        width: 200px
    }
    .officepage #mosaic .digital {
        font-size: 60px
    }
}

@media (min-width: 657px) and (max-width: 977px) {
    .officepage header h1 {
        font-size: 160px
    }
}

@media (min-width: 1297px) {
    .officepage #mosaic .container {
        padding: 0 1px
    }
    .officepage #mosaic .tile {
        width: 426px;
        height: 426px
    }
    .officepage #mosaic .tile img {
        width: 100%;
        height: 100%
    }
    .officepage #mosaic .tile.quote .center span {
        padding-right: 112px
    }
    .officepage #mosaic .tile.video video {
        min-height: 427px
    }
}

.hellopage #hello.friend section.hello-mosaic .box-sized,
.hellopage #hello.friend section.hello-mosaic #mosaic ul li,
.hellopage #hello.friend section.hello-mosaic #mosaic .video:not(.playing) video,
.hellopage #hello.friend section.hello-mosaic #mosaic .text-overlay {
    width: 370px;
    height: 380px;
    margin: 0;
    padding: 0;
    max-width: none;
    max-height: none
}

.hellopage #hello.friend section.hello-mosaic #mosaic {
    display: table;
    margin: 0 auto
}

.hellopage #hello.friend section.hello-mosaic #mosaic ul {
    width: 1110px
}

.hellopage #hello.friend section.hello-mosaic #mosaic ul li {
    display: inline;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000
}

.hellopage #hello.friend section.hello-mosaic #mosaic .video.tile .close,
.hellopage #hello.friend section.hello-mosaic #mosaic .video.paused .close {
    display: block
}

.hellopage #hello.friend section.hello-mosaic #mosaic .video.tile .play.button,
.hellopage #hello.friend section.hello-mosaic #mosaic .video.paused .play.button {
    height: 50px;
    width: 50px;
    top: auto;
    bottom: 30px
}

.hellopage #hello.friend section.hello-mosaic #mosaic .video:not(.playing) video {
    visibility: hidden
}

.hellopage #hello.friend section.hello-mosaic #mosaic .text-overlay {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    padding: 70px
}

.hellopage #hello.friend section.hello-mosaic #mosaic .text-overlay h5 {
    font-size: 28px;
    line-height: 1
}

.hellopage #hello.friend section.hello-mosaic #mosaic .text-overlay span {
    font-size: 0.9em
}

@media (min-width: 977px) and (max-width: 1296px) {
    #hello.stranger header .hello-title {
        min-height: 460px
    }
    #hello.stranger main .container {
        width: 780px;
        padding: 0 40px
    }
    #hello.stranger main #login-form input[type=submit],
    #hello.stranger main #login-form .jobpage textarea[type=submit],
    .jobpage #hello.stranger main #login-form textarea[type=submit] {
        width: 160px
    }
    #hello.stranger .button.black {
        width: auto
    }
    #hello.friend section.hello-mosaic #mosaic ul {
        width: auto !important
    }
    #hello.friend section.hello-mosaic #mosaic ul li {
        width: 33% !important
    }
    #hello.friend section.hello-mosaic #mosaic ul li .text-overlay {
        width: 100% !important
    }
}


.detail header {
    text-align: center;
    padding: 92px 0 72px;
    border-bottom: 10px solid #efefef;
    height: auto;
    min-height: initial
}

.detail header span {
    font-family: "GalaxieItalic"
}

.detail header .carousel {
    padding-top: 0
}

.detail aside h5 {
    line-height: 1
}

.detail aside em {
    font: 12px/18px "GalaxieItalic";
    color: #666;
    letter-spacing: 0;
    display: block;
    margin: 5px 0
}

.detail aside .meta {
    font: 11px/15px Arial, sans-serif;
    list-style: none;
    margin: 10px 0 32px
}

.detail aside .meta li {
    margin: 5px 0
}

.detail aside .meta span {
    font-weight: bold
}

.detail aside .who {
    margin: 10px 0
}

.detail aside .who li {
    margin-top: 20px
}

.detail aside .who img {
    margin: 0 0 12px 0;
    border-radius: 50%
}

.detail aside .who h6 {
    font-size: 1em;
    font-family: "Galaxie"
}

.detail aside .who span {
    color: #333;
    font-size: 0.6em;
    font-style: italic
}

.detail aside .black.button {
    margin-bottom: 18px
}

.detail main {
    background: #f7f7f7
}

.detail main .with-panels {
    top: 48px
}

.detail main .with-panels .formatting {
    padding: 0 200px 0 80px
}

.detail main .with-panels p {
    background: #94d501;
    color: #fff;
    display: inline-block;
    font-size: 20px;
    font-style: italic;
    margin-bottom: 0;
    padding: 9px 10px
}

.detail main section {
    padding: 72px 0
}

.detail main section h1,
.detail main section h2,
.detail main section h3,
.detail main section h4,
.detail main section .tile.text time,
.tile.text .detail main section time,
.detail main section h5,
.detail main section h6 {
    font-family: "HUGEAvantGardeBold", sans-serif;
    letter-spacing: -0.06em;
    margin-bottom: 0.5em
}

.detail main section h4,
.detail main section .tile.text time,
.tile.text .detail main section time {
    font-size: 28px
}

.detail main section a {
    color: #94d501
}

.detail main section a:hover {
    text-decoration: underline
}

.detail main section p,
.detail main section ul,
.detail main section ol {
    font: 16px/2 "Galaxie";
    margin-bottom: 2em
}

.detail main section img {
    width: 100%;
    margin: 2em 0
}

.detail main section .magenta-dot {
    background-color: #94d501;
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 4px
}

.detail main section .formatting {
    min-height: 240px
}

.detail main section .formatting .video:first-child,
.detail main section .formatting .media:first-child {
    margin-top: 0
}

.detail main section .formatting p {
    word-wrap: break-word
}

.detail main section .formatting ul li {
    padding-left: 20px;
    position: relative
}

.detail main section .formatting ul li:before {
    border-bottom: 5px solid transparent;
    border-left: 9px solid #ec008c;
    border-top: 5px solid transparent;
    content: '';
    height: 0;
    left: 0;
    position: absolute;
    top: 10px;
    width: 0;
    -moz-transform: scale(0.9999)
}

.detail main section .formatting ol {
    counter-reset: item
}

.detail main section .formatting ol li {
    padding-left: 30px
}

.detail main section .formatting ol li:before {
    content: counters(item, ".") " ";
    counter-increment: item;
    top: 0
}

.detail main section .formatting li ul,
.detail main section .formatting li ol {
    margin-bottom: 0
}

.detail main section .formatting li:before {
    color: #94d501;
    position: absolute;
    left: 0
}

.detail main section .formatting li li {
    margin-left: 48px
}

.detail main section .formatting li li:before {
    color: #ccc
}

.detail main section.interlude {
    background: #fff;
    padding-bottom: 0;
    padding-top: 0;
    z-index: 100;
    width: 100%;
    height: auto;
    position: relative
}

.detail main section.interlude img {
    margin: 0;
    display: inherit
}

.detail main section.interlude .container {
    padding: 0
}

.detail main section.interlude .reveal {
    height: 566px;
    background-attachment: fixed;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

@media (min-width: 0) and (max-width: 656px) {
    .detail main section.interlude .reveal {
        background-attachment: initial
    }
}

@media (min-width: 657px) and (max-width: 977px) {
    .detail main section.interlude .reveal {
        background-attachment: initial
    }
}

.detail main section.interlude.two-tone {
    padding-top: 72px !important;
    padding-bottom: 0
}

.detail main section.interlude.two-tone:after {
    content: '';
    display: block;
    height: 240px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #f7f7f7;
    z-index: -1
}

.detail main section.interlude.inlined {
    padding: 0
}

.detail main #slideshow {
    overflow: hidden
}

.detail main figcaption {
    text-align: center;
    color: #333
}

.detail main .video {
    margin: 5em 0 6em;
    background-size: 100%;
    background-position: 0px
}

.detail main .media {
    height: 0;
    margin: 5em 0 6em;
    padding-bottom: 56.25%
}

.detail main .media iframe,
.detail main .media embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.detail main .media.aspect-4-3 {
    padding-bottom: 75%
}

.detail #more {
    z-index: 200;
    bottom: -60px;
    overflow: hidden
}

.detail #more:after {
    height: 192px;
    background: #000;
    width: 100%;
    content: '';
    position: absolute;
    bottom: 0;
    z-index: -1
}

.detail.perspective header .meta span {
    font-family: "GalaxieItalic"
}

.detail.perspective aside em {
    margin-bottom: 24px
}

.detail.perspective aside .who {
    margin-top: 0
}

.detail.perspective aside .who li {
    margin-top: 0
}

.detail.event h1 {
    font-size: 100px
}

.detail.event.passed header h1 {
    display: inline-block;
    padding: 0 40px;
    color: #94d501
}

.detail.event.passed header h1:before {
    position: absolute;
    content: '';
    left: 0;
    top: 40%;
    right: 0;
    border: 8px solid #000
}

.detail.event.passed aside em {
    text-decoration: line-through
}

.detail.event.passed aside .rsvp {
    display: none
}

@media (min-width: 0) and (max-width: 656px) {
    .detail header {
        padding: 140px 0 84px
    }
    .detail header .container {
        padding: 0 40px;
        overflow: hidden
    }
    .detail header .carousel .slides {
        overflow: visible
    }
    .detail header h1 {
        /*font-size: 98px !important;*/
    }
    .detail header h5 {
        font-size: 26px;
        margin: 0
    }
    .detail aside {
        border-top: 12px solid #ededed;
        padding: 54px 0;
        line-height: 1.2
    }
    .detail aside .container {
        padding: 0 40px
    }
    .detail aside h5 {
        margin-bottom: 36px
    }
    .detail aside h5 span {
        font-size: 22px;
        color: #000
    }
    .detail aside h5 span:before {
        content: '/';
        padding: 0 3px
    }
    .detail aside .meta {
        border-top: 1px solid #bcbcbc;
        font-size: 22px;
        padding-top: 40px;
        margin: 60px 0;
        line-height: 1.5
    }
    .detail aside .who li {
        margin-bottom: 40px
    }
    .detail aside .who li:before,
    .detail aside .who li:after {
        content: " ";
        display: table
    }
    .detail aside .who li:after {
        clear: both
    }
    .detail aside .who img {
        float: left;
        clear: left;
        margin: -8px 20px 0 0
    }
    .detail main .with-panels .formatting {
        padding: 0 40px
    }
    .detail main section {
        padding-bottom: 24px
    }
    .detail main section .formatting {
        padding: 0 40px
    }
    .detail main section .formatting ul li:before {
        top: 22px
    }
    .detail main section h3 {
        font-size: 60px
    }
    .detail main section h4,
    .detail main section .tile.text time,
    .tile.text .detail main section time {
        font-size: 44px
    }
    .detail main section p {
        font: 28px/2.1 "Galaxie";
        margin-bottom: 2em
    }
    .detail main section p.last::after {
        width: 17px;
        height: 17px
    }
    .detail main section li {
        font: 28px/2.1 "Galaxie";
        margin-bottom: 0
    }
    .detail main section iframe {
        max-width: 560px
    }
    .detail main section .slides {
        overflow: visible
    }
    .detail main .video {
        height: 312px
    }
    .detail.iPhone main section p {
        font: 29px/2.1 "Galaxie"
    }
    .detail #more .slides {
        overflow: hidden
    }
    .detail #more .tile figure img {
        opacity: 0.3
    }
    .detail #more .tile figure figcaption {
        opacity: 1
    }
    .detail.casestudy #more li {
        width: 640px;
        height: 640px
    }
    .detail.casestudy #more li.work {
        padding: 0
    }
    .detail.event aside .meta {
        border-top: 0;
        margin: 30px 0 60px;
        padding: 0
    }
    .detail.event aside ul {
        font-size: 40px
    }
    .detail.event aside h5 {
        font-size: 44px
    }
}

@media (min-width: 657px) and (max-width: 977px) {
    .detail header {
        padding-bottom: 40px
    }
    .detail header h1 {
        margin-bottom: 0.4em
    }
    .detail header h5 {
        font-size: 15px;
        margin: 0
    }
    .detail aside {
        padding: 48px 0 24px;
        border-top: 12px solid #ededed
    }
    .detail aside.mult-author .actions {
        position: relative
    }
    .detail aside .container {
        padding: 0 40px
    }
    .detail aside .meta {
        font-size: 14px;
        margin-top: 16px
    }
    .detail aside .actions {
        position: absolute;
        top: 0;
        right: 0;
        width: 260px
    }
    .detail aside h5 span:before {
        content: '/';
        padding: 0 3px
    }
    .detail aside .who li {
        float: left;
        width: 50%
    }
    .detail main .with-panels .formatting {
        padding: 0 40px
    }
    .detail main section .formatting {
        padding: 0 40px
    }
    .detail main section.interlude.two-tone:after {
        height: 120px
    }
    .detail figcaption {
        font-size: 17px
    }
    .detail q {
        margin-left: 0;
        margin-right: 0
    }
}

@media (min-width: 977px) and (max-width: 1296px) {
    .detail aside {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0
    }
    .detail aside .container {
        height: 0px;
        overflow: visible;
        padding: 75px 0 0 800px
    }
    .detail main .with-panels .formatting {
        padding: 0 200px 0 80px
    }
    .detail main section .container .formatting {
        padding: 0 200px 0 80px
    }
    .detail main section.interlude.two-tone:after {
        height: 180px
    }
}

@media (min-width: 1297px) {
    .detail aside {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0
    }
    .detail aside .container {
        height: 0px;
        overflow: visible;
        padding: 92px 0 0 1060px
    }
    .detail main .with-panels .container {
        padding: 0 80px
    }
    .detail main .with-panels .formatting {
        padding: 0 240px 0 80px
    }
    .detail section .container {
        padding: 0 80px
    }
    .detail section .container .formatting {
        padding: 0 240px 0 80px
    }
    .detail main {
        padding-top: 14px
    }
    .detail .image img {
        width: 100%;
        height: auto
    }
    .detail figcaption {
        padding: 0 160px
    }
    .detail.casestudy aside em {
        display: block;
        font-size: 14px
    }
    .detail.casestudy #more .work figcaption {
        padding: 0
    }
    .detail.perspective header .container {
        padding: 0 240px
    }
    .detail.perspective header h5,
    .detail.perspective header h5+span {
        display: none
    }
}

.detail #share {
    text-align: center
}

.detail #share>div {
    text-align: center;
    display: inline-block
}

.detail #share>div h5 {
    font-family: "Galaxie";
    font-size: 26px;
    padding-bottom: 46px;
    margin-bottom: 32px
}

.detail #share>div li {
    display: inline-block;
    width: 112px;
    padding: 0 24px;
    color: #999;
    font-size: 12px;
    border-left: 1px solid #dadada
}

.detail #share>div li:first-child {
    border: none
}

.detail #share>div h6 {
    color: #000
}

.detail #share>div a:hover h6 {
    color: #94d501
}

.detail #share>div .share-url {
    padding-top: 40px;
    display: inline-block;
    width: 529px
}

.detail #share>div .share-url span {
    background-position: 0 50%;
    height: 70px;
    line-height: 70px
}

.detail #share>div input,
.detail #share>div .jobpage textarea,
.jobpage .detail #share>div textarea {
    width: 383px
}

.detail #share>div .zeroclipboard-is-hover {
    background-color: #94d501
}

@media (min-width: 0) and (max-width: 656px) {
    .detail #share>div h1 {
        font-size: 50px;
        margin-bottom: 1.5em
    }
    .detail #share>div h6,
    .detail #share>div .share-url,
    .detail #share>div .shares {
        display: none
    }
    .detail #share>div li {
        border: 0;
        margin: 18px 30px 18px;
        width: auto;
        padding: 0
    }
    .detail #share>div li .social {
        width: 128px;
        height: 128px
    }
    .detail #share>div.engage {
        padding-top: 124px
    }
}

@media (min-width: 657px) and (max-width: 977px) {
    .detail #share>div .share-url {
        display: none
    }
}

@media (min-width: 1297px) {
    .detail #share>div {
        width: 800px;
        height: 500px
    }
    .detail #share>div li {
        border-left: 1px solid #dadada
    }
}


#projects nav span,
.carousel nav span {
    cursor: pointer;
    display: inline-block;
    background-color: transparent;
    border: 2px solid transparent;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    margin: 0 3px;
    position: relative;
    -moz-transition: border-color 0.5s;
    -o-transition: border-color 0.5s;
    -webkit-transition: border-color 0.5s;
    transition: border-color 0.5s
}

#projects nav span.active:after,
.carousel nav span.active:after {
    background-color: transparent
}

#projects nav span:after,
.carousel nav span:after {
    height: 8px;
    width: 8px;
    position: absolute;
    display: block;
    content: "";
    background-color: #bbb;
    border-radius: 50%;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s
}

.carousel {
    margin-bottom: 78px
}

.carousel .slides {
    overflow: hidden;
    position: relative
}

.carousel .slides .carousel-wrap {
    white-space: nowrap;
    font-size: 0;
    -moz-transition: all 0.5s cubic-bezier(0.33, 0.66, 0.66, 1);
    -o-transition: all 0.5s cubic-bezier(0.33, 0.66, 0.66, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.33, 0.66, 0.66, 1);
    transition: all 0.5s cubic-bezier(0.33, 0.66, 0.66, 1)
}

.carousel .slides .carousel-wrap>li {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    margin: 0 10px;
    font-size: 16px
}

.carousel .slides .carousel-wrap>li:first-child {
    margin-left: 0
}

.carousel nav {
    position: absolute;
    height: 78px;
    bottom: -78px;
    left: 0;
    width: 100%;
    padding: 32px;
    text-align: center
}

.carousel nav span.active {
    border-color: #333
}

.carousel nav span.active:after {
    background-color: transparent
}

.carousel img {
    max-width: 100%
}

.carousel .prev,
.carousel .next {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    z-index: 100
}

.carousel .prev:hover .button,
.carousel .next:hover .button {
    opacity: 0.75
}

.carousel .prev {
    left: 0
}

.carousel .prev .button {
    left: -40px
}

.carousel .next {
    right: 0
}

.carousel .next .button {
    right: -40px
}

.carousel .button {
    position: absolute;
    top: 50%;
    margin-top: -40px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 24px;
    background: #94d501;
    opacity: 0
}

.carousel .button:hover {
    opacity: 1 !important
}

.carousel.inverted .button {
    background: #393C3C;
    color: #000
}

.carousel.inverted span.active {
    border-color: #fff
}

@media (min-width: 0) and (max-width: 656px) {
    .carousel {
        padding-top: 40px
    }
    .carousel nav {
        padding: 26px
    }
    .carousel nav span {
        width: 24px;
        height: 24px;
        margin: 0 6px
    }
    .carousel nav span:after {
        width: 20px;
        height: 20px
    }
    .carousel .next,
    .carousel .prev {
        display: none
    }
    .carousel+.caption {
        padding: 0 40px
    }
}

.iPad .carousel .button {
    line-height: 78px
}

@media (min-width: 0) and (max-width: 656px) {
    .constrained li {
        padding: 0 40px
    }
}

@media (min-width: 657px) and (max-width: 977px) {
    .constrained li {
        padding: 0 100px
    }
}

@media (min-width: 977px) and (max-width: 1296px) {
    .constrained li {
        padding: 0 200px
    }
}

@media (min-width: 1297px) {
    .constrained li {
        padding: 0 200px
    }
}

/* ****************** Added by Rob 090216 END ****************** */