@charset "UTF-8";







/*------------------------------ ipad + ipad mini + ipad air - landscape ------------------------------*/


@media only screen 
and (min-device-height: 768px) 
and (max-device-height: 1023px) 
and (orientation: landscape) {




			body { font-size: .85em; }






			footer .socials { display: grid; grid-template-columns: auto auto auto auto; justify-items: center; gap: 10px; }

			footer section {  grid-gap: 30px; width: calc(100% - 100px); }

			footer section .logo { grid-column: span 5; width: 85px; height: auto;  }

			footer section a i { font-size: 1.6em; margin-left: 0; }
	
			footer section ul { grid-column: span 5; justify-content: space-between; gap: 0px 20px;    }	
	
			footer section .copyright { grid-column: span 5;}

			footer section .legals { grid-column: span 5; }	
	
			footer section .legals p { margin-left: 0px;  margin-right: 30px; }	
	
	
	
	

			h1 { font-size: 5.2em; }

			h2 { font-size: 2.6em; }

			h3 { font-size: 2.4em; }	  



			nav picture { width: 65px;  height: 65px; }

			nav picture img {  width: 65px; }	



			section { min-height: 75dvh; }





			.bento .project {  height: 50dvh; }

			.bento .rs2 .project { height: 100dvh;}

			.bento a:nth-of-type(2) .project { height: 55vh; /* Stella */  }


			.bento .project .pdc .deets { transform: translateY(0px); }	  

			.bento .project .pdc h5 { font-size: 1.2em; opacity: 1; }	  

			.bento .project .pdc p { opacity: 1; }	

			.bento .project .pdc .logo img { width: 75px; }





			.content {  width: calc(100% - 100px); }

			.content.max { height: 50dvh; }	



			.cursordy { height: 80px; width: 80px; display: none; }

			.cursordy::after  { font-size: 1.5em; }



			.counters .counter h3 { font-size: 4.2em; }	  




			.collapsibles .collapsible .header h5 .number { display: none;}







			.carousel .card {min-width: calc(66vw - 100px); width: calc(66vw - 100px) }	

			.carousel .card:first-of-type {  min-width: fit-content; }	 
	
			.carousel .card:last-of-type { min-width: calc(66vw - 100px); width: calc(66vw - 100px) }
	
			.carousel .card .mastercard { width: min-content; }	 

			.carousel .mastercard .details {  width: min-content; }

			.carousel .card .card-details { transform: translateY(0px); }	  

			.carousel .card .card-details .cta { filter: opacity(1); }	  






			.full-bleed { min-height: 50dvh; }

			.full-bleed-bg { min-height: 50dvh; }	  

			.full-bleed-bg img {   height: 50dvh; transform: scale(1.0); }	  


			.hero .full-bleed { min-height: 100dvh; }

			.hero .full-bleed-bg { min-height: 100dvh; }	  

			.hero .full-bleed-bg img {   height: 100dvh; transform: scale(1.3333); }	    

			.hero.video video {    transform: translate(-50%, -50%) scale(1.333);	}
	
	
	

			.hero-work .details .services { position: relative; display: inline-block; margin-bottom: 15px; }

			.hero-work .details .services p { padding: 5px 10px; margin-right: 10px; margin-bottom: 10px; opacity: 1; float: left; }	
	
	


			.maxheight { min-height: auto; height: auto; }





			.maino .details { margin: 50px; }	  

			.maino.timeline .details { margin: 0px; margin-right: 50px; }	  
	
			.maino.right .details { margin: 50px; /* conflicts with history maino sections */  }	  

			.maino.right.timeline .details { margin: 0px; margin-left: 50px; }	  
	





			.marqcase .marq {   margin: 50px 0px; }

			.marqcase .marq .project .pdc {  transform: translateY(0px); }	  

			.marqcase .marq .project .pdc p { opacity: 1; }

			.marqcase .marq .staff { width: 400px; aspect-ratio: 5 / 9; }

			.marqcase .marq .staff:first-of-type { margin-left: 50px; }	 

			.marqcase .marq .staff .details {  transform: translateY(0px); }	 

			.marqcase .marq a:last-of-type .project { margin-right: 50px;}

			.marqcase .marq a:first-of-type .project { margin-left: 50px; }	 

			.marqcase .marq .staff .img { height: 100%; }	  

			.marqcase .marq .staff .img img { transform: inherit; /* watch out! this scales up the linkedin logo as well */  }

			.marqcase .marq .staff .details p {opacity: 1; }

			.marqcase .marq .staff .details img.li.icon { transform: inherit; }	  




			.new-work-marquee h1 { text-align: center;  padding: 0px 50px;   margin-bottom: -25px;  }



			.nav-icon {  padding: 20px; }

			.nav-icon:hover .line { width: 25px; }	 


	
			.nav-icon.active .line:nth-of-type(1) { transform: rotate(45deg) translate(2px, -3px); }	
	
			.nav-icon.active .line:nth-of-type(3) { transform: rotate(-45deg) translate(3px, 2px); }	
	
	
	
	
	

			.seamless {  -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }




			.overlay .bgcolor { height: 100dvh; }

			.overlay .navigation ul li a { font-size: 5.0em; line-height: 0.85em; margin-bottom: 0px; }

			.overlay .navigation ul li ul {  display: none; }	


	
	
	
	

			.other h1 { margin-bottom: 0px; }
	
			.other .project { height: 55dvh; }	  

			.other a:nth-of-type(2) .project { height: 57dvh; }	  

			.other .project .pdc .deets { transform: translateY(0px); }	  

			.other .project .pdc h5 { opacity: 1; }	  

			.other .project .pdc p { opacity: 1; }	

			.other .project .pdc .logo img { width: 75px; }	  




			.services .core { grid-template-columns: 1fr 1fr; gap: 15px; }

			.services .core-services {  grid-template-columns: 1fr 1fr; gap: 50px; }	 

			.services .core-services .line { display: none; }

			.services .core-services.hci { grid-template-columns: 1fr 1fr 1fr;  /* Our Unique Selling Points */  }	  




			.waterfall .wf { width: 200px; }
	
			.waterfall .wf-1 { top: 9%;   left: 38%; }

			.waterfall .wf-2 { top: 67%; left: 75%; }	  

			.waterfall .wf-3 {  top: 11%; left: 80%; }	  

			.waterfall .wf-4 { top: 3%; left: 0%; }	  

			.waterfall .wf-5 {top: 82%; left: 39%; }	  

			.waterfall .wf-6 {top: 72%; left: 4%; }







			.yt { height: 50dvh; }

			.yt .cta { filter: opacity(1); transform: translateY(0px); }  

			.yt video { transform: translate(-50%, -50%); filter: brightness(0.44); }	  






}




/*------------------------------ ipad pro - portrait ------------------------------*/


@media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px) 
and (orientation: portrait) {




			body { font-size: .85em; }






			footer .socials { display: grid; grid-template-columns: auto auto; justify-items: center; gap: 10px; }

			footer section {  grid-gap: 50px; width: calc(100% - 100px); }

			footer section .logo { width: 100px; height: auto;  }

			footer section a i { font-size: 1.6em; margin-left: 0; }

			h1 { font-size: 5.2em; }

			h2 { font-size: 4.2em; }

			h3 { font-size: 3.2em; }	  



			nav picture { width: 65px;  height: 65px; }

			nav picture img {  width: 65px; }	



			section { min-height: 75dvh; }





			.bento .project {  height: 33dvh; }

			.bento .rs2 .project { height: 66dvh;}

			.bento a:nth-of-type(2) .project { height: 40vh; /* Stella */  }


			.bento .project .pdc .deets { transform: translateY(0px); }	  

			.bento .project .pdc h5 { opacity: 1; }	  

			.bento .project .pdc p { opacity: 1; }	

			.bento .project .pdc .logo img { width: 75px; }





			.content {  width: calc(100% - 100px); }

			.content.max { height: 50dvh; }	



			.cursordy { height: 80px; width: 80px; display: none; }

			.cursordy::after  { font-size: 1.5em; }



			.counters .counter h3 { font-size: 5.2em; }	  




			.collapsibles .collapsible .header h5 .number { display: none;}







			.carousel .card {min-width: clamp(31vw, 55vw, 66vw);}	

			.carousel .card:first-of-type {  min-width: fit-content; }	 

			.carousel .card .mastercard { width: min-content; }	 

			.carousel .mastercard .details {  width: min-content; }

			.carousel .card .card-details { transform: translateY(0px); }	  

			.carousel .card .card-details .cta { filter: opacity(1); }	  






			.full-bleed { min-height: 50dvh; }

			.full-bleed-bg { min-height: 50dvh; }	  

			.full-bleed-bg img {   height: 50dvh; transform: scale(1.4444); }	  


			.hero .full-bleed { min-height: 100dvh; }

			.hero .full-bleed-bg { min-height: 100dvh; }	  

			.hero .full-bleed-bg img {   height: 100dvh; transform: scale(1); /* remove gsap transition for mobile and tablets */ }	    





			.maxheight { min-height: auto; height: 50vh; }





			.maino .details { margin: 50px; }	  

			.maino.timeline .details { margin: 0px; margin-right: 50px; }	  
	
			.maino.right .details { margin: 50px; /* conflicts with history maino sections */  }	  

			.maino.right.timeline .details { margin: 0px; margin-left: 50px; }	  


	
	
			.mmt { display: block; }

			.marquee { display: none; }	
	
		
	


			.marqcase .marq {   margin: 50px 0px; }

			.marqcase .marq .project .pdc {  transform: translateY(0px); }	  

			.marqcase .marq .project .pdc p { opacity: 1; }

			.marqcase .marq .staff { width: 400px; aspect-ratio: 5 / 9; }

			.marqcase .marq .staff:first-of-type { margin-left: 50px; }	 

			.marqcase .marq .staff .details {  transform: translateY(0px); }	 

			.marqcase .marq a:last-of-type .project { margin-right: 50px;}

			.marqcase .marq a:first-of-type .project { margin-left: 50px; }	 

			.marqcase .marq .staff .img { height: 100%; }	  

			.marqcase .marq .staff .img img { transform: inherit; /* watch out! this scales up the linkedin logo as well */  }

			.marqcase .marq .staff .details p {opacity: 1; }

			.marqcase .marq .staff .details img.li.icon { transform: inherit; }	  




			.new-work-marquee h1 { text-align: center; }	  




			.nav-icon {  padding: 20px; }

			.nav-icon:hover .line { width: 25px; }	 

			.nav-icon.active .line:nth-of-type(1) { transform: rotate(45deg) translate(2px, -3px); }	
	
			.nav-icon.active .line:nth-of-type(3) { transform: rotate(-45deg) translate(3px, 2px); }	
	
	
	
		
	
	


			.seamless {  -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }




			.overlay .bgcolor { height: 100dvh; }

			.overlay .navigation ul li a { font-size: 6.2em; line-height: 0.85em; margin-bottom: 0px; }

			.overlay .navigation ul li ul {  display: none; }	




			.other .project { height: 40dvh; }	  

			.other a:nth-of-type(2) .project { height: 42dvh; }	  

			.other .project .pdc .deets { transform: translateY(0px); }	  

			.other .project .pdc h5 { opacity: 1; }	  

			.other .project .pdc p { opacity: 1; }	

			.other .project .pdc .logo img { width: 75px; }	  




			.services .core { grid-template-columns: 1fr 1fr; gap: 15px; }

			.services .core-services {  grid-template-columns: 1fr 1fr; gap: 50px; }	 

			.services .core-services .line { display: none; }

			.services .core-services.hci { grid-template-columns: 1fr 1fr 1fr;  /* Our Unique Selling Points */  }	  






			.waterfall .wf-1 { top: 9%;   left: 38%; }

			.waterfall .wf-2 { top: 67%; left: 75%; }	  

			.waterfall .wf-3 {  top: 11%; left: 80%; }	  

			.waterfall .wf-4 { top: 3%; left: 0%; }	  

			.waterfall .wf-5 {top: 82%; left: 39%; }	  

			.waterfall .wf-6 {top: 72%; left: 4%; }







			.yt { height: 50dvh; }

			.yt .cta { filter: opacity(1); transform: translateY(0px); }  

			.yt video { transform: translate(-50%, -50%); filter: brightness(0.44); }	  






}





/*------------------------------ ipad + ipad mini + ipad air - portrait ------------------------------*/


@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1023px) 
and (orientation: portrait) {




			body { font-size: .85em; }






			footer .socials { display: grid; grid-template-columns: auto auto auto auto; justify-items: center; gap: 10px; }

			footer section {  grid-gap: 30px; width: calc(100% - 100px); }

			footer section .logo { grid-column: span 5; width: 85px; height: auto;  }

			footer section a i { font-size: 1.6em; margin-left: 0; }
	
			footer section ul { grid-column: span 5; justify-content: space-between; gap: 0px 20px;    }	
	
			footer section .copyright { grid-column: span 5;}

			footer section .legals { grid-column: span 5; }	
	
			footer section .legals p { margin-left: 0px;  margin-right: 30px; }	
	
	
	
	

			h1 { font-size: 5.2em; }

			h2 { font-size: 3.2em; }

			h3 { font-size: 2.8em; }	  



			nav picture { width: 65px;  height: 65px; }

			nav picture img {  width: 65px; }	



			section { min-height: 75dvh; }





			.bento .project {  height: 50dvh; }

			.bento .rs2 .project { height: 100dvh;}

			.bento a:nth-of-type(2) .project { height: 55vh; /* Stella */  }


			.bento .project .pdc .deets { transform: translateY(0px); }	  

			.bento .project .pdc h5 { font-size: 1.2em; opacity: 1; }	  

			.bento .project .pdc p { opacity: 1; }	

			.bento .project .pdc .logo img { width: 75px; }





			.content {  width: calc(100% - 100px); }

			.content.max { height: 50dvh; }	



			.cursordy { height: 80px; width: 80px; display: none; }

			.cursordy::after  { font-size: 1.5em; }



			.counters .counter h3 { font-size: 4.2em; }	  




			.collapsibles .collapsible .header h5 .number { display: none;}







			.carousel .card {min-width: calc(100vw - 100px); width: calc(100vw - 100px) }	

			.carousel .card:first-of-type {  min-width: fit-content; }	 
	
			.carousel .card:last-of-type { min-width: calc(100vw - 100px); width: calc(100vw - 100px) }
	
			.carousel .card .mastercard { width: min-content; }	 

			.carousel .mastercard .details {  width: min-content; }

			.carousel .card .card-details { transform: translateY(0px); }	  

			.carousel .card .card-details .cta { filter: opacity(1); }	  






			.full-bleed { min-height: 50dvh; }

			.full-bleed-bg { min-height: 50dvh; }	  

			.full-bleed-bg img {   height: 50dvh; transform: scale(1.4444); }	  


			.hero .full-bleed { min-height: 100dvh; }

			.hero .full-bleed-bg { min-height: 100dvh; }	  

			.hero .full-bleed-bg img {   height: 100dvh; transform: scale(1.5555); }	    

			.hero.video video {    transform: translate(-50%, -50%) scale(1.333);	}
	
	
	
	

			.hero-work .details .services { position: relative; display: inline-block; margin-bottom: 15px; }

			.hero-work .details .services p { padding: 5px 10px; margin-right: 10px; margin-bottom: 10px; opacity: 1; float: left; }	
	
	


			.maxheight { min-height: auto; height: auto; }



	

			.maino .details { margin: 50px; }	  

			.maino.timeline .details { margin: 0px; margin-right: 50px; }	  
	
			.maino.right .details { margin: 50px; /* conflicts with history maino sections */  }	  

			.maino.right.timeline .details { margin: 0px; margin-left: 50px; }	    


	
	
	
	
			.mmt { display: block; font-size: 8.4em; }

			.marquee { display: none; }	
		
	



			.marqcase .marq {   margin: 50px 0px; }

			.marqcase .marq .project .pdc {  transform: translateY(0px); }	  

			.marqcase .marq .project .pdc p { opacity: 1; }

			.marqcase .marq .staff { width: 400px; aspect-ratio: 5 / 9; }

			.marqcase .marq .staff:first-of-type { margin-left: 50px; }	 

			.marqcase .marq .staff .details {  transform: translateY(0px); }	 

			.marqcase .marq a:last-of-type .project { margin-right: 50px;}

			.marqcase .marq a:first-of-type .project { margin-left: 50px; }	 

			.marqcase .marq .staff .img { height: 100%; }	  

			.marqcase .marq .staff .img img { transform: inherit; /* watch out! this scales up the linkedin logo as well */  }

			.marqcase .marq .staff .details p {opacity: 1; }

			.marqcase .marq .staff .details img.li.icon { transform: inherit; }	  




			.new-work-marquee h1 { text-align: center;  padding: 0px 50px;   margin-bottom: -25px;  }



			.nav-icon {  padding: 20px; }

			.nav-icon:hover .line { width: 25px; }	 

			.nav-icon.active .line:nth-of-type(1) { transform: rotate(45deg) translate(2px, -3px); }	
	
			.nav-icon.active .line:nth-of-type(3) { transform: rotate(-45deg) translate(3px, 2px); }	
	
	
	
	
	
	
			.seamless {  -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }




			.overlay .bgcolor { height: 100dvh; }

			.overlay .navigation ul li a { font-size: 5.0em; line-height: 0.85em; margin-bottom: 0px; }

			.overlay .navigation ul li ul {  display: none; }	


	
	
	
	

			.other h1 { margin-bottom: 0px; }
	
			.other .project { height: 55dvh; }	  

			.other a:nth-of-type(2) .project { height: 57dvh; }	  

			.other .project .pdc .deets { transform: translateY(0px); }	  

			.other .project .pdc h5 { opacity: 1; }	  

			.other .project .pdc p { opacity: 1; }	

			.other .project .pdc .logo img { width: 75px; }	  




			.services .core { grid-template-columns: 1fr 1fr; gap: 15px; }

			.services .core-services {  grid-template-columns: 1fr 1fr; gap: 50px; }	 

			.services .core-services .line { display: none; }

			.services .core-services.hci { grid-template-columns: 1fr 1fr 1fr;  /* Our Unique Selling Points */  }	  




			.waterfall .wf { width: 200px; }
	
			.waterfall .wf-1 { top: 9%;   left: 38%; }

			.waterfall .wf-2 { top: 67%; left: 75%; }	  

			.waterfall .wf-3 {  top: 11%; left: 80%; }	  

			.waterfall .wf-4 { top: 20%; left: 0%; }	  

			.waterfall .wf-5 {top: 82%; left: 39%; }	  

			.waterfall .wf-6 {top: 72%; left: 4%; }







			.yt { height: 50dvh; }

			.yt .cta { filter: opacity(1); transform: translateY(0px); }  

			.yt video { transform: translate(-50%, -50%); filter: brightness(0.44); }	  






}