/*  Reset  */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}
* html .clearfix{height:1%;overflow:visible;}*+html .clearfix{min-height:1%;}.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;font-size:0;}


@font-face {
	font-family:'Cera';
	src:url(//creative.ols.design/CSS/Fonts/cera-pro-light.woff) format('woff');
	font-weight:300;
	font-style:normal;
}
@font-face {
	font-family:'Cera';
	src:url(//creative.ols.design/CSS/Fonts/cera-pro-light-italic.woff) format('woff');
	font-weight:300;
	font-style:italic;
}
@font-face {
	font-family:'Cera';
	src:url(//creative.ols.design/CSS/Fonts/cera-pro-regular.woff) format('woff');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'Cera';
	src:url(//creative.ols.design/CSS/Fonts/cera-pro-regular-italic.woff) format('woff');
	font-weight:normal;
	font-style:italic;
}
@font-face {
	font-family:'Cera';
	src:url(//creative.ols.design/CSS/Fonts/cera-pro-medium.woff) format('woff');
	font-weight:500;
	font-style:normal;
}
@font-face {
	font-family:'Cera';
	src:url(//creative.ols.design/CSS/Fonts/cera-pro-medium-italic.woff) format('woff');
	font-weight:500;
	font-style:italic;
}
@font-face {
	font-family:'Cera';
	src:url(//creative.ols.design/CSS/Fonts/cera-pro-bold.woff) format('woff');
	font-weight:bold;
	font-style:normal;
}
@font-face {
	font-family:'Cera';
	src:url(//creative.ols.design/CSS/Fonts/cera-pro-bold-italic.woff) format('woff');
	font-weight:bold;
	font-style:italic;
}
@font-face {
	font-family:'fa-light';
	src:url(//creative.ols.design/CSS/Fonts/fa-light-300.woff2) format('woff2');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'fa-solid';
	src:url(//creative.ols.design/CSS/Fonts/fa-solid-900.woff2) format('woff2');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'fa-brands';
	src:url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-brands-400.woff2) format('woff2');
	font-weight:normal;
	font-style:normal;
}


:root {

  --marge:#006ba5;
  --leela:#675a95;
  --barbie:#e63478;

  --elsa:#9ac6dd;
  --ursula:#7e84ad;
  --peppa:#d29db5;

  --belle:#f0e0a4;
  --patrick:#e5b0a7;
  --maleficent:#9bc7a3;

}


/*
——————————————————————
Global
——————————————————————
*/
html {
	font:16px/1.6 Cera, sans-serif;
	color:#000;
	background:#fff;
}
body {
	box-sizing:border-box;
	padding-top:10.2em;
	min-width:320px;
	transition:background-color 300ms;
}
html.home-wrapper body {
	padding-top:7em;
}
* {
	box-sizing:inherit;
}
h1 {
	font-weight:500;
	font-size:3.6em;
	line-height:1.05;
	text-align:center;
	margin-bottom:1em;
	letter-spacing:-0.02em;
}
h1.lower {
	text-transform:lowercase;
}
h1 strong {
	font-weight:500;
}
h1 strong + span {
	font-weight:300;
}
h1 span.project-name {
	word-break:break-word;
}
h2, h3 {
	font-weight:500;
	font-size:1.875em;
	line-height:1.1;
	margin-bottom:0.5em;
}
h3 {
	font-size:1.3em;
}
h3 strong {
	font-weight:inherit;
}
h4 {
	font-size:1.15em;
    line-height:1.25;
    margin-top:2em;
    margin-bottom:0.9em;
    font-weight:500;
}
.content {
	max-width:1400px;
	margin:auto;
	padding:0 3.2em;
	position:relative;
}
a {
	color:inherit;
	text-decoration:none;
}
strong {
	font-weight:bold;
}
blockquote {
	max-width:40rem;
	margin:1.5em auto;
	font-size:1.15em;
	line-height:1.3;
	padding:0.3em 0 0.3em 0.8em;
	border-left:0.4rem solid var(--peppa);
	font-style:italic;
}
blockquote p:last-child {
	margin:0;
}
x::selection {
	xcolor:#fff;
	xbackground:var(--barbie);
}
.center {
	text-align:center;
}
.form-input {
	padding:0.5em;
	border-radius:0.2em;
	border:1px solid #bbb;
	outline:0;
	width:15rem;
	font-size:1.2em;
	display:inline-block;
	margin:1em 0;
}
.form-button {
	display:inline-block;
	color:#fff;
	background:#000;
	line-height:1.9em;
	padding:0 0.8em;
	letter-spacing:0.2em;
	text-transform:uppercase;
	font-weight:500;
	font-size:0.85em;
	border:0;
	cursor:pointer;
	width:15rem;
}
.form-error {
	color:var(--barbie);
}
.form {
	padding:3em;
}
.form h3 {
	line-height:1.2;
}

/*
——————————————————————
Header
——————————————————————
*/
#header {
	position:fixed;
	top:0; left:0;
	z-index:2;
	width:100%;
	height:7em;
	margin-bottom:3.2em;
	backdrop-filter:saturate(180%) blur(20px);
	background:rgba(249, 249, 251, .8);
	padding-right:var(--fancybox-scrollbar-compensate, 0px);
	text-transform:lowercase;
}
.home-wrapper #header {
	margin-bottom:0;
}
.ols-logo {
	position:absolute;
	top:1em; left:calc(50% - 3em);
	width:6em;
	height:5em;
	background:url(/Images/logo-ols-2023.png) center no-repeat;
	background-size:contain;
}
.portfolio .ols-logo {
	left:3.2em;
}
.portfolio #tag-menu,
.portfolio #category-menu {
	display:none;
}
#site-menu {
	position:absolute;
	top:2.4em; right:4em;
}
#site-menu .trigger {
	float:right;
	display:block;
	font-size:1.2em;
	height:2rem;
	line-height:2rem;
	cursor:pointer;
	font-weight:500;
	user-select:none;
}
#site-menu .trigger span {
	display:none;
}
#site-menu .trigger:after {
	content:'\f0c9';
	font-family:fa-light;
	font-size:1.2em;
	transform:scale(1.4,1);
	transform-origin:100% 50%;
	display:inline-block;
	width:1em;
	text-align:center;
	transition:transform linear 200ms;
}
.nav-active #site-menu .trigger:after {
	color:var(--barbie);
}
#tag-menu {
	position:absolute;
	top:2.4em; left:4em;
}
#category-menu {
	position:absolute;
	top:2.5em; left:12em;
}
#category-menu .trigger span + span {
	display:none;
}
.menu .trigger {
	display:block;
	font-size:1.2em;
	height:2rem;
	line-height:2rem;
	cursor:pointer;
	user-select:none;
}
.menu .trigger:after {
	content:'\f078';
	font-family:fa-light;
	font-size:0.9em;
	display:inline-block;
	width:1em;
	text-align:center;
	transition:transform linear 200ms;
	margin-left:0.5em;
}
.menu .trigger-active:after {
	color:var(--barbie);
	transform:rotate(180deg);
}
.menu ul {
	display:none;
	background:#f5f5f5;
	background:#fff;
	padding:1em 0;
	font-size:1.2em;
	box-shadow:0 0 0.5em rgba(0,0,0,0.1);
}
#site-menu ul {
	float:right;
	clear:right;
}
.menu a {
	display:block;
	white-space:nowrap;
	line-height:1.7;
	padding:0 2.5em 0 1.6em;
}
.menu a:hover {
	background:#f7f7f7;
}
.menu a:active {
	background:#f2f2f2;
}
.nav-active #site-menu ul,
.menu .trigger-active + ul {
	display:block;
}
.get-in-touch {
	position:absolute;
	top:2.1em; right:9em;
	font-size:1.2em;
}


/*
——————————————————————
Cases Common
——————————————————————
*/
.cases li {
	margin-bottom:3.2em;
}
.cases .image-wrapper {
	display:block;
	margin-bottom:1.2em;
	margin-bottom:0.7em;
	background:#f5f5f5;
	border-radius:0.7em;
}
.cases img,
.cases video {
	display:block;
	height:auto;
	max-width:100%;
	border-radius:0.7em;
	background:#fcfcfc;
	mix-blend-mode:multiply;
}
.cases .text {
	line-height:1.25;
}



.cases {
	width:calc(100% + 1.2em);
	margin-right:-1.2em;
}
.cases li {
	float:left;
	width:calc(25% - 1.2em);
	margin-right:1.2em;
}
.cases li:nth-child(4n + 1) {
	clear:left;
}
.cases h2 {
	font-size:1.1em;
	margin-bottom:0.07em;
}
.cases h2 + span {
	color:#999;
}

.cases-center {
	text-align:center;
}
.cases-center li {
	display:inline-block;
	float:none;
	margin:0 0.8em 3em 0.8em;
	width:calc(25% - 2em);
	vertical-align:top;
}
.cases-center .image-wrapper {
	margin:0;
}
.cases-center .text a {
	padding:0.7em;
}


/*
——————————————————————
Posts Common
——————————————————————
*/
.posts li {
	margin-bottom:3.2em;
}
.posts .image-wrapper {
	display:block;
	position:relative;
	width:0;
	height:0;
	padding:33.333% 50%;
	margin-bottom:1.6em;
	background:#f5f5f5;
	overflow:hidden;
}
.posts img {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	mix-blend-mode:multiply;
}
.posts .text {
	line-height:1.25;
}
.tag-wrapper {
	display:block;
	text-align:center;
	margin:-3.8em 0 2.2em 0;
	position:relative;
	z-index:1;
}
.tag {
	color:#000;
	background:#fff;
	display:inline-block;
	line-height:1.9em;
	padding:0 0.8em;
	letter-spacing:0.2em;
	text-transform:uppercase;
	font-weight:500;
	font-size:0.85em;
}
.tag-back {
	margin-top:3em;
	color:#fff;
}
.tag-back:before {
	display:inline-block;
	width:1.8em;
	content:'\f053';
	font-family:fa-solid;
	font-weight:normal;
	text-align:left;
}

@media (min-width: 1024px) {
	.tag-wrapper {
		height:2em;
		margin:0 0 0.7em 0;
		text-align:left;
	}
	.tag {
		color:#fff;
	}
}


.tag-marge      { background-color:var(--marge) }
.tag-leela      { background-color:var(--leela) }
.tag-barbie     { background-color:var(--barbie) }
.tag-elsa       { background-color:var(--elsa) }
.tag-ursula     { background-color:var(--ursula) }
.tag-peppa      { background-color:var(--peppa) }
.tag-belle      { background-color:var(--belle) }
.tag-patrick    { background-color:var(--patrick) }
.tag-maleficent { background-color:var(--maleficent) }

.tag-marge      + h1 { border-color:var(--marge) }
.tag-leela      + h1 { border-color:var(--leela) }
.tag-barbie     + h1 { border-color:var(--barbie) }
.tag-elsa       + h1 { border-color:var(--elsa) }
.tag-ursula     + h1 { border-color:var(--ursula) }
.tag-peppa      + h1 { border-color:var(--peppa) }
.tag-belle      + h1 { border-color:var(--belle) }
.tag-patrick    + h1 { border-color:var(--patrick) }
.tag-maleficent + h1 { border-color:var(--maleficent) }

.tag-marge      + h1 + .intro + .byline span:before { color:var(--marge) }
.tag-leela      + h1 + .intro + .byline span:before { color:var(--leela) }
.tag-barbie     + h1 + .intro + .byline span:before { color:var(--barbie) }
.tag-elsa       + h1 + .intro + .byline span:before { color:var(--elsa) }
.tag-ursula     + h1 + .intro + .byline span:before { color:var(--ursula) }
.tag-peppa      + h1 + .intro + .byline span:before { color:var(--peppa) }
.tag-belle      + h1 + .intro + .byline span:before { color:var(--belle) }
.tag-patrick    + h1 + .intro + .byline span:before { color:var(--patrick) }
.tag-maleficent + h1 + .intro + .byline span:before { color:var(--maleficent) }

.tag-marge      + h1 + .project-nav a { color:var(--marge) }
.tag-leela      + h1 + .project-nav a { color:var(--leela) }
.tag-barbie     + h1 + .project-nav a { color:var(--barbie) }
.tag-elsa       + h1 + .project-nav a { color:var(--elsa) }
.tag-ursula     + h1 + .project-nav a { color:var(--ursula) }
.tag-peppa      + h1 + .project-nav a { color:var(--peppa) }
.tag-belle      + h1 + .project-nav a { color:var(--belle) }
.tag-patrick    + h1 + .project-nav a { color:var(--patrick) }
.tag-maleficent + h1 + .project-nav a { color:var(--maleficent) }


/*
——————————————————————
Top Posts
——————————————————————
*/

@media (min-width: 1024px) {
	#top-posts {
		position:relative;
	}
	#featured-post {
		position:absolute;
		top:0;
		left:24%;
		width:52%;
		padding:0 3.2em;
		z-index:1;
	}
	#featured-post .image-wrapper {
		padding:50%;
	}
	#top-posts #featured-post .tag-wrapper {
		margin:-4.6em 0 2.6em 0;
	}
	#featured-post img {
		width:150%;
		left:-25%;
	}
	#posts-left {
		float:left;
		width:24%;
	}
	#posts-right {
		float:right;
		width:24%;
	}
	#posts-left h2,
	#posts-right h2 {
		font-size:1.25em;
	}
	#top-posts .tag-wrapper {
		text-align:center;
		margin:-4em 0 2em 0;
		position:relative;
		z-index:1;
	}
	#top-posts .tag {
		color:#000;
		background:#fff;
	}
	#top-posts h2 {
		transition:color 200ms;
	}
	#top-posts a:hover h2 {
		color:#f34688;
	}
}


/*
——————————————————————
Top Cases
——————————————————————
*/
@media (min-width: 1024px) {
	#top-cases.cases {
		position:relative;
		width:auto;
		margin-right:0;
		min-height:56em;
	}
	#featured-case {
		position:absolute;
		top:0;
		left:24%;
		width:52%;
		padding:0 3.2em;
	}
	#cases-left {
		float:left;
		width:24%;
	}
	#cases-right {
		float:right;
		width:24%;
	}
	#featured-case li,
	#cases-left li,
	#cases-right li {
		float:none;
		width:auto;
		margin-right:0;
	}
	#featured-case h2,
	#cases-left h2,
	#cases-right h2 {
		font-size:1.25em;
	}
	#top-cases h2 {
		transition:color 200ms;
	}
	#top-cases a:hover h2 {
		color:#f34688;
	}
}



/*
——————————————————————
Divider
——————————————————————
*/
div.divider {
	background:#f5f5f5;
	color:#fff;
	background:var(--elsa);
	text-align:center;
	font-size:1.875em;
	font-weight:300;
	line-height:1.4;
	padding:1.6em;
	margin-bottom:4rem;
}

/*
——————————————————————
Posts
——————————————————————
*/
@media (min-width: 1024px) {
	#posts {
		max-width:60em;
		margin:auto;
	}
	#posts .image {
		float:left;
		width:20em;
	}
	#posts .text {
		float:right;
		width:calc(100% - 21.8em);
		padding-top:1.5em;
	}
}


.pager {
	color:#aaa;
	text-align:center;
	margin:4em 0;
}
.pager .count,
.paging {
	display:block;
}
.paging {
	margin-top:1.2em;
}
.pager span.disabled,
.pager span.divider {
	display:none;
}
.pager span.active,
.pager a {
	display:inline-block;
	border:1px solid #fff;
	min-width:1.8em;
	text-align:center;
	line-height:1.8em;
	border-radius:50%;
}
.pager span.active {
	border:1px solid var(--marge);
	background:var(--marge);
	color:#fff;
	cursor:default;
}

/*
——————————————————————
Related Posts
——————————————————————
*/
#related-wrapper {
	margin-top:5em;
}
#related-wrapper h3 {
	text-align:center;
	margin-bottom:2em;
	font-size:1.7em;
}
#related-posts {
	width:calc(100% + 2.4em);
	margin-right:-2.4em;
}
#related-posts li {
	float:left;
	width:calc(25% - 2.4em);
	margin-right:2.4em;
}
#related-posts .tag-wrapper {
	text-align:center;
	margin:-3.8em 0 2.2em 0;
	position:relative;
	z-index:1;
}
#related-posts .tag {
	color:#000;
	background:#fff;
}
#related-posts h2 {
	font-size:1.25em;
}

/*
——————————————————————
Post Page
——————————————————————
*/
#post {
	max-width:1000px;
}
#post-header {
	text-align:center;
	margin-bottom:4em;
}
.portfolio #post-header {
	margin-bottom:2em;
}
.portfolio-logo-wrapper {
	height:7em;
	text-align:center;
	margin-bottom:2em;
}
.portfolio-logo-wrapper img {
	display:inline-block;
	max-width:10em;
	max-height:7em;
}
#post-header .tag {
	display:inline-block;
	line-height:1.9em;
	padding:0 0.9em;
	color:#fff;
	letter-spacing:0.2em;
	text-transform:uppercase;
	font-weight:500;
	font-size:0.85em;
	margin-bottom:1.5em;
}
#post-header h1 {
	border-style:solid;
	border-width:0 0 2px 0;
	border-color:var(--elsa);
	padding-bottom:0.4em;
	margin-bottom:0.4em;
}
#post-header h1.no-border {
	border:0;
}
.byline {
	text-align:center;
	font-size:1.1em;
	font-weight:500;
	margin-bottom:1em;
}
.byline span {
	display:inline-block;
}
.byline span + span:before {
	content:'•';
	display:inline-block;
	width:1.5em;
}
.intro {
	font-size:1.2em;
	line-height:1.3;
	font-style:italic;
	max-width:780px;
	margin:0 auto 1em auto;
	text-align:center;
}
.work .intro {
	margin:-1.2em auto 3em auto;
	text-align:center;
}
.category-intro {
	max-width:580px;
}
.markdown {
	font-size:1.2em;
}
.markdown h2 {
	font-size:1.6em;
	margin:1.7em 0 0.7em 0;
}
.markdown h3 {
	margin:1.7em 0 0.7em 0;
}
.markdown p {
	margin-bottom:1em;
}
.markdown a {
	color:var(--barbie);
	border-bottom:1px solid #ddd;
	transition:border-color 150ms;
}
.markdown a:hover {
	border-color:var(--barbie);
}
.markdown figure {
	margin:0;
}
.markdown img {
	display:block;
	margin:2.5em auto;
	max-width:100%;
}
.markdown img.portrait {
	max-width:30em;
}
.video-wrapper {
	max-width:30em;
	margin:3em auto;
}


/*
——————————————————————
Author Profile
——————————————————————
*/
.author-profile {
	max-width:35em;
	margin:6em auto;
	padding:1.8em 0;
	border-top:0.4em solid var(--peppa);
	border-bottom:0.4em solid var(--peppa);
}
.author-profile img {
	display:block;
	width:8em;
	height:8em;
	margin:0 auto 1.8em auto;
	border-radius:50%;
}
.author-profile p {
	font-size:1.2em;
}

/*
——————————————————————
Project Page
——————————————————————
*/
.project-header {
	position:relative;
}
.project-header h1 {
	font-size:3.2em;
	padding-left:2em;
	padding-right:2em;
}
.project-nav a {
	position:absolute;
	top:2.4em; left:0;
	width:4em;
	height:5em;
	text-align:center;
	opacity:0.5;
	color:var(--elsa);
}
.portfolio .project-nav a {
	top:-0.6em;
}
.project-nav a:hover {
	opacity:0.8;
}
.project-nav a:active {
	opacity:1;
}
.project-nav a:last-child {
	left:auto; right:0;
}
.project-nav a:after {
	content:'\f053';
	font-family:fa-light;
	font-size:2.5em;
	line-height:2;
}
.project-nav a:last-child:after {
	content:'\f054';
}
.project-nav span {
	display:none;
}

/*
——————————————————————
Lists
——————————————————————
*/
.markdown ul {
	padding-left:1.2em;
	margin-bottom:1.3em;
	margin-left:1em;
}
.markdown ul li {
	list-style-type:none;
	margin-bottom:0.5em;
}
.markdown ul li:before {
	display:inline-block;
	font-family:Arial,sans-serif;
    content:'●';
    color:#f34688;
    font-size:0.8em;
	width:1.5em;
	margin-left:-1.5em;
	position:relative;
	top:-0.15em;
}
.markdown ul ul li:before {
    content: "–";
	margin-left:-1.2em;
}
.markdown ol {
	padding-left:2em;
	margin-bottom:1em;
}
.#markdown ol li,
.markdown ul ol li {
	list-style:decimal;
	padding-left:0.5em;
}
.markdown ol ul li,
.markdown ul ul li {
	padding-left:0;
	margin:0.5em 0 0 0;
}

/*
——————————————————————
Pin Slider
——————————————————————
*/
.pin-wrapper {
	font-size:18px;
}
.pin-slider {
	padding:1em 0;
	position:relative;
}
.pins {
	overflow:hidden;
	height:26.6em;
	overflow:hidden;
}
.pins ul {
	width:10000px;
	height:26.6em;
	transition:margin-left ease-in-out 600ms;
}
.pins li {
	float:left;
	padding:0.8em;
	position:relative;
}
.pins ul.small {
	width:auto;
	text-align:center;
}
.pins ul.small li {
	float:none;
	display:inline-block;
}
li.comments:after,
li.approved:after {
	content:'\f075';
	font-family:fa-solid;
	font-size:0.9em;
	color:#fff;
	background:var(--elsa);
	width:2.3em;
	height:2.3em;
	line-height:2.3em;
	text-align:center;
	position:absolute;
	border-radius:50%;
	top:0.2em; right:0.2em;
	z-index:1;
}
li.approved:after {
	content:'\f00c';
	background:#61c391;
}
.pins img,
.pins video {
	display:block;
	width:auto;
	height:25em;
	box-sizing:border-box;
	outline:0;
	mix-blend-mode:multiply;
	border-radius:0.7em;
}
.pins a {
	display:block;
	position:relative;
	text-decoration:none;
	background:#f5f5f5;
	border-radius:0.7em;
}
.pin-data {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.85);
	border-radius:16px;
	transition:opacity 200ms;
	opacity:0;
	padding:4em 1em 0.7em 1em;
	text-align:center;
	color:#fff;
	font-weight:500;
}
a:hover .pin-data {
	opacity:1;
}
.pin-data h4 {
	margin-bottom:0.2em;
	color:#61c391;
}
.pin-data h4:before {
	content:'\f00c';
	font-family:fa-solid;
	font-size:0.9em;
	margin-right:0.3em;
}
.pin-data h4.comment {
	color:var(--elsa);
}
.pin-data h4.comment:before {
	content:'\f075';
}
.pin-data p {
	font-size:0.9em;
	padding:0 1.5em;
}
.pin-data span {
	display:block;
}
a:hover .pin-data:after {
	content:'view creative';
	position:absolute;
	bottom:2.4em; left:3em;
	width:calc(100% - 6em);
	background:rgba(255,255,255,0.2);
	line-height:2em;
	border-radius:2em;
}
.slide-arrow {
	position:absolute;
	top:calc(50% - 2em);
	width:4em;
	height:4em;
	color:#d0d0d0;
	text-decoration:none;
	border:0;
	background:#fff;
	border-radius:50%;
	overflow:hidden;
	padding:0;
	cursor:pointer;
}
.slide-arrow:hover {
	color:#bbb;
}
.slide-arrow:active {
	color:#aaa;
}
.slide-arrow:before {
	display:block;
	width:100%;
	text-align:center;
	font-size:4em;
	font-family:fa-light;
	line-height:4rem;
	transition:color 150ms;
	line-height:1;
}
.slide-prev {
	left:-5.4em;
}
.slide-next {
	right:-5.4em;
}
.slide-prev:before {
	content:'\f0a8';
}
.slide-next:before {
	content:'\f0a9';
}


/*
——————————————————————
Contact
——————————————————————
*/
html.contact-wrapper body {
	background:var(--ursula);
	padding-top:8em;
}
html.contact-wrapper #header {
	backdrop-filter:saturate(150%) blur(20px);
	background:rgba(249, 249, 251, .7);
	margin:0;
}
#contact {
	margin:auto;
	max-width:1400px;
	padding:4em 3.2rem;
	color:#fff;
	font-size:20px;
}
#contact h3 {
	text-transform:lowercase;
	font-size:1.5em;
	margin-top:1em;
}
#contact h3:first-child {
	margin-top:0;
}
#contact #footer {
	background:var(--elsa);
}



#details {
	float:left;
	width:42%;
}
#details p {
	margin-bottom:2em;
}
.contact-form {
	float:right;
	width:52%;
}
.contact-form p {
	margin-bottom:1.7em;
}
.contact-form p.message {
	font-size:1.2em;
	line-height:1.4;
}
.contact-form p.message span {
	white-space:nowrap;
}
.contact-form label {
	display:block;
	font-size:1em;
	margin-bottom:0.4em;
	text-transform:lowercase;
}
.contact-form textarea, .contact-form input.text, .contact-form .button {
	display:block;
	width:100%;
	padding:0.7em;
	color:#000;
	font-weight:normal;
	border-radius:0.4em;
	border:2px solid transparent;
	outline:0;
}
.contact-form input.error {
	border-color:var(--barbie);
}
.contact-form textarea {
	height:12em;
	resize:none;
}
.contact-form .button {
	background:var(--leela);
	color:#fff;
	font-size:1.2em;
	padding:0;
	border:0;
	height:2em;
	cursor:pointer;
	margin-top:1.7em;
	-webkit-appearance:none;
	text-transform:lowercase;
	border-radius:3em;
}
html.contact-wrapper #footer {
	background:var(--elsa);
}
#contact #social {
	text-align:left;
	font-size:0.7em;
}

/*
——————————————————————
Careers
——————————————————————
*/
html.careers-wrapper body {
	background:var(--elsa);
	padding-top:7em;
}
html.careers-wrapper #header {
	backdrop-filter:saturate(150%) blur(20px);
	background:rgba(249, 249, 251, .5);
	margin:0;
}
#careers {
	color:#fff;
	font-size:20px;
}
.careers-section {
	padding:4em;
}
.careers-content {
	margin:auto;
	width:100%;
	max-width:54em;
	display:table;
}
.careers-text {
	display:table-cell;
	width:46%;
	vertical-align:top;
}
.careers-image {
	display:table-cell;
	width:49%;
	vertical-align:middle;
}
.careers-intro {
	padding-right:5em;
}


.section2 .careers-image img {
	float:left;
	max-width:85%;
}
.section3 .careers-image img {
	float:right;
	max-width:90%;
}
.section4 .careers-image img {
	float:left;
	max-width:90%;
}

.careers-content h3 {
	font-weight:normal;
	text-transform:lowercase;
	font-size:2em;
	margin-bottom:0.7em;
}
.careers-content p {
	margin-bottom:1.2em;
}
.careers-content p.question {
	font-size:1.2em;
}
.careers-content q {
	display:block;
	font-size:2.3em;
	line-height:1.15;
	margin-bottom:1.2em;
}

#careers .section1 {
	background:var(--elsa);
	position:relative;
	padding:0;
}
#careers .section1 .careers-content {
	max-width:1400px;
	padding:4em 3.2rem;
	padding-right:28em;
	position:relative;
}
.photo-strip-wrapper {
	position:absolute;
	top:0; right:0;
	width:28em;
	padding-left:3em;
	height:100%;
	overflow:hidden;
	user-select:none;
}
.photo-strip {
	width:100%;
	height:100%;
	transform:rotate(4deg);
}
.photo-strip-wrapper img {
	position:absolute;
	top:0; left:0;
	height:200%;
	animation-duration:30s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}
.photo-strip-wrapper img.strip1 {
	animation-name:animateStrip1;
}
.photo-strip-wrapper img.strip2 {
	animation-name:animateStrip2;
	top:200%;
}


@keyframes animateStrip1 {
	from {
		top:0;
	}
	to {
		top:-200%;
	}
}
@keyframes animateStrip2 {
	from {
		top:200%;
	}
	to {
		top:0;
	}
}



#careers .section2 {
	background:var(--ursula);
}
#careers .section3 {
	background:var(--maleficent);
}
#careers .section4 {
	background:var(--peppa);
}
#careers .section5 {
	background:var(--elsa);
	padding-bottom:8em;
}


/*
——————————————————————
Sharing
——————————————————————
*/
.social-sharing {
	text-align:center;
	font-size:0.75em;
}
.social-sharing li {
	display:inline-block;
	vertical-align:top;
}
.social-sharing span {
	display:none;
}
.social-sharing a {
	display:inline-block;
	color:#fff;
	background:#000;
	border-radius:50%;
	width:2.5em;
	height:2.5em;
	line-height:2.5em;
	text-align:center;
	margin:0 0.6em;
}
.social-sharing a:before {
	font-size:1.5em;
	font-family:fa-brands;
}
.social-sharing a.facebook:before  { content:'\f39e' }
.social-sharing a.instagram:before { content:'\f16d' }
.social-sharing a.linkedin:before  { content:'\f0e1' }
.social-sharing a.twitter:before   { content:'\e61b' }
.social-sharing a.tiktok:before    { content:'\e07b' }
.social-sharing a.pinterest:before { content:'\f231' }



/*
——————————————————————
Jobs
——————————————————————
*/
.job-list {
	color:var(--barbie);
	background:#fff;
	padding:1em 1.2em;
}
.job-list p {
	color:var(--elsa);
	margin:0;
}
h1.job-header {
	border-style:solid;
	border-width:0 0 2px 0;
	border-color:var(--elsa);
	padding-bottom:0.4em;
	margin-bottom:0.5em;
	text-transform:none;
}
#job-wrapper {
	max-width:1000px;
	margin:auto;
}
#job-wrapper p {
	margin-bottom:1em;
}
#job-wrapper h2 {
	font-size:2em;
	margin-bottom:1.5em;
}
.apply-button {
	display:inline-block;
	font-weight:500;
	color:#fff !important;
	background:var(--barbie);
	cursor:pointer;
	height:2em;
	line-height:2em;
	border-radius:4em;
	padding:0 1em;
	user-select:none;
	margin:1em 1em 0 0;
	border:0 !important;
	width:8em;
	text-align:center;
}

/*
——————————————————————
Application Form
——————————————————————
*/
.form {
	padding:3em;
	border-radius:7px 7px 0 0;
	position:relative;
	max-width:700px;
	background:rgba(249, 249, 251);
	margin:3em auto 0 auto;
}
.form-back {
	position:absolute;
	top:-2em; left:0;
	font-size:0.875em;
	color:#aaa;
}
.form-back:before {
	display:inline-block;
	content:'\f104';
	font-family:fa-light;
	width:1em;
	font-size:0.9em;
}
.form-section {
	margin-bottom:3em;
}
.form-buttons {
	background:#ddd;
	padding:1em;
	border-radius:0 0 7px 7px;
	text-align:right;
}
.grid + .form-buttons,
.group-wrapper + .form-buttons {
	border-radius:7px;
	margin-top:2em;
}
.form-buttons input, .form input.button {
	display:inline-block;
	box-sizing:border-box;
	-webkit-appearance:none;
	border:0;
	cursor:pointer;
	padding:0.4em 1em;
	min-width:8.5em;
	border-radius:3em;
	color:#fff;
	background:var(--barbie);
	font-weight:500;
	margin:0 0.3em;
	outline:0;
}
.form input.button-pick {
	min-width:0;
	width:4em;
}
.form .button-remove {
	font-family:fa-solid;
	font-size:0.93em;
	margin-right:0.1em;
	color:#f04;
}
.form-buttons input.delete {
	background:#fff !important;
	color:#555;
	box-shadow:0 0 9px rgba(0,0,0,0.1);
}
.form-buttons a {
	margin:0 0.7em;
	border-bottom:1px solid #aaa;
}
.form h3 {
	text-transform:lowercase;
}
.form .column > h3:first-child {
	margin-top:0;
}
.form p, .form .field-wrapper {
	margin-bottom:0.8em;
}
.form p.checkboxes input {
	margin-right:4px;
	position:relative;
	top:1px;
}
.form label {
	display:block;
	font-size:13px;
	margin-bottom:1px;
	color:#777;
	text-transform:lowercase;
}
.form .checkboxes label {
	display:inline;
	color:inherit;
	margin:-2px 0 0 0.3em;
}
.form input.text,
.form textarea,
.form select {
	display:block;
	padding:0.5em 0.6em;
	border-radius:0.4em;
	border:2px solid #eaeaea;
	width:100%;
    line-height:1.4;
	box-sizing:border-box;
	transition:all 80ms linear;
    outline:0;
}
.form select {
	display:inline-block;
	width:auto;
}
.form select.full {
	width:100%;
}
.form select.item-picker {
	width:calc(100% - 5em);
}
.form input.text:focus,
.form textarea:focus,
.form select:focus {
	outline:none;
	border-color:#90d4f0;
}

.theme-green .form input.text:focus,
.theme-green .form textarea:focus,
.theme-green .form select:focus {
	border-color:#4caf50;
	box-shadow:2px 2px #4caf50;
}
.theme-blue .form input.text:focus,
.theme-blue .form textarea:focus,
.theme-blue .form select:focus {
	border-color:#487fee;
	box-shadow:2px 2px #487fee;
}
.theme-orange .form input.text:focus,
.theme-orange .form textarea:focus,
.theme-orange .form select:focus {
	border-color:#ff4a20;
	box-shadow:2px 2px #ff4a20;
}
.form input.postcode {
	display:inline-block;
	width:80px;
}
.form textarea {
	height:120px;
}
.form-link {
	margin:-1.6em 0 1.3em 0;
}
.form-link p {
	display:inline-block;
	background:#fff;
	padding:0.5em 2em;
	border-radius:2.5em;
	box-shadow:0 7px 16px #c0c0c0;
}
.form-link a {
	color:#487fee;
	font-size:1.1em;
}
.validation-container {
	color:var(--barbie);
	margin-bottom:1em;
}
.validation-list {
	margin-bottom:2.5em;
}
.confirm {
	font-weight:bold;
	font-family:Muli;
	color:#fff;
	font-size:1.15em;
	background:linear-gradient(135deg, #8bc34a, #4caf50);
	border-radius:7px 7px 0 0;
	padding:0.4rem 1rem;
	text-align:center;
}
.confirm p:before {
	content:'\f00c';
	font-family:fa-solid;
	font-weight:normal;
	margin-right:0.5em;
}
.confirm + .form {
	border-radius:0;
}
.confirm-no-form {
	border-radius:7px;
	margin-bottom:-1.2em;
}
.form .total {
	display:inline-block;
	padding:4px 0;
	border-top:1px solid #aaa;
	border-bottom:4px double #aaa;
	margin-bottom:1.8em;
}
.total span {
	margin-left:5px;
}
.form p.error {
	color:#fff;
	background:red;
	position:relative;
	top:18px;
	line-height:1.1;
	display:inline-block;
	padding:4px 9px;
	border-radius:4px;
	font-weight:bold;
}
td.icon {
	position:relative;
	background-clip:padding-box;
}
td.icon:before {
	content:'\f183';
	font-family:fa-solid;
	position:absolute;
	top:0.2em; left:0;
	font-size:1.4rem;
	width:1em;
	text-align:center;
}
td.female:before {
	content:'\f182';
	color:#e7225f;
}
.yes-no {
	padding:0.3em 0;
}
.yes-no br {
	display:none;
}
.yes-no input {
	position:relative;
	left:1em;
	opacity:0;
}
.yes-no label {
	display:inline-block;
	background:#fafafa;
	border:1px solid #ccc;
	font-size:1rem !important;
	line-height:1.8em;
	border-radius:2em;
	width:5em;
	text-align:center;
	cursor:pointer;
	position:relative;
	left:-1em;
	user-select:none;
	box-sizing:border-box;
}
.yes-no label:hover {
	background:#fff;
}
.yes-no label:active {
	border-color:#bbb;
}
.yes-no :checked+label {
	color:#fff;
	background:var(--marge);
	border:0;
}
.conditional-fields {
	display:none;
}
.multiple-record-entry {
	padding-top:0.7em;
	margin-bottom:0.2em;
}
.multiple-record-entry p:last-child {
	margin:0;
}
.multiple-record-entry label {
	margin-bottom:0.5em;
	color:#ff4a20;
	font-weight:bold;
}
.upload-trigger {
	display:inline-block;
	text-transform:lowercase;
	color:#777;
	background:rgb(193 196 203 / 40%);
	cursor:pointer;
	height:2em;
	line-height:2em;
	border-radius:4em;
	padding:0 1em;
	user-select:none;
	margin-right:1em;
	font-size:0.9em;
}
.theme-blue .upload-trigger {
	background:linear-gradient(135deg, #488eee, #5e55cd);
}
.upload-trigger:after {
	content:'\2026';
}
.file-link-wrapper:before {
	content:'\f00c';
	font-family:fa-solid;
	color:var(--maleficent);
	display:inline-block;
	width:1.2em;
}
.file-link-wrapper a {
	border-bottom:1px solid #bbb;
}


/*
——————————————————————
Footer
——————————————————————
*/
#footer {
	color:#fff;
	background:linear-gradient(to bottom, var(--marge), var(--leela));
	background:var(--ursula);
	padding:3.2em 0;
	position:relative;
	margin-top:4em;
}
.careers-wrapper #footer {
	margin-top:0;
}
#social {
	text-align:center;
	margin:5em 0 1.2em 0;
	color:#fff;
}
#social li {
	display:inline-block;
	width:5em;
}
#social a span {
	display:none;
}
#social a:before {
	display:block;
	font-size:2.2em;
	font-family:fa-brands;
	transition:all 200ms;
}
#social li.facebook a:before  { content:'\f39e' }
#social li.instagram a:before { content:'\f16d' }
#social li.linkedin a:before  { content:'\f0e1' }
#social li.twitter a:before   { content:'\f099' }
#social li.tiktok a:before    { content:'\e07b' }
#social li.pinterest a:before { content:'\f0d2' }

#fine-print {
	color:#fff;
	text-align:center;
	text-transform:lowercase;
}
#fine-print li {
	display:inline;
}
#fine-print li:after {
	content:'•';
	width:1.5em;
	text-align:center;
	display:inline-block;
}
#fine-print li:last-child:after {
	display:none;
}
.logo-footer {
	width:7.5em;
	height:4.412em;
	background:url(/Images/logo.png) no-repeat;
	background-size:100%;
	position:absolute;
	bottom:-6.5em; left:-12em;
	z-index:3;
}
.footer-cta {
	float:left;
	text-transform:lowercase;
}
.footer-cta h2 {
	font-size:2.6em;
	font-weight:300;
	margin:0;
	color:#fff;
}
.footer-details {
	float:right;
}
.footer-details strong {
	display:block;
	font-size:1.2em;
	margin-bottom:0.2em;
	text-transform:lowercase;
}
.footer-details div {
	float:left;
	margin-left:4.5em;
}
.back-top {
	width:4em;
	height:4em;
	padding-top:1em;
	color:#ffffff88;
	position:absolute;
	top:0; left:calc(50% - 2em);
	cursor:pointer;
	border-radius:50%;
	transition:100ms color;
}
.back-top:hover {
	color:#fff;
}
.back-top:after {
	display:block;
	text-align:center;
	content:'\f077';
	font-family:fa-light;
	font-size:2em;
	line-height:1.5;
}



















/*
——————————————————————
Home
——————————————————————
*/
.home-content {
	color:#fff;
	padding:10em 6em 3em 6em;
	height:100%;
	text-align:center;
	font-size:22px;
}
.home-content-inner {
	width:100%;
}
.home-content h2 {
	font-size:2.7em;
	font-weight:500;
	line-height:1;
	margin-bottom:0.3em;
	text-transform:lowercase;
}
.home-content h3 {
	font-size:1.3em;
	font-weight:500;
	line-height:1;
	margin-bottom:0.7em;
	text-transform:lowercase;
}
.home-content h2 span,
.home-content h3 span {
	white-space:nowrap;
}
.text {
	max-width:50em;
	margin:auto;
}
.cta {
	text-align:center;
}
.cta-button {
	display:inline-block;
	background:var(--leela);
	color:#fff;
	padding:0 1.5em;
	line-height:2;
	text-transform:lowercase;
	border-radius:3em;
	transition:background-color 300ms;
	font-size:1.2em;
}

/*
——————————————————————
Showreel
——————————————————————
*/
.reel-wrapper, .logos-wrapper {
	pointer-events:none;
	width:100%;
	height:100%;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
}
.reel, .logos {
	position:relative;
	width:0; height:0;
	padding:28.125% 50%;
	background:none;
}
.reel iframe,
.logos iframe {
	border:0;
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
iframe {
	opacity:0.99;
}




/*
——————————————————————
Cases
——————————————————————
*/
.cases-home {
	margin:2.8em auto 1.2em auto;
	max-width:57em;
}
.cases-home li {
	float:left;
	width:25%;
	padding:0.6em;
}
.cases-home a {
	display:block;
	width:0;
	height:0;
	padding:50%;
	position:relative;
	overflow:hidden;
}
.cases-home img {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	border-radius:0.5rem;
	transform:scale(0.97);
	transition:transform 200ms;
}
.cases-home a:hover img {
	transform:scale(1);
}
#partners {
	text-align:center;
	margin-top:4em;
}
#partners p {
	margin-bottom:0.4em;
}
#partners span {
	display:none;
}
#partners li {
	display:inline-block;
	font-size:1.4em;
	margin:0 0.4em;
}
#partners li:before {
	font-family:fa-brands;
	color:#fff;
}

#partners li.pinterest:before { content:'\f0d2' }
#partners li.facebook:before  { content:'\f09a' }
#partners li.snapchat:before  { content:'\f2ac' }
#partners li.linkedin:before  { content:'\f08c' }
#partners li.twitter:before   { content:'\e61b' }
#partners li.tiktok:before    { content:'\e07b' }
#partners li.instagram:before { content:'\f16d' }



/*
——————————————————————
Clients
——————————————————————
*/
#clients h2 {
	margin-bottom:1em;
}
#clients h2 .upper {
	text-transform:uppercase;
}
#clients .text {
	max-width:54em;
}
#clients p {
	text-transform:lowercase;
}
.hero-logos {
	width:36em;
	max-width:90%;
	margin:0 auto 0.5em auto;
}
.hero-logos li {
	float:left;
	width:33.333%;
}
.hero-logos div,
.small-logos div {
	width:0;
	height:0;
	padding:25% 50%;
	position:relative;
}
.hero-logos img,
.small-logos img {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
}
.small-logos {
	margin-bottom:1.5em;
}
.small-logos li {
	float:left;
	width:12.5%;
	padding:0.5em 0.4em;
	box-sizing:border-box;
}
.small-logos li:nth-child(1),
.small-logos li:nth-child(16),
.small-logos li:nth-child(31) {
	margin-left:6.25%;
}
.small-logos img {
	transition:transform 500ms, opacity 500ms;
	transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
}

.small-logos img:first-child,
.small-logos div.flipped img:last-child {
	opacity:1;
	transform:scale(1);
}
.small-logos img:last-child,
.small-logos div.flipped img:first-child {
	opacity:0;
	transform:scale(0);
}


/*
——————————————————————
Capabilities
——————————————————————
*/
#capabilities-slider {
	max-width:55em;
	margin:auto;
}
.carousel-3d-container {
	height:24em !important;
	margin-top:4em !important;
}
.carousel-3d-slider {
	width:24em !important;
	height:24em !important;
	max-width:100%;
}
.carousel-3d-slide {
	width:24em!important;
	height:24em !important;
	max-width:100%;
	border:0 !important;
	background:none !important;
}
.carousel-3d-container figure {
	margin:0;
}
.carousel-3d-container figure img,
.carousel-3d-container figure video {
	display:block;
	width:50%;
	height:auto;
	margin:auto;
}
.carousel-3d-container figcaption {
	position:absolute;
	color:#fff;
	position:absolute;
	top:18.5em;
	width:100%;
	text-align:center;
}
.carousel-3d-container figcaption h3 {
	font-weight:400;
	opacity:0.6;
	transition:opacity 0.3s;
}
.carousel-3d-container figcaption p {
	display:none;
}
.carousel-3d-container .carousel-3d-slide.current figcaption h3 {
	opacity:1;
}
.carousel-3d-controls {
	top:auto !important;
	bottom:70px;
	color:#fff;
}
.carousel-3d-controls .prev,
.carousel-3d-controls .next {
	color:#fff !important;
	font-family:fa-light;
	font-size:2em !important;
	opacity:0.8;
}
.carousel-3d-controls .prev {
	left:60px !important;
}
.carousel-3d-controls .next {
	right:60px !important;
}
#capability-description {
	max-width:30em;
	margin:-4em auto 0 auto;
	font-size:0.8em;
}

/*
——————————————————————
Leadership
——————————————————————
*/
.leadership {
	margin:0.5em auto 0 auto;
}
.leadership li {
	display:inline-block;
	vertical-align:top;
	width:19%;
	padding:0 0.5em;
	margin-top:1.5em;
}
.leadership div {
	padding:62.5% 50%;
	position:relative;
	margin-bottom:0.4em;
	overflow:hidden;
	background:#ffffff66;
	xborder-radius:0.3em;
}
.leadership img {
	position:absolute;
	top:0; left:0;
	width:auto;
	height:100%;
}
.leadership li:hover img {
	animation:snapshots 1.5s step-start infinite;
}
@keyframes snapshots {
    0%   { left:0 }
    33%  { left:-100% }
    67%  { left:-200% }
    100% { left:0 }
}

.leadership p {
	text-transform:lowercase;
}
.leadership strong {
	display:block;
	font-weight:500;
}
.leadership span {
	display:block;
	line-height:1.05;
	font-size:0.75em;
	opacity:0.7;
	text-transform:lowercase;
}

/*
——————————————————————
Hub
——————————————————————
*/
.button-book {
	width:5em;
	height:5em;
	border-radius:50%;
	position:absolute;
	bottom:-1.5em;
	left:-1.5em;
	text-align:center;
	line-height:1.1;
	padding:1.4em 0;
	background:var(--leela);
	text-transform:lowercase;
	transform:rotate(-5deg);
}

/*
——————————————————————
Team
——————————————————————
*/
.team {
	margin:2em auto;
	max-width:40em;
}
.team li {
	float:left;
	width:16.666%;
	padding:0.6em;
}
.team div {
	width:0;
	height:0;
	padding:50%;
	border-radius:50%;
	xbackground:#ffffff55;
	position:relative;
	transition:transform 0.8s;
	transform-style:preserve-3d;
}
.team div.flipped {
	transform:rotateY(180deg);
}
.team img {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	border-radius:50%;
	backface-visibility:hidden;
}
.team .back {
	transform:rotateY(180deg);
}








.panel {
}

#page-menu {
	position:fixed;
	top:40%;
	right:1em;
	z-index:100;
	width:2.7em;
	font-size:1.3em;
}
#page-menu a {
	display:block;
	padding:0.5em 1em;
	position:relative;
	color:#fff;
}
#page-menu a:after {
	content:'';
	display:block;
	width:0.7em;
	height:0.7em;
	border-radius:50%;
	background:#ffffff99;
	transition:transform 200ms, background-color 200ms;
}
#page-menu a:hover:after {
	background:#fff;
}
#page-menu a.active:after {
	transform:scale(150%);
}
#page-menu span {
	position:absolute;
	top:0.5em; right:3.2em;
	white-space:nowrap;
	text-transform:lowercase;
	font-size:0.8em;
	line-height:1;
	opacity:0;
	pointer-events:none;
	transition:opacity 200ms;
}
#page-menu:hover span {
	opacity:0.9;
}




.panel1-active {
	xbackground-color: var(--elsa);
}
.panel1-active .home-content{
	color:#000;
}
.panel2-active {
	background-color: var(--belle);
}
.panel3-active {
	background-color: var(--ursula);
}
.panel4-active {
	background-color:var(--elsa);
}
.panel5-active {
	background-color: var(--patrick);
}
.panel6-active {
	background-color: var(--maleficent);
}
.panel7-active {
	background-color: var(--ursula);
}



.panel1-active .cta-button {
	background:var(--leela);
}
.panel2-active .cta-button {
	background:#e2be4d;
}
.panel3-active .cta-button {
	background:var(--leela);
}
.panel4-active .cta-button {
	background:var(--marge);
}
.panel5-active .cta-button {
	background:#e18475;
}
.panel6-active .cta-button {
	background:#56a463;
}
.panel7-active .cta-button {
	background:var(--leela);
}












@media (min-width: 1024px) {
	.images-2up .figure-wrapper {
		text-align:center;
	}
	.images-2up .figure-wrapper figure.image {
		display:inline-block;
		vertical-align:top;
		width:45%;
		margin:0 1em;
	}
	.images-2up .figure-wrapper figure.image img {
		max-width:100%;
	}
}





@media (max-width: 1500px) {
	.pin-wrapper {
		padding:0 4em;
		font-size:1.4vw;
	}
	#careers {
		font-size:1.33vw;
	}
}



@media (max-width: 1279px) {
	html {
		font-size:15px;
	}
	#contact {
		font-size:inherit;
	}
}


@media (max-width: 1023px) {
	.posts {
		max-width:42em;
		margin:auto;
	}
	.posts h2 {
		font-size:1.5em;
	}
	.posts li {
		margin-bottom:4em;
	}
	.posts .tag {
		background:#fff;
	}
	#related-posts {
		max-width:initial;
	}
	#related-posts li {
		width:calc(50% - 2.4em);
	}
	#related-posts li:nth-child(odd) {
		clear:left;
	}


	#featured-case {
		max-width:42em;
		margin-left:auto;
		margin-right:auto;
	}
	#featured-case li {
		float:none;
		width:calc(100% - 1.2em);
	}
	#cases-left,
	#cases-right {
		max-width:42em;
		margin-left:auto;
		margin-right:auto;
	}
	#cases-left li,
	#cases-right li {
		width:calc(50% - 1.2em);
	}
	#cases-left li:nth-child(odd),
	#cases-right li:nth-child(odd) {
		clear:left;
	}
	.cases li {
		width:calc(33.333% - 1.2em);
	}
	.cases li:nth-child(4n + 1) {
		clear:none;
	}
	.cases li:nth-child(3n + 1) {
		clear: left;
	}
	.footer-cta {
		float:none;
		display:block;
		text-align:center;
		margin:2em auto;
	}
	.footer-details {
		float:none;
		margin:4em auto 0 auto;
	}
	.footer-details div {
		margin:0;
		width:50%;
	}
	.footer-details div:first-child {
		padding-right:2em;
		text-align:right;
	}
	.footer-details div:last-child {
		border-left:1px solid var(--elsa);
		padding-left:2em;
	}
	#social {
		margin-top:4em;
	}
	.project-header h1 {
		font-size:2.5em;
		padding-left:1.5em;
		padding-right:1.5em;
	}
	.project-nav a {
		width:2.6em;
		font-size:0.85em;
	}

	#careers {
		font-size:14px;
	}
	.careers-content q {
		font-size:1.5em;
	}
	.careers-section {
		padding:2.5em;
	}
	.careers-intro {
		padding:0;
	}
	.careers-text {
		width:65%;
	}
	.careers-image {
		width:30%;
	}
	#careers .section1 .careers-content {
		max-width:100%;
	}
}


@media (max-width: 900px) {
	.blog #category-menu {
		display:none;
	}
	.home-wrapper #tag-menu,
	.careers-wrapper #tag-menu,
	.contact-wrapper #tag-menu,
	.work #tag-menu {
		display:none;
	}
	.get-in-touch {
		display:none;
	}
	.home-wrapper #category-menu,
	.careers-wrapper #category-menu,
	.contact-wrapper #category-menu,
	.work #category-menu {
		left:4em;
	}
	.cases {
		margin-left:auto;
		margin-right:auto;
	}
	.cases li {
		width:calc(50% - 1.2em);
	}
	.cases li:nth-child(3n + 1) {
		clear:none;
	}
	.cases li:nth-child(odd) {
		clear:left;
	}
	.portfolio-logo-wrapper img {
		display:inline-block;
		max-width:8em;
		max-height:5em;
	}
	.photo-strip-wrapper {
		display:none;
	}
	#careers .section1 .careers-content {
		padding:2.5em;
		max-width:54em;
	}
}


@media (max-width: 767px) {
	.pin-wrapper {
		font-size:inherit;
		padding:0;
	}
	.slide-arrow {
		display:none !important;
	}
	.pins {
		height:auto;
	}
	.pins ul {
		width:auto;
		height:auto;
		max-width:400px;
		margin:auto;
	}
	.pins li {
		padding:0;
		float:none;
		margin:0 0 2em 0;
	}
	.pins li:last-child {
		margin:0;
	}
	.pins img, .pins video {
		width:100% !important;
		height:auto;
	}
	.contact-form {
		float:none;
		width:auto;
		margin-bottom:6em;
	}
	#details {
		float:none;
		width:auto;
		text-align:center;
	}
	#contact #social {
		text-align:center;
	}
}

@media (max-width: 600px) {
	body,
	html.home-wrapper body,
	html.careers-wrapper body,
	html.contact-wrapper body {
		padding-top:0;
	}
	#header {
		position:relative;
	}
	.content {
		padding:0 2.4em;
	}
	.markdown {
		font-size:1em;
	}
	h1 {
		font-size:2.4em;
	}
	.project-header h1 {
		font-size:1.9em;
	}
	.project-header h1 strong,
	.project-header h1 span {
		display:block;
	}
	.project-header h1 span.slash {
		display:none;
	}
	.markdown img.portrait {
		max-width:100%;
	}
	.careers-content {
		display:block;
	}
	.careers-text,
	.careers-image,
	.careers-image img {
		display:block;
		width:auto;
	}
	.careers-image img {
		float:none !important;
		max-width:50% !important;
		margin:auto;
	}
	.section2 .careers-image img {
		margin-top:1em;
		margin-bottom:3em;
	}
	.section3 .careers-image img {
		margin-top:2em;
	}
	.section4 .careers-image img {
		margin-bottom:3em;
	}
}


@media (max-width: 480px) {
	#site-menu {
		right:2.5em;
	}
	.portfolio .ols-logo {
		left:2.5em;
	}
	#tag-menu,
	.home-wrapper #category-menu,
	.careers-wrapper #category-menu,
	.contact-wrapper #category-menu,
	.work #category-menu {
		left:2.5em;
	}
	#category-menu .trigger span {
		display:none;
	}
	#category-menu .trigger span + span {
		display:inline;
	}
	#related-posts,
	#related-posts li {
		float:none;
		width:auto;
	}
	.footer-cta h2 {
		font-size:2.2em;
	}
	.footer-details div {
		float:none;
		width:auto;
	}
	.footer-details div:first-child {
		padding:0;
		text-align:center;
		margin-bottom:2em;
	}
	.footer-details div:last-child {
		border:0;
		padding:0;
		text-align:center;
	}
	#social {
		font-size:0.7em;
	}
}


@media (max-width: 420px) {
	.careers-content h3 br {
		display:none;
	}
}


















@media (max-width: 1800px) {
	.home-wrapper #page-menu span {
		display:none;
	}
	.home-wrapper #capabilities-slider {
		max-width:65em;
	}
}

@media (max-width: 1279px) {
	.home-wrapper h2 {
		font-size:2em;
	}
	.home-wrapper #page-menu {
		display:none;
	}
	.home-wrapper .panel {
		height:auto;
	}
	.home-wrapper .home-content {
		padding:7em 3em 0 3em;
		height:auto;
	}
	.home-wrapper #capabilities {
		margin-bottom:4em;
	}
}


@media (max-width: 1100px) {
	.home-wrapper .leadership li {
		width:31%;
	}
}


@media (max-width: 900px) {
	.home-content-inner br {
		display:none;
	}
}


@media (max-width: 800px) {
	.home-wrapper #capability-description {
		max-width:60%;
	}
	.home-wrapper .carousel-3d-controls .prev {
		left:10px !important;
	}
	.home-wrapper .carousel-3d-controls .next {
		right:10px !important;
	}
}


@media (max-width: 700px) {
	.home-wrapper .cases-home li {
		width:50%;
	}
	.home-wrapper .hero-logos {
		width:auto;
	}
	.home-wrapper .leadership li {
		width:47%;
	}
	.home-wrapper .team li:nth-child(17),
	.home-wrapper .team li:nth-child(18) {
		display:none;
	}
	.home-wrapper .text {
		max-width:100%;
	}
	.home-wrapper .text br {
		display:none;
	}
	.home-wrapper h3 {
		text-align:center;
	}
	.home-wrapper .small-logos li {
		width:20%;
	}
	.home-wrapper .small-logos li:nth-child(1),
	.home-wrapper .small-logos li:nth-child(16),
	.home-wrapper .small-logos li:nth-child(31) {
		margin-left:0;
	}
	.home-wrapper .small-logos li:nth-child(1),
	.home-wrapper .small-logos li:nth-child(10),
	.home-wrapper .small-logos li:nth-child(19),
	.home-wrapper .small-logos li:nth-child(28),
	.home-wrapper .small-logos li:nth-child(37) {
		margin-left:10%;
	}
	.home-wrapper .small-logos li:nth-child(37) {
		display:none;
	}
}


@media (max-width: 600px) {
	.home-wrapper .home-content {
		font-size:18px;
		padding-top:4.5em;
	}
	.home-wrapper h2 {
		font-size:1.8em;
		margin-bottom:0.8em;
	}
	.home-wrapper #clients h2 br {
		display:none;
	}
	.home-wrapper .carousel-3d-container {
		font-size:0.8em;
	}
	.home-wrapper #partners li {
		font-size: 0.9em;
	}
}


@media (max-width: 450px) {
	.home-wrapper .home-content {
		padding:4.5em 2em 0 2em;
	}
	.home-wrapper #examples .home-content {
		padding-top:3em;
	}
	.home-wrapper #partners {
		margin-top:2em;
	}
	.home-wrapper #partners li {
		font-size:1em;
	}
	.home-wrapper .cta-button {
		font-size:1em;
	}
}