html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
:root {
  font-family: "Inter", sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: "InterVariable", sans-serif; }
}
html{font-size:62.5%; overflow-x: clip;}
body{font-family: 'Inter', sans-serif;color: var(--text-color);font-size: 16px;margin: 0px; height: 100%;display: flex;font-weight:normal;background-color: var(--background-color)}
img{width: 100%;}
h1{font-family: 'Georgia';color: var(--text-color);font-size: 28px;font-weight:400;letter-spacing: 0.2rem;margin: 0;padding-bottom: 1.6rem;}
@media only screen and (max-width: 560px){h1{font-size: 24px;letter-spacing: 0.2rem;}}
h2{font-family: 'Georgia';color: var(--text-color);font-size: 24px;font-weight:400;margin-top: 0;margin-bottom: 0rem;}
@media only screen and (max-width: 560px){h2{font-size: 18px;}}
p{font-family:'Inter', sans-serif;color: var(--text-color);font-size: 15px;font-weight:300;line-height: 1.5;margin: 0;}
@media only screen and (max-width: 560px){p{font-size: 14px;}}
ol,ul{list-style:none}
li{display: block;padding: 0;padding-bottom: 2%}
b{font-weight:500;}
a{text-decoration: none;}
body{-webkit-tap-highlight-color: transparent;}
body{flex-direction: column;min-height: 100vh;}
button{border: none;background: transparent;}

::-moz-selection{ /* Code for Firefox */ background-color: #323232; color: #fff;}
::selection{background-color: #323232; color: #fff;}


/* width */
::-webkit-scrollbar {
  width: 8px;
}

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

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

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

body{
  --menu-color: #fff;
  --background-color: #fff;
  --text-color: #323232;
}

.sidebar{display: flex;position: fixed; top:0;flex-direction: row;width: 100%;max-width: 100vw;height: 6.8rem;background-color: var(--menu-color);padding-right: 9.6rem;padding-left: 9.6rem;z-index:3;align-items: center;}
@media only screen and (max-width: 1680px){.sidebar{width: 100%;}}
@media only screen and (max-width: 1280px){.sidebar{padding-right: 4.8rem;padding-left: 4.8rem;}}
@media only screen and (max-width: 960px){.sidebar{width: 100%;padding-right: 3.6rem;padding-left: 3.6rem;}}
@media only screen and (max-width: 560px){.sidebar{width: 100%;padding-right: 2.4rem;padding-left: 2.4rem;}}
.logo-container{display: flex;width:164px;}
@media only screen and (max-width: 560px){.logo-container{width:128px;}}
.logo{display: flex;width: 30rem;}
@media only screen and (max-width: 960px){.logo{width: 28rem;}}
@media only screen and (max-width: 560px){.logo{width: 24rem;}}
.navigator{display: flex;flex-direction: column;}
.menu{display: flex;flex-direction: row;margin-left: auto;}
@media only screen and (max-width: 960px){.menu{display: none;}}

li {display: inline-block;font-size: 0;text-align:center;}
li a {display:inline-block;color: var(--text-color);text-decoration: none;text-align:left;cursor:pointer;white-space:nowrap;font-weight:300;font-size: 14px;letter-spacing: 0.20rem;padding-bottom: 0.2rem;}
li a#highlight{font-weight:500;color: var(--text-color);}
li a#highlight:hover{font-weight:500;color: var(--text-color);}
li a:hover{font-weight:500;}
li a:active{font-weight:500;}
li a::before {display: block;content: attr(title);font-weight: bold;height: 0;overflow: hidden;visibility: hidden;text-align:center;}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.menu-item{display:flex;color: var(--text-color);text-decoration: none;text-align:left;cursor:pointer;white-space:nowrap;font-weight:300;font-size: 14px;letter-spacing: 0.20rem;}
@media only screen and (max-width: 960px){.menu-item{padding-bottom: 0.6rem;}}
.menu-item:hover{font-weight:500;}
.menu-item:active{font-weight:500;}
.spacer{display: flex; padding-left: 1.2rem; padding-right: 1.2rem;font-size: 14px;}
.spacer-height{display: flex; height: 9.6rem;}
.submenu-item{display: none;padding-left: 1.2rem;}
.show{display: block;}
.sidebar-bottom{display: flex;flex-direction: column;position: fixed;bottom: 0;left: 0;padding: 4.8rem;}
@media only screen and (max-width: 960px){.sidebar-bottom{width: 100%;padding: 3.6rem;}}
@media only screen and (max-width: 560px){.sidebar-bottom{width: 100%;padding: 2.4rem;}}


.small-menu{display: none;flex-direction: column;width: 100%;height:100%;max-width: 100vw;z-index:5;background-color: var(--menu-color);position: fixed;padding-right: 9.6rem;padding-left: 9.6rem;}
@media only screen and (max-width: 960px){.small-menu{padding-right: 3.6rem;padding-left: 3.6rem;}}
@media only screen and (max-width: 560px){.small-menu{display: none;padding-right: 2.4rem;padding-left: 2.4rem;}}
.top-menu-overlay{display: none;flex-direction: row;height: 6.8rem;align-items: center;}
@media only screen and (max-width: 1280px){.top-menu-overlay{display: flex;}}
@media only screen and (max-width: 960px){.top-menu-overlay{width: 100%;height: 6.8rem}}
@media only screen and (max-width: 560px){.top-menu-overlay{width: 100%;height: 6.8rem}}
.top-menu-logo-container{display: flex;width:164px;}
@media only screen and (max-width: 560px){.top-menu-logo-container{width:128px;}}

section {display: flex;width: 100%;flex-direction: row;flex-wrap: wrap;padding: 0rem 4.8rem;justify-content: space-between;}
@media only screen and (max-width: 1280px){section{padding: 0rem 1.2rem;}}
@media only screen and (max-width: 960px){section{padding: 0rem;}}
section img{height: auto;padding: 7.2rem 4.8rem;}
@media only screen and (max-width: 1280px){section img{padding: 4.8rem 3.6rem;}}
@media only screen and (max-width: 960px){section img{padding: 3.6rem;}}
@media only screen and (max-width: 560px){section img{padding: 3.6rem 2.4rem;}}
.half{width: 50%;}
@media only screen and (max-width: 960px){.half{width: 100%;}}
.width80{width: 80%;}
@media only screen and (max-width: 960px){.width80{width: 100%;}}
.margin-top{margin-top: 20%;}
@media only screen and (max-width: 960px){.margin-top{margin-top: 0;}}

.info-text{display: flex;flex-direction: column;max-width: 840px;text-align: justify;overflow: hidden;width: 50%;padding-right: 9.6rem;padding-left: 9.6rem;justify-content: center;padding-bottom: 4.8rem;padding-top: 4.8rem;}
@media only screen and (max-width: 1280px){.info-text{width: 100%;padding-right: 3.6rem;padding-left: 3.6rem;}}
@media only screen and (max-width: 560px){.info-text{padding-right: 2.4rem;padding-left: 2.4rem;}}
.about-photo{display: flex;width: 50%;padding-right: 1.6rem;padding-left: 1.6rem;justify-content: flex-end;margin: auto 0rem;flex-direction: column;}
@media only screen and (max-width: 1280px){.about-photo{width: 100%;margin: auto;padding: 0;}}
.about-photo img{height: auto;object-fit: contain;max-height: calc(100vh - 26rem);}
@media only screen and (max-width: 960px){.about-photo img{max-height: none;}}
.main_contact_button{display: flex;flex-direction: row;flex-wrap: wrap;max-width: 840px;text-align: justify;align-items: center;overflow: hidden;width: 50%;padding-right: 9.6rem;padding-left: 9.6rem;justify-content: center;padding-bottom: 6.0rem;padding-top: 6.0rem;}
@media only screen and (max-width: 1280px){.main_contact_button{width: 100%;padding-right: 3.6rem;padding-left: 3.6rem;}}

.studio-text{display: flex;flex-direction: column;max-width: 820px;text-align: justify;overflow: hidden;padding-right: 9.6rem;padding-left: 9.6rem;justify-content: center;padding-bottom: 4.8rem;padding-top: 4.8rem;margin: auto;}
@media only screen and (max-width: 1280px){.studio-text{width: 100%;padding-right: 3.6rem;padding-left: 3.6rem;}}
@media only screen and (max-width: 560px){.studio-text{padding-right: 2.4rem;padding-left: 2.4rem;}}

.left{justify-content: flex-start}
.center{justify-content: center;}
.right{justify-content: flex-end}

.fade-in {opacity: 0;transform: translateY(40px);transition: opacity 0.6s ease-in, transform 0.6s ease-in;}

.fade-in.appear {opacity: 1;transform: translateY(0);}

.inquire-button{align-self: flex-start;margin-top: 6.4rem;}
@media only screen and (max-width: 1860px){.inquire-button{align-self: flex-end;margin-top: 4.8rem;}}
@media only screen and (max-width: 960px){.inquire-button{align-self: flex-end;margin-top: 2.4rem;}}
.button_container{display: flex;padding-left: 2.4rem;}
@media only screen and (max-width: 560px){.button_container{padding-left: 0rem;margin: auto;padding-top: 2.4rem;}}
.button{display: block;width: fit-content;font-size: 14px;font-weight: 400;transition: 300ms cubic-bezier(.455,.03,.515,.955);color: var(--background-color);border: var(--text-color) solid 1px;vertical-align: middle;cursor: pointer;background-color: var(--text-color);border-radius: 0px;text-align: center;padding: 1.2rem 3.6rem;outline: none;align-self: flex-end;}
.button:hover{background-color: var(--background-color);color: var(--text-color)}

.top-menu-logo-container{display: flex;}
.hamburger{display: none;margin-left: auto; margin-top: -6px;}
@media only screen and (max-width: 960px){.hamburger{display: flex !important;}}
.exit-icon{display: flex;margin-left: auto; margin-top: 4px;color: var(--text-color);}

.main{display: flex;flex-direction: column;max-width: 100vw;background-color: var(--background-color);flex-grow: 1;padding-top:6.8rem;}
@media only screen and (max-width: 1280px){.main{width: 100%;}}
@media only screen and (max-width: 960px){.main{width: 100%;padding-top:7.2rem;}}
@media only screen and (max-width: 560px){.main{width: 100%;padding-top:6.4rem;}}
.main-text{display: flex;width: 60%;flex-direction: row;align-items: flex-end;padding-right: 0rem;padding-left: 0rem;padding-bottom: 4.8rem;text-align: right;}
@media only screen and (max-width: 960px){.main-text{width: 100%;}}


.footer{display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap-reverse;width: 100%;background-color: var(--menu-color);padding-right: 9.6rem;padding-left: 9.6rem;padding-top: 4.8rem;padding-bottom: 4.8rem;align-items: flex-start;}
@media only screen and (max-width: 1280px){.footer{width: 100%;padding: 2.4rem 3.6rem;}}
@media only screen and (max-width: 960px){.footer{width: 100%;padding: 3.6rem;}}
@media only screen and (max-width: 560px){.footer{width: 100%;padding: 2.4rem;padding-top: 3.6rem;}}

.footer_right{display: flex;flex-direction: column;}
.footer_right .menu-item{padding-bottom: 0.2rem;}
@media only screen and (max-width: 960px){.footer_right .menu-item{padding-bottom: 0.6rem;}}
.footer_left{display: flex;flex-direction: column;align-items: flex-start;}
@media only screen and (max-width: 560px){.footer_left{width: 100%;}}
.works-text{display: flex;flex-direction: column;overflow: hidden;width: 50%;padding-right: 16rem;padding-left: 16rem;padding-bottom: 6.4rem;padding-top: 3.6rem;max-width: 960px;}
@media only screen and (max-width: 960px){.works-text{padding-right: 4.8rem;padding-left: 4.8rem;}}
@media only screen and (max-width: 560px){.works-text{padding-right: 0rem;padding-left: 0rem;}}
.contact{display: flex;flex-direction: column;justify-content: center;overflow: hidden;padding: 4.2rem 2.4rem;width: 50%;max-width: 480px;}
@media only screen and (max-width: 1240px){.contact{padding: 1.6rem;}}
.mail{display:flex;color: var(--text-color);text-decoration: none;align-items: center;cursor:pointer;;white-space:nowrap;font-size: 14px;font-weight:400;letter-spacing: 0.05rem;padding-top: 1.2rem;}

.container{display: flex;width: 100%;margin: auto;max-width: 2120px; flex-direction: row;justify-content: space-between;flex-wrap: wrap;}

.projectname {display:flex;position: relative;padding: 0rem 4.8rem;}
@media only screen and (max-width: 1280px){.projectname{padding: 0rem 3.6rem;}}
@media only screen and (max-width: 560px){.projectname{padding: 0rem 2.4rem;}}
.name{display: flex;width: 100%;align-items: center;justify-content: space-between;position: absolute; bottom: 0;color: var(--text-color);text-decoration: none;text-align:right;cursor:pointer;white-space:nowrap;font-size: 14px;font-weight:300;letter-spacing: 0.1rem;padding-bottom: 4.8rem;}
@media only screen and (max-width: 1280px){.name{padding-bottom: 2.4rem;}}
@media only screen and (max-width: 960px){.name{padding-bottom: 1.8rem;}}


.text-small {display:flex;color: var(--text-color);font-size: 10px;text-align: justify;text-justify: inter-word;text-decoration:none;line-height: 1.4;padding-top: 0.8rem;}