@charset "utf-8";


/*
simonecarluccio.com
January 2025
*/


@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


/* @group Variables */	
	
	:root {
		
		
		/* Padding */



		/* Head Container */

		--head-mob-padding:		calc(24px - 12px);
		--head-mob-width:		100%;
		
		--head-des-padding:		calc(48px - 12px);
		--head-des-maxwidth:	100%;		
		
		
		/* Main Container */
		
		--main-mob-maxwidth:	1264px;
		--main-mob-padding:		24px;
		
		--main-des-maxwidth:	1280px;
		--main-des-padding:		48px;
		

		/* Thin Container ????????????????? */
		
		--thin-mob-maxwidth:	640px;
		--thin-mob-padding:		24px;
		
		--thin-mob-maxwidth:	968px;
		--thin-des-padding:		48px;		
		
		
		/* Full Container */
		
		--full-mob-width:		100%;
		--full-mob-padding:		24px;
		
		--full-des-maxwidth:	100%;		
		--full-des-padding:		48px;		
		
		
		/* Foot Container */
		
		--foot-mob-width:		100%;
		--foot-mob-padding:		24px;
		--foot-des-padding:		48px;
		
		--foot-des-maxwidth:	100%;
		
		
		

		
		
		







		
		
		/* Fonts */
		
		--font-cnd:					"IBM Plex Sans",	sans-serif;	
		--font-sns:					"IBM Plex Sans",	sans-serif;
		--font-srf:					"IBM Plex Serif",	sans-serif;			
		

		/* Palette */

		--color-black:				#222222;
		--color-blksh:				#333333;
		--color-lgrey:				#999999;
		--color-offwh:				#F5F5F5;
		--color-white:				#FFFFFF;
	
		



		/* Develop */

		--color-brand:					#A2222E;
		
		--color-red:					#FF3C46;
		--color-star:					#FFE58C;

		--color-white:					#FFFFFF;
		--color-grey1:					#F5F5F5;
		--color-grey2:					#E1E1E1;
		--color-grey3:					#C8C8C8;
		--color-grey4:					#AFAFAF;		
		--color-grey5:					#646464;
		--color-grey6:					#4B4B4B;
		--color-grey7:					#323232;
		--color-black:					#000000;
		
		--color-unit:					#A2DF88;
		
		
		/* Hover */
		
		--color-hovl:					rgba(0,0,0,0.04);
		--color-hovd:					rgba(0,0,0,0.16);

	}
	
/* @end */





/*
	section img {
		
		max-width: 100%;
	}
*/




	section {
		
/* 		min-width: 100%; */

		
/*
		display: flex;
		flex-wrap: wrap;
*/
	}






/* @group Stili di paragrafo */
	
	
/*
	h1	{margin: 0 0 48px 0;}
	h5	{margin: 4px 0;}
	p	{margin: 6px 0;}
	h2	{margin: 34px 0 48px 0;}
	h6	{margin: ;}
	img	{margin: 64px 0 0 0;}
*/
	
	
	
	html {
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}
	
	
	
	/* TITLE */
	h1,
	.project section.info .title {
		
		font-family: var(--font-sns);
		font-weight: 700;
		font-size: 29px;
		line-height: 32px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		
		text-align: left;	
		color: var(--color-blksh);
	}
	

	/* QUOTE */
	h2 {
		
		font-family: var(--font-sns);
		font-weight: 700;
		font-size: 26px;
		line-height: 32px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		
		text-align: left;	
		color: var(--color-blksh);
	}


	/* ? */
	h3,
	.about .itm .position {
		
		font-family: var(--font-sns);
		font-weight: 300;
		font-size: 22px;
		line-height: 28px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		
		text-align: left;	
		color: var(--color-blksh);
	}
	
	/* ? */
	h4,
	.about .sub-itm .title {
		
		font-family: var(--font-sns);
		font-weight: 300;
		font-size: 17px;
		line-height: 26px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		
		text-align: left;	
		color: var(--color-blksh);		
	}

	
	/* EYEBROW */
	h5,
	.video .title,
	.slide .title,
	.masonry .title,
	.about .left {
		
		font-family: var(--font-sns);
		font-weight: 700;
		font-size: 17px;
		line-height: 22px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: uppercase;
		
		text-align: left;	
		color: var(--color-blksh);
	}	


	/* CAPTION */
	h6,
	.project .credits,
	footer,
	.project section.info,
	.about .itm .date,
	.about .itm .info,
	.about .sub-itm .date,
	.about .sub-itm .info,
	.about .sub-itm .description,
	.backtohome,
	.table-row {
		
		font-family: var(--font-sns);
		font-weight: 300;
		font-size: 16px;
		line-height: 24px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		
		text-align: left;	
		color: var(--color-lgrey);
	}	
	
	.about .sub-itm .description {color: var(--color-blksh);}


	/* BODY */
	p,
	header .overlay a,
	.project section.info .abstract,
	.about .itm .description,
	.table,
	.masonry .body,
	.video .body,
	.slide .body {
		
		font-family: var(--font-sns);
		font-weight: 300;
		font-size: 17px;
		line-height: 26px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		
		text-align: left;	
		color: var(--color-blksh);

/*
		text-align: justify;			
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
*/		
	}

	

	
	
	@media screen and (min-width: 768px) {
		
		/* CAPTION */
		.masonry .body {
			
			font-family: var(--font-sns);
			font-weight: 300;
			font-size: 15px;
			line-height: 22px;
			font-style: normal;
			letter-spacing: normal;
			text-transform: none;
			
			text-align: left;	
			color: var(--color-blksh);
		}		
	}
	
	
	@media screen and (min-width: 1280px) {

		/* BODY */
		.masonry .body {
			
			font-family: var(--font-sns);
			font-weight: 300;
			font-size: 17px;
			line-height: 26px;
			font-style: normal;
			letter-spacing: normal;
			text-transform: none;
			
			text-align: left;	
			color: var(--color-blksh);
		}	
	}
	







	
	
	
	.info a,
	.masonry a,
	.about a {
		font-style: italic;
		color: var(--color-blksh);
		box-shadow: 0px 2px 0px 0px #F0F0F0;
		transition: all 0.15s ease;
	}
	
	.credits a {
		color: var(--color-lgrey);
		box-shadow: 0px 1px 0px 0px #F0F0F0;
		transition: all 0.15s ease;
	}

	
	.info a:hover,
	.masonry a:hover,
	.about a:hover {
		color: var(--color-lgrey);
	}
	
	.credits a:hover {
		color: var(--color-blksh);
	}
	
	

	
	b, strong {font-weight: 700 !important;}	
	i, em {font-style: italic !important;}

	
	::-moz-selection {background: #FFFAB9;}
	::selection      {background: #FFFAB9;}	


/* @end */





/*

	header,
	footer {
		
		height: 80px;
		
		display: flex;
		justify-content: center;
		align-items: center;
	}
*/


/* @media (prefers-color-scheme: dark) {
	
	
	body {
		
		background: var(--color-black);
		
	}
	
	h1, h2, h5, p {color: var(--color-offwh);}
	
	h6, p {font-weight: 400;}
	
} */



/* @group INDEX provvisorio */


	
	
	
	

	

/* @group Header provvisorio */


	header {
		
		width: 100%;
		height: 68px;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	

	header .logo {
		
		width: 180px;
		height: 44px;
		
		background-position: left center;
		background-size: auto;
		background-repeat: no-repeat;
		background-image: url(assets/brand/logo/light/logo-mob.svg);
		
		z-index: 500;
		
		transition: all 0.1s ease;
	}

	
	@media screen and (min-width: 1280px) {
		
		header {
			
			height: 108px;
		}
		
		
		header .logo {
			
			width: 180px;
			background-image: url(assets/brand/logo/light/logo-des.svg);
		}
	}
	

	nav {
		
		width: 136px;
		height: 32px;
		
		margin-right: 12px;

		display: none;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	
	
	nav a {

		margin-left: 20px;
		
		font-family: var(--font-sns);
		font-weight: 300;
		font-size: 17px;
		line-height: 24px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		text-align: center;	
		color: var(--color-blksh);
		
		transition: all 0.1s ease;
	}
	

	
	
	header a:hover {
		
		opacity: 0.5;
	}

	
	.mob-menu {
		
		width: 44px;
		height: 44px;
		
		background-image: url(assets/brand/glyphs/light/menu.svg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 44px 44px;	
		
		cursor: pointer;
		
		z-index: 500;	
	}
	
	
	.mob-menu.close {background-image: url(assets/brand/glyphs/light/exit.svg);}
	
	
	header .overlay {
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 300;
		
		background: rgba(255,255,255,1);
		
		transition: all 0.2s ease;
	}
	
	
	header .overlay a {
		
/*
		font-family: var(--font-sns);
		font-weight: 400;
		font-size: 16px;
		line-height: 26px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		text-align: center;	
		color: var(--color-blksh);
*/
		
		margin: 8px 0;
		cursor: pointer;
		
		transition: all 0.2s ease;	
	}


	header .overlay a:hover {
		
		opacity: 0.5;
	}
	
	

	
	
	header .social {
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		margin-top: 16px;
	}
	
	
	header .social .social-1,
	header .social .social-2,
	header .social .social-3,
	header .social .social-4 {
		
		width: 44px;
		height: 44px;
		
		transition: all 0.15s ease;
	}
	
	
	header .social .social-1:hover,
	header .social .social-2:hover,
	header .social .social-3:hover,
	header .social .social-4:hover {
		
		opacity: 0.5;
	}
	
	
	header .social .social-1 {background-image: url(assets/brand/social/social-1.svg)}
	header .social .social-2 {background-image: url(assets/brand/social/social-2.svg)}
	header .social .social-3 {background-image: url(assets/brand/social/social-3.svg)}
	header .social .social-4 {background-image: url(assets/brand/social/social-4.svg)}


/*
	@media screen and (min-width: 768px) {

		
		header .social {
			
			display: flex;
		}
	}	
*/
	
	
	
	
	
	
	
	
	
	
	

	
	@media screen and (min-width: 768px) {
		
		header nav {
			
			display: flex;
		}
		
		header .mob-menu,
		header .overlay {
			
			display: none;
		}
	}
	
	
	.project-header {
		
		position: absolute;
		top: 0;
	}

	
	header.light * {
		
		color: var(--color-blksh);
	}
	
	header.dark * {
		
		color: var(--color-white);
		font-weight: 400;
	}
	
	
	header.dark .mob-menu {
		
		background-image: url(assets/brand/glyphs/dark/menu.svg);	
	}
	
	header.dark .mob-menu.close {
		
		background-image: url(assets/brand/glyphs/light/exit.svg);
	}
	
		
	header.dark .logo {
		
		background-image: url(assets/brand/logo/dark/logo-mob.svg);
	}
	
	
	@media screen and (min-width: 1280px) {
		
		header.dark .logo {
			
			background-image: url(assets/brand/logo/dark/logo-des.svg);
		}
	}
	
	
/* @end */











/* @group Footer */


	footer {color: var(--color-lgrey);}
	
	
	.foot-cnt {

		padding-top: calc(72px - 6px);
		padding-bottom: calc(72px - 6px);
/* 		max-width: 1920px; */
		
		text-align: left;
		
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	
	footer .social {
		
		display: none;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		margin-right: -12px;
	}
	
	
	footer .social .social-1,
	footer .social .social-2,
	footer .social .social-3,
	footer .social .social-4 {
		
		width: 44px;
		height: 44px;
		
		transition: all 0.15s ease;
	}
	
	
	footer .social .social-1:hover,
	footer .social .social-2:hover,
	footer .social .social-3:hover,
	footer .social .social-4:hover {
		
		opacity: 0.5;
	}
	
	
	footer .social .social-1 {background-image: url(assets/brand/social/social-1.svg)}
	footer .social .social-2 {background-image: url(assets/brand/social/social-2.svg)}
	footer .social .social-3 {background-image: url(assets/brand/social/social-3.svg)}
	footer .social .social-4 {background-image: url(assets/brand/social/social-4.svg)}


	@media screen and (min-width: 768px) {
		
		.foot-cnt {
			
			padding-top: calc(96px - 6px);
			padding-bottom: calc(96px - 6px);
			justify-content: space-between;
		}
		
		footer .social {
			
			display: flex;
		}
	}	


/* @end */














main.home {
	
	margin-top: 192px;
	margin-bottom: -8px;
}


@media screen and (min-width: 768px) {
	
	main.home {
	
		margin-top: 324px;
		margin-bottom: -8px;
	}
	
}







/* @group Home */

	/* @group Grid */
		
		
		.grid-cnt {
			
			margin: 0 auto;
			width: 100%;
			max-width: 1920px;
			
			padding-top: 0;
			padding-bottom: 0;
			padding-left: calc(24px - 6px);
			padding-right: calc(24px - 6px);
		}
		
		
		.grid {
	
/* 			max-width: 1920px; */
			
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
		}
		
		.project .grid {
			
			margin-top: calc(32px - 8px);
		}
		
		
	
	
		.grid .item {
			
			margin: 6px;
			
			width: calc(100% - 12px);
			height: calc((100vw - 48px) / 3 * 2);
			max-height: 612px;
/* 			margin-bottom: 12px; */
			
			background: var(--color-offwh);
			background-position: center center;
			background-size: auto 100%;
			background-repeat: no-repeat;
	
			opacity: 0;
			animation: fadeIn 0.8s ease 0.00s normal forwards;
			transition: all 0.15s ease;
			
		}
		
		.grid .item:first-child {margin-top: 0;}
		.grid .item:last-child {margin-bottom: 0;}
		
		.grid .item:hover {
			
			background-size: auto 101.5%;
		}
		
		


		.grid .over {
			
			width: 100%;
			height: 100%;
			/* background: rgba(250,250,250,0.75); */
			/* background: rgba(0,0,0,0.25); */
			
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
/* 			border: 1px solid var(--color-offwh); */
			
			/* -webkit-backdrop-filter: blur(5px) saturate(150%);
			backdrop-filter: blur(5px) saturate(150%); */
			
			-webkit-backdrop-filter: blur(25px) saturate(110%);
			backdrop-filter: blur(25px) saturate(110%);
			
			opacity: 0;
			transition: all 0.2s ease; 
			
			
		}
		
		.grid .over * {
			color: var(--color-white);
		}

		
		.grid .over:hover {
			opacity: 1;
		}
		
		.grid .over h2 {
			text-align: center;
			max-width: 90%;
			font-size: 26px;
			line-height: 32px;
		}
		
		.grid .over p {
			margin-top: 2px;
			margin-bottom: 3px;
			text-align: center;
			font-weight: 400;
			max-width: 90%;
		}
		
	
	
	
	

		@media screen and (min-width: 768px) {
			
		.grid .item:first-child {margin-top: 6px;}
		.grid .item:last-child {margin-bottom: 6px;}
			
			.grid {
				
				flex-direction: row;
				justify-content: center;
			}
			
			
			
			.grid .item {
				
				margin: 8px;
				
				width: calc((100% - 48px) / 3);
				max-width: calc((1920px - 96px - 48px)/3);
				height: calc(((100vw - 32px) / 3) / 16 * 9);
				max-height: calc(((1920px - 96px - 48px)/3)/16*9)
/* 				background-size: auto 100%; */
				
/* 				margin: 8px; */
/* 				margin-bottom: 16px; */
			}		
		}
		
		
		
		
		
		
		
		
		@media screen and (min-width: 1280px) {
			
			.project .grid {
				
				margin-top: calc(48px - 8px);
			}
			
			.grid-cnt {
				
				margin: 0 auto;
				width: 100%;
				
				padding-top: 0;
				padding-bottom: 0;
				padding-left: calc(48px - 6px);
				padding-right: calc(48px - 6px);
			}
			
			
			.grid .item {
				
				height: calc(((100vw - 96px - 32px) / 3) / 16 * 9);
			}	
		}
		
		
		
		
		
		
		.grid a:nth-child(1)  {animation-delay: 0.0s;}
		.grid a:nth-child(2)  {animation-delay: 0.1s;}
		.grid a:nth-child(3)  {animation-delay: 0.2s;}
		.grid a:nth-child(4)  {animation-delay: 0.3s;}
		.grid a:nth-child(5)  {animation-delay: 0.4s;}
		.grid a:nth-child(6)  {animation-delay: 0.5s;}
		.grid a:nth-child(7)  {animation-delay: 0.6s;}
		.grid a:nth-child(8)  {animation-delay: 0.7s;}
		.grid a:nth-child(9)  {animation-delay: 0.8s;}
		.grid a:nth-child(10) {animation-delay: 0.9s;}
		.grid a:nth-child(11) {animation-delay: 1.0s;}
		.grid a:nth-child(12) {animation-delay: 1.1s;}
		.grid a:nth-child(13) {animation-delay: 1.2s;}
		.grid a:nth-child(14) {animation-delay: 1.3s;}
		.grid a:nth-child(15) {animation-delay: 1.4s;}
		.grid a:nth-child(16) {animation-delay: 1.5s;}
		.grid a:nth-child(17) {animation-delay: 1.6s;}
		.grid a:nth-child(18) {animation-delay: 1.7s;}
		.grid a:nth-child(19) {animation-delay: 1.8s;}	
		.grid a:nth-child(20) {animation-delay: 1.9s;}	
		.grid a:nth-child(21) {animation-delay: 2.0s;}	
		.grid a:nth-child(22) {animation-delay: 2.1s;}	
		.grid a:nth-child(23) {animation-delay: 2.2s;}	
		.grid a:nth-child(24) {animation-delay: 2.3s;}		

		.grid .item.sc0			{background-image: url(assets/projects/sc0/cover-grid.jpg);}
		.grid .item.steno		{background-image: url(assets/projects/steno/cover-grid.jpg);}
		.grid .item.stilo		{background-image: url(assets/projects/stilo/cover-grid.jpg);}
		.grid .item.capo		{background-image: url(assets/projects/capo/cover-grid.jpg);}
		.grid .item.muji		{background-image: url(assets/projects/muji/cover-grid.jpg);}
		.grid .item.irori		{background-image: url(assets/projects/irori/cover-grid.jpg);}	
		.grid .item.lunaria		{background-image: url(assets/projects/lunaria/cover-grid.jpg);}
		.grid .item.waves		{background-image: url(assets/projects/waves/cover-grid.jpg);}
		.grid .item.teatrino	{background-image: url(assets/projects/teatrino/cover-grid.jpg);}
		.grid .item.larchitetto	{background-image: url(assets/projects/larchitetto/cover-grid.jpg);}
		.grid .item.dune		{background-image: url(assets/projects/dune/cover-grid.jpg);}
		.grid .item.unit		{background-image: url(assets/projects/unit/cover-grid.jpg);}
		.grid .item.mockmill 	{background-image: url(assets/projects/mockmill/cover-grid.jpg);}
		.grid .item.profile_animation 	{background-image: url(assets/projects/profile_animation/cover-grid.jpg);}	
		.grid .item.momentum_animation 	{background-image: url(assets/projects/momentum_animation/cover-grid.jpg);}
		.grid .item.phonak_ui 			{background-image: url(assets/projects/phonak_ui/cover-grid.jpg);}
		.grid .item.sennheiser_dna 		{background-image: url(assets/projects/sennheiser_dna/cover-grid.jpg);}
		.grid .item.sennheiser_audio 	{background-image: url(assets/projects/sennheiser_audio/cover-grid.jpg);}
		.grid .item.project-19 	{background-image: url(assets/projects/project-19/cover-grid.jpg);}
		.grid .item.project-20 	{background-image: url(assets/projects/project-20/cover-grid.jpg);}
		.grid .item.project-21 	{background-image: url(assets/projects/project-21/cover-grid.jpg);}
		.grid .item.project-22 	{background-image: url(assets/projects/project-22/cover-grid.jpg);}
		.grid .item.project-23 	{background-image: url(assets/projects/project-23/cover-grid.jpg);}
		.grid .item.project-24 	{background-image: url(assets/projects/project-24/cover-grid.jpg);}	
		
		
	/* @end */

/* @end */


/* @group Pictures */
	
	
	
	
		.detail {
			
/*
			max-width: 1920px;
			max-height: 960px;
*/
		}
		
		
		.detail.left {object-position: left;}
		.detail.right {object-position: right;}
	
	
		.project .show {
			
/* 			margin-bottom: 24px; */
		}
	
	
		.project .show img,
		.project .show video {
			
			display: block;
			width: 100%;
/* 			margin-top: 12px; */
		}
		
		
		.project .show img:first-child,
		.project .show video:first-child {
			
			margin-top: 0;
		}
		
		
		.project .image-caption img:first-child,
		.project .image-caption video:first-child {
			
			margin-top: 12px;
		}
		
		
		.project .image-caption p {
			
			margin-top: 16px;
			margin-bottom: 32px;
		}

		
		@media screen and (min-width: 1280px) {
			

		.project .show {
			
/* 			margin-bottom: 48px; */
		}
			
/*
			.project .info {
				
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-start;
				
				margin: 128px auto;
			}
			
			
			.project .info div {
				
				width: calc(50% - 16px);
			}
*/
	
	
			.project .show img {
	
/* 				margin-top: 32px; */
			}
			
			
			.project .show img:first-child {
			
				margin-top: 0;
			}	
			
			
			.project .image-caption {
				
				display: flex;
				align-items: flex-end;
			}

			
			.project .image-caption img:first-child {
			
				margin-top: 32px;
				width: 904px;
			}
			
			
			.project .image-caption p {
				
				width: 280px;
				margin-left: 32px;
				margin-bottom: 120px;
			}	
			
			
			.project .image-caption.left {
				
				flex-direction: row-reverse;
			}
			
			
			.project .image-caption.left p {
				
				margin-left: 0;
				margin-right: 32px;
			}
		}	
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	/* @end */		
		
		
video {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}		
	
	
	
	





















/* @group Project */


	/* @group Info */
		
		
		.project section.info {
			
			margin: 64px auto;
	
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
		}
		
		
		.project section.info .left,
		.project section.info .right {
			
			min-width: 272px;
			width: calc(100% - 44px);	
		}
		
		
		.project section.info .left {
			
			max-width: 568px;
		}
		
		
		.project section.info .right {
			
			max-width: 260px;
		}
		
		
		.project section.info .title {		
		
			margin: -7px auto calc(20px - 4px) auto; /* compensazione */
		}


		.project section.info .subtitle {
			
			margin: -8px auto calc(48px - 11px) auto; /* compensazione */
		}
		
		
		.project section.info .abstract {

			margin: -10px auto -7px auto; /* compensazione */
		}
		
		
		.project section.info .caption {

			margin: calc(48px - 8px) auto -6px auto; /* compensazione */
		}

		
		@media screen and (min-width: 660px) {

			
			.project section.info {
				
				width: 616px;
				justify-content: center;
			}
			
			
			.project section.info .left {
				
				min-width: 568px;
				width: 568px;
				max-width: 568px;
			}
			
			
			.project section.info .right {
				
				min-width: 260px;
				width: 260px;
				max-width: 260px;
			}
		}	
		
		
		@media screen and (min-width: 768px) {
		
			.project section.info {
		
				margin: 96px auto;
			}
		}
		
		
		@media screen and (min-width: 972px) {

			
			.project section.info {
		
				width: 924px;
				
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: flex-end;	
			}	

	
			.project section.info .left {
			
				max-width: 568px;
			}

		
			.project section.info .right {
			
				max-width: 260px;
			}
			
			.project section.info .caption {
	
				text-align: left;
			}
		}
	
	
		@media screen and (min-width: 1280px) {
			
			.project section.info {
		
				width: 972px;
			}
		}

	
	/* @end */

	/* @group Sbom */
		
		.detail {
			
			background: var(--color-offwh);
			width: 100% !important;
			height: 100vw !important;
			object-fit: cover;
			margin: 96px auto;
		}
		
		.detail:first-of-type {margin-top: 0;}		
		.detail:last-of-type  {margin-bottom: 0;}
		
		.detailmuji {
			margin: 96px auto !important;
		}
		
		video.detail {margin: 96px auto !important;}
		
/*
		.sbom.left {
			
			object-fit: none;
			padding-left: 50vw !important;
		}
*/
		
	
		@media screen and (min-width: 768px) {
			
			.detail {
				
				width: 100% !important;
				height: calc(100vw / 2) !important;
				object-fit: auto;
				margin: 256px auto;
			}
			
			.detail:first-of-type {margin-top: 0;}		
			.detail:last-of-type  {margin-bottom: 0;}
			
			.detailmuji {
				margin: 256px auto !important;
			}
			
			video.detail {margin: 256px auto !important;}
		}		
		
	/* @end */

	/* @group Masonry */		
	
	
		.masonry-cnt {
			
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
	
		.masonry {
			
			/* margin: 96px auto; */
		}
	


		.masonry .caption {
	
			width: calc(100% - 44px);
			max-width: 414px;
			margin-bottom: 48px;
			
		}
		
		/* .masonry .caption:first-child {margin-top: 48px;} */
	
	
		.masonry .caption .title {margin: -5px auto 8px auto;}	
		.masonry .caption .body {margin: 0 auto -7px auto;}
	
	
		.masonry .itm.img {
			
			margin-top: 24px;
			background-color: #FAFAFA;
		}
			
	.masonry .itm.img.interactive {pointer-events: auto !important; background-color: rgba(0,0,0,0) !important;}
	
	
	/* @keyframes pulse {
		
		0%		{}
		50%		{width: 40px; height: 40px; margin: -4px 0 0 -4px;}
		100%	{}
	} */
	
	@keyframes pulse {
		
		0%		{transform: scale(1)}
		50%		{transform: scale(1.2)}
		100%	{transform: scale(1)}
	}
	
	@keyframes radar {
		
		0%, 100% {
			
			/* opacity: 0.9; */
			-webkit-transform: scale(1.0);				
				-ms-transform: scale(1.0);
					transform: scale(1.0);     
			-webkit-box-shadow: 0 2px 4px rgba(162,223,136,0.3);
					box-shadow: 0 2px 4px rgba(162,223,136,0.3);
		}
		
		50% {
			
			/* opacity: 1; */
			-webkit-transform: scale(1.2);				
				-ms-transform: scale(1.2);
					transform: scale(1.2);	
			-webkit-box-shadow: 0 2px 8px rgba(162,223,136,0.3);
					box-shadow: 0 2px 8px rgba(162,223,136,0.3);
		}
	}
	
	
	.interactive-dot {
		position: absolute;
		/* top: 281px;
		 left: 365px; */
		top: 32px;
		right: 32px;
		width: 32px;
		height: 32px;
		background: #A2DF88;
		border-radius: 48px;
		transition: 0.3s;
		z-index: 300;
		/* box-shadow: 0 3px 6px rgba(162,223,136,0.5); */
		animation: radar 2s ease 0s infinite normal both running;
		
		background-image: url(assets/brand/glyphs/light/interactive-dot.svg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 32px 32px;	
	}
	
	.interactive:hover .interactive-dot {
		opacity: 0 !important;
		
	}
	
	
	
	.interactive-rewind {
		position: absolute;
		top: 16px;
		left: 16px;
		width: 32px;
		height: 32px;
		background: var(--color-unit);
		box-shadow: 0 2px 4px rgba(162,223,136,0.3);
		border-radius: 4px;
		transition: 0.3s;
		z-index: 300;
		/* animation: radar 2s ease 0s infinite normal both running; */
		background-image: url(assets/brand/glyphs/light/interactive-rewind-mobile.svg);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 32px 32px;
		outline: none;
		border: none;
		
		cursor: pointer;
	}
	
	.mas.rewind .interactive-rewind {
		left: 40px;
	}
	
	@media screen and (min-width: 768px) {
		.interactive-rewind {
			top: 32px;
			left: 32px;
			width: 94px;
			background-image: url(assets/brand/glyphs/light/interactive-rewind.svg);
			background-size: 94px 32px;
			opacity: 0 !important;
		}
		
		.mas.rewind .interactive-rewind {
			left: 80px;
		}
	}
	
	
	
	.interactive-rewind:hover {
		transform: scale(1.05);
	}
	
	.interactive-rewind:active {
		transform: scale(1);
	}
	
	
	
	
	.rewind:hover .interactive-rewind {
		opacity: 1 !important;
	}




	.masonry .itm.img {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.unit.masonry-title {
		font-family: var(--font-sns);
		font-weight: 900;
		font-size: 50px;
		
		color: #A2DF88;
		line-height: 52px;
		
		margin: 38px 48px;
	}
	
	.unit.masonry-body {
		font-family: var(--font-sns);
		font-weight: 300;
		font-size: 17px;
		color: #333333;
		line-height: 26px;
		
		margin: 41px 48px;
	}







		@media screen and (max-width: 768px) {
			
			.unit .video.mas {margin: 24px auto 0 auto !important;}
			.simofix-margin {margin-top: 0 !important;}
			/* .simofix-caption {margin-top: 48px;} */
			.masonry .itm.caption {margin-top: 48px;}
			.interactive-dot {display: none;}
		}
		
		
		
		.unit .info .right {
			
			margin-top: 48px;
			
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			
			opacity: 0.25;
		}
		
		.unit .info .right img {
			width: 212px;
			height: 60px;
		}
		
		@media screen and (min-width: 972px) {
			
			.unit .info .right {
				justify-content: flex-end;
			}
		}
		
		
		
			
		@media screen and (min-width: 768px) {
	
			
			.masonry {
				
				/* margin: 192px auto; */
				
				display: grid;
				grid-template-columns: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;
				gap: 24px 24px;
			}
			
			.masonry.h3  {grid-template-rows: 22.5px 22.5px 22.5px;}
			.masonry.h4  {grid-template-rows: 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h5  {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h6  {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}			
			.masonry.h7  {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}		
			.masonry.h8  {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h9  {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h10 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h11 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}		
			.masonry.h12 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h13 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h14 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h15 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h16 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h17 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h18 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h19 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h20 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h21 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h22 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h23 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h24 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h25 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h26 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h27 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h28 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h29 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h30 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h31 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h32 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h33 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h34 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h35 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h36 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h37 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h38 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h39 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h40 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h41 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h42 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h43 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h44 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h45 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h46 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h47 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}
			.masonry.h48 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h49 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
			.masonry.h50 {grid-template-rows: 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px 22.5px;}	
	
			
	
			.masonry .caption {
				
				margin-bottom: 0;
				width: 100%;
				max-width: 100%;
			}
	
	
			.masonry .itm {}		
			
			.masonry .itm.interactive {
				position: relative;
			}
			
			.masonry .itm.interactive .standard,
			.masonry .itm.interactive .hover {
				position: absolute;
				width: 100%;
				height: 100%;
			}
			
			
			.masonry .itm.interactive .standard {opacity: 1; transition: 0.3s; z-index: 200;}
			.masonry .itm.interactive:hover .standard {opacity: 0;}
			
	
	
			.masonry .itm.img {overflow: hidden; margin-top: 0;}		
	
	
			.masonry img,
			.masonry video {
				
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
	
			
			/* @group Project 1 - SC0 */
				
				
	
			
				.masonry.sc0.n1 .itm.caption {
					
					grid-column: 8 / 14;
					grid-row: 6 / 10;
				}
				
				.masonry.sc0.n1 .itm.img-A {
					
					grid-column: 1 / 6;
					grid-row: 1 / 6;
				}
				
				.masonry.sc0.n1 .itm.img-B {
					
					grid-column: 6 / 14;
					grid-row: 1 / 6;
				}

				
				.masonry.sc0.n1 .itm.img-C {
					
					grid-column: 1 / 8;
					grid-row: 6 / 10;
				}
			
				
				.masonry.sc0.n1 .itm.img-D {
					
					grid-column: 14 / 17;
					grid-row: 1 / 10;
				}
				
	
				.masonry.sc0.n2 .itm.caption {
					
					grid-column: 11 / 17;
					grid-row: 7 / 10;
				}
				
				.masonry.sc0.n2 .itm.img-A {
					
					grid-column: 1 / 11;
					grid-row: 1 / 4;
				}
				
				.masonry.sc0.n2 .itm.img-B {
					
					grid-column: 11 / 17;
					grid-row: 1 / 7;
				}

				
				.masonry.sc0.n2 .itm.img-C {
					
					grid-column: 1 / 11;
					grid-row: 4 / 10;
				}

				.masonry.sc0.n3 .itm.caption {
					
					grid-column: 11 / 17;
					grid-row: 7 / 10;
				}

				.masonry.sc0.n3 .itm.img-A {
					
					grid-column: 1 / 7;
					grid-row: 1 / 7;
				}

				.masonry.sc0.n3 .itm.img-B {
					
					grid-column: 7 / 17;
					grid-row: 1 / 4;
				}

				.masonry.sc0.n3 .itm.img-C {
					
					grid-column: 7 / 17;
					grid-row: 4 / 7;
				}

				.masonry.sc0.n3 .itm.img-D {
					
					grid-column: 1 / 11;
					grid-row: 7 / 10;
				}	


			/* @end */
				
			/* @group Project 2 - Steno */
			
				/* Masonry 1 */
				
				.masonry.steno.n1 .itm.caption {
					grid-column: 1 / 7;
					grid-row: 7 / 10;
				}
				
				.masonry.steno.n1 .itm.img-A {
					grid-column: 1 / 7;
					grid-row: 1 / 7;
				}
				
				.masonry.steno.n1 .itm.img-B {
					grid-column: 7 / 12;
					grid-row: 1 / 6;
				}
				
				.masonry.steno.n1 .itm.img-C {
					grid-column: 12 / 17;
					grid-row: 1 / 6;
				}
				
				.masonry.steno.n1 .itm.img-D {
					grid-column: 7 / 17;
					grid-row: 6 / 10;
				}
				
				/* Masonry 2 */
				
				.masonry.steno.n2 .itm.caption {
					
					grid-column: 7 / 13;
					grid-row: 7 / 10;
				}
				
				.masonry.steno.n2 .itm.img-A {
					
					grid-column: 1 / 7;
					grid-row: 1 / 7;
				}
				
				.masonry.steno.n2 .itm.img-B {
					
					grid-column: 7 / 17;
					grid-row: 1 / 7;
				}
			
			/* @end */
			
			/* @group Project 3 - Stilo */
				
				/* Masonry 1 */
			
				.masonry.stilo.n1 .itm.caption {
					
					grid-column: 1 / 7;
					grid-row: 7 / 11;
				}
				
				.masonry.stilo.n1 .itm.img-A {
					
					grid-column: 1 / 7;
					grid-row: 1 / 7;
				}
				
				.masonry.stilo.n1 .itm.img-B {
					
					grid-column: 7 / 17;
					grid-row: 1 / 4;
				}
				
				.masonry.stilo.n1 .itm.img-B video {
					
/* 					margin-top: -120px !important; */
				}	
				
				.masonry.stilo.n1 .itm.img-C {
					
					grid-column: 7 / 17;
					grid-row: 4 / 11;
				}
				
				/* Masonry 2 */
				
				.masonry.stilo.n2 .itm.caption {
					
					grid-column: 11 / 17;
					grid-row: 7 / 9;
				}
				
				.masonry.stilo.n2 .itm.img-A {
					
					grid-column: 1 / 11;
					grid-row: 1 / 7;
				}	
				
				.masonry.stilo.n2 .itm.img-B {
					
					grid-column: 5 / 11;
					grid-row: 6 / 9;
				}
				
				.masonry.stilo.n2 .itm.img-C {
					
					grid-column: 11 / 17;
					grid-row: 1 / 7;
				}		
			
			
			/* @end */
		
			/* @group Project 4 - Capo */
				
				/* Masonry 1 */
			
				.masonry.capo.n1 .itm.caption {
					
					grid-column: 1 / 7;
					grid-row: 7 / 11;
				}
				
				.masonry.capo.n1 .itm.img-A {
					
					grid-column: 1 / 7;
					grid-row: 1 / 7;
				}
				
				.masonry.capo.n1 .itm.img-B {
					
					grid-column: 7 / 17;
					grid-row: 1 / 7;
				}
				
				/* Masonry 2 */

				.masonry.capo.n2 .itm.caption {
					
					grid-column: 11 / 17;
					grid-row: 7 / 11;
				}
				
				.masonry.capo.n2 .itm.img-A {
					
					grid-column: 1 / 11;
					grid-row: 1 / 11;
				}
				
				.masonry.capo.n2 .itm.img-B {
					
					grid-column: 11 / 17;
					grid-row: 1 / 7;
				}
							
			/* @end */
		
			/* @group Project 5 - MUJI */
				
				/* Masonry 1 */
				
				.masonry.muji.n1 .itm.caption {
					grid-column: 1 / 7;
					grid-row: 7 / 9;
				}
				
				.masonry.muji.n1 .itm.img-A {
					grid-column: 1 / 7;
					grid-row: 1 / 7;
				}
				
				.masonry.muji.n1 .itm.img-B {
					grid-column: 7 / 17;
					grid-row: 1 / 4;
				}
				
				.masonry.muji.n1 .itm.img-C {
					grid-column: 7 / 17;
					grid-row: 4 / 9;
				}
				
				/* Masonry 2 */
				
				.masonry.muji.n2 .itm.caption {
					grid-column: 10 / 17;
					grid-row: 9 / 12;
				}
				
				.masonry.muji.n2 .itm.img-A {
					grid-column: 1 / 6;
					grid-row: 1 / 9;
				}
				
				.masonry.muji.n2 .itm.img-B {
					grid-column: 6 / 17;
					grid-row: 1 / 5;
				}
				
				.masonry.muji.n2 .itm.img-C {
					grid-column: 6 / 17;
					grid-row: 5 / 9;
				}	
				
				/* Masonry 3 */
				
				.masonry.muji.n3 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 10;
				}
			
			/* @end */
	
			/* @group Project 5 - Irori */
			
			/* @end */
			
			/* @group Project 7 - Lunaria */
				
				/* Masonry 1 */
				
				.masonry.lunaria.n1 .itm.caption {
					grid-column: 9 / 17;
					grid-row: 9 / 12;
				}
				
				.masonry.lunaria.n1 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 9;
				}
				
				/* Masonry 2 */
				
				.masonry.lunaria.n2 .itm.caption {
					grid-column: 9 / 17;
					grid-row: 9 / 13;
				}
				
				.masonry.lunaria.n2 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 9;
				}	
				
			/* @end */
			
			
			/* @group Dune */
			
				/* Masonry 1 */
				
				.masonry.teatrino.n1 .itm.caption {
					grid-column: 12 / 17;
					grid-row: 10 / 14;
				}
				
				.masonry.teatrino.n1 .itm.img-A {
					grid-column: 1 / 12;
					grid-row: 1 / 14;
				}
				
			/* @end */
			
			
			
			
			/* @group Project 10 - l’architetto */
				
				/* Masonry 1 */
				
				.masonry.larchitetto.n1 .itm.caption {
					grid-column: 1 / 7;
					grid-row: 7 / 9;
				}
				
				.masonry.larchitetto.n1 .itm.img-A {
					grid-column: 1 / 7;
					grid-row: 1 / 7;
				}
				
				.masonry.larchitetto.n1 .itm.img-B {	
					grid-column: 7 / 17;
					grid-row: 1 / 5;
				}
				
				.masonry.larchitetto.n1 .itm.img-C {
					grid-column: 7 / 17;
					grid-row: 5 / 11;
				}
				
				/* Masonry 2 */
				
				.masonry.larchitetto.n2 .itm.caption {
					grid-column: 11 / 17;
					grid-row: 4 / 11;
				}
				
				.masonry.larchitetto.n2 .itm.img-A {
					grid-column: 1 / 11;
					grid-row: 1 / 11;
				}
				
				.masonry.larchitetto.n2 .itm.img-B {
					grid-column: 11 / 17;
					grid-row: 1 / 4;
				}	
				
				.masonry.larchitetto.n2 .itm.img-C {
					grid-column: 10 / 17;
					grid-row: 1 / 5;
				}
				
				/* Masonry 3 */
				
				.masonry.larchitetto.n3 .itm.caption {
					grid-column: 9 / 17;
					grid-row: 11 / 12;
				}
				
				.masonry.larchitetto.n3 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 11;
					border: 1px solid rgba(210,205,190,0.2);
				}
				
				
				
			/* @end */
			
			/* @group Dune */
			
				/* Masonry 1 */
				
				.masonry.dune.n1 .itm.caption {
					grid-column: 12 / 17;
					grid-row: 6 / 8;
				}
				
				.masonry.dune.n1 .itm.img-A {
					grid-column: 1 / 12;
					grid-row: 1 / 8;
				}
				
				.masonry.dune.n1 .itm.img-B {
					grid-column: 12 / 17;
					grid-row: 1 / 6;
				}
				
			/* @end */
			
			/* @group Project 12 - UNIT */
			
				.masonry.unit .itm.interactive:hover .standard {opacity: 0 !important;}
				
				
				
				
				
			/* UNIT - The Refrigerator Analysis */
			
				.masonry.unit.n1 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 4;
				}
				
				.masonry.unit.n1 .itm.img-B {
					grid-column: 1 / 17;
					grid-row: 1 / 9;
				}
				
				.masonry.unit.n1 .itm.cap-C {
					grid-column: 13 / 17;
					grid-row: 9 / 14;
				}
				
				.masonry.unit.n1 .itm.img-C {
					grid-column: 1 / 5;
					grid-row: 9 / 14;
				}
				
				.masonry.unit.n1 .itm.img-D {
					grid-column: 5 / 9;
					grid-row: 9 / 14;
				}
				
				.masonry.unit.n1 .itm.img-E {
					grid-column: 9 / 13;
					grid-row: 9 / 14;
				}
				
				
				
				
			/* UNIT - The Structural Elements */
				
				.masonry.unit.n2 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 4;
				}
				
				.masonry.unit.n2 .itm.img-B {
					grid-column: 1 / 12;
					grid-row: 4 / 12;
				}
				
				.masonry.unit.n2 .itm.cap-B {
					grid-column: 12 / 17;
					grid-row: 4 / 7;
				}
				
				.masonry.unit.n2 .itm.img-C {
					grid-column: 12 / 17;
					grid-row: 7 / 12;
				}
				
				.masonry.unit.n2 .itm.img-D {
					grid-column: 1 / 17;
					grid-row: 12 / 21;
				}
				
				.masonry.unit.n2 .itm.cap-D {
					grid-column: 11 / 17;
					grid-row: 21 / 24;
				}
				
				.masonry.unit.n2 .itm.img-E {
					grid-column: 1 / 17;
					grid-row: 24 / 33;
				}
				
				.masonry.unit.n2 .itm.cap-E {
					grid-column: 11 / 17;
					grid-row: 33 / 36;
				}
				
				
				
				
				
				
			/* UNIT - The Structural Elements */
			
				.masonry.unit.n3 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 4;
				}	
				
				
				.masonry.unit.n3 .itm.img-B {
					grid-column: 1 / 6;
					grid-row: 4 / 10;
				}
				
				.masonry.unit.n3 .itm.img-C {
					grid-column: 6 / 17;
					grid-row: 4 / 13;
				}
				
				.masonry.unit.n3 .itm.img-C.interactive:hover .standard {opacity: 0.5 !important;}
				
				.masonry.unit.n3 .itm.caption.cap-B {
					grid-column: 1 / 6;
					grid-row: 10 / 13;
				}
				
				.masonry.unit.n3 .itm.img-D {
					grid-column: 1 / 12;
					grid-row: 13 / 24;
				}
				
				.masonry .itm.img-D.interactive:hover .hover {display: block;}
				.masonry .itm.img-D.interactive .hover {display: none;}
				.masonry .itm.img-D.interactive .standard {transition: 0s}
				
				.masonry.unit.n3 .itm.caption.cap-D {
					grid-column: 12 / 17;
					grid-row: 20 / 24;
				}
				
				.masonry.unit.n3 .itm.img-E {
					grid-column: 1 / 17;
					grid-row: 24 / 33;
				}
				
				.masonry.unit.n3 .itm.caption.cap-E {
					grid-column: 9 / 17;
					grid-row: 33 / 36;
				}
				
				.masonry.unit.n3 .itm.img-F {
					grid-column: 1 / 17;
					grid-row: 36 / 46;
				}
				
				.masonry.unit.n3 .itm.caption.cap-F1 {
					grid-column: 1 / 9;
					grid-row: 46 / 50;
				}
				
				.masonry.unit.n3 .itm.caption.cap-F2 {
					grid-column: 9 / 17;
					grid-row: 46 / 50;
				}
				
				
				
				
				
				
				
				/* UNIT - Cover Element */
				
				.masonry.unit.n4 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 4;
				}
				
				.masonry.unit.n4 .itm.cap-B {
					grid-column: 10 / 17;
					grid-row: 10 / 13;
				}
				
				.masonry.unit.n4 .itm.img-B {
					grid-column: 1 / 10;
					grid-row: 4 / 13;
				}
				
				.masonry.unit.n4 .itm.img-C {
					grid-column: 10 / 17;
					grid-row: 4 / 10;
				}
				
				
				
				
				/* UNIT - Compositions */
				
				.masonry.unit.n5 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 4;
				}
				
				.masonry.unit.n5 .itm.cap-B {
					grid-column: 1 / 7;
					grid-row: 15 / 16;
				}
				
				.masonry.unit.n5 .itm.img-B {
					grid-column: 1 / 11;
					grid-row: 4 / 15;
				}
				
				.masonry.unit.n5 .itm.img-C {
					grid-column: 11 / 17;
					grid-row: 4 / 15;
				}
				
				
				/* UNIT - Comparison */
				
				.masonry.unit.n6 .itm.img-A {
					grid-column: 1 / 17;
					grid-row: 1 / 4;
				}
				
				.masonry.unit.n6 .itm.img-B {
					grid-column: 1 / 11;
					grid-row: 4 / 10;
				}
				
				.masonry.unit.n6 .itm.img-C {
					grid-column: 11 / 17;
					grid-row: 4 / 10;
				}
				
				.masonry.unit.n6 .itm.img-D {
					grid-column: 1 / 17;
					grid-row: 10 / 19;
				}
				
				.masonry.unit.n6 .itm.img-E {
					grid-column: 1 / 11;
					grid-row: 19 / 25;
				}
				
				.masonry.unit.n6 .itm.img-F {
					grid-column: 11 / 17;
					grid-row: 19 / 25;
				}
				
				.masonry.unit.n6 .itm.img-G {
					grid-column: 1 / 17;
					grid-row: 25 / 33;
				}
				
				.masonry.unit.n6 .itm.img-H {
					grid-column: 1 / 11;
					grid-row: 33 / 39;
				}
				
				.masonry.unit.n6 .itm.img-I {
					grid-column: 11 / 17;
					grid-row: 33 / 39;
				}
				
				.masonry.unit.n6 .itm.img-L {
					grid-column: 1 / 17;
					grid-row: 39 / 46;
				}
				
				.masonry.unit.n6 .itm.img-M {
					grid-column: 1 / 11;
					grid-row: 46 / 52;
				}
				
				.masonry.unit.n6 .itm.img-N {
					grid-column: 11 / 17;
					grid-row: 46 / 52;
				}
				
				.masonry.unit.n6 .itm.img-O {
					grid-column: 1 / 17;
					grid-row: 52 / 62;
				}
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				/* .masonry.unit.n6 .itm.caption {
					
					grid-column: 1 / 6;
					grid-row: 7 / 10;
				} */
				
				/* .masonry.unit.n6 .itm.img-A {
					
					grid-column: 1 / 11;
					grid-row: 1 / 15;
				}
				
				.masonry.unit.n6 .itm.img-A.interactive:hover .standard {opacity: 0 !important;}
				 */
				
				/* .masonry.unit.n6 .itm.img-B {
					
					grid-column: 6 / 17;
					grid-row: 1 / 10;
				} */
				
				
				
				
				
				/* .masonry.unit.n1 .itm.img-B:hover .main {opacity: 0.2;} */
				
				/*
				.masonry.unit.n1 .itm.img-B {
					
					grid-column: 7 / 17;
					grid-row: 1 / 7;
				} */
				
				/* .masonry.unit.n1 .itm.img-D {
					
					grid-column: 7 / 17;
					grid-row: 2 / 8;
				}
				
				.masonry.unit.n1 .itm.img-E {
					
					grid-column: 1 / 17;
					grid-row: 8 / 11;
				}
				
				.masonry.unit.n1 .itm.img-F {
					
					grid-column: 1 / 11;
					grid-row: 11 / 17;
				}
				
				.masonry.unit.n1 .itm.img-G {
					
					grid-column: 11 / 17;
					grid-row: 11 / 17;
				} */
				
				/* .masonry.unit.n1 .itm {
				  cursor: url(assets/projects/unit/cursor.svg), auto;
				} */
			
			
			
			
			/* @end */
			
			/* @group Mockmill */
				
				.masonry.mockmill.n1 .itm.img-A {
					grid-column: 3 / 11;
					grid-row: 1 / 9;
				}
				
				.masonry.mockmill.n1 .itm.img-B {
					grid-column: 11 / 15;
					grid-row: 1 / 5;
				}
				
				.masonry.mockmill.n1 .itm.img-C {
					grid-column: 11 / 15;
					grid-row: 5 / 9;
				}
				
				
				
			/* @end */
			
		/* @end */





		
		
		}
		
	
		@media screen and (min-width: 1024px) {
			
			
			.masonry {
				
/* 				margin: 192px auto; */
				
				display: grid;
				grid-template-columns: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
				gap: 32px 32px;
			}
			
			.masonry.h3  {grid-template-rows: 30px 30px 30px;}
			.masonry.h4  {grid-template-rows: 30px 30px 30px 30px;}
			.masonry.h5  {grid-template-rows: 30px 30px 30px 30px 30px;}
			.masonry.h6  {grid-template-rows: 30px 30px 30px 30px 30px 30px;}			
			.masonry.h7  {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px;}		
			.masonry.h8  {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h9  {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h10 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h11 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}		
			.masonry.h12 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h13 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h14 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h15 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h16 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h17 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h18 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h19 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h20 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h21 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h22 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h23 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h24 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h25 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h26 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h27 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h28 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h29 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h30 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h31 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h32 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h33 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h34 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h35 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h36 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h37 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h38 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h39 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h40 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h41 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h42 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h43 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h44 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h45 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h46 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h47 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}
			.masonry.h48 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h49 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	
			.masonry.h50 {grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;}	

		}
	
			
		@media screen and (min-width: 1280px) {
	
	
			.masonry {
	
/* 				margin: 192px auto; */
	
				display: grid;
				grid-template-columns: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;
				gap: 48px 48px;
			}
			
			.masonry.h3  {grid-template-rows: 29px 29px 29px}
			.masonry.h4  {grid-template-rows: 29px 29px 29px 29px;}
			.masonry.h5  {grid-template-rows: 29px 29px 29px 29px 29px;}
			.masonry.h6  {grid-template-rows: 29px 29px 29px 29px 29px 29px;}			
			.masonry.h7  {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px;}		
			.masonry.h8  {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h9  {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h10 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h11 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}		
			.masonry.h12 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h13 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h14 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h15 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h16 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h17 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h18 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h19 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h20 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h21 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h22 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h23 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h24 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h25 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h26 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h27 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h28 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h29 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h30 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h31 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h32 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h33 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h34 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h35 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h36 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h37 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h38 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h39 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h40 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h41 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h42 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h43 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h44 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h45 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h46 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h47 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}
			.masonry.h48 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h49 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
			.masonry.h50 {grid-template-rows: 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px 29px;}	
		
		}		
		
		
	/* @end */


/* @end */
























	section.show {
		
/* 		margin-bottom: 96px; */
	}

	.project .credits {
		box-shadow: 0 6px 24px 0 rgba(0,0,0,0.03);
	}

	.project .credits .container {
		
		/* margin: 96px auto; */
		padding-top: 96px !important;
		padding-bottom: 96px !important;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		
	
	
	}


	.project .credits .partners {

		width: 100%;
		max-width: 260px;
		height: 64px;
		
		margin-bottom: 24px;
	}
	
	.project .credits .text {

		width: 100%;
		/* max-width: 568px;	 */
		
		margin: -6px auto;
	}
	
	
	@media screen and (min-width: 768px) {
		
		.project .credits .container {
			
			/* margin: 128px auto !important; */
			padding-top: 128px !important;
			padding-bottom: 128px !important;
			
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
		}
		
		.project .credits .partners {
			
			margin-top: -8px;
		}
		
		.project .credits .text {
			
			max-width: 568px;
			margin: 0;
		}
	}
	




	





	/* @group Nav */
		
		.pnav {
			
			margin: calc(48px - 8px) auto;
			height: calc(275px / 2) !important;
		}
		
		.pnav .item {
			
			height: calc(275px / 2) !important;
		}
	
	
/*
		.project .nav {
			

			margin: 64px auto;

			margin-top: 192px;
			
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
	
	
		.project .nav .next {
			
			flex-direction: row-reverse;
		}
	
	
		.project .nav .glyph {
			
			width: 20px;
			height: 20px;
			
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 20px 20px;
		}
		
	
		.project .nav .prev .glyph {
			
			margin-right: 8px;
			background-image: url(assets/brand/glyphs/light/left.svg);
		}
			
			
		.project .nav .next .glyph {
			
			margin-left: 8px;
			background-image: url(assets/brand/glyphs/light/right.svg);
		}
	
	
		.project .nav a {
			
			display: flex;
			justify-content: center;
			align-items: center;
			
			transition: all 0.2s ease;
		}
		
		
		.project .nav a:hover {
			
			opacity: 0.5;
		}
*/
	

	/* @end */




	.sep {
		
		height: 1px;
		width: 100%;
		background: var(--color-offwh);
	}




	/* @group Splash */
	
	
		/*
		La proporzione dell'immagine splash
		deve essere uguale alla proporzione
		tra i due valori width e height
		*/
		
		
		.project .splash {
			
			width: 100vw;
/* 			height: calc(100vh / 3 * 2); */
			height: 216px;
			
			background: var(--color-offwh);
	
			background-repeat: no-repeat;
		}


		.project .splash.sc0  {background-image: url(assets/projects/sc0/cover-page.jpg);}
		.project .splash.steno  {background-image: url(assets/projects/steno/cover-page.jpg);}
		.project .splash.stilo  {background-image: url(assets/projects/stilo/cover-page.jpg);}
		.project .splash.capo  {background-image: url(assets/projects/capo/cover-page.jpg);}
		.project .splash.muji  {background-image: url(assets/projects/muji/cover-page.jpg);}
		.project .splash.irori  {background-image: url(assets/projects/irori/cover-page.jpg);}	
		.project .splash.lunaria  {background-image: url(assets/projects/lunaria/cover-page.jpg);}
		.project .splash.waves  {background-image: url(assets/projects/waves/cover-page.jpg);}
		.project .splash.teatrino  {background-image: url(assets/projects/teatrino/cover-page.jpg);}
		.project .splash.larchitetto {background-image: url(assets/projects/larchitetto/cover-page.jpg);}
		.project .splash.dune {background-image: url(assets/projects/dune/cover-page.jpg);}
		.project .splash.unit {background-image: url(assets/projects/unit/cover-page.jpg);}
		.project .splash.mockmill {background-image: url(assets/projects/mockmill/cover-page.jpg);}
		.project .splash.project-14 {background-image: url(assets/projects/project-14/cover-page.jpg);}
		.project .splash.project-15 {background-image: url(assets/projects/project-15/cover-page.jpg);}
		.project .splash.project-16 {background-image: url(assets/projects/project-16/cover-page.jpg);}
		.project .splash.project-17 {background-image: url(assets/projects/project-17/cover-page.jpg);}
		.project .splash.project-18 {background-image: url(assets/projects/project-18/cover-page.jpg);}	
		.project .splash.project-19 {background-image: url(assets/projects/project-19/cover-page.jpg);}
		.project .splash.project-20 {background-image: url(assets/projects/project-20/cover-page.jpg);}
		.project .splash.project-21 {background-image: url(assets/projects/project-21/cover-page.jpg);}
		.project .splash.project-22 {background-image: url(assets/projects/project-22/cover-page.jpg);}
		.project .splash.project-23 {background-image: url(assets/projects/project-23/cover-page.jpg);}
		.project .splash.project-24 {background-image: url(assets/projects/project-24/cover-page.jpg);}
		
		
		.project .splash.CB {background-position: center bottom;}
		.project .splash.CC {background-position: center center;}
		.project .splash.CT {background-position: center top;}
		.project .splash.LB {background-position: left bottom;}
		.project .splash.LC {background-position: left center;}
		.project .splash.LT {background-position: left top;}
		.project .splash.RB {background-position: right bottom;}
		.project .splash.RC {background-position: right center;}
		.project .splash.RT {background-position: right top;}	
		
		
		@media screen and (orientation: portrait) {
			
			.project .splash {background-size: auto 100%;}
		}	
		
		@media screen and (orientation: landscape) {
			
			.project .splash {background-size: 100% auto;}
		}
		
		
	/* @end */



.project-index {
	
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 48px;
}









/* @group Carousel */
/* based on Owl Carousel 2 */


	.carousel-cnt {
	
		margin: 24px 0 0 0;	
	}


	.owl-stage-outer {
		
		margin: 0 24px;
		z-index: 100;
	}


	.carousel-cnt .owl-stage {
		
		padding: auto 92px;
	}


	.carousel-cnt .owl-nav {
		
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 0;
	}


	.carousel-cnt .carousel-itm {
		
		display: block;
		width: 100%;
		height: 100%;
	}


	/* nav */


	.carousel-cnt .owl-prev {

		top: 0;
		left: 32px;
		background: green;		
	}


	.carousel-cnt .owl-next {

		top: 0;
		right: 32px;
		background: green;		
	}


    .carousel-cnt .owl-nav img {
	    
		width: 44px;
    }


	.carousel-cnt .owl-nav .owl-prev,
	.carousel-cnt .owl-nav .owl-next {
	    
		outline: none;
		opacity: 1;
		transition: all 0.1s ease;
    }

    
	.carousel-cnt .owl-nav .owl-prev:hover,
	.carousel-cnt .owl-nav .owl-next:hover {

		background: none !important;
		outline: none !important;
		opacity: 0.5;
    }


	.carousel-cnt .owl-nav .owl-prev.disabled,
    .carousel-cnt .owl-nav .owl-next.disabled,
    .carousel-cnt .owl-nav .owl-prev.disabled:hover,
    .carousel-cnt .owl-nav .owl-next.disabled:hover {
	   
	   opacity: 0.1;  
    }
    
    
	/* dots */


	.carousel-cnt .owl-dots {
		
		height: 48px;
	}

	.carousel-cnt .owl-dots,
	.carousel-cnt .owl-dots button {

		margin-top: 0 !important;
		margin: 0 !important;
	}


	.carousel-cnt .owl-dot {
		
		outline: none;
	}
	
	.carousel-cnt .owl-dots .owl-dot span {
		
		width: 8px !important;
		height: 8px !important;
		margin: 20px 4px !important;
		background: #F0F0F0 !important;
	}
	
	.carousel-cnt .owl-dots .owl-dot.active span {
		
		background: #D0D0D0 !important;		
		
	}


	/* item dimension */


	.carousel-cnt .owl-item {
			
		width: calc(100vw - 48px) !important;
		height: calc((100vw - 48px)/16*9) !important;
		z-index: 100;
	}
	
	
	.carousel-cnt .carousel-itm {
		
/* 		display: block; */
			
/* 		background-color: var(--color-offwh); */
		background-position: center center;
		background-size: auto 100%;
		background-repeat: no-repeat;
		
		transition: all 0.1s ease;
	}
		
	
	.carousel-cnt .carousel-itm.sc0			{background-image: url('assets/projects/sc0/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.steno		{background-image: url('assets/projects/steno/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.stilo		{background-image: url('assets/projects/stilo/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.capo		{background-image: url('assets/projects/capo/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.muji		{background-image: url('assets/projects/muji/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.irori		{background-image: url('assets/projects/irori/cover-grid.jpg');}	
	.carousel-cnt .carousel-itm.lunaria		{background-image: url('assets/projects/lunaria/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.waves		{background-image: url('assets/projects/waves/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.teatrino	{background-image: url('assets/projects/teatrino/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.larchitetto	{background-image: url('assets/projects/larchitetto/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.dune		{background-image: url('assets/projects/dune/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.unit		{background-image: url('assets/projects/unit/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.mockmill 	{background-image: url('assets/projects/mockmill/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-14	{background-image: url('assets/projects/project-14/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-15	{background-image: url('assets/projects/project-15/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-16	{background-image: url('assets/projects/project-16/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-17 	{background-image: url('assets/projects/project-17/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-18 	{background-image: url('assets/projects/project-18/cover-grid.jpg');}	
	.carousel-cnt .carousel-itm.project-19 	{background-image: url('assets/projects/project-19/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-20 	{background-image: url('assets/projects/project-20/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-21 	{background-image: url('assets/projects/project-21/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-22 	{background-image: url('assets/projects/project-22/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-23 	{background-image: url('assets/projects/project-23/cover-grid.jpg');}
	.carousel-cnt .carousel-itm.project-24 	{background-image: url('assets/projects/project-24/cover-grid.jpg');}	

	
	.carousel-cnt .carousel-itm:hover {
		
		background-size: auto 101.5%;
	}
	
	
	.carousel-cnt .carousel-itm .over {
		
		width: 100%;
		height: 100%;
		background: rgba(250,250,250,0.8);
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		opacity: 0;
		transition: all 0.2s ease; 
	}	
	
/*
	.carousel-cnt .carousel-itm.active .over {
		background: rgba(0,0,0,0.6);
	}
	
	.carousel-cnt .carousel-itm.active .over * {
		
		color: white !important;
	}
*/
	
	.carousel-cnt .carousel-itm .over:hover,
	.carousel-cnt .carousel-itm.active .over {
		
		opacity: 1;
	}
/*
	
	.carousel-itm .over:hover ~ .carousel-itm.active .over {
	
		opacity: 0 !important;
	}
*/
	

	.carousel-cnt .carousel-itm .over p {
		
		margin-top: 2px;
		margin-bottom: 3px;
	}


	@media screen and (min-width: 768px) {
		
		.carousel-cnt .owl-item {
			
			width: calc((100vw - 48px - 16px)/2) !important;
			height: calc(((100vw - 48px - 16px)/2)/16*9) !important;
		}
	}
	
	
	@media screen and (min-width: 1024px) {
		
		.carousel-cnt .owl-item {
			
			width: calc((100vw - 48px - (16px * 2))/3) !important;
			height: calc(((100vw - 48px - (16px * 2))/3)/16*9) !important;
		}
	}

	
	@media screen and (min-width: 1280px) {
		
		.carousel-cnt .owl-item {
			
			width: calc((100vw - 184px - 16px * 3)/4) !important;
			height: calc(((100vw - 184px - 16px * 3)/4)/16*9) !important;
		}
	}


	@media screen and (min-width: 1280px) {
		
		
		.owl-nav {
			
			height: 100%;
			margin-top: 0 !important;
			padding: 0 32px;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		
		.owl-stage-outer {
		
			margin: 48px 92px;			
		}
    }


/* @end */
















































/* @group About */

.about .sub-itms {
	border-left: 1px dotted #DDDDDD;
	padding-left: 23px;
} 	


.about .itm {
	
	margin-top: 64px;
}


.about .itm:first-child {
	
	margin-top: 0;
}


.about .itm .logo {
	
	margin-bottom: 9px;
}


.about .itm .date {
	
	margin-bottom: 3px;
}


.about .itm .position {
	
	margin-bottom: 5px;
}	

.about .itm .description {
	
		margin-top: 12px;
}


.about .sub-itm .date {
	
/* 		padding-top: 16px; */
}	

.about .sub-itm .title {
	
	margin-top: 2px;
	margin-bottom: 8px;
}	

.about .sub-itm .info {
	
	margin-top: -1px;
}

.about .sub-itm .description {
	
/* 		margin-top: 10px; */
}




.about .sub-itm {
	
	padding: 10px 0;
	margin-top: 18px;
}



.about .sub-itm .description .lgrey {
	
	color: var(--color-lgrey) !important;
}

.about .sub-itm .description span {
	
	line-height: 28px;
}




.about section.work,
.about section.intro {
	
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	
	margin-top: 128px;
}


.about .left {

	width: 100%;
	max-width: 260px;
	max-height: 310px;
	margin-bottom: 32px;
	overflow: hidden;
}	


.about .right {

	width: 100%;
	max-width: 568px;
	margin-top: -7px;
}

@media screen and (min-width: 924px) {
	
	.about section.work,
	.about section.intro {
		
 		width: 972px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
}	


/* @group Layout */	
	

.about main {margin: 24px 0 64px 0;}

.about .intro {
	
	margin-top: 24px;
	margin-bottom: 64px;	
}


.about .intro .section-cnt {padding-bottom: 22px;}


.about .intro .section-ttl {
	
	min-width: 272px;
	min-height: 272px;
	width: 100%;
	height: calc(100vw - 48px);

	background-image: url(assets/images/avatar.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;	
	background-position: center;

	margin-bottom: 52px;
}


.about .mdl-section {

	max-width: 968px;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	flex-direction: row;
}	


.about .section-ttl {
	
	width: 280px;
	height: 100%;
	
	padding-top: 25px;
	padding-bottom: 30px;
	
	display: flex;
}	


.about .section-cnt {
		
	width: 592px;
}


.about .section-cnt div,
.about .section-cnt ul {
	
	padding-top: 28px;
	padding-bottom: 30px;
}


.about .sep {
	
/*
	width: 100%;
	height: 1px;
*/
/* 		background: var(--color-lgrey); */
	
/*
	margin-top: 36px;
	margin-bottom: 36px;
*/
}

	
/* @end */	


/* @group Responsive */


@media screen and (min-width: 640px) {
	
	
	.about main {margin: 64px auto;}


	.about .intro .section-ttl {
		
		width: 280px;
		height: 280px;
	}		
	
	.about .mdl-section {
		
		width: 640px;
	}
}	


@media screen and (min-width: 968px) {
	
	
	.about main {margin: 128px auto;}
	
	
	.about .intro {
		
		margin-top: 128px;
		margin-bottom: 100px;
	}
		
		
	.about .intro .section-ttl {margin-bottom: 0;}
	
	
	.about .mdl-section {
		
		width: 968px;
	}
}	


/* @end */


			










/* @end */








.backtohome {
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	/* height: 92px; */
	padding-top: 2px;
	margin-bottom: 26px;
	
}

.backtohome a {
	color: var(--color-blksh);
	transition: all 0.1s ease;
	/* box-shadow: 0px 1px 0px 0px #F0F0F0; */

}

.backtohome a:hover {
	
	opacity: 0.5;
}


@media screen and (min-width: 1280px) {
	
	.backtohome {
		padding-top: 0;
		margin-top: -10px;
		margin-bottom: 41px;
		
		font-family: var(--font-sns);
		font-weight: 300;
		font-size: 17px;
		line-height: 26px;
		font-style: normal;
		letter-spacing: normal;
		text-transform: none;
		
		text-align: left;	
		color: var(--color-blksh);

/*
		text-align: justify;			
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
*/		
	}
	
	
}

















/* @group Utilities */


	img {pointer-events: none;}
	
	video {object-fit: contain;}
	/* video {pointer-events: none;} */

	.unit video {background: #FAFAFA;}
	
	.lunaria video {pointer-events: auto !important;}
	
	
	.br-monly {display: inline;}
	.tx-monly {display: inline;}
	.br-donly {display: none;}
	.tx-donly {display: none;}
	
	
	@media screen and (min-width: 768px) {
		
		.br-monly {display: none !important;}
		.tx-monly {display: none !important;}
		.br-donly {display: inline !important;}
		.tx-donly {display: inline !important;}
	}


/* @end */







.avatar {
	
	width: 100%;
	height: 100%;
	/* margin-top: 4px; */
}



.table,
.table-itms {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}




.table-title,
.table-itms {
	width: 100%;
}

.table-col {
	width: 100%;
}

.table-title {
	font-weight: 900;
/* 	font-style: italic; */
	
	border-bottom: 1px solid var(--color-grey2);
	margin-top: -2px;
	margin-bottom: 16px;
}
.table-row {color: var(--color-blksh);}

.table-row.title {
	font-weight: 700;
	font-style: italic;
	
}

.table-col {
	margin-bottom: 16px;
}

.table-col:last-child {
	margin-bottom: 0px;
}



@media screen and (min-width: 612px) {
	
	.table,
	.table-itms {
		flex-direction: row;
	}
	
	.table-col.size1 {width: calc(100% / 4 * 1);}
	.table-col.size2 {width: calc(100% / 4 * 2);}
	.table-col.size3 {width: calc(100% / 4 * 3);}
	.table-col.size4 {width: calc(100% / 4 * 4);}
	.table-col.size5 {width: calc(100% / 4 * 5);}
	
	.table-row.title {
		margin-top: 0;
	}
}






.video .title,
.video .body,
.slide .title,
.slide .body {
	max-width: 414px; 
}

.video .title,
.slide .title {
	margin-top: -5px;
	margin-bottom: 13px;
}

.video .body,
.slide .body {
	margin-top: -5px;
	margin-bottom: calc(48px - 7px);
}


.slide img {
	border: 1px solid #EEEEEE;
}

.unit .video {margin-top: 96px;}
.unit .video, .slide {margin-bottom: 96px;}
.unit .slide:first-of-type {margin-top: 96px;}

.unit .video.mas {margin: 48px auto;}