body, html {
  background: var(--background-color);
  transition: 1s background;
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  padding: 0px;
  margin: 0px;
  cursor: url(../img/circle-hollow.svg) 12.5 12.5, auto; }

a:hover {
  cursor: url(../img/circle-fill.svg) 12.5 12.5, auto; }

body.detail {
  background: var(--background-color); }
body #content-wrapper .text-block {
  /*transition: filter 0.175;*/ }
body.scroll-disabled {
  width: 100%;
  position: fixed;
  overflow-y: scroll;
  /*padding-right:10px;*/ }
  body.scroll-disabled.mobile {
    overflow-y: hidden; }
  body.scroll-disabled #content-wrapper .text-block, body.scroll-disabled #content-wrapper .portfolio-list, body.scroll-disabled #content-wrapper .main-image-control {
    filter: blur(5px); }

* {
  font-family: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif; }

a {
  color: #000; }
  a:hover {
    color: #000; }

a.play-video {
  margin-top: 1em;
  cursor: url(../img/circle-fill.svg) 12.5 12.5, auto;
  width: 25px;
  height: 25px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  /*background: #fff;
  border-radius: 50%;
  border:10px solid #fff;
  */
  display: block;
  z-index: 201; }
  a.play-video span.play {
    opacity: 1;
    transition: opacity 0.5s;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
    text-align: center; }
    a.play-video span.play svg {
      width: 100%;
      height: 100%;
      display: inline-block;
      transform: rotateZ(180deg); }
  a.play-video span.pause {
    opacity: 0;
    transition: opacity 0.5s;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    text-align: center; }
    a.play-video span.pause svg {
      width: 100%;
      height: 100%;
      display: inline-block;
      transform: rotateZ(90deg); }
  a.play-video.pause span.play {
    opacity: 0; }
  a.play-video.pause span.pause {
    opacity: 1; }

.text-block {
  width: 91ch;
  margin: 0px auto;
  text-align: left;
  padding: 0px;
  font-size: 22px;
  /*&.serif {
  	font-family: 'Times New Roman', Times, serif;
  }*/ }
  @media (max-width: 767px) {
    .text-block {
      font-size: 16px;
      padding-left: 20px !important;
      padding-right: 20px !important; } }
  .text-block * {
    font-family: inherit;
    font-size: 22px;
    font-weight: normal; }
    @media (max-width: 767px) {
      .text-block * {
        font-size: 16px; } }
  .text-block h2 {
    margin-top: 0;
    margin-bottom: 0px; }
  .text-block h3 {
    margin-top: 0;
    margin-bottom: 0; }
  .text-block p {
    margin-top: 1em;
    margin-bottom: 0;
    font-style: normal; }
    .text-block p:first-child {
      margin-top: 0; }
    .text-block p i, .text-block p em {
      font-style: normal; }
  .text-block h3 + p {
    margin-top: 1em; }
  @media (max-width: 991px) {
    .text-block {
      width: 100%;
      padding-left: 20px !important;
      padding-right: 20px !important; } }
  .text-block ul {
    list-style: none;
    margin: 0px;
    padding: 0px; }

@media (min-width: 768px) {
  .mobile-visible {
    display: none !important; } }

@media (max-width: 767px) {
  .mobile-hidden {
    display: none !important; } }

@media (min-width: 1200px) {
  .mobile-menu-visible {
    display: none !important; } }

@media (max-width: 1199px) {
  .mobile-menu-hidden {
    display: none !important; } }

.img-responsive {
  display: block;
  width: 100%; }

.mt-5 {
  margin-top: 5px !important; }

.mt-10 {
  margin-top: 10px !important; }

.mt-15 {
  margin-top: 15px !important; }

.mt-20 {
  margin-top: 20px !important; }

.mt-25 {
  margin-top: 25px !important; }

.mt-30 {
  margin-top: 30px !important; }

.mt-35 {
  margin-top: 35px !important; }

.mt-40 {
  margin-top: 40px !important; }

.mt-45 {
  margin-top: 45px !important; }

.mt-50 {
  margin-top: 50px !important; }

.mb-5 {
  margin-bottom: 5px !important; }

.mb-10 {
  margin-bottom: 10px !important; }

.mb-15 {
  margin-bottom: 15px !important; }

.mb-20 {
  margin-bottom: 20px !important; }

.mb-25 {
  margin-bottom: 25px !important; }

.mb-30 {
  margin-bottom: 30px !important; }

.mb-35 {
  margin-bottom: 35px !important; }

.mb-40 {
  margin-bottom: 40px !important; }

.mb-45 {
  margin-bottom: 45px !important; }

.mb-50 {
  margin-bottom: 50px !important; }

#logo {
  position: fixed;
  z-index: 99;
  top: 20px;
  left: 80px;
  font-size: 32px;
  transition: top 0.5s; }
  #logo strong {
    font-weight: 400;
    margin-right: 0.1em;
    display: inline-block;
    float: left; }
  #logo:hover {
    text-decoration: none !important; }
  #logo.black {
    color: #000 !important;
    fill: #000 !important; }
  #logo.white {
    color: #fff !important;
    fill: #fff !important; }
    #logo.white.force-black {
      color: #000 !important;
      fill: #000 !important; }
  #logo.hidden-out {
    top: -80px; }

#menu-opener {
  position: fixed;
  left: 0px;
  top: 0px;
  font-size: 24px;
  color: #fff;
  fill: #fff;
  border: 1px;
  width: 25px;
  height: 25px;
  padding: 10px;
  margin-left: 20px;
  margin-top: 20px;
  box-sizing: content-box;
  /*
  padding:10px;
  background: #EF3A38;
  */
  z-index: 99; }
  #menu-opener.black {
    color: #000 !important;
    fill: #000 !important; }
  #menu-opener.white {
    color: #fff !important;
    fill: #fff !important; }
  #menu-opener.force-black {
    color: #000 !important;
    fill: #000 !important; }
  #menu-opener svg {
    width: 25px;
    height: 25px; }
    #menu-opener svg rect {
      fill: inherit !important;
      opacity: 1;
      transition: all 0.5s;
      transform-origin: 50% 50%; }
  #menu-opener.active svg rect:first-child {
    transform: rotateZ(45deg) translateY(12.5%);
    opacity: 1; }
  #menu-opener.active svg rect:last-child {
    transform: rotateZ(-45deg) translateY(-12.5%);
    opacity: 1; }

#mobile-menu {
  display: block;
  transition: opacity 0.375s;
  z-index: 89;
  position: fixed;
  left: 0px;
  top: 0%;
  background: rgba(255, 255, 255, 0.95);
  height: 100%;
  width: 100%;
  text-align: left;
  padding-top: 60px;
  pointer-events: none;
  opacity: 0; }
  #mobile-menu.active {
    opacity: 1;
    pointer-events: visible;
    display: block;
    top: 0px; }
  #mobile-menu .menu-wrap {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 68px;
    z-index: 4; }
    @media (max-width: 767px) {
      #mobile-menu .menu-wrap {
        top: 68px;
        transform: none;
        -webkit-transform: none;
        -moz-transform: none; } }
    #mobile-menu .menu-wrap .text-block {
      max-width: 37.5vw;
      margin-left: auto;
      color: #000;
      line-height: 1.1em;
      transform: translateX(-30%);
      max-height: 75vh;
      overflow-y: auto;
      padding-left: 0 !important;
      padding-right: 0 !important;
      max-width: 80vw;
      transform: none;
      margin-left: 79px; }
      @media (max-width: 767px) {
        #mobile-menu .menu-wrap .text-block {
          padding-left: 0 !important;
          padding-right: 0 !important;
          max-width: 80vw;
          transform: none;
          margin-left: 79px; } }
  #mobile-menu ul {
    margin: 0px;
    padding: 0px;
    margin-top: -5px;
    padding: 0px;
    display: inline-block;
    width: 100%;
    max-height: 100%;
    overflow: auto; }
    #mobile-menu ul li {
      display: block; }
      #mobile-menu ul li > a {
        display: block;
        font-size: 32px;
        color: #000;
        text-align: left;
        padding: 11px 0px;
        margin: 5px 0px;
        width: 100%; }
        @media (max-width: 767px) {
          #mobile-menu ul li > a {
            font-size: 32px;
            line-height: 36px;
            padding: 3px 0px; } }
        #mobile-menu ul li > a span {
          font-size: inherit; }
        #mobile-menu ul li > a.button-gold {
          color: #000; }
        #mobile-menu ul li > a:after {
          display: none; }
        #mobile-menu ul li > a svg {
          height: 25px;
          width: 25px;
          margin-left: -35px;
          position: absolute;
          transform: rotateZ(0deg);
          transition: transform 0.5s; }
        #mobile-menu ul li > a.expanded {
          color: #EF3A38; }
          #mobile-menu ul li > a.expanded svg {
            transform: rotateZ(45deg); }
      #mobile-menu ul li.active a {
        color: #EF3A38; }
      #mobile-menu ul li .contact-block {
        font-size: 40px;
        /*@media (max-width:767px) {
        	font-size: $font-size-base * 0.8;
        }*/
        font-weight: 200;
        padding: 15px !important;
        width: 100% !important;
        display: none;
        color: #555; }
        #mobile-menu ul li .contact-block * {
          line-height: 1.1em;
          font-size: inherit;
          font-weight: inherit; }
        @media (max-width: 767px) {
          #mobile-menu ul li .contact-block {
            font-size: 26.4px; } }
        #mobile-menu ul li .contact-block a {
          color: #555; }
        #mobile-menu ul li .contact-block > div > div {
          padding-left: 0;
          margin-bottom: 15px;
          width: 100%;
          min-width: 100%; }
      #mobile-menu ul li ul.active-project {
        max-width: none;
        width: auto;
        margin-left: 0px; }
        #mobile-menu ul li ul.active-project li a {
          color: #555; }

section#bottom-menu {
  padding-top: 0;
  display: block;
  background: var(--background-color);
  width: 100%;
  text-align: left; }
  section#bottom-menu.active {
    display: block;
    top: 0px; }
  section#bottom-menu ul {
    margin: 0px;
    padding: 0px;
    margin-top: -5px;
    padding: 7px;
    display: inline-block;
    width: 100%; }
    section#bottom-menu ul li {
      display: block;
      border-bottom: 1px solid #222; }
      section#bottom-menu ul li:last-child {
        border-bottom: none; }
      section#bottom-menu ul li > a {
        display: block;
        font-size: 22px;
        /*@media (max-width:767px) {
        	font-size: $font-size-base * 0.8;
        }*/
        color: #000;
        text-align: left;
        padding: 10px 15px 10px 0px;
        margin: 5px 0px;
        width: 100%; }
        section#bottom-menu ul li > a svg {
          height: 25px;
          width: 25px;
          margin-left: -35px;
          position: absolute;
          transform: rotateZ(0deg);
          transition: transform 0.5s; }
        section#bottom-menu ul li > a.expanded {
          color: #EF3A38; }
          section#bottom-menu ul li > a.expanded svg {
            transform: rotateZ(45deg); }
        section#bottom-menu ul li > a.button-gold {
          color: #000; }
        section#bottom-menu ul li > a:after {
          display: none; }
      section#bottom-menu ul li.active a {
        color: #EF3A38; }
      section#bottom-menu ul li .contact-block {
        font-size: 22px;
        /*@media (max-width:767px) {
        	font-size: $font-size-base * 0.8;
        }*/
        padding: 15px;
        width: 100% !important;
        border-top: 1px solid #999;
        display: none;
        color: #000; }
        section#bottom-menu ul li .contact-block a {
          color: #000; }
        section#bottom-menu ul li .contact-block > div > div {
          padding-left: 0;
          margin-bottom: 15px; }

#progress-bar {
  position: fixed;
  z-index: 201;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: none;
  opacity: 1;
  transform: opacity 0.5s;
  pointer-events: none; }
  #progress-bar.hidden {
    opacity: 0; }
  #progress-bar .progress-indicator {
    background: #ddd;
    width: 0;
    height: 3px; }

img {
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;
  transition: transform 0.5s, opacity 0.5s, filter 0.5s;
  transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s, filter 0.5s; }
  img.loading {
    filter: blur(30px); }
  img.loaded {
    filter: none; }

.main-image {
  width: 100%;
  position: relative;
  z-index: 3;
  background-attachment: scroll, fixed;
  background-size: cover;
  background-position-x: center;
  background-position-y: center;
  height: 100vh; }
  .main-image.main-video a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10; }
  .main-image .main-image-overlay {
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    bottom: 10.5%;
    z-index: 4; }
    .main-image .main-image-overlay#project-title {
      bottom: 10.5%; }
    .main-image .main-image-overlay .text-block {
      max-width: 37.5vw;
      margin-left: auto;
      font-size: 40px;
      color: #fff;
      line-height: 1.3em;
      transform: translateX(-30%); }
      .main-image .main-image-overlay .text-block.plan {
        color: #000; }
      .main-image .main-image-overlay .text-block * {
        font-family: inherit;
        font-size: inherit; }
      @media (max-width: 767px) {
        .main-image .main-image-overlay .text-block {
          font-size: 26.4px;
          line-height: 1.2em;
          max-width: 80vw;
          transform: none;
          margin-left: auto;
          padding-left: 0 !important;
          padding-right: 0 !important; } }
      @media (min-width: 768px) and (max-width: 991px) {
        .main-image .main-image-overlay .text-block {
          max-width: 50vw; } }
      .main-image .main-image-overlay .text-block a {
        color: inherit;
        margin: 0;
        text-decoration: underline; }
    .main-image .main-image-overlay a.button {
      transition: opacity .5s;
      opacity: 0;
      pointer-events: none;
      cursor: default; }
    .main-image .main-image-overlay a.button.visible {
      opacity: 1;
      pointer-events: initial; }
  .main-image.plan .main-image-overlay .text-block {
    color: #000; }
  .main-image > img, .main-image > a img {
    opacity: 0; }
  .main-image > img, .main-image > video {
    width: 100%;
    height: auto;
    z-index: 3;
    min-height: 100vh;
    min-width: 100vw;
    /*height:100vh;*/
    width: auto;
    left: 50%;
    transform: translateX(-50%); }
    @media handheld, (orientation: portrait) {
      .main-image > img, .main-image > video {
        height: 100vh;
        width: auto;
        left: 50%;
        transform: translateX(-50%); } }
  .main-image > img {
    position: relative;
    z-index: 2; }
  .main-image > video {
    transition: opacity .5s;
    opacity: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    pointer-events: none; }
  .main-image > video.visible {
    opacity: 1; }
  .main-image .button {
    padding: 25px;
    border: 1px solid #fff;
    color: #fff;
    min-width: 250px;
    font-size: 24px;
    max-width: 250px;
    text-decoration: none;
    transition: all 1s;
    cursor: url(../img/circle-fill.svg) 12.5 12.5, auto; }
    .main-image .button:hover {
      text-decoration: none;
      background: rgba(0, 0, 0, 0.2); }
    @media (max-width: 767px) {
      .main-image .button {
        font-size: 16px;
        padding: 10px;
        max-width: 180px;
        margin: 0px auto; } }
  .main-image h1 {
    font-size: 72px;
    color: #fff;
    /*text-shadow: 0px 0px 20px rgba(0,0,0,0.5);*/
    top: 50%; }
    @media (max-width: 767px) {
      .main-image h1 {
        margin-top: 0px;
        font-size: 24px; } }
  .main-image a {
    display: inline-block;
    margin-bottom: 45px; }

@keyframes tooltip {
  0% {
    opacity: 0; }
  10% {
    opacity: 0.8; }
  90% {
    opacity: 0.8; }
  100% {
    opacity: 0; } }
.animate-tooltip {
  animation-timing-function: ease-out;
  animation-name: tooltip;
  animation-duration: 5000ms;
  transform-origin: 50% 50%;
  animation-iteration-count: 1;
  animation-timing-function: linear; }

@keyframes pulse_animation {
  0% {
    transform: scale(1); }
  25% {
    transform: scale(1); }
  60% {
    transform: scale(1.2); }
  75% {
    transform: scale(1); }
  100% {
    transform: scale(1); } }
.pulse {
  animation-timing-function: ease-out;
  animation-name: pulse_animation;
  animation-duration: 2000ms;
  transform-origin: 50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

@keyframes jiggle_animation {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(10px); }
  100% {
    transform: translateY(0); } }
.jiggle {
  animation-name: jiggle_animation;
  animation-duration: 2000ms;
  transform-origin: 50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

.offset-menu {
  display: block;
  margin-bottom: 53px; }

section {
  transition: 1s background;
  background: var(--background-color);
  z-index: 3;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /*max-width: 1600px;*/
  position: relative;
  overflow: hidden;
  /*&.black {
  	padding-top: 25px;
  	padding-bottom: 25px;
  	background:#000;
  	color:#fff;
  	* {
  		color:#fff;
  	}
  }*/ }
  section.after-video {
    margin-top: 0px !important; }
  section#main-image {
    position: relative;
    max-height: 100vh;
    margin-bottom: 3px; }
    @media (max-width: 767px) {
      section#main-image {
        height: 100vh; } }
    section#main-image #main-image-image {
      max-height: 100vh; }
      @media (max-width: 767px) {
        section#main-image #main-image-image {
          opacity: 1;
          height: 100vh;
          width: 100%;
          position: fixed;
          left: 50%;
          transform: translateX(-50%);
          object-fit: cover; } }
    section#main-image .main-image-control {
      bottom: 5px;
      width: 100%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      position: absolute;
      z-index: 90; }
      section#main-image .main-image-control a {
        display: block;
        height: 40px;
        transform: rotateZ(180deg);
        display: inline-block; }
        section#main-image .main-image-control a span {
          display: block; }
          section#main-image .main-image-control a span svg {
            color: #fff !important;
            height: 40px; }
            section#main-image .main-image-control a span svg * {
              fill: #fff !important; }
  section#main-image.plan .main-image-control a span svg, section#main-image .plan .main-image-control a span svg, section .main-image.plan .main-image-control a span svg, section .main-image .plan .main-image-control a span svg {
    color: #000 !important; }
    section#main-image.plan .main-image-control a span svg *, section#main-image .plan .main-image-control a span svg *, section .main-image.plan .main-image-control a span svg *, section .main-image .plan .main-image-control a span svg * {
      fill: #000 !important; }
  @media (max-width: 1599px) {
    section {
      padding-left: 15px;
      padding-right: 15px; }
      section#main-image {
        padding-left: 0px;
        padding-right: 0px; } }
  section#detail {
    margin-top: 7px; }
  section#detail, section.portfolio-list {
    margin-top: 0px;
    padding-top: 0px; }
    section#detail .grid, section.portfolio-list .grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      grid-auto-flow: dense;
      grid-column-gap: 3px;
      grid-row-gap: 3px;
      overflow: hidden; }
      @media (max-width: 767px) {
        section#detail .grid, section.portfolio-list .grid {
          grid-template-columns: repeat(12, 1fr); } }
      section#detail .grid .project, section.portfolio-list .grid .project {
        overflow: hidden; }
        section#detail .grid .project.video a, section.portfolio-list .grid .project.video a {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          z-index: 1; }
        section#detail .grid .project.video.landscape, section.portfolio-list .grid .project.video.landscape {
          padding-bottom: 70.88%; }
        section#detail .grid .project.video.portrait, section.portfolio-list .grid .project.video.portrait {
          padding-bottom: 141.06%; }
        section#detail .grid .project video, section.portfolio-list .grid .project video {
          width: 100%;
          height: 100%;
          object-fit: fill;
          position: absolute; }
        section#detail .grid .project.landscape video, section.portfolio-list .grid .project.landscape video {
          width: 100%;
          height: 100%; }
        section#detail .grid .project.portrait video, section.portfolio-list .grid .project.portrait video {
          height: 100%;
          width: auto;
          position: absolute;
          left: 50%;
          transform: translateX(-50%); }
      section#detail .grid .a5.landscape, section.portfolio-list .grid .a5.landscape {
        grid-column: auto/span 6;
        grid-row: auto/span 4; }
        @media (max-width: 767px) {
          section#detail .grid .a5.landscape, section.portfolio-list .grid .a5.landscape {
            grid-column: span 12;
            grid-row: auto; } }
        section#detail .grid .a5.landscape img, section.portfolio-list .grid .a5.landscape img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a5.portrait, section.portfolio-list .grid .a5.portrait {
        grid-row: auto/span 6;
        grid-column: auto/span 4; }
        @media (max-width: 767px) {
          section#detail .grid .a5.portrait, section.portfolio-list .grid .a5.portrait {
            grid-column: span 6;
            grid-row: auto; } }
        section#detail .grid .a5.portrait img, section.portfolio-list .grid .a5.portrait img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a4.landscape, section.portfolio-list .grid .a4.landscape {
        grid-column: auto/span 8;
        grid-row: auto/span 6; }
        @media (max-width: 767px) {
          section#detail .grid .a4.landscape, section.portfolio-list .grid .a4.landscape {
            grid-column: span 12;
            grid-row: auto; } }
        section#detail .grid .a4.landscape img, section.portfolio-list .grid .a4.landscape img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a4.portrait, section.portfolio-list .grid .a4.portrait {
        grid-row: auto/span 8;
        grid-column: auto/span 6; }
        @media (max-width: 767px) {
          section#detail .grid .a4.portrait, section.portfolio-list .grid .a4.portrait {
            grid-column: span 6;
            grid-row: auto; } }
        section#detail .grid .a4.portrait img, section.portfolio-list .grid .a4.portrait img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a3.landscape, section.portfolio-list .grid .a3.landscape {
        grid-column: auto/span 12;
        grid-row: auto/span 8; }
        @media (max-width: 767px) {
          section#detail .grid .a3.landscape, section.portfolio-list .grid .a3.landscape {
            grid-column: span 12;
            grid-row: auto; } }
        section#detail .grid .a3.landscape img, section.portfolio-list .grid .a3.landscape img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a3.portrait, section.portfolio-list .grid .a3.portrait {
        grid-row: auto/span 12;
        grid-column: auto/span 8; }
        @media (max-width: 767px) {
          section#detail .grid .a3.portrait, section.portfolio-list .grid .a3.portrait {
            grid-column: span 6;
            grid-row: auto; } }
        section#detail .grid .a3.portrait img, section.portfolio-list .grid .a3.portrait img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a2.landscape, section.portfolio-list .grid .a2.landscape {
        grid-column: auto/span 16;
        grid-row: auto/span 12; }
        @media (max-width: 767px) {
          section#detail .grid .a2.landscape, section.portfolio-list .grid .a2.landscape {
            grid-column: span 12;
            grid-row: auto; } }
        section#detail .grid .a2.landscape img, section.portfolio-list .grid .a2.landscape img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a2.portrait, section.portfolio-list .grid .a2.portrait {
        grid-row: auto/span 16;
        grid-column: auto/span 12; }
        @media (max-width: 767px) {
          section#detail .grid .a2.portrait, section.portfolio-list .grid .a2.portrait {
            grid-column: span 6;
            grid-row: auto; } }
        section#detail .grid .a2.portrait img, section.portfolio-list .grid .a2.portrait img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a1.landscape, section.portfolio-list .grid .a1.landscape {
        grid-column: auto/span 24;
        grid-row: auto/span 16; }
        @media (max-width: 767px) {
          section#detail .grid .a1.landscape, section.portfolio-list .grid .a1.landscape {
            grid-column: span 12;
            grid-row: auto; } }
        section#detail .grid .a1.landscape img, section.portfolio-list .grid .a1.landscape img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a1.portrait, section.portfolio-list .grid .a1.portrait {
        grid-row: auto/span 24;
        grid-column: auto/span 16; }
        @media (max-width: 767px) {
          section#detail .grid .a1.portrait, section.portfolio-list .grid .a1.portrait {
            grid-column: span 6;
            grid-row: auto; } }
        section#detail .grid .a1.portrait img, section.portfolio-list .grid .a1.portrait img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a0.landscape, section.portfolio-list .grid .a0.landscape {
        grid-column: auto/span 34;
        grid-row: auto/span 24; }
        @media (max-width: 767px) {
          section#detail .grid .a0.landscape, section.portfolio-list .grid .a0.landscape {
            grid-column: span 12;
            grid-row: auto; } }
        section#detail .grid .a0.landscape img, section.portfolio-list .grid .a0.landscape img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
      section#detail .grid .a0.portrait, section.portfolio-list .grid .a0.portrait {
        grid-row: auto/span 34;
        grid-column: auto/span 24; }
        @media (max-width: 767px) {
          section#detail .grid .a0.portrait, section.portfolio-list .grid .a0.portrait {
            grid-column: span 6;
            grid-row: auto; } }
        section#detail .grid .a0.portrait img, section.portfolio-list .grid .a0.portrait img {
          object-fit: cover;
          width: 100%;
          height: 100%; }
  section.padded {
    padding-left: 30px;
    padding-right: 30px; }
  section.lightly-padded {
    padding-left: 0px;
    padding-right: 0px; }
    section.lightly-padded .row {
      margin-left: -3.5px;
      margin-right: -3.5px; }
      section.lightly-padded .row > div {
        padding-left: 3.5px;
        padding-right: 3.5px; }
        section.lightly-padded .row > div.text-block {
          padding-top: 2em;
          padding-bottom: 2em; }
  section .extra-top-padding {
    padding-top: 2em; }

body.detail section, body.detail section#bottom-menu {
  background: var(--background-color); }

/*section + section {
	padding-top:25px;
}
*/
section:not(.main) + section.black {
  padding-top: 7px; }

.project {
  transform: translateY(0%);
  -webkit-transform: translateY(0%);
  -moz-transform: translateY(0%);
  opacity: 1;
  -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, -webkit-transform 0.5s, filter 0.5s;
  transition: transform 0.5s, opacity 0.5s, filter 0.5s;
  transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s, filter 0.5s; }
  .project.delay-0 {
    transition-delay: 0.2s !important; }
  .project.delay-1 {
    transition-delay: 0.25s !important; }
  .project.delay-2 {
    transition-delay: 0.3s !important; }
  .project.delay-3 {
    transition-delay: 0.35s !important; }
  .project.delay-4 {
    transition-delay: 0.4s !important; }
  .project.delay-5 {
    transition-delay: 0.45s !important; }
  .project.delay-6 {
    transition-delay: 0.5s !important; }
  .project.delay-7 {
    transition-delay: 0.55s !important; }
  .project.delay-8 {
    transition-delay: 0.6s !important; }
  .project.delay-9 {
    transition-delay: 0.65s !important; }
  .project.delay-10 {
    transition-delay: 0.7s !important; }
  .project:hover a {
    text-decoration: underline; }
  .project h3 {
    margin-top: 5px;
    margin-bottom: 0px; }
  .project .image-link {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: url(../img/circle-fill.svg) 12.5 12.5, auto; }
  .project .project-overlay {
    width: 100%;
    height: 100%;
    color: #fff;
    position: absolute;
    bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    left: 0px;
    background: rgba(0, 0, 0, 0.1);
    transition-delay: 3s;
    transition: opacity .5s;
    display: block;
    opacity: 0;
    font-size: 20px;
    z-index: 2; }
    @media (max-width: 767px) {
      .project .project-overlay {
        font-size: 16px; } }
    .project .project-overlay h3, .project .project-overlay span, .project .project-overlay a {
      font-family: inherit;
      font-size: inherit;
      font-weight: normal; }
    .project .project-overlay a {
      color: #fff; }
    .project .project-overlay .project-date-place {
      color: #ddd; }
    .project .project-overlay.visible {
      opacity: 1; }
  .project.plan .project-overlay {
    background: none;
    color: #000; }
    .project.plan .project-overlay a {
      color: #000; }
    .project.plan .project-overlay .project-date-place {
      color: #555; }
  .project.hidden-under {
    transform: translateY(20%);
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    opacity: 0; }
  .project.hidden-above {
    transform: translateY(-20%);
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    opacity: 0; }

footer {
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: block;
  height: 60px;
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  padding-left: 15px;
  padding-top: 12px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden; }
  footer a {
    color: #fff; }
    footer a:hover {
      color: #fff; }

#side-panel {
  position: fixed;
  right: -100px;
  bottom: 35%;
  width: 145px; }
  #side-panel ul {
    margin: 0px;
    padding: 0px;
    list-style: none; }
    #side-panel ul li {
      position: relative;
      margin-left: 0px;
      display: block;
      width: 145px;
      transition: margin-left 0.5s; }
      #side-panel ul li:hover {
        margin-left: -100px; }
      #side-panel ul li svg {
        cursor: url(../img/circle-fill.svg) 12.5 12.5, auto;
        width: 45px;
        max-height: 45px;
        border: 10px solid #EF3A38; }
      #side-panel ul li span {
        display: inline-block;
        line-height: 45px;
        padding-left: 10px;
        color: #fff;
        height: 45px;
        float: right;
        width: 100px;
        background: #EF3A38; }

#detail-text {
  z-index: 91;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0px;
  background: #fff1e5;
  color: #000;
  transition: top 1s; }
  #detail-text.active {
    top: 0px; }
  #detail-text .detail-close {
    right: 15px;
    top: 15px;
    position: absolute;
    cursor: url(../img/circle-fill.svg) 12.5 12.5, auto; }
    #detail-text .detail-close.rotate-content-45 > * {
      width: 25px;
      height: 25px;
      transform: rotateZ(45deg); }

#video-overlay {
  z-index: 91;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0px;
  background: #000;
  color: #fff;
  transition: top 1s; }
  #video-overlay.active {
    top: 0px; }
  #video-overlay video {
    width: 100%;
    height: 100%;
    z-index: 91; }
  #video-overlay .detail-close {
    right: 15px;
    top: 15px;
    position: absolute;
    cursor: url(../img/circle-fill.svg) 12.5 12.5, auto;
    z-index: 92; }
    #video-overlay .detail-close.rotate-content-45 > * {
      width: 25px;
      height: 25px;
      transform: rotateZ(45deg); }

.tooltip-helper {
  opacity: 0;
  background: #fff;
  padding: 7px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 5px;
  z-index: 90;
  border-radius: 5px; }
  .tooltip-helper .key {
    width: 40px;
    height: 40px;
    background-image: url("../img/icon-key.svg");
    background-size: contain;
    padding-left: 13px;
    padding-top: 9px;
    display: inline-block; }
    .tooltip-helper .key span {
      font-size: 10px;
      font-weight: bold;
      display: block;
      margin-left: -2px; }
  .tooltip-helper .legend-desktop {
    display: block; }
  .tooltip-helper .legend-mobile {
    display: none; }

/*
body.mobile {
	.tooltip-helper {
		top:auto;
		bottom:5px;

		.legend-mobile {
			display:block;
			svg {
				width:45px;
				height: 45px;;
			}
		}
		.legend-desktop {
			display:none;
		}
	}
}*/
.cover-layer {
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  background: #000;
  z-index: 99;
  opacity: 1;
  transition: opacity 1s; }
  .cover-layer.cover-layer-hidden {
    opacity: 0;
    pointer-events: none; }
  .cover-layer .layer-close, .cover-layer .next-button, .cover-layer .prev-button {
    display: inline-block;
    position: absolute;
    left: 20px;
    top: 20px;
    padding: 10px;
    z-index: 200;
    		/*
    		@media (max-width:767px) {
    			top:auto;
    			bottom:20px;
    		}
    
    		@media (orientation: portrait) {
    			top:auto;
    			bottom:20px;
    		}*/ }
    .cover-layer .layer-close svg, .cover-layer .next-button svg, .cover-layer .prev-button svg {
      width: 25px;
      height: 25px; }
    .cover-layer .layer-close.layer-close svg, .cover-layer .next-button.layer-close svg, .cover-layer .prev-button.layer-close svg {
      transform: rotateZ(45deg); }
    .cover-layer .layer-close.next-button svg, .cover-layer .next-button.next-button svg, .cover-layer .prev-button.next-button svg {
      transform: rotateZ(180deg); }
  .cover-layer .slides {
    position: absolute;
    color: #EF3A38;
    z-index: 200;
    font-size: 22px;
    /*@media (max-width:767px) {
    	font-size: $font-size-base * 0.8;
    }*/
    padding-top: 8px;
    top: 20px;
    left: 60px; }
  .cover-layer .previous-slide {
    z-index: 199;
    position: absolute;
    left: 15px;
    top: 15px;
    right: 52%;
    bottom: 15px;
    cursor: url(../img/arrow-left-cursor.svg), auto; }
    .cover-layer .previous-slide.has-text {
      right: 57%; }
  .cover-layer .next-slide {
    z-index: 200;
    position: absolute;
    right: 15px;
    top: 15px;
    left: 52%;
    bottom: 15px;
    cursor: url(../img/arrow-right-cursor.svg), auto; }
    .cover-layer .next-slide.has-text {
      left: 57%; }
  .cover-layer ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1; }
    .cover-layer ul li {
      width: 100%;
      height: 100%;
      position: absolute;
      text-align: center;
      background: #000;
      opacity: 0;
      pointer-events: none;
      transition: all 0.5s; }
      .cover-layer ul li.visible {
        opacity: 1;
        pointer-events: visible; }
      .cover-layer ul li .project-text {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        background: #fff;
        padding-top: 2em;
        padding-bottom: 2em;
        cursor: url(../img/arrow-up-down.svg), auto; }
        .cover-layer ul li .project-text * {
          cursor: inherit; }
        @media (max-width: 991px) {
          .cover-layer ul li .project-text {
            padding-left: 15px;
            padding-right: 15px; } }
        .cover-layer ul li .project-text .project-text-block {
          width: 91ch;
          margin: 0px auto;
          text-align: left;
          padding: 0px;
          font-size: 22px; }
          @media (max-width: 991px) {
            .cover-layer ul li .project-text .project-text-block {
              font-size: 16px;
              padding-left: 15px !important;
              padding-right: 15px !important; } }
          .cover-layer ul li .project-text .project-text-block * {
            font-size: 22px;
            font-weight: normal; }
            @media (max-width: 767px) {
              .cover-layer ul li .project-text .project-text-block * {
                font-size: 16px; } }
          .cover-layer ul li .project-text .project-text-block h2 {
            margin-top: 0;
            margin-bottom: 0px; }
          .cover-layer ul li .project-text .project-text-block h3 {
            margin-top: 0;
            margin-bottom: 0; }
          .cover-layer ul li .project-text .project-text-block p {
            margin-top: 1em;
            margin-bottom: 0;
            font-style: normal; }
            .cover-layer ul li .project-text .project-text-block p:first-child {
              margin-top: 0; }
            .cover-layer ul li .project-text .project-text-block p i, .cover-layer ul li .project-text .project-text-block p em {
              font-style: normal; }
          .cover-layer ul li .project-text .project-text-block h3 + p {
            margin-top: 1em; }
          @media (max-width: 991px) {
            .cover-layer ul li .project-text .project-text-block {
              width: 100%;
              padding-left: 20px !important;
              padding-right: 20px !important; } }
          .cover-layer ul li .project-text .project-text-block ul {
            list-style: none;
            margin: 0px;
            padding: 0px; }
      .cover-layer ul li.slide-left-in {
        animation-name: slide_left_in;
        animation-duration: 500ms;
        animation-iteration-count: 1; }
      .cover-layer ul li.slide-left-out {
        animation-name: slide_left_out;
        animation-duration: 500ms;
        animation-iteration-count: 1; }
      .cover-layer ul li.slide-right-in {
        animation-name: slide_right_in;
        animation-duration: 500ms;
        animation-iteration-count: 1; }
      .cover-layer ul li.slide-right-out {
        animation-name: slide_right_out;
        animation-duration: 500ms;
        animation-iteration-count: 1; }
      .cover-layer ul li img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: contain;
        left: 0; }
      .cover-layer ul li video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: contain;
        left: 0; }
  .cover-layer.cover-layer-hidden ul li.visible {
    pointer-events: none; }

body::-webkit-scrollbar {
  width: 10px; }

/* Track */
body::-webkit-scrollbar-track {
  background: #222; }

/* Handle */
body::-webkit-scrollbar-thumb {
  background: #999; }

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
  background: #aaa; }

@keyframes slide_left_in {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(0%); } }
@keyframes slide_left_out {
  from {
    transform: translateX(0%); }
  to {
    transform: translateX(-100%); } }
@keyframes slide_right_in {
  from {
    transform: translateX(-100%); }
  to {
    transform: translateX(0%); } }
@keyframes slide_right_out {
  from {
    transform: translateX(0%); }
  to {
    transform: translateX(100%); } }
#login {
  pointer-events: none;
  opacity: 0;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s; }
  #login.visible {
    pointer-events: visible;
    opacity: 1; }
  #login #login-layer {
    z-index: 1;
    background: rgba(255, 255, 255, 0.95);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  #login .login-window {
    padding-top: 50px;
    z-index: 2;
    width: 50%;
    max-width: 300px;
    position: relative;
    margin: 0px auto; }
    #login .login-window label {
      display: block; }
    #login .login-window input {
      margin-bottom: 15px; }

#contact {
  padding-top: 4em;
  min-height: 100vh; }
  #contact p {
    margin-bottom: 1em; }

body.mobile .main-image {
  background-attachment: scroll, scroll; }

/*# sourceMappingURL=style.css.map */