/*
Theme Name: Studio Cale 
Description: Web site
Author: ss16 - M/M
Author URI: http://www.michelemargiotta.it
Version: 1.0
Tags: website

*/
/*================================
=            DEFAULT             =
================================*/

/*==========  Eric Meyer's Reset  ==========*/
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}

/*----------  BORDER-BOX RESET  ----------*/
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); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
/*   -webkit-user-select: none;  */
}

/*==========  RESPONSIVE  ==========*/
img{
	max-width: 100%;
	height: auto;
}
svg{
  width: 100%;
  height: auto;
}

/*----------  BASIC  ----------*/
: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;
}
/* .animation-start .column-menu .menu a{
  opacity: 1;
  color: #000;
  transition-delay: 2s, 6s;
}
.animation-start .column-menu .menu .sub-menu a{
  opacity: 1;
  color: #000;
  transition-delay: 3s, 6s;
} */



#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 .menu li .sub-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
#menu .menu li .sub-menu li a{
  border-left: 2px solid var(--nero);
}
#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;
}


/* Studio Index */
#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;
  /* padding-bottom: 40px; */
}
.read-more-link{
  padding-top: 1em;
  text-transform: uppercase;
  display: inline-block;
}

/* Info Index */
#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);
  /* margin-bottom: 12px; */
  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%;
}

/*post loadmore*/
#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;
}

/* Progetti Index */
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;
}

/* Info Index */
#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%;
}


/* ARCHIVIO */

#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;
}

/* SINGLE */
.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;
}



/*========================================
=            GUTENBERG EDITOR            =
========================================*/



/* STATUS HOVER */
@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 QUERY            =
===================================*/

/*---Desktop Medium---*/
@media only screen and (max-width: 1679px){
  #main-archive #progetti{
    grid-template-columns: repeat(6, 1fr);
  }
}

/*---Tablet Landscape---*/
@media only screen and (max-width: 1199px){
  
}

/*---Tablet Portraint---*/
@media only screen and (max-width: 991px){
  
}
/*---Smartphone Landscape Mini-tablet---*/
@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;
  }
  /* .back-index{
    display: inline;
  } */
  .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;
  }
}

/*---Smartphone Portrait---*/
@media only screen and (max-width: 567px){

}




/*=================================
=            FONT-FACE            =
=================================*/
@font-face {
    font-family: 'Akzidenz-Grotesk Next';
    src: url('font/AkzidGrtskNext-Med.eot');
    src: url('font/AkzidGrtskNext-Med.eot?#iefix') format('embedded-opentype'),
        url('font/AkzidGrtskNext-Med.woff2') format('woff2'),
        url('font/AkzidGrtskNext-Med.woff') format('woff'),
        url('font/AkzidGrtskNext-Med.ttf') format('truetype'),
        url('font/AkzidGrtskNext-Med.svg#AkzidGrtskNext-Med') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: auto;
}