/* ----------------------------------------------------------------- */
/* Studio Ease styles, 13 april 2025 */
/* ----------------------------------------------------------------- */

/* define the theme color for studioease.nl */
:root {
	--docWidth: 1360px; /* content width is 1360 */
	--colEase: #40add6;
}

/* smaller screens like laptops: document widths below the content width of 1400px (1360 + 40 pixels) we set the new document width to 100% - 40px. */
@media only screen and (min-width: 1024px) and (max-width: 1400px) {
	:root {
		--docWidth: calc(100vw - 40px);
	}
}

/* ------------------------------ */
/* basic stuff */
/* ------------------------------ */

.ease-text {
	font-family: var(--fontBody);
	text-transform: none;
	text-align: justify;
	font-size: 28px;
	line-height: 160%;
}

.preline { white-space: pre-line; }

.inlineblock { display:inline-block; margin:0; }

.code {
	margin:10px 0;
	padding:20px;
	background:#e4e4e4;
	font-family:andale mono, monaco, menlo, courier;
	text-align:left;
	font-size:14px;
	line-height:initial;
	border-radius:10px;
	width:calc(100% - 40px);
}

/* hashtag */
.htg {
	background: #fff;
	color: var(--colEase);
	font-size:80%;
	line-height:100%;
	display: inline-block;
	padding:2px 6px;
	margin:1px 0;
	border-radius:20px;
}

/* ------------------------------ */
/* navigation - header */
/* ------------------------------ */

DIV.ease-header-root 	{ margin-bottom:20px; text-align:center; }
DIV.ease-header 		{ }
DIV.ease-title 			{ margin:-10px 0; overflow:hidden; /*background:#cda;*/ }
DIV.ease-title A		{ color:var(--colTheme); text-decoration:none; display:inline-block; /*font-size:50px; line-height:100%; background:#8ac;*/ }

DIV.title-label {
	width: 390px; /* original size of image is 1460x300 px */
	height: 85px;
	display: flex;
	justify-content: center;
	align-items: center;
	position:relative;
	/*background:#f00;*/
}

DIV.ease-title A IMG.title-logo 		{ width:95%; transition: width 0.2s; transition-timing-function: cubic-bezier(0.8, -0.5, 0, 2.5); }
DIV.ease-title A:hover IMG.title-logo 	{ width:90%; }

.ease-dot {
	height: 10px;
	width: 10px;
	background-color: var(--colEase);
	border-radius: 50%;
	display: inline-block;
	margin: 0 20px;
	vertical-align: middle;
}

DIV.ease-subheader {
	font-family: var(--fontBody);
	font-size:18px;
	margin-top:5px;
	/*margin: 5px 0 25px 0; */
}

DIV.ease-nav 			{ font-size:22px; margin:20px 0; }
DIV.ease-nav A 			{ display:inline-block; position:relative; text-decoration:none; color:#fff !important; /*background:#fff; border:1px solid #f00;*/ }
IMG.nav-icon 			{ width:20px; height:20px; display:inline-block; margin: 3px 0px 0px 0px; vertical-align: top; }

DIV.nav-label 						{ margin:5px 15px; padding:5px 20px; background:var(--colEase); display:inline-block; border-radius:20px; }
DIV.ease-nav A DIV.nav-label 		{ transition: padding 0.2s, margin 0.2s, background-color 0.2s; transition-timing-function: cubic-bezier(0.8, -0.5, 0, 2.5); }
DIV.ease-nav A:hover DIV.nav-label 	{ margin: 7px 5px; padding:3px 30px; }

/* custom colors for nav buttons */
A.nav-home:hover DIV.nav-label 			{ background:#40add6; }
A.nav-work:hover DIV.nav-label  		{ background:#66f; }
A.nav-play:hover DIV.nav-label 			{ background:#4095d6; }
A.nav-study:hover DIV.nav-label 		{ background:#0acf9a; }
A.nav-about:hover DIV.nav-label 		{ background:#ff688f; }

A.nav-curpage-home DIV.nav-label 		{ background:var(--colTheme) !important; }
A.nav-curpage-home:hover DIV.nav-label 	{ background:#40add6 !important; }

A.nav-curpage-work DIV.nav-label 		{ background:var(--colTheme) !important; }
A.nav-curpage-work:hover DIV.nav-label 	{ background:#66f !important; }

A.nav-curpage-play DIV.nav-label 		{ background:var(--colTheme) !important; }
A.nav-curpage-play:hover DIV.nav-label 	{ background:#4095d6 !important; }

A.nav-curpage-study DIV.nav-label 		{ background:var(--colTheme) !important; }
A.nav-curpage-study:hover DIV.nav-label { background:#0acf9a !important; }

A.nav-curpage-about DIV.nav-label 		{ background:var(--colTheme) !important; }
A.nav-curpage-about:hover DIV.nav-label { background:#ff688f !important; }

/* we dont use this one anymore so can be removed: */
SPAN.nav-spacer { display:inline-block; width:0px; }

/* ------------------------------ */
/* about */
/* ------------------------------ */

P.ease-about-p { line-height:initial; padding-bottom:25px; opacity:0; }

.ease-about, .ease-projects { font-family: var(--fontBody); text-transform: none; font-size: 24px; }
.ease-about { min-height:66vh; text-align: justify; }

.ease-about .photo {
	float:right; margin-left:50px;
	width:40%; max-width:500px;
	color:#777;
	font-size:70%;
}

.ease-about .photo IMG {
	width:100%; border-radius:10px;
}

.ease-about A, .ease-text A {
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	color: var(--colEase) !important;
	text-decoration:none;
}

.ease-about A:hover, .ease-text A:hover {
	text-decoration:underline !important;
}

/* ----------------------------------- */
/* WORK: project list view ~ work-list */
/* ----------------------------------- */

/* the navigation buttons for the categories in the work-list page: exhibitions, tv, explainers etcetera */
DIV.ease-nav-categories {
	font-family: var(--fontHead);
	text-transform: lowercase;
	font-size: 20px;
	display:inline-block;
	width:70%;
}

/* the wrapper for all the project items in the list */
DIV.ease-projects {
	text-align: center;
	margin-bottom:30px;
}

/* the container of 1 project-item in the list */
DIV.ease-project-item {
	width:calc(100%/3 - 25px);
	aspect-ratio:1;
	margin:0px 10px 20px 10px; /* margin: 10px 10px; */
	display:inline-block;
	vertical-align: top;
	opacity:0;
	/*font-size:0;*/
	/*background:#f00;*/
}

A.ease-project { margin:0 !important; padding:0 !important; }

/* these classes will animate the background image zoom in on mouseover (only on desktop devices) */
/* transition: width 0.2s, left 0.2s, top 0.2s, opacity 0.2s; */
A.ease-project DIV.ease-project-image 		{ transition: width 0.2s, left 0.2s, top 0.2s; transition-timing-function: ease; }
A.ease-project:hover DIV.ease-project-image { width:calc(100% + 20px); left:-10px; top:-10px; /*opacity:0.8;*/ }

/* these classes will animate the title button on mouseover: the button height will increase, revealing the subtitle as well (only on desktop devices) */
/* A.ease-project DIV.ease-project-title 	{ transition: height 0.2s, top 0.2s; transition-timing-function: cubic-bezier(0.8, -0.2, 0, 1.5); } */
A.ease-project DIV.ease-project-title 		{ transition: height 0.1s, top 0.1s; transition-timing-function: ease; }
A.ease-project:hover DIV.ease-project-title { height:calc(28px + 28px); top:calc(100% - 60px - 28px); }

/* the class for the subtitle which is revealed when the user hovers a project with the mouse */
A.ease-project DIV.ease-project-subtitle { font-family:var(--fontBody); font-size:18px; /*margin-top:5px;*/ opacity:0; transition: opacity 0.2s; }
A.ease-project:hover DIV.ease-project-subtitle { opacity:1; }

/* container holding background image and button with rounded edges */
DIV.ease-project {
	width:100%;
	aspect-ratio:1;
	box-shadow: 0px 0px 5px rgb(0,0,0, 0.1); /* soft shadow with 5px blur and opacity 0.1 (10%) */
	border-radius:20px;
	overflow:hidden;
	position:relative;
	/*background:#cda;*/
}

/* the project's background image */
DIV.ease-project-image, DIV.ease-play-image {
	position:absolute;
	width:100%;
	left:0px;
	top:0px;
	aspect-ratio:1;
	object-fit: cover;
	background-size: cover;
	background-position: center;
	opacity:1;
	
}

.lazyload { filter: blur(5px); }

/* the project's big colored button with rounded edges */
DIV.ease-project-title, DIV.ease-play-title {
	position:absolute;
	z-index:2;
	top:calc(100% - 60px);
	left:20px;
	width:calc(100% - 40px);
	height:28px;
	overflow:hidden;
	background:var(--colEase);
	color:#fff;
	border-radius:60px;
	
	font-family: var(--fontHead);
	text-transform: lowercase;
	font-size: 22px;
	/*line-height:22px;*/
	padding:5px 0px;
	box-shadow: 0px 0px 10px rgb(0,0,0, 0.3);
}

/* hide the mobile version of a title on desktop devices */
DIV.ease-mobile-title {
	display:none;
}

A.readmore-button {
	font-family: var(--fontHead);
	text-transform: lowercase;
	background-color: var(--colEase) !important;
}

/* ------------------------------- */
/* PLAY: list view ~ play-list */
/* ------------------------------- */

/* the container of 1 play-item in the list */
DIV.ease-play-item {
	width:calc(100%/4 - 25px);
	aspect-ratio:1;
	margin:0px 10px 20px 10px; /* margin: 10px 10px; */
	display:inline-block;
	vertical-align: top;
	opacity:0;
	/*font-size:0;*/
	/*background:#f00;*/
}

A.ease-project DIV.ease-play-title 			{ bottom: 5px; opacity:0; text-align:left; /* border-radius:20px; background:#4095d6; */ border-radius:0; background:transparent; box-shadow:none; top:initial; font-size:16px; height:auto; transition: bottom 0.1s, opacity 0.1s; transition-timing-function: ease; }
A.ease-project:hover DIV.ease-play-title 	{ bottom:20px; opacity:1; }

A.ease-project DIV.ease-play-image 			{ opacity:1; transition: width 0.2s, left 0.2s, top 0.2s, opacity 0.2s; transition-timing-function: ease; }
A.ease-project:hover DIV.ease-play-image 	{ opacity:0.1; width:calc(100% + 20px); left:-10px; top:-10px; /*filter: blur(4px); -webkit-filter: blur(4px);*/ }

/* the class for the subtitle which is revealed when the user hovers a project with the mouse */
DIV.ease-play-subtitle { font-family:var(--fontBody); font-size:18px; text-transform:initial; text-align:left; margin:10px 10px 0px 10px; margin-left:0; line-height:120%; }

/* instagram / social media icon top right corner over play-image */
IMG.ease-play-icon { position:absolute; z-index:1; right:10px; top:10px; width:25px; height:25px; }

/* ------------------------------- */
/* STUDY: list view ~ study-list */
/* ------------------------------- */

DIV.ease-study-title { font-size:18px; line-height:28px; }

/* the icon for AE, C4D or other tools in the top right corner of study list view */
IMG.icon-study-cat { position:absolute;top:10px; right:10px; width:40px; z-index:1; }

/* ----------------------------------- */
/* WORK + PLAY + STUDY - single view */
/* ----------------------------------- */

/* JS 4jun25 - set the opacity to 0 for these items because we animate their opacity and position in studioease.js */
.project-title, .post-meta-type, .post-meta-client, .project-text, .ease-text {
	opacity:0;
}

/* title / meta info section on top of page, below the video */
.ease-meta-info { line-height:unset !important; text-transform:initial; }

.ease-meta-info .project-title { text-transform:initial; }

.ease-text H1 { text-transform:initial; }

.ease-text .background-story { border-radius:20px; padding:40px; margin:20px 0; font-size:80%; line-height:160%; background:var(--colEase); color:#fff; }
.ease-text .background-story H1 { font-family: var(--fontHead); font-size: 28px; margin-bottom:10px; }

.ease-text IMG { max-width:100%; margin:20px 0; border-radius:20px; display:inline-block; }

.background-story A { background: #fff !important; display: inline-block; padding: 0 10px !important; }
.background-story A:hover { text-decoration:none !important; background:rgba(255,255,255, 0.8) !important; }

/* ------------------------------ */
/* footer */
/* ------------------------------ */

DIV.ease-footer {
	background:var(--colEase);
	color:#fff;
	padding:40px;
	text-align:center;
}

.ease-footer-socials { }

.ease-footer-copy {
	font-size:22px;
	margin-bottom:20px;
}

.ease-footer-copy A {
	background:#fff;
	color:var(--colEase);
	border-radius:20px;
	display:inline-block;
	padding:5px 20px;
	text-decoration:none;
	font-size:70%;
}

.ease-footer-copy A:hover { background:rgba(255,255,255, 0.85); }

.ease-footer-socials A {
	display:inline-block;
	width:30px;
	height:30px;
	border-radius:20px;
	background:transparent;
}

.ease-footer-socials A:hover { background:rgba(255,255,255, 0.15); }
.ease-footer-socials A:hover IMG { /*filter: invert(1);*/ }

.ease-footer-socials IMG { width:25px; height:auto; vertical-align: text-bottom; }

.ease-footer-socials A.insta IMG { }
.ease-footer-socials A.linkd IMG { }
.ease-footer-socials A.vimeo IMG { }

.ease-footer-dot {
	height: 6px;
	width: 6px;
	background-color:#fff;
	border-radius: 50%;
	display: inline-block;
	margin: 0 5px 2px 5px;
	vertical-align: middle;
}

/* to display a warning box that we're looking at the local development server */
#notifylocaldevserver {
	position:fixed;
	bottom:5px;
	right:5px;
	z-index:999;
	background:#ff8;
	padding:8px;
	width:auto;
	font-size:12px;
	font-weight:normal;
	font-family:andale mono, monaco, menlo, courier;
	border:1px solid #000;
	text-align:left;
	text-transform:initial; border-radius:5px;
}

/* for adding a copyrights text on the bottom of vimeo poster frames in the work pages. see also footer.js > motokocredits  */
.motokocredits {
	position:absolute; z-index:0; bottom:9px; right:8px;
	font-family:helvetica, arial, sans-serif; font-size:11px; font-weight:normal;
	text-transform:initial;
	color:#fff;
	background:rgba(0,0,0, 0.15);
	padding:2px 4px;
	border-radius:6px;
	line-height:initial;
	animation-name: motoko-credits; /* let the motoko credits fade in, triggered immediately when the element is created */
	animation-duration: 0.5s;
}

/* motoko credits fade in animation, triggered immediately when the element is created */
@keyframes motoko-credits {
	0% { opacity:0; }
	100% { opacity:1; }
}

/* ------------------------------ */
/* vimeo embeds */
/* ------------------------------ */

.ease-videos {
	margin: auto;
	width: 90%;
	max-width:1280px;
	text-align:center;
}

/* Waarom die padding van 56.25% - wel dat zit zo: Breedte van document is 1360 pixels (hebben we gedefinieerd).
   Bij een 16x9 video, ofwel 1920x1080, is de hoogte-breedte beeldverhouding 1080/1920, oftewel 1 : 0.5625.
   Dus, als we een 16x9 video in een breedte van 1360 pixels willen persen, dan moeten we een padding van 56.25% doen.
   Deze manier - dus met die top-padding - is hoe Vimeo het zelf doet zodra je de embed code van de vimeo site pakt.
   Maar als we dus een andere beeldverhouding hebben, dan moeten we die dus doorgeven aan de padding.
*/
DIV.ease-vimeo {
	padding:56.25% 0 0 0;
	position:relative;
	margin:0px;
}

DIV.ease-vimeo IFRAME { border-radius:10px; position:absolute; top:0; left:0; width:100%; height:100%; }

/* the new vimeo player container */
/* If aspect-ratio and width properties are set, the height will follow in the defined aspect ratio. source: https://www.w3schools.com/cssref/css_pr_aspect-ratio.php */
DIV.ease-vimeo-new {
	width:100%;
	height:initial;
	aspect-ratio: 16 / 9; /* most videos are 1920x1080 so that's an aspect ratio of 16 : 9 */
	max-height:calc(var(--docWidth) * 9/16); /* max-height will be 765px when the width is 1360px (1360 * 9/16 = 765) */
	position:relative;
	border-radius:10px;
	background-image:url(../gfx/loading.gif);
	background-repeat: no-repeat;
    background-position: center;
    background-size: 100px;
	/*background-color:#ccc;*/
}

/* round corners of the vimeo player iframe */
DIV.ease-vimeo-new IFRAME {
	border-radius:10px;
	/*width:100%;*/
	/*height:auto;*/
	max-width:100%;
	/*aspect-ratio: 16 / 9;*/
	display: block;
	margin: 0 auto; /* center iframe in div - source: https://codepen.io/Rohittt/pen/eQwLYe */
	opacity:0; /* we set the opacity to 0 so we can gradually fade in the vimeo / iframe, once it's loaded */
	/*transition: opacity 0.5s;*/ /* the time to fade in once the vimeo / iframe is loaded */
}

/* ------------------------------ */
/* misc layout stuff - study, etc */
/* ------------------------------ */

.home-caption {
    font-family: var(--fontBody);
    text-transform: none;
    font-size: 24px;
	margin:20px 0px 40px 0px;
    text-align: center;
}

.ease-caption {
    font-family: var(--fontBody);
    text-transform: none;
    font-size: 20px;
	margin:20px 0px 40px 0px;
	padding: 0 30px;
    text-align: center;
    /*border-radius: 20px;*/
    /*background: #fff;*/
    /*box-shadow: 0px 0px 10px rgb(0,0,0, 0.3);*/
}

.ease-caption-compact {
    font-family: var(--fontBody);
    text-transform: none;
    font-size: 20px;
    text-align: center;
    /*display:inline-block;*/
    /*width:100%;*/
    /*white-space:initial;*/
    line-height:initial;
    /*margin:0px 0 40px 0;*/
	/*background: #eee;*/
	/*border-radius: 20px;*/
	/*padding: 5px;*/
}

/* we use these to align smaller images into a page */
.ease-align-center 	{ text-align: center; margin: 0; display:inline-block; width:100%; white-space:initial; line-height:0; }
.ease-image-compact { margin:0 !important; border-radius:0 !important; max-height:200px; white-space:initial; }

.ease-rounded-corners { border-radius:20px !important; }

/* ---------------------------------------------------------------------- */
/* animate buttons, texts, projects when the page has loaded. */
/* ---------------------------------------------------------------------- */

/* the initial state: opacity 0%, top margin of 20 px */
.ease-anim-init { margin-top:20px; opacity:0; }

.ease-anim-play {
	animation-name: animate-ease-item;
	animation-duration: 0.4s;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(0, 0, 0.3, 1); /* ease-out | ease */
	animation-fill-mode: forwards;
}

@keyframes animate-ease-item {
	0%		{ opacity:0; margin-top:20px; }
	100%	{ opacity:1; margin-top: 0px; }
}

/* --------------------------------------------------- */
/* instagram embed classes, used in the 'play' section */
/* --------------------------------------------------- */

#insta-container {
	position: fixed;
	background: transparent; /*var(--colBack);*/
	top: 0;
	left: 0;
	z-index:909;
	display:none;
	left: 50%;
	top: calc((100vh - 90vh) / 2); /* calc((100vh - 900px) / 2) */
	transform: translate(-50%, 0%); /* translate(-50%, -45%) */
	padding:0;
	margin:0;
}

#insta-iframe {
	width:560px; /* 580px */
	height:90vh; /* 900px*/
	padding:0;
	margin:0;
	border:1px solid #888;
	border-radius:10px;
	background: var(--colBack);
	box-shadow: 0px 0px 20px rgb(0,0,0, 0.4); /* soft shadow with 5px blur and opacity 0.1 (10%) */
}

#docOverlay {
	z-index: 500;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-color: rgba(220,220,220, 0.8);
}

.docOverlayHide {
	visibility:hidden;
	opacity:0;
	transition: visibility 0s linear 300ms, opacity 300ms;
}

.docOverlayShow {
	visibility:visible;
	opacity:1;
	transition: visibility 0s linear 0s, opacity 300ms;
}