/*
 *	Smaller (laptop screens), tablets, mobile phones
 *	------------------------------------------------
 *
 */


/* smaller screens like laptops */
@media only screen and (min-width: 1024px) and (max-width: 1380px) {
	/*BODY { background:#ccc; }*/
}

/* ================================================================================================== */
/*                                            Macbook Air                                             */
/* ================================================================================================== */

@media only screen and (min-device-width: 1280px) and (max-device-width: 1440px) and (orientation: landscape) {
	
	/* downscale the entire page by ± 10% so that it fits onto smaller macbook screens.
	 * for transform and transform-origin syntax, see: https://stackoverflow.com/a/23775810
	 * note 1: we first downscale the entire page and footer, then we upscale the footer outer box and then we downscale the footer inner box so everything stays in the right proportions!
	 * note 2: the reason that we downscale by 0.909 and not just 0.9 is because the inverted scale (1/0.909) is a nice 'rounded' value: 1.100 (1/0.9 would result in 1.11111111)
	 */
	 
	#page-and-footer 	{ transform: scale(0.909); transform-origin: top center; }
	#colophon 			{ transform: scale(1.100); transform-origin: top center; }
	#newFooterSub 		{ transform: scale(0.909); transform-origin: top center; }
}

/* ================================================================================================== */
/*                                           Tablet / iPad                                            */
/* ================================================================================================== */

/* For portrait layouts only */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
}

/* For landscape layouts only */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
}

/* For general iPad layouts */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}

/* ================================================================================================== */
/*                                           Mobile / iPhone                                          */
/* ================================================================================================== */

@media only screen and (max-width: 480px) {

	#page			{ /*width:90%; width:95%;*/ width: calc(100vw - 30px); max-width:100%; /*overflow:hidden;*/ margin-top:10px; }
	#branding		{ margin:0 0 15px 0 !important; }
	#newFooterSub 	{ width:100%; }
	#content		{ width:100% !important; }
	#languages		{ top:5px; }
	
	#currentpage		{ overflow-y:visible; height:auto; }
	
	/* ------------------- */
	/* top menu navigation */
	/* ------------------- */

	#access				{ height:35px; font-size:18px; }
	#access div			{ }
	#access div ul		{ }
	#access div ul li	{ width:30vw; margin:0; /* background:#f00; float:none; */ }
	#access a, #access a.current-menu-item { padding: 5px 20px !important; }

	/* remove the navigation hover transitions for touch devices as it doesn't make sense */
	#access a, #access a:hover, .current_page_item a:hover, .current-menu-item a:hover, A.bigbutton, A.bigbutton:hover { transition: none; }
	
	.flexslider 		{ width:100% !important; }
	
	h2, .big-fat		{ font-size:30px; }
	
	.addressBlock, .messageBlock, .newsletterBlock { float:none; margin-bottom:20px; width:100%; padding:0; }
	
	.alignright, .alignleft { width:35%; height:auto; }
	
	.frontpage-col-def, .frontpage-col-alt 	{ display:block; float:none; width:100%; margin-bottom:20px; text-align:center; font-size:16px; }
	.frontpage-col-def .social-media 		{ display:block; width:100%; height:25px; margin:0; text-align:center; }
	.social-media A							{ display:inline-block; }
	.social-media IMG 						{ float:none; }
	.fb-like								{ float:none; display:block; /*margin-left:37%;*/ }
	
	.blog-author					{ display:none; }
	.blog-single-post-container		{ display:block !important; width:100% !important; float:none !important; padding:0; border:none; }
	
	.blog-content					{ width:100%; }
	.blog-single-post-container img	{ max-width:100%; }
	.blogitems-home .blog-listitem	{ text-align:center; }
	
	.blog-listitem					{ width:100%; float:none; display:block; }
	.blog-listitem IMG				{ width:100%; height:auto; }

	.blog-related-container			{ display:none; width:100%; float:none; padding:0; border:none; }
	
	/* class for embedding vimeo iframes. also checkout this class in style_mobile.css */
	.vimeo-mobile-iframe			{ width:100%; height:auto; /*min-height:185px;*/ }
	.vimeoLeft, .vimeoRight			{ width:100%; display:block; float:none; }
	.vimeo-mobile					{ line-height:0; }
	.caption						{ line-height:initial; font-size:70%; }
	
	.blog-content IFRAME { width:100%; height:auto; }
	
	/* JS 9jun20: explicitly set the image height to auto so that it keeps its original aspect ratio */
	.mas-item { width:100%; }
	.mas-item IMG { width:100%; height:auto; }
	
	.content-masonry		{ width:100% !important; }
	.list-col-bg 			{ width:100%; height:auto; display:none; }
	.work-main-portrait 	{ width:100%; height:auto; }
	.work-main-portrait IMG { width:100%; height:auto; }
	
	/* related items underneath the post if 4 or more related items are shown */
	.related-items-full	.list-col		{ width:45%; height:auto; }
	.related-items-full	.list-col IMG	{ width:100%; height:auto; }
	
	/* related items underneath the post if less than 4 related items are shown */
	.related-items-part	.list-col		{ width:45%; height:auto; }
	.related-items-part	.list-col IMG	{ width:100%; height:auto; }
	
	/* when 4 or more related items: center align the related items */
	.related-items-full { width:auto; text-align:center; }
	.related-items-full	.list-col0, .related-items-full	.list-col1, .related-items-full	.list-col2, .related-items-full	.list-col3 { padding:4px !important; float:none; display:inline-block; }

	/* when less than 4 related items: center align the related items */
	.related-items-part { width:auto; text-align:center; }
	.related-items-part	.list-col-less-than-four { padding:4px !important; float:none; display:inline-block; }
	
	DIV.images-2 IMG	{ width:49%; }
	
	.single-2cols-left, .single-2cols-right { float:none; width:100%; height:auto; }
	.single-2cols IMG { width:100%; height:auto; }
	
	.prevnextbutton { display:none; }
	
	.blog-submenu { display:none; }

	IMG.size-half	{ width:49%; height:auto; }
	IMG.size-tiny	{ width:60% !important; max-width:60% !important; }
	IMG.size-small	{ width:70% !important; max-width:70% !important; }
	IMG.size-medium	{ width:100% !important; max-width:100% !important; }

	DIV.error404 IMG { width:90%; height:auto; }

	/* cinetoko menu item */
	A.menuitem-cinetoko 	{ position:relative; width:74px; }
	IMG.menuitem-cinetoko 	{ position:absolute; top:3.5px; width:74px; height:38px; } /* rect (top, right, bottom, left) */
	
	IMG.cinetoko-normal								{ clip:rect( 0px,74px,18px,0px); top:3.5px; }
	A.menuitem-cinetoko:hover > IMG.cinetoko-normal	{ clip:rect(18px,74px,37px,0px); top:-16px; }
	IMG.cinetoko-active								{ clip:rect(18px,74px,37px,0px); top:-16px; }

	/* -------------- */
	/* cinetoko posts */
	/* -------------- */
	
	/*ARTICLE.type-cinetoko	{ width:50%; }*/
	
	.cinetoko-content .playerYoutube, .cinetoko-content .playerVimeo { width:100%; height:auto; min-height:185px; }
	
	H1.cinetoko-title, .cinetoko-content H1 { font-size:30px; }
	H2.cinetoko-title { font-size:18px; }
	
	.cinetoko-featured-poster 	{ display:block; float:none; width:100%; height:auto; margin-bottom:10px; }
	.cinetoko-featured-info		{ display:block; float:none; width:100%; height:auto; margin-bottom:10px; padding-top:0px; }
	.cinetoko-listitem { display:block; float:none; width:100%; }
	.cinetoko-item-0, cinetoko-item-1, cinetoko-item-2 { margin:0; }
	.cinetoko-frontpage-spacer { padding:0; }
	
	/* ---------------------- */
	/* cinetoko subnavigation */
	/* ---------------------- */
	
	DIV.cinetoko-submenu 		{ display: block; line-height:150%; }
	A.cinetoko-subnav 			{ white-space: nowrap; }
	A.cinetoko-button			{ display:inline-block; margin:0 0 5px 0 !important; }
	
	/* lightbox */
	#myModalContent { margin: auto; overflow:auto; top: 0; left: 0; bottom: 0; right: 0; position:fixed; transform:none; }
	
	#myModalContent IMG.lightbox { float:none; width:100%; margin:0; }
	
	.modal-content-busy { width:80%; max-height:10%; }
	.modal-content-done { width:80%; max-height:80%; }
	.modal-content-exit { width:80%; max-height:10%; }
	
	.lightbox-info 	{ font-size:12px; }
	.lightbox-text	{ font-size:14px; line-height:140%; }
	.close 			{ top:45px; right:25px; }

	/* Force "hidden elements" to stay visible on ipads and iphones */
	.hideme { opacity:1 !important; /*margin-top:50px;*/ }
	
	/* --------------- */
	/* new footer 2020 */
	/* --------------- */

	#newFooterHead		{ font-size:24px; }
	#newFooterCol1		{ width:40%; padding:0 10px; font-size:14px; line-height:16px; }
	#newFooterCol2		{ width:60%; padding:0 10px; font-size:14px; line-height:16px; }
	#newFooterCol3		{ display:none; }
	#newFooterTerms		{ display:none; }
	#newFooterCopy		{ display:none; }
	
	.newFooterIcon IMG	{ width:30px; height:auto; }
	
	/* ---------------- */
	/* studio page 2020 */
	/* ---------------- */

	P.vimeoResponsive IFRAME 	{ width:100%; height:100%; }
	P.aboutus					{ width:auto; }
	TABLE.theprocess			{ display:block; }
	TABLE.theprocess TR			{ display:block; }
	TABLE.theprocess TD			{ display:block; width:100%; padding:0; }
	TABLE.theprocess H2			{ font-size:24px; }
	TABLE.theprocess P			{ padding: 0 0 20px 50px; }
	TABLE.theprocess SPAN		{ font-size:20px; }
	
	TABLE.testimonials			{ display:block; }
	TABLE.testimonials TR		{ display:block; }
	TABLE.testimonials TD		{ display:block; width:100%; padding:0 !important; margin-bottom:10px; }
	
	TABLE.testimonials P:nth-child(5) { padding-bottom:20px !important; }
	P.testimonial1, P.testimonial2, P.testimonial3 { padding:20px 20px 0px 20px !important; }

	/* -------------------- */
	/* homepage 2022 layout */
	/* -------------------- */

	/* make the loader screen exactly as wide as the viewport-width (100vw) and as high as the viewport-height (100vh) */
	#motoko-loader-screen { width: 100vw; height: 100vh; display:none; }
	
	/* frontpage text */
	DIV.frontpage-primary-2022 		{ padding:0; font-size:20px; }
	DIV.frontpage-primary-2022 P 	{ margin:10px; line-height:180%; }
	
	/* frontpage projects */
	DIV.fp-2022-project-mobile 		{ width:100%; }
	DIV.fp-2022-project-mobile A	{ margin:0; padding:0; }
	IMG.fp-2022-project-poster		{ width: 100%; height: auto; object-fit: contain; border-radius:3px; }
	DIV.fp-2022-summary				{ margin:10px; font-size:20px; line-height:180%; }
	DIV.fp-2022-project-mobile .big-fat { margin:10px; }
	DIV.fp22mob-fullstory			{ display: inline; white-space: nowrap; }
	
	/* --------------- */
	/* new footer 2022 */
	/* --------------- */

	.newFooterMain2022 { font-size:14px; }
	#newFooterTable { }
	#newFooter2022Col1 { width:50%; }
	#newFooter2022Col2 { width:50%; }
	#newFooter2022Col3 { display:none; }
	.footerSubheader 		{ }
	.footerSubheader SPAN 	{ padding:0 5px; /*word-break:keep-all; white-space: nowrap; float:left;*/ }
	A.newFooter2022logo 	{ display:none; }
	.newFooterButton2022 	{ height:15px; }
	#newFooterIcons2022 	{ margin: 14px 0 4px 0; }
	
	/* projects - work list page */
	.list-project-type { font-weight:normal; }
	
	/* projects - work single posts */
	.project-meta-info, .ease-meta-info { width:98%; line-height: 150%; margin:0px auto 10px auto; padding-top:25px; }
	.project-title		{ font-size:30px; margin-bottom: 5px; }
	.post-meta-type, .post-meta-client { font-size:20px; }
	.project-text, .ease-text { width:98%; font-size:20px !important; line-height:130% !important; /*line-height: 180% !important;*/ }
	.project-text A 	{ margin-left:0 !important; }
	.project-credits-2022 { width:calc(100% - 40px); line-height:120%; padding: 20px 20px 0px 20px; /*box-shadow:none;*/ box-shadow: 0px 0px 20px rgb(0,0,0, 0.1); }
	.project-credits-2022 .col1 { width:40%; font-size:28px; }
	.project-credits-2022 .col2 { width:60%; font-size:14px; }
	.credit-name { width:100%; margin-bottom: 25px; }
	
	/* studio page 2022 */
	H2.studio2022	{ width:98%; font-size:30px; font-weight:normal; }
	P.about2022 	{ width:98%; font-size:20px; line-height:180%; margin:0 auto 25px auto; }
	P.studio2022 	{ width:98%; font-size:20px; line-height:180%; margin:0 auto 25px auto; }
	
	/* contact page 2022 */
	TABLE.contact2022	{ width:98%; margin:20px auto 0 auto; }
	TABLE.contact2022 TD:nth-child(1) { width:45%; font-size:22px; }
	TABLE.contact2022 TD:nth-child(2) { width:55%; font-size:14px; line-height:120%; padding-top:8px; }

	/* -------------------- */
	/* studioease.nl 2025   */
	/* -------------------- */

	/* navigation ~ menu */
	DIV.ease-title		{ /*background:#cda;*/ /*font-size:40px;*/ }
	DIV.title-label		{ width:370px; height:80px; /*background:#ff0;*/ }
	IMG.title-logo		{ /*background:#6af;*/ }
	
	DIV.ease-header-root{ margin-bottom:0; }
	DIV.ease-header-nav	{ margin-bottom: 20px; }
	DIV.ease-nav		{ font-size:16px; margin:6px 0px; }
	DIV.ease-nav A		{ padding: 4px 0px; margin:0; }
	IMG.nav-icon		{ width:15px; height:15px; margin:3px 6px 0px 6px; }
	
	DIV.ease-subheader 	{ font-size:15px; margin:0px 0; }
	.ease-dot 			{ margin:0 5px; width:6px; height:6px; }
	
	DIV.nav-label 						{ margin:5px 5px; padding:6px 12px; }
	DIV.ease-nav A:hover DIV.nav-label 	{ margin:5px 5px; padding:6px 12px; }
	DIV.ease-nav A DIV.nav-label 		{ transition:none; }
	
	/* remove margins from first and last nav-labels */
	DIV.nav-label-first { margin-left:0; }
	DIV.nav-label-last  { margin-right:0; }
	
	/* about and project pages */
	.ease-about, .ease-projects { font-size: 19px; line-height:130%; /*background:#f00;*/ }
	P.ease-about-p { padding-left:5px; padding-right:5px; }
	.ease-about .photo {
		margin-left:20px;
		margin-bottom:5px;
		width:35%;
		font-size:63%;
		white-space: nowrap;
		margin-top:5px;
	}
	.ease-about .photo IMG {
		object-fit: cover;
    	height: 145px;
    }
	
	/* work / projects / work list page */
	.ease-projects { margin-bottom: 15px !important; }
	
	.ease-projects-intro { padding:0 10px; }

	DIV.ease-nav-sections { font-size:16px; width:100%; }
	
	A.ease-project {
		margin:0 !important; padding:0 !important;
	}
	
	DIV.ease-project-item, DIV.ease-play-item {
		width: calc(100% / 3 - 10px);
		margin: 0px 5px 20px 5px;
	}
	
	DIV.ease-project-title {
		display:none; /* JS 14apr25 - we hide these title divs for mobile because it's just in the way of the images */
		margin:0;
		font-size:15px;
		/*word-break: break-all;*/
		word-wrap: break-word;
	}
	
	DIV.ease-mobile-title {
		display:block;
		font-size: 16px;
		padding: 5px 5px 0px 5px;
		line-height: 115%;
		color: var(--colTheme);
	}

	IMG.icon-study-cat { width:30px; top:unset; bottom:10px; }
	
	/* hide this text on mobile pages */
	.nomobile { display:none; }
	
	/* project ~ work single page */
	
	DIV.vimeoContainer { width: calc(100vw - 30px) !important; }
	DIV.vimeoContainer IMG.retina-image { width:100% !important; height:100% !important; }
	
	.ease-text H1 { font-size: 30px; }
	.ease-text .background-story { padding:20px; font-size:100%; line-height:130%; }
	
	.project-images-small { width:initial; }
	
	/* footer */
	.ease-footer-dot { display:block; background:transparent; height:1px; }

	.home-caption, .ease-caption {
		font-size: 19px;
    	line-height: 130%;
    	margin:10px 10px 20px 10px;
    }

	.ease-caption-compact { font-size: 19px; }

	A.ease-project DIV.ease-play-image 			{ transition: none; }
	A.ease-project:hover DIV.ease-play-image 	{ opacity:1; }
}