@charset "utf-8";

@font-face {
  /*font-family:Syndicat;
  src: url(/layout/font-new/SyndicatGrotesk-Bold.woff) format("woff"),
  url(/layout/font-new/SyndicatGrotesk-Bold.woff2) format("woff2");
  font-weight:900;
  font-style:normal;*/
 
  font-family:Syndicat;
  src:url(/layout/font-20241028/SyndicatGrotesk-Bold.woff),
  url(/layout/font-20241028/SyndicatGrotesk-Bold.woff) format("woff"),
  url(/layout/font-20241028/SyndicatGrotesk-Bold.eot) format("opentype");
  font-weight:900;
  font-style:normal;

  /*src: local('Syndicat'), local('Syndicat'),
      url('/layout/font/SyndicatGrotesk-Bold.woff2') format('woff2'),
      url('/layout/font/SyndicatGrotesk-Bold.woff') format('woff'),
      url('/layout/font/SyndicatGrotesk-Bold.ttf') format('truetype'),
      url('/layout/font/SyndicatGrotesk-Bold.otf') format('opentype'),;
  font-weight: 900;
  font-style: normal;*/
  

}

*{
	margin:0;
	padding:0;
	border:0;
  box-sizing: border-box;
}
:root{
  /*--grid-template-column:repeat(6, 1fr);*/
  --grid-template-column:1fr repeat(6, minmax(20px, 1fr)) 1fr; /*295px*/
  --grid-gap:10px;

  --grid-template-column-content:repeat(6, minmax(20px, 1fr));

  /*--grid-template-column-overview:minmax(345px, 2fr) repeat(6, minmax(20px, 1fr));*/
  --grid-template-column-overview:repeat(8, minmax(20px, 1fr));

  --font-size-title:clamp(1.875rem, 4vw, 3.333rem);
  --font-size-title-overview:clamp(1.25rem, 4vw, 3.333rem);
  --font-size-additional:15px;
  --overlay-direction:-1;
  --base-color:#ff4e00;

  --page-space:50px;

  --breakpoint-s:576px;
  --breakpoint-m:1025px;
  --breakpoint-l:1025px;
  --breakpoint-xl:1200px;
}

html{
	font-size:24px;
  font-family:'Syndicat';
  font-feature-settings: "case";
  /*height:100%;*/

  @media (min-width: 1025px){
    font-size:24px;
  }

  &.overlay-open{
    overflow:hidden;

    content{
      &::after{
        content:'';
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:1;
        backdrop-filter: blur(5px);
        opacity:1;

      }
    }
  }
}

body{
  /*height:100%;*/
}
html,
body{
  /*height:100%;*/
}

html.is-changing .transition-main {
  transition: transform 400ms ease-in-out;
}

html.is-animating.is-leaving .transition-main {
  /*transform: translateY(calc(1 * 5vh * var(--overlay-direction, 1)));*/
}

html.is-animating.is-rendering .transition-main {
  /*transform: translateY(calc(-1 * 5vh * var(--overlay-direction, 1)));*/
}


/*.transition-overlay {
  position: fixed;
  top: 45px;
  left: 0;
  width:100%;
  height:calc(100% - 45px);
  //right: 0;
  //bottom: 0;
  z-index: 999;
  background-color: var(--base-color);
  opacity: 0;
  transform: translate3d(calc(-1 * 100% * var(--overlay-direction, 1)), 0, 0);
  pointer-events: none;
  transition: transform 500ms ease-in-out;
}

html.is-changing .transition-overlay {
  transition: transform 500ms ease-in-out;
  opacity: 1;
}

html.is-animating .transition-overlay {
  transform: translate3d(0, 0, 0);
}

html.is-rendering .transition-overlay {
  transform: translate3d(calc(var(--overlay-direction, 1) * 100%), 0, 0);
}

html.to-back {
   --overlay-direction: -1; 
}
   */

.transition-overlay{
  background-color: var(--base-color);
  position:fixed;
  left:100%;
  top:45px;
  /*height:calc(100% - 45px);*/
  height:100%;
  z-index:999;
  width:100%;
  pointer-events: none;
  transition: left 200ms ease-in-out;
}

/*custom tom*/
/*html content{
  opacity:1;
  transition: opacity 500ms ease-in-out;
}
html.animate-next content {
  opacity:0;
}*/

html.animate-default .transition-overlay{
  display:none;
}
html.animate-next .transition-overlay{
  transition: left 200ms ease-in-out;
  left:0;
}

html.animate-next-done .transition-overlay{
  transition: left 200ms ease-in-out;
  left:-100%;
}


body{
  /*font-size:1rem;*/
  font-size:clamp(0.5rem, 2vw, 1rem);
  color:#000000;
  overflow-x:hidden;
}

img{
  max-width: 100%;
  height:auto;
  display:block;
  transition:filter 0.3s ease;
  filter: grayscale(0);
   
  &.blackNwhite{
    
    &:hover{
      -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
      filter: grayscale(100%);
    }
  }
}

ul{
  list-style-type: none;
  padding:0;
  margin:0;

  &.list{

    li{
      display:flex;
    }
    .year{
      width:45px;
      flex-shrink:0;
      /*width:20%;*/
    }
  }
}

p + ul{
  margin-top:-10px;

  @media (min-width: 1025px){
    margin-top:-20px;
  }
}

a{
  color:#000000;
  text-decoration: none;
  transition:color 0.3s ease;

  &:hover{
    color:#ffffff;
  }
}
.about a{
  &:hover{
    color:#ff4e00;
  }
}

.page{
  max-width: 2560px;
  margin:0 auto;
}

.short-info{
  font-size:12px;

  @media (min-width: 1025px){
    font-size:var(--font-size-additional);
  }
}

header{
  display:grid;
  grid-template-columns: var(--grid-template-column-content);
  column-gap: var(--grid-gap);
  height:45px;
  background-color:#000000;
  align-items: center;
  padding:0 5px;

  position:fixed;
  top:0;
  left:0;
  z-index:99;


  @media (min-width: 1025px){
    position:relative;
    top:auto;
    left:auto;
    padding:0 var(--page-space);

  }

  #logo{
    grid-column: 1 / 3;
    text-transform: uppercase;
    color:#ffffff;

    @media (min-width: 1025px){
      grid-column: 1 / 2;
    }

    > a {
      color:#ffffff;
    }
  }
  #nav{
    grid-column:6 / span 2;
    display:flex;
    justify-content: flex-end;
    text-transform: uppercase;
    color:#ffffff;
    
    a{
      color:#ffffff;
      transition:color 0.3s ease;
      margin-left:30px;

      @media (min-width: 1025px){
        margin-left:50px;
      }

      &.active{
        color:var(--base-color);
      }
    }
  }
}

.overview{
  header{
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    z-index:99;
  }
  content{
    overflow:hidden;
    .inner{
      padding-top:45px;
      overflow:hidden;
    }
    
  }
}

.project{
  grid-template-columns: var(--grid-template-column-overview);
  column-gap:var(--grid-gap);
  display:grid;
  padding:0 var(--page-space);
  align-items:flex-end;

  &:last-child{
    .title{
      margin-bottom:0;
    }
  }

  .image{
    grid-column:1 / 9;
    filter:grayscale(0);
    transition:filter 0.3s ease;
    margin-left:-50px;
    margin-right:-50px;

    @media (min-width: 900px){
      grid-column:1 / 3;
      margin-right:0;
    }
  }

 

  .texts{
    grid-column: 1 / span 8;
    display:flex;
    flex-wrap: wrap;
    align-items: flex-end;

    @media (min-width: 900px){
      grid-column: 3 / span 6;
    }


    .short-info{
      display:none;
      grid-template-columns: repeat(6, 1fr);
      column-gap: var(--grid-gap);
      width:100%;

      @media (min-width: 900px){
        display:grid;
      }

      .info-1{
        grid-column: span 2;
      }
      .info-2{
        grid-column: span 2;
      }
      .info-3{
        grid-column: span 1;
      }
    }
  }
  

  .short-info{
    grid-column: 3 / 7;
    grid-row:1;
    display:grid;
    grid-template-columns: subgrid;
    /*font-size:var(--font-size-additional);*/
    align-items: flex-end;
    /*margin-bottom:100px;*/
    transition:color 0.3s ease;

  }

  .title{
    /*grid-column: 1 / 7;*/
    font-size:var(--font-size-title-overview);
    line-height: 88%;
    text-transform: uppercase;
    grid-row:1;
    display:flex;
    align-items: flex-end;
    transition:color 0.3s ease;
    font-family: Syndicat;
    font-weight:900;
    margin-bottom:2rem;
    margin-left:-50px;

    @media (min-width: 900px){
      margin-bottom:0;
      margin-left:0;
    }
    
  }

  &:hover{
    .image{
      filter: grayscale(100%);
    }
    .short-info,
    .title{
      color:var(--base-color);
    }
  }
}

.aboutContent{
  grid-template-rows: auto 1fr;
  display:grid;
  height:100vh;

  @media (min-width: 1025px){
    height:calc(100vh - 45px);
  }

}

.about{
  grid-template-columns: var(--grid-template-column);
  column-gap:var(--grid-gap);
  display:grid;
  height:auto;
  padding-top:45px;
  grid-row:1;

  @media (min-width: 1025px){
    padding-top:0;
  }

  @media (min-width: 1470px){
    /*height:50vh;*/
    
  }
  
  .image{
    grid-column: span 8;
    margin-bottom:30px;

    @media (min-width: 576px){
      grid-column: span 4;
    }

    @media (min-width: 1470px){
      grid-column:1 / 3;
      margin-bottom:0;
    }
  }

  .info{
    font-size:var(--font-size-additional);
    line-height:126%;
    margin-left:5px;
    margin-right:5px;

    @media (min-width: 1470px){
      margin-left:0;
      margin-right:0;
    }


    &.info-1{
      grid-column: span 8;
      margin-bottom:30px;
      

      @media (min-width: 576px){
        grid-column: span 4;
        margin-top:2px;
      }

      @media (min-width: 1470px){
        grid-column:3 / span 1;
        margin-bottom:0;
        margin-top:0;
      }

      
    }
    &.info-2{
      grid-column: span 8;
      margin-bottom:30px;

      @media (min-width: 576px){
        grid-column: span 4;
      }

      @media (min-width: 1470px){
        grid-column:4 / span 2;
        margin-bottom:0;
      }
    }
    &.info-3{
      grid-column: span 8;
      margin-bottom:30px;

      @media (min-width: 576px){
        grid-column: span 4;
      }

      @media (min-width: 1470px){
        grid-column:6 / span 2;
        margin-bottom:0;
      }
      
    }

    &.info-4{
      grid-column: span 8;
      margin-bottom:30px;

      @media (min-width: 576px){
        grid-column: span 4;
      }

      @media (min-width: 1470px){
        grid-column:9 / span 1;
        margin-bottom:0;
      }
      
    }

    p{
      margin-bottom:10px;

      @media (min-width: 1025px){
        margin-bottom:20px;
      }
    }
  }
}

.claim{
  grid-template-columns: var(--grid-template-column);
  column-gap:var(--grid-gap);
  display:grid;
  align-content: end;
  height:auto;
  grid-auto-rows:min-content;
  grid-row:2;

  @media (min-width: 800px){
    /*height:calc(50vh - 45px);*/
  }

  .short-info{
    grid-column: span 8;
    display:grid;
    grid-template-columns: subgrid;
    /*font-size:var(--font-size-additional);*/
    justify-items: center;


    .info-1,
    .info-3{
      grid-column: span 3;

      @media (min-width: 1470px){
        grid-column: initial;
      }

      
    }

    .info-2{
      grid-column: span 2;

      @media (min-width: 1470px){
        grid-column: initial;
      }
      
    } 

    @media (min-width: 1470x){
      grid-column: 2 / 8;
      justify-items: initial;
    }
  }

  .text{
    grid-column: 1 / 9;
    /*font-size:2.3333rem;*/
    font-size:clamp(1.25rem, 4vw, 2.333rem);
    line-height:100%;

    &.upper {
      text-transform: uppercase;
      margin-left:2px;
    }

    span{
      color:#ff4e00;
    }
  }

  .PS{
    /*grid-column: 3 / span 4;*/
    grid-column:span 8;
    font-size: var(--font-size-additional);
    color:#ff4e00;
    /*text-align: center;*/
    /*margin-bottom:20px;*/
    padding:0 2px;

    @media (min-width: 1025px){
      grid-column:span 6;
    }
  }
  
}

.project-detail{
  content{
    
    display:block;
    overflow:hidden;
    margin-top:45px;

    @media (min-width: 1025px){
      margin-top:0;
      height:calc(100svh - 45px);
    }
  }
  .swiper,
  .swiper-photo{
    /*height:70%;*/
    width:100%;
    position:relative;
    background:black;

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    @media (min-width: 1025px){
      height:70%;
    }


    

    .swiper-slide{
      width: fit-content;
      height: 100%;
      position: relative;
      transition-property: transform;
      flex-shrink: 0;
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      backface-visibility: hidden;
      background:black;
      

      img{
        height:auto;
        max-width: 100%;

        @media (min-width: 960px){
          min-width:1024px;
        }

        @media (min-width: 1025px){
          max-height:100%;
          max-width: none;
          width:auto;
          min-width:initial;

        }
      }

      video{
        object-fit:contain;
        width:100%;
        height:100%;

        @media (min-width: 1025px){
          width:auto;
        }
      }
    }
  }

  .swiper-photo{
    height:100%;
    overflow:hidden;
    opacity:1;

    @media (min-width: 1025px){
      opacity:0;
    }

    &.show{
      opacity:1;
    }

    .swiper-slide{
      background-color:#000000;
      display:flex;
      justify-content: center;
      overflow:hidden;
    }

    .swiper-pagination-photos{
      position:absolute;
      bottom:0;
      right:5px;
      z-index:999;
      display:flex;
      justify-content: flex-end;
      color:#ffffff;
      font-size:var(--font-size-additional);

    }
  }

  .info{
    height:70%;
    grid-template-columns: var(--grid-template-column-content);
    column-gap:var(--grid-gap);
    display:grid;
    background-color:var(--base-color);
    padding:0 5px;
    align-items: start;

    position:fixed;
    bottom: 0;
    left:0;
    width: 100%;
    z-index:1;
    transform:translateY(100%);
    transition:transform 0.3s ease;

    @media (min-width: 600px){
      height:30%;
    }

    
    @media (min-width: 1025px){

      height:30%;
      position:relative;
      bottom:auto;
      left:auto;
      transform: none;

      padding:0 var(--page-space);
    }

    


    .closer{
      opacity:0;
      transition:opacity 0.3s ease;
      display:none;
    }

    .opener{
      display:block;
      width:25px;
      height:25px;
      position:absolute;
      top:-35px;
      left:50%;
      margin-left:-12px;
      background-image:url(/layout/img/plus.svg);
      cursor:pointer;
      opacity:0;
      transition:opacity 0.3s ease;

      
      &.show{
        opacity:1;
      }

      

      @media (min-width: 1025px){
        display:none;
      }
    }

    &.active{
      transform:translateY(0);
      z-index:2;

      .opener{
        opacity:0;
      }

      .closer{
        display:block;
        position:fixed;
        /*top:-100px;
        left:50%;
        width: 100px;
        height: 100px;*/
        top:-40%;
        left:0;
        width: 100%;
        height:40%;
        margin-left:0;
        /*background:green;*/
        /*margin-left:-50px;*/
        /*mix-blend-mode: difference;*/
        /*background-image:url(/layout/img/plus.svg);
        transform:rotate(45deg) translateX(-50%);*/
        opacity:1;
        /*backdrop-filter: blur(5px);*/

        &::after{
          content:'';
          position:absolute;
          bottom:25px;
          left:50%;
          width: 25px;
          height: 25px;
          background-image:url(/layout/img/plus.svg);
          transform:rotate(-45deg);
          margin-left:-12px;
        }
      }
    }

    &.thumbnails{
      background-color:#000000;

      .title{
        color:#ffffff;
        align-content: end;
      }
    }

    .short-info{
      grid-column: 1 / 7;
      display:grid;
      grid-template-columns: subgrid;

      .info-1{
        grid-column:1 / span 3;

        @media (min-width: 1025px){
          grid-column:1 / span 1;
        }

      }
      .info-2{
        grid-column:4 / span 3;

        @media (min-width: 1025px){
          grid-column:2 / span 1;
        }
      }
      .info-3{
        grid-column:1 / span 3;

        @media (min-width: 1025px){
          grid-column:3 / span 1;
        }
      }
      .info-4{
        grid-column:4 / span 3;

        @media (min-width: 1025px){
          grid-column:4 / span 1;
        }
      }
      .info-5{
        display:none;

        @media (min-width: 1025px){
          grid-column:6 / span 1;
          display:flex;
          justify-content:flex-end;
          margin-right:-45px;
        }
      }
    }

    .text{
      grid-column: 1 / 7;
      font-size:0.833333rem;
  
      @media (min-width: 1025px){
        grid-column: 2 / 7;
        font-size:clamp(0.5rem, 1.75vw, 1rem);
      }


      .small{
        font-size:12px;
        margin-top:4px;

        @media (min-width: 1025px){
          font-size:var(--font-size-additional);
        }
      }
      
    }
    .title{
      grid-column: 1 / 7;
      text-transform: uppercase;
      font-size: var(--font-size-title);
      margin-left:-4px;
      line-height:88%;
      align-self:end;
      margin-bottom:1px;

      @media (min-width: 1025px){
        margin-left:-49px;
        
      }
    }

    
  }
}

.thumbs{
  display:flex;
  flex-wrap:wrap;
  background-color:#000000;

  .thumb{
    img{
      max-height:200px;
    }
    
  }
}