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.2rem;}
@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: 18px;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;}

::-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%;height: 8.6rem;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: 1240px){.sidebar{padding-right: 3.2rem;padding-left: 3.2rem;}}
@media only screen and (max-width: 960px){.sidebar{width: 100%;padding: 2.4rem;height: 7.2rem}}
@media only screen and (max-width: 560px){.sidebar{width: 100%;padding: 1.6rem;height: 6.4rem}}
.logo-container{display: flex;}
.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-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;padding-bottom: 0.2rem;}
.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: 1.6rem;}}


.small-menu{display: none;flex-direction: column;width: 100%;height:100%;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: 2.4rem;padding-left: 2.4rem;}}
@media only screen and (max-width: 560px){.small-menu{display: none;padding-right: 1.8rem;padding-left: 1.8rem;}}
.top-menu-overlay{display: none;flex-direction: row;height: 8.6rem;align-items: center;}
@media only screen and (max-width: 1240px){.top-menu-overlay{display: flex;}}
@media only screen and (max-width: 960px){.top-menu-overlay{width: 100%;height: 7.2rem}}
@media only screen and (max-width: 560px){.top-menu-overlay{width: 100%;height: 6.4rem}}

section {display: flex;width: 100%;}

.left{justify-content: flex-start}
.right{justify-content: flex-end}

.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;background-color: var(--background-color);flex-grow: 1;padding-top:8.6rem;padding-right: 8rem;padding-left: 8rem;}
@media only screen and (max-width: 1240px){.main{width: 100%;padding-right: 1.6rem;padding-left: 1.6rem;}}
@media only screen and (max-width: 960px){.main{width: 100%;padding-right: 0.8rem;padding-left: 0.8rem;padding-top:7.2rem;}}
@media only screen and (max-width: 560px){.main{width: 100%;padding-right: 0rem;padding-left: 0rem;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: 1240px){.footer{width: 100%;padding: 2.4rem 3.2rem;}}
@media only screen and (max-width: 960px){.footer{width: 100%;padding: 2.4rem;}}
@media only screen and (max-width: 560px){.footer{width: 100%;padding: 1.6rem;}}

.footer_right{display: flex;flex-direction: column;}
.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: 1560px){.contact{width: 100%;}}
@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;}


.gallery-container{display: flex;width: 100%; flex-direction: row;justify-content: space-between;flex-wrap: wrap;}

.gallery{display: flex;width: 60%;flex-direction: row;flex-wrap: wrap;margin-left: 40%;}
@media only screen and (max-width: 1560px){.gallery{width: 70%;margin-left: 30%;}}
@media only screen and (max-width: 1240px){.gallery{width: 100%;margin-left: 0%;}}
.gallery-text{display: flex;flex-direction: column;position: fixed;top: 20vw;max-width: 480px;overflow: hidden;width: 25%;padding: 4.2rem 2.4rem;justify-content: flex-end;}
@media only screen and (max-width: 1560px){.gallery-text{width: 25%;margin-bottom: calc(70vw); padding-bottom: 2.4rem;}}
@media only screen and (max-width: 1240px){.gallery-text{width: 100%;position: static;max-width: 640px;margin-bottom:0;padding: 1.6rem;padding-bottom: 2.4rem;margin:auto;}}
.gallery-text-none{display: flex;flex-direction: column;max-width: 400px;overflow: hidden;width: 20%;padding: 4.2rem 2.4rem;justify-content: flex-end;}
@media only screen and (max-width: 1560px){.gallery-text-none{width: 30%;margin-bottom: calc(70vw); padding-bottom: 0;}}
@media only screen and (max-width: 1240px){.gallery-text-none{display: none;}}
.product{display: flex; flex-direction: column;width: calc(100% / 2);padding: 2.4rem 1.6rem;}
@media only screen and (max-width: 1560px){.product{width: calc(100% / 2);}}
@media only screen and (max-width: 1240px){.product{width: 100%;padding-right: 1.6rem;padding-left: 1.6rem;}}
.projectname {display:flex;height: 3.2rem;position: relative;}
.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: 1.2rem;}
.product-photos{display: flex;flex-direction: column;width: 100%;align-items: flex-end;}
.product-photo img{padding-bottom: 9.6rem;}
@media only screen and (max-width: 1240px){.product-photo img{padding: 1.6rem;padding-bottom: 4.8rem;}}

.archive-post{display: flex; flex-direction: column;width: calc(100% / 3);padding: 2.4rem 1.6rem;}
@media only screen and (max-width: 1560px){.archive-post{width: calc(100% / 2);}}
@media only screen and (max-width: 1240px){.archive-post{width: 100%;padding-right: 1.6rem;padding-left: 1.6rem;}}
.archive-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;white-space:nowrap;font-size: 14px;font-weight:300;letter-spacing: 0.1rem;padding-bottom: 1.2rem;}


.bold{font-weight: 500;font-size: 14px}
@media only screen and (max-width: 560px){.bold{font-size: 12px;}}
.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;}
.back {display:flex;flex-direction: column;align-items: flex-end;}
.title{color: var(--text-color);font-size: 24px;text-decoration:none;font-weight:500;padding-bottom: 2.4rem;}

.mySlides{margin-left: auto;}
@media only screen and (max-width: 1860px){.mySlides{margin: auto;)}}
.demo{display: none;}

.info-text{display: flex;flex-direction: column;max-width: 800px;overflow: hidden;padding-bottom: 4.8rem;padding-top: 4.8rem;margin: auto;}
@media only screen and (max-width: 960px){.info-text{padding-right: 3.2rem;padding-left: 3.2rem;}}
@media only screen and (max-width: 560px){.info-text{padding-right: 1.6rem;padding-left: 1.6rem;}}
.container .about-photo{display: flex;width: 50%;padding-right: 1.6rem;padding-left: 1.6rem;justify-content: flex-end;margin-top: auto;}
@media only screen and (max-width: 1560px){.container .about-photo{width: 100%;justify-content: center;padding-bottom: 2.4rem;padding-top: 2.4rem;}}
.container .about-photo img{height: auto;object-fit: contain;max-height: calc(100vh - 26rem);}
@media only screen and (max-width: 1560px){.container .about-photo img{max-width: 800px;}}
.about-text{display: flex;flex-direction: column;max-width: 800px;overflow: hidden;width: 50%;padding-right: 1.6rem;padding-left: 1.6rem;justify-content: center;}
@media only screen and (max-width: 1560px){.container .about-text{width: 100%;justify-content: center;padding-bottom: 2.4rem;padding-top: 2.4rem;}}
.maincontainer img{height: auto;object-fit: contain;max-height: calc(100vh - 4.8rem - 12.8rem);}
@keyframes opacity { 0% {opacity: 0;}  100% {opacity: 1;}}
.maincontainer{display: flex;flex-direction: row;padding-right: 0rem;padding-left: 0rem;padding-bottom: 4.8rem;min-height: calc(100vh - 12.8rem);}
@media only screen and (max-width: 1240px){.maincontainer{min-height:calc(100vh - 12.8rem);justify-content: center;position: relative;}}
@media only screen and (max-width: 960px){.maincontainer{min-height:calc(100vh - 12.8rem);position: relative;}}
@media only screen and (max-width: 560px){.maincontainer{min-height:calc(100vh - 12.8rem);position: relative;}}
.container{display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;padding-right: 0rem;padding-left: 0rem;min-height: calc(100vh - 26rem);}
@media only screen and (max-width: 1560px){.container{justify-content: center;}}
@media only screen and (max-width: 1240px){.container{min-height:calc(100vh - 12.8rem);justify-content: center;position: relative;flex-wrap: wrap-reverse;}}
@media only screen and (max-width: 960px){.container{min-height:calc(100vh - 12.8rem);}}
@media only screen and (max-width: 560px){.container{min-height:calc(100vh - 12.8rem);}}
.container img{height: auto;object-fit: contain;max-height: calc(100vh - 4.8rem - 12.8rem);}
.container-single{display: flex;flex-direction: row;flex-wrap: wrap;align-items: flex-start;padding-right: 0rem;padding-left: 0rem;min-height: calc(100vh - 28rem)}
@media only screen and (max-width: 1240px){.container-single{min-height:calc(100vh - 12.8rem);justify-content: center;position: relative;flex-wrap: wrap;}}
@media only screen and (max-width: 960px){.container-single{min-height:calc(100vh - 12.8rem);}}
@media only screen and (max-width: 560px){.container-single{min-height:calc(100vh - 12.8rem);}}
.container-single img{height: auto;object-fit: contain;max-height: calc(100vh - 30rem);padding-left: 1.6rem;padding-right: 1.6rem;}
.work-text{display: flex;flex-direction: column;flex-grow: 1;align-self: flex-end;padding-right: 1.6rem;padding-left: 9.6rem;padding-bottom: 2.4rem;padding-top: 2.4rem;max-width: 560px;}
@media only screen and (max-width: 1860px){.work-text{padding-right: 3.2rem;padding-left: 3.2rem;margin: auto;max-width: 920px;flex-direction: row;justify-content: space-between;}}
@media only screen and (max-width: 960px){.work-text{padding-right: 2.4rem;padding-left: 2.4rem;}}
@media only screen and (max-width: 560px){.work-text{padding-right: 1.6rem;padding-left: 1.6rem;}}
.work-text .left{width: 100%}
@media only screen and (max-width: 1860px){.work-text .left{max-width: 560px;}}
.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{display: block;width: fit-content;margin-bottom: 1.2rem;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;}
@media only screen and (max-width: 1860px){.button{margin-bottom: 0rem;}}
.button:hover{background-color: var(--background-color);color: var(--text-color)}

.slides{display: flex;flex-direction: column;}
@media only screen and (max-width: 1860px){.slides{width: 100%;}}
.arrows{display: flex;flex-direction: row;justify-content: flex-end;}
@media only screen and (max-width: 1860px){.arrows{justify-content: center;}}
.prev{display: flex; padding:0.8rem 1.6rem;cursor: pointer;}
.next{display: flex; padding:0.8rem 1.6rem;cursor: pointer;}
.link{color: var(--text-color);text-align:left;cursor:pointer;white-space:nowrap; text-decoration: underline;text-decoration-thickness: 1px;}
