/*
	Theme Name: Motoko
	Theme URI: http://wordpress.org/extend/themes/toolbox
	Author: Motoko film & motion design
	Author URI: http://motoko.tv/
	Description: Theme by Motoko based on Toolbox.
	Version: 1.4
	License: GNU General Public License
	License URI: license.txt
	Tags: custom-menu, sticky-post, microformats, rtl-language-support, translation-ready, full-width-template, post-formats
	
	This theme, like WordPress, is licensed under the GPL.
	Use it to make something cool, have fun, and share what you've learned with others!

	IMPORTANT NOTE:
	variables for fonts, width and colors are set in style-motoko-theme.css
	which must be loaded first before style.css is loaded!
*/

/* ----------------------------------------------------------------- */
/* The basic structure */
/* ----------------------------------------------------------------- */

/* These classes use the Helvetica font: */
H1,
H2,
H3,
#access,
.big-fat,
.small-fat,
.buttonbox,
.col-address h2,
.bio-text h2,
.case-quote,
.addressBlock H2,
.messageBlock H2,
.footerHeader,
.newsletterBlock H2 {
	font-family: var(--fontHead);
	text-transform:lowercase;
}

BODY {
	font-family: var(--fontHead);
	text-transform:lowercase;
	font-size:14px;
	margin:0; padding:0;
	color:var(--colTheme);
	background:var(--colBack); /* f0f0f0 / fff / f1f3f2 */
	width:100%;
	height:100%;
}

#root {
	position: relative; /* needed for footer positioning*/
	height: auto !important; /* real browsers */
	min-height: 100%; /* real browsers */
}

INPUT, TEXTAREA {
	font-family: var(--fontHead);
	padding:5px 5px;
	font-size:17px;
	color:var(--colTheme);
	margin:18px 0 0 0;
	border:1px solid var(--colTheme);
	-moz-border-radius: 3px; border-radius: 3px;
}

INPUT[type=submit] {
	color:#fff;
	background:var(--colTheme);
	padding:5px 10px;
	border:none;
}

INPUT[type=submit]:hover {
	cursor:pointer;
}

H1 {
	line-height:normal;
	font-size:40px;
	margin:20px 0px;
}

H2 {
	font-style:normal;
	font-size:37px;
	margin:0px;
	padding:0px;
}

H3 {
	font-style:normal;
	font-size:24px;
	margin:0px;
	padding:0px;
}

HR {
	margin:5px 0px;
	padding:0;
	height:1px;
	border:none;
	background:var(--colTheme);
	color:var(--colTheme);
}

P {
	margin:0; padding:0;
	line-height:140%;
}

P.compact {
	width:85%;
	margin-left:auto;
	margin-right:auto;
}

/* JS 10nov22 - if a paragraph is empty, then just don't display it! source: https://css-tricks.com/almanac/selectors/e/empty/ */
P:empty { display:none; }

#page {
	margin: 20px auto 20px auto;
	width:var(--docWidth);
	max-width:var(--docWidth);
	/*background:#ccc;*/
}

#page-case-study {
	margin: 30px auto 20px auto;
	width:1200px;
}


#primary {
	width: 100%;
}

#content {
	margin: 0;
	position:relative;
}

#content:not(.blog-single-post-container) {
	width:var(--docWidth);
}

#content-case-study {
	margin: 0;
	width:1200px; overflow:hidden;
	position:relative;
}

#content A, .lightbox-text A {
	text-decoration:none;
	color:var(--colTheme);
	margin:0 -2px;
	padding:0 2px;
	-moz-border-radius: 20px; /*3px;*/
	border-radius: 20px; /*3px;*/
}

/* JS 29oct20 - make <a href> tags a bit wider */
#content A { padding:0 8px; margin:0 -8px; }

#content A:hover, .lightbox-text A:hover {
	text-decoration:none;
	color:#fff;
}

/* no border around focussed items anywhere */
*:focus { outline: none; }

.justify { text-align:justify !important; }

/* make sure that phone numbers keep their own color on mobile devices */
/* source: https://stackoverflow.com/questions/3736807/how-do-i-remove-the-blue-styling-of-telephone-numbers-on-iphone-ios */
a[href^="tel"]{
    color:inherit;
    text-decoration:none;
}

#main .widget-area {
	float: right;
	overflow: hidden;
	width: 220px;
}

/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content {
	margin: 0;
}

/* Text meant only for screen readers */
.screen-reader-text,
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

DIV.images-2 {
	width:100%;
	height:auto;
}

DIV.images-2::after {
    content:"";
    display:block;
    clear:both;
}

/* ----------------------------------------------------------------- */
/* Fade in on pageload */
/* Source: http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load */
/* ----------------------------------------------------------------- */

/* JS 3jun25 - removed */
#main 			{ animation: fadeinFast 1s; }
#newFooterMain 	{ animation: fadeinSlow 1.5s; }

/* fade in, per-browser */
@keyframes fadeinFast {
    0%   { opacity:0; }
    100% { opacity:1; }
}

/* fade in, per-browser */
@keyframes fadeinSlow {
    0%   { opacity:0; }
    50%  { opacity:0; }
    100% { opacity:1; }
}


/* ----------------------------------------------------------------- */
/* Back to top button and related styles */
/* ----------------------------------------------------------------- */

#backtotop 			{ display:none; position:fixed; z-index:100; bottom:10px; right:10px; line-height:0; }
#backtotop IMG 		{ content:url(../gfx/top.png); width:30px; height:30px; -moz-border-radius:30px; border-radius:30px; }
.backtotophidden	{ opacity:0; transition: opacity .3s linear; }
.backtotopvisible	{ opacity:1; transition: opacity .3s linear; }
#pagetop 			{ position:absolute; top:0; left:0; width:0px; height:0px; }

/* ----------------------------------------------------------------- */
/* Header - that's the logo at the top of the website */
/* ----------------------------------------------------------------- */

#branding {
	display:block;
	width:100%;
	position:relative;
	margin-top:25px;
	margin-bottom:25px;
}

#branding::after {
    content:"";
    display:block;
    clear:both;
}

#site-title {
	width:100%;
	height:35px;
}

#site-description {
}

/* remove borders when http://www.motoko.tv/case-studies/ */
.header-case-study #branding { border:none !important; margin:0 !important; }
.header-case-study #site-title { border:none !important; }

.motoko-logo {
	width:140px; /* width:222px; */
	display: block;
	margin-left: auto;
	margin-right: auto;
	opacity:0.85;
}

.motoko-logo:hover {
	opacity:0.65;
}

#currentpage {
	width:100%;
	height:50px;
	margin-top:-5px;
	margin-bottom:15px;
	position:relative;
}

#currentpage-case-study {
	width:100%;
	height:85px;
	margin-bottom:0px; /*20px;*/
	overflow-y:hidden;
	position:relative;
}

#page-title {
	width:100%;
	display:block;
	text-align:center;
}

.center-title, .centered 	{ text-align:center !important; }
.center-flex 				{ display: flex; justify-content: center;}
.spacious 					{ padding:10px; }

@-moz-document url-prefix() {
	#page-title {

	}
}

#motoko-circle {
	top:0px;
	left:0px;
	width:70px;
	height:auto;
	position:absolute;
	content:url("https://www.motoko.nl/wp-content/uploads/2020/06/motoko-cirkel.png");
	opacity:0.85;
}

/* ----------------------------------------------------------------- */
/* Menu - meaning the navigation menu at the top of the website */
/* ----------------------------------------------------------------- */

/*	JS 16oct19: fixed center alignment of the variable width div, following this example:
	https://stackoverflow.com/questions/7266755/easy-way-to-center-variable-width-divs-in-css
*/

#access {
	font-size:24px;
	margin-top:15px;
	width:100%;
	overflow:hidden;
}

#access div {
	position:relative;
	left:50%;
	float:left;
}

#access ul {
    position:relative;
    left:-50%;
    float:left;
    
	list-style: none;
	margin: 0;
	padding-left: 0;
}

#access li {
	float: left;
	margin:0 12px;
}

/* these are the menu-items in the navigation on top of the page: work, studio, contact, etc */
#access a {
	display: block;
	text-decoration: none;

	background-color:var(--colBack);
	color:var(--colTheme);

	height:22px;
	line-height:22px;
	
	margin:0 0px 0 0px;
	padding:2px 16px 4px 16px; /* padding:2px 16px 4px 16px; */
	
	-moz-border-radius: 30px; /*3px*/
	border-radius: 30px; /*3px*/
}

/* this only fires when a user hovers a menu-item in the navigation that is NOT the current menu item */
#access a:hover:not(.current-menu-item) {
	background-color:var(--colTheme);
	color:#fff;
}

/* hightlight main menu item */
.current_page_item a, .current-menu-item a {
	background-color:var(--colTheme) !important;
	color:#fff !important;
}

/* ----------------------------------------------------------------- */
/* List Content */
/* ----------------------------------------------------------------- */

.post-meta {
	padding-bottom:20px;
}

.post-meta DIV {
	float:left; padding-right:20px;
}

/* JS 11may21 - fix right padding */
.post-meta-type, .post-meta-client { padding-right:0 !important; color: var(--colEase); }

.post-meta:after {
    content: '';
    display: block;
    clear: both;
}

.entry-content, .post-meta, .lightbox-text {
	font-family: var(--fontBody);
	
	font-size:15px;
	text-transform:none;
}

/* case study font */
#content-case-study .entry-content {
	font-style:normal !important;
}

.entry-content IMG {
	-moz-border-radius: 10px;
	border-radius: 10px;
}

/* hide the title, author, published and updated classes (google needs these for indexing but we don't like them to show on our website) */
SPAN.author, .post-title, .updated, .published {
	display:none !important;
}

.list-col {
	/* JS 30may23 - unset width and height here... it will be defined in functions.php > motoko_list_item() */
	/*width:251px; height:144px;*/
	
	overflow:hidden;
	font-style:normal;
	font-size:14px;
	line-height:150%;
	color:#fff;
	padding-bottom:7px;

	-moz-border-radius: 3px;
	border-radius: 3px;
}

.list-col0 { float: left; padding:0px 7px 6px 0px !important; }
.list-col1 { float: left; padding:0px 7px 6px 0px !important; }
.list-col2 { float: left; padding:0px 0px 6px 0px !important; }
.list-col3 { float:right; padding:0px 0px 6px 0px !important; }
.list-col-less-than-four { float: left; padding:0px 0px 6px 7px !important; }

A.list-item {
	background:transparent !important;
	display:block;
	padding:0 !important;
	margin:0 !important;
	color:#fff !important;
}

A.list-item:hover {
	background:transparent !important;
	color:#fff !important;
}

.list-col-parent {
	position:relative;
}

.list-col-parent .thumb {
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.list-col-bg {
	width:252px; height:144px;
	position:absolute;
	background-color:rgba(0, 0, 0, 0.8); /* example: red with 30% opacity => background-color: rgba(255, 0, 0, 0.3) */
	opacity:0;

	-moz-border-radius: 3px;
	border-radius: 3px;

	transition: opacity .2s ease-in-out;
	-moz-transition: opacity .2s ease-in-out;
	-webkit-transition: opacity .2s ease-in-out;

	/* JS 9jun20 - vertically align the contents (project title + client) inside the box */
	/* Source: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ */
	display: flex;
	align-items: center;
	justify-content: center;
}

.list-col-bg:hover {
	opacity:1;
}

/* animate the margin of list-col-text when hovering its parent, list-col-bg */
.list-col-bg:hover > .list-col-text {
	margin:0 0 0 0;
}

.list-col-text {
	padding:10px;
	margin:20px 0 0 0;
	/* animate the margins when hover */
	transition: margin .3s ease-in-out;
	-moz-transition: margin .3s ease-in-out;
	-webkit-transition: margin .3s ease-in-out;
}

.list-col-title {

}

.list-col-data {
	padding-bottom:10px;
}

.list-col-project {
	text-align:center;
	font-size: 20px;
	font-style:normal;
	line-height: 125%;
}

.list-col-client {
	text-align:center;
}

/* .list-col-caption extends the .list-col class (eg. class="list-col list-col-caption" and is used for making the list-col class higher with room for a caption.
	used in allprojects.php / content.php / functions.php > motoko_list_item() */

.list-col-caption {
	height:288px !important;
}

.projectCaption {
	color:var(--colTheme);
}

.projectCaption:hover {
	color:#666;
}

.projectCaption H2 {
	font-size:20px;
	margin:5px 0;
}

.projectCaption P {
	padding-right:10px;
	line-height:130%;
	font-family: var(--fontBody);
	font-weight:normal;
	font-size:90%;
}

.new-sticker {
	z-index:10; position:absolute; right:-8px; bottom:-2px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

.work-main-portrait {
	padding-bottom:24px;
}

.work-text-portrait {
	text-align:center;
}

.work-project-portrait {
	font-size:24px;
	font-style:normal;
	text-decoration: none;
	line-height:110%; /* 125% */
}

.work-client-portrait {
	margin-top:10px;
	font-size:14px; /* 15px */
}

/* this is the small caption in the projects list view underneath the image that displays the project type, eg. 'exhibition' */
.list-project-type { text-align:center; color:var(--colTheme); font-size:19px; }

/* ----------------------------------------------------------------- */
/* Unsorted styles */
/* ----------------------------------------------------------------- */

/* JS 18nov19: image links */
A.imagelink:hover {
	background:none !important;
}

/* custom style for the first paragraph */
.first-paragraph { /*padding-top:20px;*/ }
.project-images  { padding:10px 0; }
.project-caption { padding:5px 0 10px 0; font-size:85%; }

/* the inner box inside a caption DIV */
.captionInner { }

.contact-clear 	{ clear: both; height:0px; overflow:hidden; }
.contact-hr		{ margin: 0px 0px 10px 0px; }

HR.contact-spacer {
	padding:0;
	margin:5px 0px;
	border:0px solid #fff;
	background:transparent;
	height:1px;
}

/* JS 10aug21 - phone numbers on contact page */
IMG.image-phone-number {
	height: 16px;
	vertical-align: middle;
}

/* ----------------------------------------------------------------- */
/* Frontpage - Homepage */
/* JS 1dec22 - these classes moved to style-home.css */
/* ----------------------------------------------------------------- */

/* ----------------------------------------------------------------- */
/* Unsorted styles */
/* ----------------------------------------------------------------- */

P.bigbutton {
	clear:both;
	padding:25px 0 15px 0;
	text-align:center; /* JS 11aug21 - center align the big button on the homepage */
}

A.bigbutton {
	font-family: var(--fontHead);
	font-size:24px;
	font-style:normal;
	text-transform:lowercase;
	text-decoration: none;
	color:#fff !important;
	background:var(--colTheme) !important;
	opacity:1;
	
	padding:4px 20px 6px 20px !important;
	margin:20px 0 !important;
	
	-moz-border-radius: 20px !important; /*3px*/
	border-radius: 20px !important; /*3px*/
}

A.bigbutton:hover {
	opacity:0.8;
	-moz-border-radius: 20px; /*3px*/
	border-radius: 20px; /*3px*/
}

A.smallbutton {
	font-family: var(--fontHead);
	text-transform:lowercase;
	text-decoration: none;
	color:#fff !important;
	background:var(--colTheme);
	opacity:1;
	
	padding:5px 20px !important;
	margin:20px 0 !important;
	
	-moz-border-radius: 20px; /*3px*/
	border-radius: 20px; /*3px*/
}

A.smallbutton:hover {
	opacity:0.8;
	-moz-border-radius: 20px; /*3px*/
	border-radius: 20px; /*3px*/
}

.buttonbox { /*font-weight:bold;*/ font-size:20px; }

A.backbutton { padding:5px 10px !important; font-size:18px; }
A.backbutton IMG { width:8px; height:auto; margin:0; }

DIV.backnav { margin-bottom:15px; }

A.roundbutton {
	display:block;
	width:75px;
	height:70px;
	overflow:hidden;
	color:#fff !important;
	border-radius: 50%;
	margin:20px auto 10px auto;
	text-align:center;
	padding:25px 10px 0px 10px;
	opacity:1;
}

A.roundbutton:hover {
	border-radius: 50%;
	opacity:0.8;
}

#blogcontent {
	margin-top:10px;
	padding-top:25px;
}

/* ----------------------------------------------------------------- */
/* Project Credits (2020 edition) */
/* ----------------------------------------------------------------- */

#titleCredits {
	cursor:pointer;	cursor:hand;
	background-position: right 28px;
	background-repeat: no-repeat;
	background-size: 25px 25px;
	background-image:url(gfx/ico-plus.png);
	margin-bottom:0px !important;
}

.project-credits {
	padding:15px 0 0 0;
	
	/* Initially we don't want any height, and we want the contents to be hidden */
	max-height: 0px;
	overflow: hidden;

	/* Set our transitions up. */
	-webkit-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	transition: max-height 0.4s;
}

.project-credits-new {
	padding:15px 0 0 0;
}

.credits-col {
	float:left;
	width:248px;
	padding-right:10px;
	font-size:14px;
	line-height:18px;
	overflow:visible;
}

.credits-col-3 {
	width:500px;
	padding:0;
}

.credits-col DIV {
	margin-bottom:15px;
}

.credits-col A {
	white-space:nowrap;
}

.credits-header {
	font-family: var(--fontHead);
	text-transform:lowercase;
	font-size:15px;
}

/* ----------------------------------------------------------------- */
/* Project Credits (2022 edition) */
/* ----------------------------------------------------------------- */

.project-credits-2022 		{ display: flex; flex-direction: row; width: 70%; margin:40px auto 40px auto; line-height:200%; background: #fff; border-radius: 20px; padding: 20px 40px 0px 40px; box-shadow: 0px 0px 20px rgb(0,0,0, 0.07); }
.project-credits-2022 .col1 { width:55%; font-size:36px; font-family: var(--fontHead); color: var(--colEase); text-transform:capitalize; }
.project-credits-2022 .col2 { width:45%; font-size:22px; }
.credit-func				{ font-family: var(--fontBody); }
.credit-name				{ font-family: var(--fontHead); margin-bottom:40px; width:80%; }
.credit-person				{ white-space: nowrap; }

/* ----------------------------------------------------------------- */
/* Other stuff */
/* ----------------------------------------------------------------- */

.padTop0     { padding-top:0 !important; }
.padTop20    { padding-top:20px !important; }
.padBottom0  { padding-bottom:0 !important; }
.padBottom20 { padding-bottom:20px !important; }

.padTopBot10 { padding:10px 0 !important; }
.padTopBot15 { padding:15px 0 !important; }
.padTopBot20 { padding:20px 0 !important; }
.padTopBot25 { padding:25px 0 !important; }
.padTopBot30 { padding:30px 0 !important; }

/* ----------------------------------------------------------------- */
/* Debugging info styles */
/* ----------------------------------------------------------------- */

.pDebug {
	background:#eee; border-radius:5px; margin:2px 0; padding:5px; color:#222; font-size:12px; font-family:sans-serif;
}

.debug {
	background:#ffa; color:#c00; border:1px solid #c00; font-family:andale mono, courier new, courier; font-size:12px; font-style:normal; font-weight:normal; margin:5px; padding:5px; width:95%; white-space:normal;
}

/* ----------------------------------------------------------------- */
/* Single Content - thats for show a single post or page */
/* ----------------------------------------------------------------- */

.single-1col {
	clear:both;
	position:relative;
	width:100%;
	margin:0;
}

.single-2cols {
	clear:both; position:relative; width:100%;
	margin:6px 0px 6px 0px;
}

.single-2cols::after {
    content:"";
    display:block;
    clear:both;
}

.single-2cols IMG {
	max-width:none !important;
	-moz-border-radius:0;
	border-radius:0;
}

.single-2cols-left {
	display:block; float:left; width:509px; height:288px; overflow:hidden;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.single-2cols-right {
	display:block; float:right; width:509px; height:288px; overflow:hidden;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.hr-comments {
	margin:20px 0 0px 0;
}

/* JS 17jun20 - hide the HR */
.hr-related { display:none; }

.related-header {
	clear:both;
	width:100%;
	margin:20px 0px 20px 0;
}

.related-items-part {
	/* float:right; */
	float:left;
}

.related-items-part .list-col-less-than-four {
	padding:0px 7px 6px 0 !important;
}

.related-items-full {
	width:100%;
}

.big-fat {
	font-size:37px;
	clear:both;
	padding:20px 0 0 0;
	line-height:115%;
	font-style:normal;
	text-transform:lowercase;
	/*font-weight:bold;*/
	margin:20px 0 20px 0;
	font-family: var(--fontHead);
}

.big-fat A {
	padding:7px 5px !important;
	margin:0px 5px !important;
}

.small-fat {
	font-size:25px;
	clear:both;
	padding:20px 0 5px 0;
	line-height:115%;
	font-style:normal;
	text-align:left;
	text-transform:lowercase;
	font-family: var(--fontHead);
}

HR.spacer {
	margin:15px 0px 25px 0px;
}

P.spacer, DIV.spacer { line-height:0; margin:15px 0; }

.col-address {
	float:left; width:511px; height:140px;
}

.col-address h2, .bio-text h2 {
	font-style:normal;
	font-size:37px;
	margin:0px 0px 5px 0px;
	padding:0px;
}

#content-case-study H2 {
	font-style:normal;
	font-size:37px;
	margin:30px 0px 30px 0px;
	padding:0px;
}

.col-address A, .bio-text A {
	color:var(--colTheme) !important;
	background:#fff !important;
	text-decoration:none !important;
}

.col-address A:hover, .bio-text A:hover {
	text-decoration:none !important;
	color:#fff !important;
	background:var(--colTheme);
}

/* a href case study links */
#content-case-study A {
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-left:1px;
	margin-right:1px;
	padding:1px 5px;
	text-decoration:none !important;
	color:#fff !important;
	background:var(--colTheme);
}

#content-case-study A:hover {
	text-decoration:none !important;
	color:#fff !important;
	background:#666 !important;
}

/* the case study paragraph text */
P.case-study {
	margin:30px 0px;
}

/* the case study quote text */
P.case-quote {
	margin:30px 0px;
	font-size:24px;
	font-style:normal;
}

/* the case study credits text */
P.case-credits, DIV.case-credits {
	margin:30px 0px;
	line-height:140%;
}

/* 1 regel vd case credits, zie functions.php > formatCredits() */
DIV.case-credits-line {
	float:left; width:100px;
}

/* case study caption text */
P.case-caption {
	margin:0 0 20px 0;
	font-size:14px;
}

.bio-text {
	min-height:150px;
}

.bio-image {
	margin:0px 20px 0px 0px !important;
}

.prevnextbutton {
	position:fixed;
	z-index:999999;
	top:480px;
	opacity: 0.7;
}

.prevnextbutton:hover {
	opacity: 1;
}

.prevnextbutton A {
	width: 31px; height: 31px; display: block;
	background: url(gfx/bg_direction_nav.png) no-repeat 0 0;
	text-decoration:none;
}

.prevbutton {
	left:10px;
}

.nextbutton {
	right:10px;
}

.nextbutton A {
	background-position: 100% 0;
}

.single-post-main {
	position:relative;
}

/* like button for single posts */
.facebook-like-button {
	position:absolute; right:0px; bottom:10px;
}

/* read more button */
A.readmore-button		{ /*font-size:14px;*/ font-weight:bold; text-transform:lowercase; background:var(--colTheme); color:#fff !important; padding:5px 20px !important; }
A.readmore-button:hover	{ background:#666 !important; }
A.readmore-button IMG 	{ width:20px; height:20px; -moz-border-radius:20px; border-radius:20px; margin:0; padding:0; }

/* read more blocks */
.readmore-hidden 	{ overflow:hidden; max-height:  0px; transition: max-height .4s ease; } /* ease-out | cubic-bezier(1, 0, 1, 1) | cubic-bezier(0.2, 0, 0.3, 1) */
.readmore-visible 	{ overflow:hidden; max-height:500px; transition: max-height .4s ease; } /* ease-in | cubic-bezier(0, 1, 1, 1) | cubic-bezier(0.2, 0, 0.3, 1) */

.nofilter			{ filter:none !important; }

/* JS 15apr19: hidden content: you can use this by adding a div with class "content-hidden" in the content editor to temporarily hide content  */
.content-hidden	{ display:none; }

/* JS 8jun20: these P tags allow to put stuff inbetween that will be folded. to be sure, hide the P tags themselves */
.fold-start, .fold-end { display:none; }

IMG.fold-button { width:30px !important; height:30px !important; }

DIV.imagebox { margin-top:10px; }

.project-meta-info { display:none; }

/* ----------------------------------------------------------------- */
/* Masonry - the CSS grid layout */
/* ----------------------------------------------------------------- */

/* JS 7dec - we always add 1 extra pixel to the width of the document, because sometimes the columns + the gutter between them can be a pixel too wide because of rounding numbers */
/* so for example 1024px must be changed to 1025px */
.content-masonry {
	width:calc(var(--docWidth) + 1px) !important; /* 1025px */
}

.masonry-item {
	width:calc(var(--docWidth)/2 - 3); /* 509px */
	overflow:hidden;
	margin-bottom:6px;
	font-size:14px;
}

.masonry-item.w2 {
	width:var(--docWidth);
}

/* ----------------------------------------------------------------- */
/* VIMEO player */
/* ----------------------------------------------------------------- */

DIV.vimeoContainer, .vimeoFlashContainer {
	/*margin-bottom:20px;*/
	position:relative;
}

.vimeoContainer A {
	position:relative;
	display:block;
	line-height:100%;
	font-size:0px;
		
	color:var(--colTheme) !important;
	background:transparent !important;
	text-decoration:none !important;
	margin:0 !important;
	padding:0 !important;
}

/* centered playbutton */

DIV.playButton {
	/* zie https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp */
	
	width:80px; height:80px; /* width:48px; height:48px; */
	margin: -40px 0 0 -40px; /* margin: -24px 0 0 -24px; */

	position: absolute;
	top: 50%;
	left: 50%;
	opacity:0.85;

	transition: all 0.2s cubic-bezier(0.8, -0.4, 0, 2);
	/*transition: all .1s ease-in-out;*/
	/*-moz-transition: all .1s ease-in-out;*/
	/*-webkit-transition: all .1s ease-in-out;*/

}

DIV.playEpisode { opacity:0; }

IMG.playButton { width:100%; height:100%; }

.vimeoContainer A:hover > DIV.playButton	{
	width:100px; height:100px; /* width:64px; height:64px; */
	margin: -50px 0 0 -50px; /* margin: -32px 0 0 -32px; */
	opacity:1;
}

.vimeoFlashContainer {
	display:none;
	/*background:var(--colTheme);*/
	overflow:hidden;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.caption {
	padding:5px 0px;
	font-size:14px;
}

.frame-text {
	padding:20px;
	color:#fff;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.vimeoLeft  { float:left; }
.vimeoRight { float:right; }

/* blog rating stars: 1 t/m 4 */
.rating1 { background:var(--colTheme); height:15px; margin:0 5px; line-height:0; content: url(/wp-content/uploads/2016/05/1star.png); }
.rating2 { background:var(--colTheme); height:15px; margin:0 5px; line-height:0; content: url(/wp-content/uploads/2016/05/2stars.png); }
.rating3 { background:var(--colTheme); height:15px; margin:0 5px; line-height:0; content: url(/wp-content/uploads/2016/05/3stars.png); }
.rating4 { background:var(--colTheme); height:15px; margin:0 5px; line-height:0; content: url(/wp-content/uploads/2016/05/4stars.png); }

/* episode style: see vimeo.php > $caption */
DIV.vpEpisode 	{ margin:5px 0 10px 0; }
SPAN.vpEpisode 	{ background:var(--colTheme); color:#fff; padding:2px 5px; border-radius: 3px; margin-right:5px; font-size:11px; font-style: normal; font-family: var(--fontHead); vertical-align: middle; margin-bottom: 3px; display:inline-block; }
P.vpEpisode 	{ margin:5px 0 0 0; text-align:justify; line-height:130%; }

/* class for embedding vimeo iframes. also checkout this class in style_mobile.css */
.vimeo-mobile-iframe {
	border-radius: 10px;
	-moz-border-radius: 10px;
}

/* show a 'loading' message while the VIMEO iframe is loading... */
.vimeo-mobile-iframe, .vimeoPlayer, .vimeoResponsive IFRAME {
	background-color:var(--colBack); /* #f0f0f0 */
	background-image: url(../gfx/loading.gif); /* gfx/loading.png */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100px 50px;
}

/* center align videos inside this class */
.vimeoResponsive { text-align: center; line-height: 0; }

/* ----------------------------------------------------------------- */
/* Error pages */
/* ----------------------------------------------------------------- */

DIV.error404 P {
	padding:15px 0px;
	text-align:center;
}

/* ----------------------------------------------------------------- */
/* Images - styling basics */
/* ----------------------------------------------------------------- */

a img {
	border: none;
}
p img {
	margin-bottom:0; /* 0.5em; a small bottom margin prevents content floating under images */
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
img.size-small,
img.size-half,
img.size-tiny,
.attachment img,
.widget-area img,
.wp-caption {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
	object-fit: contain;
}

img.size-tiny 		{ max-width: 30%; }
img.size-small 		{ max-width: 40%; }
img.size-half 		{ max-width: 49%; }
img.size-medium 	{ max-width: 60%; }

img.alignleft 		{ margin:0; /*margin-right: 1em;*/ }
img.alignright 		{ margin:0; /*margin-left: 1em;*/ margin-left:20px; margin-bottom:20px; }

.wp-caption {
	padding: .5em;
	text-align: center;
}
.wp-caption img {
	margin: .25em;
}
.wp-caption .wp-caption-text {
	margin: .5em;
}
.gallery-caption {
}
.wp-smiley {
	margin: 0;
}

IMG.still { margin:0 0 20px 0; }

/* this class is for almost full size images such as sketches and storyboard images - just make them slightly smaller than the container width (which is 1360px in the 2022 layout), not 100% but ± 95% of the content width. */
/* note: the percentage 95.59% results in a pixel size of 1300 pixels in case of a container width of 1360 pixels: 1360 x 0.9559 ~ 1360. */
/* JS 4jun25 - let's ditch this idea... it sucks! */
.size-mostly { max-width: 99.9%; height: auto; object-fit: contain; }

/* ----------------------------------------------------------------- */
/* Footer */
/* ----------------------------------------------------------------- */

IMG.motoko-footer {
	margin-top:20px;
	
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -moz-animation: fadein 1s; /* Firefox */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera */
    animation: fadein 1s;
}

#colophon { /*clear: both; display: block; width: 100%;*/ }

DIV.fb-like-wrapper {
	position:absolute; bottom:0px; right:0px;
}

DIV.fb-like {
}

/* social media icons */

P.social-media {
	margin-top:15px;
}

P.social-media A {
	background:none !important;
}

P.social-media A:hover {
	background:none !important;
}

P.social-media IMG {
	float:left;
	width:25px; height:25px;
	margin-right:5px;
	opacity:1;
	border:none;
	-moz-border-radius:0;
	border-radius:0;
}

P.social-media IMG:hover {
	opacity:0.7;
}

/* ----------------------------------------------------------------- */
/* Blog/facebook/instagram styles */
/* ----------------------------------------------------------------- */

.mas-item {
	text-align:center;
	font-size:15px;
	line-height:150%;
	-moz-border-radius: 0px;
	border-radius: 0px;
	width:100%;
}

.mas-item .descr {
	padding:20px;
}

.mas-item .descr H2 {
	font-style:normal;
	font-size:22px;
	margin-bottom:15px;
}

.mas-item .entry-content {
	font-size:13px;
}

.mas-item:hover > DIV A IMG {
	opacity:0.9;
}

.mas-item A:hover {
	background:transparent !important;
}

.mas-item .image {
	line-height:0;
}

.mas-item .descr A {
	color:var(--colTheme) !important;
	margin:0 !important;
	padding:0 !important;
}

.mas-item .descr:hover {
	opacity:0.8;
}

.mas-item .descr .platform {
	margin-top:15px;
	font-size:13px;
}

.mas-item .descr .platform A {
	/* example: red with 30% opacity => background-color: rgba(255, 0, 0, 0.3) */
	/*background-color:rgba(0, 0, 0, 0.8) !important;*/

	-moz-border-radius: 3px;
	border-radius: 3px;
	color:#fff !important;
	padding:2px 8px !important;
	display:inline;
}

.mas-item .descr .platform A:hover {
	/*background-color:rgba(0, 0, 0, 0.6) !important;*/
}

.mas-blog-large, .mas-blog-small {
}

DIV.pagenav {
	text-align:center;
	font-size:20px;
	font-style:normal;
}

A.pagenav {
	color:#fff !important;
	padding:1px 5px !important;
	-moz-border-radius: 40px;
	border-radius: 40px;
}

A.pagenav:hover {
	-moz-border-radius: 40px !important;
	border-radius: 40px !important;
	opacity:0.8;
}

/* ----------------------------------------------------------------- */
/* Style the input field placeholder color                           */
/* Source: https://www.w3schools.com/howto/howto_css_placeholder.asp */
/* ----------------------------------------------------------------- */

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #666;
  opacity: 1; /* Firefox */
  text-transform:lowercase;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #666;
  text-transform:lowercase;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #666;
  text-transform:lowercase;
}

/* ----------------------------------------------------------------- */
/* New Footer June 2020 */
/* ----------------------------------------------------------------- */

#newFooterMain 		{ width:100%; background:var(--colEase); color:#fff; padding:30px 0 60px 0; text-align:center; /*position: absolute; bottom:0;*/ clear:both; }
#newFooterSub		{ display:inline-block; width:var(--docWidth); text-align:center; position:relative; }
#newFooterHead		{ /*font-size:30px;*/ font-size:28px; padding:0; }
#newFooterTable		{ display:table; width:100%; }
#newFooterRow		{ display:table-row; }
#newFooterCol1		{ display: table-cell; width:25%; padding:0 28px; }
#newFooterCol2		{ display: table-cell; width:50%; font-size:19px; line-height:24px; }
#newFooterCol3		{ display: table-cell; width:25%; padding:0 28px; }
#newFooterIcons		{ margin:13px 0 7px 0; }

#newFooterSubmit		{ padding:3px 5px; border:2px solid #fff; border-radius:20px; }
#newFooterSubmit:hover 	{ background:#fff; color:var(--colTheme); }

.newFooterLabel		{ margin:0 0 10px 0; }
.newFooterIcon		{ display:inline-block; }
.newFooterIcon IMG	{ width:20px; height:auto; }
.newFooterButton	{ color:var(--colTheme); background:#fff; padding:5px; border-radius:20px; margin-bottom:10px; }
.newFooterInput		{ border:none; background:#fff; color:var(--colTheme); font-size:14px; margin:0; padding:0; text-align:center; width:100%; }

A.newFooterDark1	{ color:var(--colTheme); text-decoration:none; }
A.newFooterLight1	{ color:#fff; text-decoration:none; }
A.newFooterLight2	{ color:#fff; }
A.newFooterLight2:hover { text-decoration:none; }

.newFooterButton:hover { color:#666; }

/* ----------------------------------------------------------------- */
/* New footer tweaks - December 2022 */
/* ----------------------------------------------------------------- */

.newFooterMain2022		{ font-family:var(--fontBody); font-size:18px; padding:60px 0 60px 0 !important; line-height:170%; }

#newFooter2022Col1		{ display: table-cell; width:180px; padding:0 30px; }
#newFooter2022Col2		{ display: table-cell; width:calc(100% - 480px); }
#newFooter2022Col3		{ display: table-cell; width:180px; padding:0 30px; }
#newFooter2022Col3 FORM { width:180px; }

.newFooterButton2022		{ color:var(--colTheme); background:#fff; padding: 8px 8px 12px 8px !important; border-radius:25px !important; border:none !important; margin-bottom:10px; height:20px; overflow:hidden; line-height:100%; }
.newFooterButton2022:hover 	{ color:#fff; background:var(--colTheme); padding: 6px 6px 10px 6px !important; border:2px solid #fff !important; transition:background .2s; }

#newFooterIcons2022 			{ margin:20px 0; }
.newFooterIcon2022				{ display:inline-block; }
.newFooterIcon2022 A			{ display:inline-block; width:30px; height:30px; border-radius:15px; background:transparent; /*transition:background .1s;*/ }
.newFooterIcon2022 A:hover		{ background:#fff; /*transition:background .3s;*/ }
.newFooterIcon2022 A:hover IMG 	{ filter: invert(1); }
.newFooterIcon2022 IMG			{ width:25px; height:auto; vertical-align: text-bottom; }

.newFooterInput2022			{ border:2px solid #fff; border-radius:25px; margin-bottom:10px; text-align:center; height:38px; overflow:hidden; line-height:100%; display: flex; justify-content: center; align-items: center; }
.newFooterInput2022 INPUT 	{ margin:0; padding:0; width:100%; background:transparent; border:0; color:#fff; text-align:center; font-family:var(--fontBody); font-size:18px; }
.newFooterInput2022 INPUT::placeholder { color:#fff; }

.newFooterInput2022:hover 	{ border:2px solid var(--colTheme); background:#fff; transition:background .2s; }
.newFooterInput2022:hover INPUT { color:var(--colTheme); }
.newFooterInput2022:hover INPUT::placeholder { color:var(--colTheme); }

.newFooterButton2022 A { text-decoration:none; color:inherit; display:block; margin:3px 0 -3px 0; }

.newFooterButton2022 input[type=submit] {
    background: transparent;
    color: var(--colTheme);
    padding: 0;
    margin: 0;
    text-transform:lowercase;
    font-size:18px;
}

.newFooterMain2022 .footerHeader 	{ }
.footerSubheader 					{ margin-bottom:40px; }
.footerSubheader SPAN				{ padding:0 15px; }

#newFooterCopy2022 				{ font-family:var(--fontHead); }

A.newFooter2022logo				{ width:75px; height:75px; margin-top:40px; display:inline-block; }
A.newFooter2022logo IMG			{ width:75px; height:75px; margin:0px; line-height:0; transition:width .2s, height .2s, margin .2s; }
A.newFooter2022logo:hover IMG	{ width:65px; height:65px; margin:5px; transition:width .2s, height .2s, margin .2s; }

#newFooter2022Col2 P 		{ line-height:170%; }

#newFooterSubmit2022		{ padding:3px 5px; border:2px solid #fff; border-radius:20px; }
#newFooterSubmit2022:hover 	{ background:var(--colTheme); transition:background .2s; }
#newFooterSubmit2022:hover INPUT { color:#fff; }