html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0,0,0,0); 
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
* {
-webkit-tap-highlight-color: rgba(0,0,0,0); }
body {
-webkit-touch-callout: none; -webkit-text-size-adjust: none;  } img{
max-width: 100%;
height: auto;
}
svg{
width: 100%;
height: auto;
} :root {
--nero:  #000000;
--gutter:  12px;
--header-min-height: 83px;
--delay1: .3s;
--delay2: .6s;
--delay3: .9s;
}
body{
font-family: 'Akzidenz-Grotesk Next';
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 1.2;
overflow: hidden;
display: flex;
flex-direction: column;
height: 100dvh;
padding: 12px;
}
a{
text-decoration: none;
color: var(--nero);
}
a[href*="instagram.com"],
a[href*="facebook.com"]{
line-height: 1.6;
}
a[href*="instagram.com"]::before,
a[href*="facebook.com"]::before {
content: "";
display: inline-block;
width: 1.1em;
height: 1.1em;
margin-right: .3em;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDU5Ny42IDU5Ny41Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjguNy42LCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMS4yLjAgQnVpbGQgMTg4KSAgLS0+CiAgPGc+CiAgICA8ZyBpZD0iQ2FtYWRhXzEiPgogICAgICA8Zz4KICAgICAgICA8cGF0aCBkPSJNNDU3LjUsMTEwYy0yMCwwLTM1LDE1LTM1LDM1czE1LDM1LDM1LDM1LDM1LTE1LDM1LTM1YzAtMjAtMTUtMzUtMzUtMzVaIi8+CiAgICAgICAgPHBhdGggZD0iTTMwMCwxNTVjLTgyLjUsMC0xNDcuNSw2Ny41LTE0Ny41LDE0Ny41czY3LjUsMTQ3LjUsMTQ3LjUsMTQ3LjUsMTQ3LjUtNjcuNSwxNDcuNS0xNDcuNS02NS0xNDcuNS0xNDcuNS0xNDcuNVpNMzAwLDM5Ny41Yy01Mi41LDAtOTUtNDIuNS05NS05NXM0Mi41LTk1LDk1LTk1LDk1LDQyLjUsOTUsOTUtNDIuNSw5NS05NSw5NVoiLz4KICAgICAgICA8cGF0aCBkPSJNNDIwLDBoLTIzNy41QzgwLDAsMCw4MCwwLDE4MHYyMzcuNWMwLDEwMCw4MCwxODAsMTgwLDE4MGgyMzcuNWMxMDAsMCwxODAtODAsMTgwLTE4MHYtMjM3LjVDNjAwLDgwLDUyMCwwLDQyMCwwWk01NDIuNSw0MjBjMCw2Ny41LTU1LDEyNS0xMjUsMTI1aC0yMzcuNWMtNjcuNSwwLTEyNS01NS0xMjUtMTI1di0yMzcuNWMwLTY3LjUsNTUtMTI1LDEyNS0xMjVoMjM3LjVjNjcuNSwwLDEyNSw1NSwxMjUsMTI1djIzNy41WiIvPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin-top: -2px;
}
a[href*="facebook.com"]::before {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDU5Ny42IDU5Ny41Ij4KICA8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMjguNy42LCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogMS4yLjAgQnVpbGQgMTg4KSAgLS0+CiAgPGc+CiAgICA8ZyBpZD0iQ2FtYWRhXzEiPgogICAgICA8cGF0aCBkPSJNNDYwLjQuMWgtODkuOGMtODcuMS0uMS0xNDMuMyw1Ny42LTE0My4zLDE0N3Y2Ny44aC05MC4xdjEyMi42aDkwLjF2MjYwYy0uMSwwLDEyNS45LDAsMTI1LjksMHYtMjYwaDEwMy41di0xMjIuNmgtMTAzLjR2LTU3LjVjMC0yNy42LDYuNS00MS42LDQyLjUtNDEuNmg2NC4zcy4zLTExNS42LjMtMTE1LjZoMFoiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
}
strong{
font-weight: normal;
}
em{
font-style: italic;
}
header{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
column-gap: var(--gutter);
min-height: var(--header-min-height);
position: relative;
}
#logo{
position: fixed;
z-index: 10;
top: 12px;
left: 12px;
width: 110px;
}
#menu{
font-size: 20px;
background: #fff;
position: fixed;
height: 100dvh;
width: 100%;
inset: 0;
padding: 12px;
z-index: 5;
overflow: hidden;
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}
#menu.show-menu-start,
#menu.show-menu{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gutter);
opacity: 1;
pointer-events: auto;
}
.column-menu .column-title,
.column-menu .column-title::after,
.column-menu .menu a,
.column-menu .menu .sub-menu a{
opacity: 0;
color: #fff;
transition-property: opacity, color;
transition-duration: .5s, .5s;
}
.animation-start .column-menu .column-title{
opacity: 1;
color: #000;
transition-delay: 1s, 5s;
}
.animation-start .column-menu .column-title::after{
opacity: 1;
transition-delay: 1s;
}
.animation-start .column-menu .menu a{
opacity: 1;
color: #b2b2b2;
transition-delay: 2s, 5s;
}
.animation-start .column-menu .menu .sub-menu a{
opacity: 1;
color: #b2b2b2;
transition-delay: 3s, 5s;
}
.show-menu .column-menu .column-title,
.show-menu .column-menu .column-title::after,
.show-menu .column-menu .menu a,
.show-menu .column-menu .menu .sub-menu a{
transition: none;
transition-delay: 0, 0;
} #menu .column-title{
text-align: center;
padding-top: 38px;
display: block;
}
#menu .column-title::after {
content: '';
height: calc((100dvh - var(--header-min-height)) / 3);
width: 8px;
display: block;
background: var(--nero);
margin: 1.8vh auto 0;
}
#menu .menu{
display: grid;
grid-template-columns: repeat(2, 50%);
}
#menu #menu-info.menu{
display: grid;
grid-template-columns: 1fr 1fr 2fr;
}
#menu .menu li a {
display: block;
height: calc((100dvh - var(--header-min-height)) / 3);
padding-left: 5px;
border-left: 4px solid var(--nero);
}
#menu .menu li .sub-menu {
display: flex;
flex-direction: column-reverse;
transform: rotate(90deg) translateY(calc(-100% - 1px));
transform-origin: left top;
}
#menu .menu li.menu-item-20 .sub-menu{
transform: rotate(90deg) translateY(calc(-100% + 1px));
}
#menu .menu li .sub-menu li{
width: calc((100dvh - var(--header-min-height)) / 3 - 20px);
}
#menu .menu li .sub-menu li a{
border-left: none;
height: auto;
padding-left: 0;
border-bottom: 2px solid var(--nero);
padding-top: 2vw;
}
#menu .menu li.menu-item-23 .sub-menu {
grid-template-columns: repeat(4, 1fr);
} .menu-item-17 a,
.menu-item-20 a,
.menu-item-67 a{
margin-left: -2px;
}
nav.main-nav{
grid-column: 2 / span 1;
grid-row: 1;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: var(--gutter);
}
#menu-index{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gutter);
font-size: 20px;
text-align: center;
grid-column: 1 / span 3;
grid-row: 2;
padding: 24px 0;
}
#menu-index a{
opacity: .3;
pointer-events: auto;
}
.page-template-template-archive-php #menu-index{
display: none;
}
main{
flex-grow: 1;
overflow: hidden;
opacity: 0;
transition: all .5s;
}
.animation-start main{
opacity: 1;
}
#main-index{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gutter);
}
.main-column{
height: 100%;
overflow-y: hidden;
}
.scroll-column{
height: 100%;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.scroll-column::-webkit-scrollbar{
display: none;
}
.main-column .active,
#menu-index a.active-title{
opacity: 1;
} #column-studio .about-image{
width: 50%;
background: #eee;
}
#column-studio .about-image img{
display: block;
}
#column-studio .wp-block-columns{
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: var(--gutter);
border-top: 1px solid var(--nero);
margin-top: 12px;
padding-top: 3px;
align-content: start;
}
#column-studio .wp-block-columns .wp-block-column:first-child{
grid-column: 2 / 3;
}
#column-studio .wp-block-columns .wp-block-column:last-child{
grid-column: 3 / span 6; }
.read-more-link{
padding-top: 1em;
text-transform: uppercase;
display: inline-block;
} #column-info{
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: var(--gutter);
align-content: start;
}
#column-info .wp-block-columns{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--gutter);
border-top: 1px solid var(--nero); padding-top: 3px;
grid-column: 3 / span 6;
}
.wp-block-columns p{
hyphens: auto;
}
#column-info .wp-block-columns .wp-block-column:first-child{
grid-column: 1 / 1;
}
#column-info .wp-block-columns .wp-block-column:last-child{
grid-column: 2 / span 5;
}
#column-info article.type-post{
margin-bottom: 12px;
border-top: 1px solid var(--nero);
padding-top: 3px;
}
#column-info article.type-post:first-of-type{
border-top: none;
padding-top: 0;
}
#column-info article .has-content{
cursor: pointer;
}
#column-info article .post-content{
display: none;
padding-top: 3px;
width: 50%;
} #column-info article.category-rassegna-stampa:nth-of-type(-n+3) .post-content{
display: block;
}
#column-info article.post-loadmore{
opacity: 0;
animation: fadeIn .2s ease-in forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
#column-info .btn-loadmore{
text-transform: uppercase;
cursor: pointer;
}
#column-info article .post-content-news{
width: 100%;
}
#column-info article .post-content-news .post-thumbnail,
#column-info article .post-content-rassegna-stampa{
width: 30%;
}
#column-info article .post-content.show-content{
display: block;
}
#rassegna-stampa{
padding-bottom: 40px;
} article.progetto{
margin-bottom: 20px;
}
article.progetto dl,
.single-progetto dl{
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: var(--gutter);
border-top: 1px solid var(--nero);
font-size: 14px;
line-height: 1.4;
}
.single-progetto dl{
border-top: 1px solid #fff;
}
article.progetto dt,
.single-progetto dt{
grid-column: 1 / span 2;
}
article.progetto dd,
.single-progetto dd{
grid-column: 3 / span 6;
}
article.progetto dd a,
.single-progetto dd a{
font-style: italic;
}
article.progetto .index,
.single-progetto .index{
font-size: 42px;
line-height: 1;
} #column-progetti-thumbnail{
position: fixed;
height: 100dvh;
width: calc(100vw / 24 * 2);
top: 0;
left: calc(100vw / 3 * 2 - (var(--gutter) / 2) );
}
#column-progetti-thumbnail img{
position: relative;
display: block;
transform-origin: 0 0;
transform: scale(1);
opacity: 1;
max-width: 75%;
transition: all .3s;
}
#column-progetti-thumbnail .img-size-1 img{
max-width: 45%;
} #main-archive #progetti{
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: var(--gutter);
padding-bottom: 40px;
}
#main-archive .progetto{
background: #fff;
display: block;
position: relative;
aspect-ratio: 3 / 4;
}
#main-archive .progetto .progetto-thumb{
position: absolute;
top: 0;
height: 100%;
overflow: hidden;
visibility: hidden;
}
#main-archive .progetto.img-hover .progetto-thumb{
visibility: visible;
}
#main-archive .progetto .progetto-thumb img{
display: block;
} .back-index{
position: fixed;
top: 12px;
left: calc(84px + var(--gutter));
z-index: 10;
}
.back-index{
display: none;
}
.single-progetto{
background: var(--nero);
color: #fff;
}
.single-progetto a{
color: #fff;
}
.single-progetto #logo svg{
fill: #fff;
}
#main-single{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gutter);
}
#column-progetto-current{
position: relative;
overflow: hidden;
}
#project-details{
position: absolute;
top: 0;
left: 0;
right: 0;
background: var(--nero);
z-index: 1;
}
nav#project-details-nav{
display: flex;
justify-content: space-between;
padding: 2px 0;
}
#project-details-wrap{
display: none;
height: calc(100dvh - 42px);
overflow: hidden;
}
#project-details-wrap.open{
display: block;
}
#project-details-wrap-inside{
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
#project-details-content{
flex:  1;
overflow-y: auto;
scrollbar-width: none;
padding-bottom: 40px;
}
#project-details-open span{
font-size: 16px;
line-height: 20px;
}
#project-details-close{
font-size: 20px;
line-height: 20px;
}
#project-details-open{
font-size: 14px;
line-height: 20px;
}
#project-gallery-thumbnail{
padding: 15px 0;
display: grid;
grid-template-columns: repeat(7, 1fr);
column-gap: var(--gutter);
row-gap: 3px;
}
#project-content{
padding-bottom: var(--gutter);
}
#project-content .wp-block-columns:first-of-type{
margin-top: 1em;
}
#project-content p{
hyphens: auto;
}
#project-gallery{
position: relative;
}
#project-gallery img{
margin-bottom: var(--gutter);
}
#project-gallery img:last-child{
margin-bottom: 0;
}
#column-progetto-next,
#column-progetto-prev{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.info-progetto-adjacent{
border-top: 1px solid #fff;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: var(--gutter);
font-size: 15px;
padding-top: 6px;
}
.info-progetto-adjacent h5{
grid-column: 1 / span 2;
font-size: 42px;
line-height: .8;
}
.gallery-progetto-adjacent{
width: calc(100% / 8 - 12px);
left: 0;
position: absolute;
bottom: 50px;
transform-origin: bottom left;
transform: scale(1);
transition: all .3s;
}
#gallery-prev.gallery-progetto-adjacent{
transform-origin: bottom right;
left: auto;
right: 0;
}
#progetti-adjacent{
display: none;
}  @media (hover: hover) { 
.main-column > *,
.no-hover .main-column > *:not(.active):hover{
opacity: .3;
transition: all .3s;
}
.main-column > *:hover{
opacity: 1;
}
#column-progetti-thumbnail img:hover{
transform: scale(1.4);
z-index: 2;
opacity: 1;
}
.gallery-progetto-adjacent:hover{
transform: scale(1.4);
}
.animation-end-hover .column-menu .menu a,
.show-menu .column-menu .menu a{
transition: none;
transition-delay: 0, 0;
color: #b2b2b2;
}
.column-menu .menu a:hover,
.animation-end-hover .column-menu .menu a:hover,
.show-menu .column-menu .menu a:hover{
color: #000;
}
}  @media only screen and (max-width: 1679px){
#main-archive #progetti{
grid-template-columns: repeat(6, 1fr);
}
} @media only screen and (max-width: 1199px){
} @media only screen and (max-width: 991px){
} @media only screen and (max-width: 767px) {
.logo-testo{
display: none;
}
#logo{
width: 130px;
}
#column-progetti-thumbnail{
display: none;
}
header{
display: block;
}
#menu-index{
display: block;
padding: 0;
width: 30%;
margin: 0 auto;
}
#menu-index a{
pointer-events: auto;
display: block;
}
.main-column,
.home #column-menu-progetti,
.archive #column-menu-progetti,
.page-id-2 #column-menu-studio,
.page-id-14 #column-menu-info{
opacity: 1;
}
.home #column-menu-progetti.disabled,
.archive #column-menu-progetti.disabled,
.page-id-2 #column-menu-studio.disabled,
.page-id-14 #column-menu-info.disabled{
opacity: .3;
}
nav.main-nav{
position: absolute;
top: 0;
right: 0;
display: flex;
z-index: 5;
}
#btn-menu,
#menu .column-menu,
.home #column-studio,
.home #column-info,
.archive #column-studio,
.archive #column-info,
#column-progetto-prev,
#column-progetto-next,
.page-id-2 #column-progetti,
.page-id-2 #column-info,
.page-id-14 #column-progetti,
.page-id-14 #column-studio{
display: none;
}
#menu .column-menu{
height: 100%;
}
#menu .column-menu.active{
display: block;
}
#menu{
height: calc(100dvh - var(--header-min-height));
inset: auto;
left: 0;
right: 0;
top: var(--header-min-height);
}
#menu.show-menu-start,
#menu.show-menu{
display: block;
}
#menu .column-title{
padding-top: 0;
font-size: 0;
pointer-events: none;
}
#menu .menu li .sub-menu li {
width: calc((100dvh - var(--header-min-height)) / 3 - 32px);
}
.show-menu .column-menu .menu a.link-hover{
color: #000;
}
main#main-index,
#main-single{
display: block;
}
article.progetto dd, .single-progetto dd {
grid-column: 5 / span 8;
}
#main-archive #progetti{
grid-template-columns: repeat(3, 1fr);
}
.single-progetto #logo{
display: none;
} .single-progetto{
padding: 0;
}
#column-progetto-current{
margin-top: 12px;
height: 100dvh;
overflow: hidden;
}
#project-details{
padding: 0 12px;
}
#project-gallery{
padding: 0 12px;
padding-bottom: 140px;
}
article.progetto:last-child,
#column-info .wp-block-columns:last-child,
#project-content {
margin-bottom: 140px;
}
#progetti-adjacent{
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: end;
margin-top: -60px;
}
#progetti-adjacent .progetto-adjacent-prev h6{
padding-left: 12px;
}
#progetti-adjacent .progetto-adjacent-prev{
position: relative;
left: -12px;
}
#progetti-adjacent .progetto-adjacent-next{
grid-column: 6 / span 1;
position: relative;
right: -12px;
}
#progetti-adjacent .progetto-adjacent-next h6{
text-align: right;
padding-right: 12px;
}
#progetti-adjacent img{
transform: scale(1);
transform-origin: bottom;
transition: all .3s;
}
#progetti-adjacent.in-view img{
transform: scale(1.4);
transition-delay: .3s;
}
#column-studio .about-image{
width: 100%;
}
#column-info{
display: block;
}
#column-studio .wp-block-columns,
#column-info .wp-block-columns{
grid-template-columns: repeat(6, 1fr);
}
#column-studio .wp-block-columns .wp-block-column:first-child,
#column-info .wp-block-columns .wp-block-column:first-child{
grid-column: 1 / 1;
}
#column-studio .wp-block-columns .wp-block-column:last-child,
#column-info .wp-block-columns .wp-block-column:last-child{
grid-column: 2 / span 5;
}
#column-info .wp-block-columns{
margin-top: 12px;
}
} @media only screen and (max-width: 567px){
} @font-face {
font-family: 'Akzidenz-Grotesk Next';
src: url(//www.studiocale.it/wp-content/themes/mm-cale/font/AkzidGrtskNext-Med.eot);
src: url(//www.studiocale.it/wp-content/themes/mm-cale/font/AkzidGrtskNext-Med.eot?#iefix) format('embedded-opentype'),
url(//www.studiocale.it/wp-content/themes/mm-cale/font/AkzidGrtskNext-Med.woff2) format('woff2'),
url(//www.studiocale.it/wp-content/themes/mm-cale/font/AkzidGrtskNext-Med.woff) format('woff'),
url(//www.studiocale.it/wp-content/themes/mm-cale/font/AkzidGrtskNext-Med.ttf) format('truetype'),
url(//www.studiocale.it/wp-content/themes/mm-cale/font/AkzidGrtskNext-Med.svg#AkzidGrtskNext-Med) format('svg');
font-weight: 500;
font-style: normal;
font-display: auto;
}