/*
 *	Mobile phone + Tablet Styles
 *	----------------------------
 *
 */

/* ================================================================================================== */
/*                                            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) {

	#page			{ width:90%; max-width:100%; overflow:hidden; }
	#newFooterSub 	{ width:100%; }
	#content		{ width:100% !important; }

	#currentpage		{ overflow-y:visible; height:auto; }

	/* top menu */
	#access				{ /*font-size:18px;*/ }
	#access div			{ /*padding-left:80px;*/ }
	#access div ul		{ }
	#access div ul li	{ margin:0 5px; }
	
	/* font sizes */
	h2, .big-fat		{ }

	/* homepage slider */
	.flexslider 		{ width:100% !important; }

	/* work: list project thumbs */
	.content-masonry 		{ width:100% !important; /*background:#fff;*/ }

	.type-thumb-proj 		{ float: left; padding-bottom:30px; /*width:320px; height:430px;*/ /*width:165px; height:203px;*/ }	/* w:h ratio must be 238/293 ~ 0.812 */
	.type-thumb-proj IMG 	{ width:100%; height:100%; object-fit: contain; } /* width:238px; height:293px; */
	.list-col-bg 			{ width:auto; height:auto; }
	
	/* work: detail page */
	.vimeo-mobile-iframe			{ width:100%; height:auto; /*min-height:388px;*/ }
	.vimeoLeft, .vimeoRight			{ width:100%; display:block; float:none; }
	.vimeo-mobile					{ line-height:0; }
	
	/* work: related projects */
	.related-items-full, .related-items-part			{ width:100%; }
	.related-items-full > .list-col						{ width:24%; height:auto; }
	.related-items-part > .list-col						{ width:32%; height:auto; }
	.related-items-full IMG, .related-items-part IMG	{ width:100%; height:auto; }
	
	.credits-col 		{ width:26%; }
	.credits-col-3 		{ width:44%; }
	
	/* blog items on homepage */
	.blogitems-home					{ width:100%; }
	.blogitems-home .blog-listitem	{ width:30%; }
	.blogitems-home IMG				{ width:100%; height:auto; }
	
	/* blog items - related items sidebar */
	.blog-related-container					{ width:100%; float:none; display:block; border:none; margin:10px 0 0 0; padding:10px 0 0 0; clear: both; border-top:1px solid #222; }
	.blog-related-header					{ width:100%; }
	.blog-related-container .type-blog		{ float:left; width:49%; }
	
	/* blog items - on blog main list page */
	/*.blog-archive-container { width:100%; background:#eee; }*/
	/*.mas-item { width:48%; }*/
	/*.mas-item IMG { width:100%; height:auto; }*/
	
	/* footer & contact-info stuff */
	.frontpage-col-def, .frontpage-col-alt	{ width:24%; font-size:12px; }
	.social-media	IMG						{ width:20px !important; height:20px !important; }

	/* contact page */
	.addressBlock, .messageBlock, .newsletterBlock { width:30%; font-size:75%; }
	.js-users-image	{ width:50px; height:50px; }
	.js-users-icon	{ width:20px; height:20px; }
	
	/* misc stuff */
	IMG.size-half	{ width:49%; height:auto; }
	
	.single-2cols-left, .single-2cols-right { width:49%; height:auto; }
	.single-2cols IMG { width:100%; height:auto; }
	
	.cinetoko-featured-poster 	{ width:49%; }
	.cinetoko-featured-info 	{ width:49%; }
	
	#cinetoko-home .cinetoko-listitem { width:32%; }
	#cinetoko-home .cinetoko-listitem IMG { width:100%; height:auto; }
	
	#cinetoko-home .cinetoko-item-0 { margin:0 0px 15px 0px; float:left; }
	#cinetoko-home .cinetoko-item-1 { margin:0 0px 15px 14px; float:left; }
	#cinetoko-home .cinetoko-item-2 { margin:0 0px 15px 0px; float:right; }
	
	.blog-related-container .cinetoko-listitem { width:32% !important; }
	.blog-related-container .cinetoko-listitem IMG { width:100%; height:auto; }

	.blog-related-container .cinetoko-item-0 { margin:0 0px 15px 0px; float:left !important; }
	.blog-related-container .cinetoko-item-1 { margin:0 0px 15px 14px; float:left !important; }
	.blog-related-container .cinetoko-item-2 { margin:0 0px 15px 0px; float:right !important; }
	
	DIV.related-after-3 { clear:both; content: " "; display:block; }

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

	/* --------------------------- */
	/* new 2022 layout: ipad fixes */
	/* --------------------------- */

	#motoko-loader-screen 		{ width: 100vw; height: 100vh; display:none; }
	P.vimeoResponsive IFRAME 	{ width:100%; height:auto; }

	DIV.frontpage-primary-2022 		{ padding:0; }
	DIV.frontpage-primary-2022 P 	{ line-height:170%; }
	
	.fp-2022-project-mobile 					{ clear:both; padding:20px 0; }
	.fp-2022-project-mobile A 					{ padding:0; margin:0; }
	.fp-2022-project-mobile A.fp-float-left 	{ float:left; width:48%; }
	.fp-2022-project-mobile A.fp-float-right 	{ float:right; width:48%; }
	
	DIV.fp-2022-project-poster { }
	IMG.fp-2022-project-poster { width: 100%; height: auto; object-fit: contain; border-radius:3px; }
	
	P.bigbutton { padding-top:40px; }
	
	/* studio page 2022 */
	P.about2022 	{ width:auto; margin:40px; line-height:170%; }
	H2.studio2022 	{ width:auto; margin:40px 40px 0px 40px; }
	P.studio2022 	{ width:auto; margin:0px 40px 40px 40px; line-height:170%; }

	/* contact page 2022 */
	TABLE.contact2022	{ width:95%; margin:20px auto 0 auto; }
	TABLE.contact2022 TD:nth-child(1) { width:45%; font-size:28px; }
	TABLE.contact2022 TD:nth-child(2) { width:55%; font-size:22px; line-height:120%; padding-top:6px; }
	
	/* projects - work list page */
	.list-project-type { font-weight:normal; font-size:20px; }
		
	/* work single post layouts */
	.project-meta-info 	{ width:calc(100% - 80px); }
	.project-text 		{ width:calc(100% - 80px); line-height:170% !important; }
}

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

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

	#page			{ width:90%; max-width:100%; overflow:hidden; margin-top:15px; }
	#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 	{ width:95%; }
	.project-title		{ font-size:30px; }
	.post-meta-type, .post-meta-client { font-size:20px; }
	.project-text 		{ width:95%; font-size:20px !important; line-height: 180% !important; }
	.project-credits-2022 { width:95%; line-height:120%; }
	.project-credits-2022 .col1 { width:40%; font-size:30px; }
	.project-credits-2022 .col2 { width:60%; font-size:14px; }
	.credit-name { width:100%; margin-bottom: 25px; }
	
	/* studio page 2022 */
	H2.studio2022	{ width:95%; font-size:30px; font-weight:normal; }
	P.about2022 	{ width:95%; font-size:20px; line-height:180%; margin:0 auto 25px auto; }
	P.studio2022 	{ width:95%; font-size:20px; line-height:180%; margin:0 auto 25px auto; }
	
	/* contact page 2022 */
	TABLE.contact2022	{ width:95%; 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; }

}