/*  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(/CSS/Fonts/cera-pro-light.woff) format('woff');
	font-weight:300;
	font-style:normal;
}
@font-face {
	font-family:'Cera';
	src:url(/CSS/Fonts/cera-pro-light-italic.woff) format('woff');
	font-weight:300;
	font-style:italic;
}
@font-face {
	font-family:'Cera';
	src:url(/CSS/Fonts/cera-pro-regular.woff) format('woff');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'Cera';
	src:url(/CSS/Fonts/cera-pro-regular-italic.woff) format('woff');
	font-weight:normal;
	font-style:italic;
}
@font-face {
	font-family:'Cera';
	src:url(/CSS/Fonts/cera-pro-medium.woff) format('woff');
	font-weight:500;
	font-style:normal;
}
@font-face {
	font-family:'Cera';
	src:url(/CSS/Fonts/cera-pro-medium-italic.woff) format('woff');
	font-weight:500;
	font-style:italic;
}
@font-face {
	font-family:'Cera';
	src:url(/CSS/Fonts/cera-pro-bold.woff) format('woff');
	font-weight:bold;
	font-style:normal;
}
@font-face {
	font-family:'Cera';
	src:url(/CSS/Fonts/cera-pro-bold-italic.woff) format('woff');
	font-weight:bold;
	font-style:italic;
}
@font-face {
	font-family:'fa-light';
	src:url(/CSS/Fonts/fa-light-300.woff2) format('woff2');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	font-family:'fa-solid';
	src:url(/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:#f4e0a1;
  --patrick:#e5b0a7;
  --maleficent:#9bc7a3;

}

html {
	font:24px/1.25 Cera;
}
body {
	background-color:var(--elsa);
	transition:background-color 300ms;
}
* {
	box-sizing:border-box;
}
a {
	text-decoration:none;
	color:inherit;
}
.ols-logo {
	width:2.2em;
	height:3em;
	background:url(../Images/logo-ols-2023.png) no-repeat;
	background-size:contain;
	position:fixed;
	top:1.2em; left:2em;
	z-index:1;
}
.ols-logo span {
	display:none;
}



#site-menu {
	position:fixed;
	top:1.9em; right:1.8em;
	z-index:1;
	font-size:1em;
}
#site-menu .trigger {
	float:right;
	display:block;
	height:2rem;
	line-height:2rem;
	cursor:pointer;
	font-weight:500;
	user-select:none;
	color:#fff;
}
#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);
}
.menu .trigger {
	display:block;
	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-family:Cera;
	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;
	text-transform:lowercase;
}
.menu a:hover {
	background:#f7f7f7;
}
.menu a:active {
	background:#f2f2f2;
}
.nav-active #site-menu ul {
	display:block;
}





/*
——————————————————————
Common
——————————————————————
*/
.content {
	color:#fff;
	padding:4.5em 6em;
	height:100%;
	text-align:center;
}
.content-inner {
	width:100%;
}
.content h2 {
	font-size:3.2em;
	font-size:2.7em;
	font-weight:500;
	line-height:1;
	margin-bottom:0.3em;
	text-transform:lowercase;
}
.content h3 {
	font-size:1.3rem;
	font-weight:500;
	line-height:1;
	margin-bottom:0.7em;
	text-transform:lowercase;
}
.content h2 span,
.content h3 span {
	white-space:nowrap;
}
.text {
	max-width:42em;
	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;
	font-size:0.9rem;
	transition:background-color 300ms;
}

/*
——————————————————————
Showreel
——————————————————————
*/
#reel {
  overflow:hidden;
}
.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 {
	margin:2.8em auto 1.2em auto;
	max-width:57em;
}
.cases li {
	float:left;
	width:25%;
	padding:0.6em;
}
.cases a {
	display:block;
	width:0;
	height:0;
	padding:50%;
	position:relative;
	overflow:hidden;
}
.cases img {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	border-radius:0.5rem;
	transform:scale(0.97);
	transition:transform 200ms;
}
.cases 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;
	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;
}
.carousel-3d-slide {
	width:24em!important;
	height:24em !important;
	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 {
	width:100%;
	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;
}
.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 {
	font-size:0.85em;
	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);
}


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


#recruitee-careers,
#recruitee-careers * {
	color:#fff !important;
	background:none !important;
	border:none !important;
	padding:0 !important;
	margin:0 !important;
	box-shadow:none !important;
	font-family:inherit !important;
	font-size:inherit !important;
	font-weight:normal !important;
	text-decoration:none !important;
}
#recruitee-careers i {
	display:none !important;
}
#recruitee-careers-details-container .rt__text {
	font-family:Cera !important;
}
#recruitee-careers-details-container .rt-theme-light .rt-details__heading {
	border:0 !important;
	color:#fff !important;
	background:var(--ursula) !important;
}
#recruitee-careers-details-container .rt__button--action {
	background-color:var(--barbie) !important;
	text-transform:lowercase;
	box-shadow:none !important;
}



#social {
	margin:3em 0 1.2em 0;
	color:#fff;
}
#social li {
	display:inline-block;
	width:3em;
}
#social a span {
	display:none;
}
#social a:before {
	display:block;
	font-size:1.5em;
	font-family:fa-brands;
	transition:all 200ms;
}
#social li.instagram a:before { content:'\f16d' }
#social li.linkedin a:before  { content:'\f0e1' }
#social li.twitter a:before   { content:'\f099' }
#social li.pinterest a:before { content:'\f0d2' }
#social li.tiktok a:before    { content:'\e07b' }
#social li.facebook a:before  { content:'\f39e' }

#fine-print {
	font-size:0.8em;
	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;
}
.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;
}
.footer-details div {
	float:left;
	margin-left:4.5em;
}
.back-top {
	width:4em;
	height:4em;
	padding-top:1em;
	color:var(--elsa);
	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;
}








.panel {
	height:100vh;
}

#page-menu {
	position:fixed;
	top:40%;
	right:1em;
	z-index:100;
	width:2.7em;
}
#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 {
	background-color: var(--elsa);
}
.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 (orientation: landscape) and (min-width: 1280px) {
	html {
		font-size:2.4vh;
	}
}


@media (max-aspect-ratio: 16/9) {
	.reel {
		padding:100vh 177.777vh 0 0;
	}
}


@media (max-aspect-ratio: 1/1) {
	body {
		padding-top:5.5em;
	}
	.reel-wrapper {
		height:auto;
	}
	.reel {
		padding:50% 88.88888%;
	}
}


/*
@media (orientation: portrait) {
	html {
		font-size:3vw;
	}
	.content h2 {
		font-size:2.5em;
	}	
	.content {
		padding:6em 3em;
	}
	.text br {
		display:none;
	}
	.reel-wrapper {
		display:none;
	}
}
*/








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

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

@media (max-width: 800px) {
	#clients h2 {
		font-size:2em;
	}
	.leadership li {
		width:27%;
	}
	#capability-description {
		max-width:60%;
	}
	.carousel-3d-controls .prev {
		left:10px !important;
	}
	.carousel-3d-controls .next {
		right:10px !important;
	}
}


@media (max-width: 700px) {
	.cases li {
		width:50%;
	}
	.hero-logos {
		width:auto;
	}
	.team li {
		width:25%;
	}
	.team li:nth-child(17),
	.team li:nth-child(18) {
		display:none;
	}
	.text {
		max-width:100%;
	}
	.text br {
		display:none;
	}
	#form {
		float:none;
		width:auto;
		margin-bottom:6em;
	}
	#details {
		float:none;
		width:auto;
		text-align:center;
	}
	h3 {
		text-align:center;
	}
	.small-logos li {
		width:20%;
	}
	.small-logos li:nth-child(1),
	.small-logos li:nth-child(16),
	.small-logos li:nth-child(31) {
		margin-left:0;
	}
	.small-logos li:nth-child(1),
	.small-logos li:nth-child(10),
	.small-logos li:nth-child(19),
	.small-logos li:nth-child(28),
	.small-logos li:nth-child(37) {
		margin-left:10%;
	}
	.small-logos li:nth-child(37) {
		display:none;
	}
}


@media (max-width: 600px) {
	#clients h2 {
		font-size:1.6em;
	}
	#clients h2 br {
		display:none;
	}
	.leadership li {
		width:40%;
	}
	.carousel-3d-container {
		font-size:0.8em;
	}
}


@media (max-width: 450px) {
	html {
		font-size:15px;
	}
	.content {
		padding:6em 2em 0 2em;
	}
	#examples .content {
		padding-top:3em;
	}
	.content h2 {
		font-size:2em;
	}
	#partners {
		margin-top:2em;
	}
	#partners li {
		font-size:1.1em;
	}
	#contact .content {
		padding-bottom:3em;
	}
}