html, body {
    width: 100%;
    -moz-osx-font-smoothing: grayscale;
    background: #e0dbd1

    
}
.mobile-item{display: none}
a[href^="geo:"],
a[href^="tel:"],
a[href^="mailto:"] {
  text-decoration: none !important;
  color: inherit !important;
  border: none !important;
}
.single{
	    position: fixed;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
.single .page-inner{overflow: hidden;position: fixed;overflow-y: scroll;height: 100vh;overflow: scroll;height: 100vh;left: 0;width: 100%}
    #orientation-warning {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #e0dbd1;
      color: white;
      font-size: 1.5rem;
      padding: 2rem;
      z-index: 9;
      box-sizing: border-box;
    }
    #orientation-warning h5{position: absolute;left: 18px;top:100px;font-size: 22px;line-height: 1.2;letter-spacing: -.4px}



.text-wrap img,.text-wrap h1,.section-side-title,.project-title,.space-holder,.bg-layer,.img-container h4,.text-wrap,.bg{transition: all 1.2s cubic-bezier(.38, .005, .215, 1),opacity 1.6s cubic-bezier(.38, .005, .215, 1)}
.sub-menu li,.nav-it,#menu-list li{transition: all 2s cubic-bezier(.38, .005, .215, 1),opacity 2.2s cubic-bezier(.38, .005, .215, 1)}
.page-inner,.menu-inner{transition: all .8s cubic-bezier(.38, .005, .215, 1)}
.text-wrap img{transition: all 1s cubic-bezier(.38, .005, .215, 1),opacity 1.4s cubic-bezier(.38, .005, .215, 1)}


.ss-media a{color: #000}

/* menu */
.logo{position: fixed;left: 30px;top:35px;z-index: 9;transition: all 1.2s cubic-bezier(0.65, 0, 0.35, 1);cursor: pointer}
.logo img{width: 64px}
/*.logo.hide-logo,.logo.hide-logo-in{left: -300px}*/
.menu{position: fixed;left: 30px;top:50px;height: 30px;width: 38px;z-index: 9;cursor: pointer;display: none}
.menu span{width: 100%;height: 2px;background: #4d4d4d;margin: 5px 0;display: block}
footer{position: fixed;bottom: 0;padding: 15px 30px;width: 100%}
footer h6{display: inline-block}
.ss-media span{margin-left: 25px}
.ss-media{position: fixed;right: 30px;bottom: 15px;z-index: 9}
.nav-it,.nav-itb{opacity: 0}
.nav-it.opa,.nav-itb.opaf{opacity: 1}
#menu-list li h2{transition: all .4s cubic-bezier(0.65, 0, 0.35, 1);}
.nav-itb{pointer-events: none !important}


/* gobal */
.bg{position: fixed;width: 100%;height: 100%;}
.bg-green{position: absolute;width: 100%;height: 100%;background: url(../images/bg-green.jpg) center center no-repeat;background-size: cover;opacity: 0}
.bg-gray{position: absolute;width: 100%;height: 100%;background: url(../images/bg-gray.jpg) center center no-repeat;background-size: cover;opacity: 0}

.bg-green.active,.bg-gray.active{opacity: 1}

.color-gold{color: #000 }
.color-gray{color: #000 !important}
.color-white{color: #FFF}
.color-yellow{color: #e1aa2d !important}



.section-side-title{position: fixed;left: -300px;top:0;width: 60px;height:60%;z-index: 8;transition: all 1.2s cubic-bezier(0.65, 0, 0.35, 1);text-transform: uppercase;cursor: pointer;overflow: hidden}
.section-side-title.active,.section-side-title.side-active{left: 0}
.rl-roate h5{display:flex;  writing-mode: vertical-lr;
  transform: rotate(180deg);;min-height: 100vh;vertical-align: middle;line-height: 1;justify-content:center;position: absolute;left: 28px;transition: all .8s cubic-bezier(0.65, 0, 0.35, 1);}
.rl-roate:hover h5{color:#e1aa2d }

/* Gobal 
.text-wrap{overflow: hidden}*/
.page-inner.hidden-page{opacity: 0}
.text-wrap{padding-bottom: 6px}

/* menu */
#menu-list h2{cursor: pointer}
#menu-list.active-1>li:nth-child(1) h2,#menu-list.active-2>li:nth-child(2) h2,#menu-list.active-3>li:nth-child(3) h2,#menu-list.active-4>li:nth-child(4) h2{color: #deb747}
.sub-menu{overflow: hidden;overflow-y: scroll;padding-right: 40px}
.sub-menu br{display: none}
.sub-menu li:hover h4{color: #4a4a4a}
.sub-menu li h4{transition: all .4s cubic-bezier(.38, .005, .215, 1)}

.contact-text{margin-left: 5px}


.hidden-inner-wrap{margin-left: 0;max-height:0;transition: all 1.2s cubic-bezier(0.65, 0, 0.35, 1);opacity: 0;display: none}
.about-text{margin-left: 0}
#menu-list.active-2>li:nth-child(2) .hidden-inner-wrap,#menu-list.active-1>li:nth-child(1) .hidden-inner-wrap,#menu-list.active-3>li:nth-child(3) .hidden-inner-wrap{max-height: 9999px;opacity: 1;display: block}
/*** temp chang **/
#menu-list.active-3>li:nth-child(3) .contact-text{opacity: 1}

.sub-menu>li:nth-child(1){border-top:1px solid #e1aa2d}
.sub-menu>li{cursor: pointer;cursor: pointer;padding: 15px 0 8px ;border-bottom: 1px solid #e1aa2d}

.sub-menu li h4{transform: translateX(20px) ;opacity: 0}
.sub-menu li.active h4{transform: translateX(0) ;opacity: 1}
.sub-menu li .color-white{width: 100%;color: #000;display: block;text-transform: uppercase}
.sub-menu li .color-gold{width: 100%;display: block;color: #979897}

.sub-menu li li{margin-bottom: 5px !important}
.sub-menu li li h4{color: #979897 !important;transition: all .8s cubic-bezier(0.65, 0, 0.35, 1);}
.sub-menu li li h4:hover {color: #e1aa2d !important}
.project-list-sub{;max-height: 0;transition: all 1.8s cubic-bezier(0.65, 0, 0.35, 1);overflow: hidden;pointer-events: none;opacity: 0}
.project-list-sub.active{max-height: 399px;pointer-events: auto;opacity: 1}

#menu-list>li{position: relative;overflow: hidden;transition: all 1.8s cubic-bezier(0.25, 1, 0.5, 1);}
#menu-list>li:nth-child(1){position: absolute;top:0;left: 8px}
#menu-list>li:nth-child(2){position: absolute;top:7vw}
#menu-list>li:nth-child(3){position: absolute;top:14vw}
#menu-list>li:nth-child(4){position: absolute;top:21vw}

.about-text,.contact-text{padding-top: 30px;padding-bottom: 90px;width: 38vw !important}
.sub-menu-menu{padding-top: 30px;padding-bottom: 180px;margin-left: 8px}

#menu-list.active-1>li:nth-child(1),#menu-list.active-2>li:nth-child(2),#menu-list.active-3>li:nth-child(3),#menu-list.active-4>li:nth-child(4){position: absolute;top: 0;transition: all 1.8s cubic-bezier(0.25, 1, 0.5, 1);width: 100%}

.btt-list{display: none}
#menu-list.active-2 .btt-list{display: block;margin-top: 20px}
.btt-btn{margin-left: 5px;border-bottom: 1px solid #000; display: inline-block;cursor: pointer}


#menu-list li h2,.sub-menu li h4{color: #000}
#menu-list>li{transition: all .8s cubic-bezier(0.25, 1, 0.5, 1);}
#menu-list{padding-bottom: 20px;transition: all 1.8s cubic-bezier(0.25, 1, 0.5, 1);position: relative;margin-top: 25px}
.menu-inner{transform: translateY(100vh) ;transition: all 1.8s cubic-bezier(0.25, 1, 0.5, 1);top:0;left: 0;position: fixed;top:0;width: 100%;height: 100%;opacity: 0;z-index: 8}
.menu-inner.up{transform: translateY(0);opacity: 1;}
.menu-text {position: absolute;;top:0;width: 100%;left: calc(100% - 43.5%);overflow-y: scroll;height: 100vh;overflow-x:hidden}
#menu-list>ul{margin-left: 5px;}
.menu-inner .txt-wrap{opacity: 0}
.menu-inner.up .txt-wrap{opacity: 1;}
#menu-list li:nth-child(1) .txt-wrap{transition-delay: .25s;}
#menu-list li:nth-child(2) .txt-wrap{transition-delay: .5s;}
#menu-list li:nth-child(3) .txt-wrap{transition-delay: .7s;}
#menu-list li:nth-child(4) .txt-wrap{transition-delay: .9s;}
#menu-list>li .txt-wrap{ transform: translateY(5vw) rotate(5deg);opacity: 0;transition: all .8s cubic-bezier(.38, .005, .215, 1)}
.up #menu-list>li .txt-wrap{ transform: translateY(0) rotate(0deg);opacity: 1;}


#menu-list.active-1 li:nth-child(2),#menu-list.active-1 li:nth-child(3),#menu-list.active-1 li:nth-child(4),
#menu-list.active-2 li:nth-child(1),#menu-list.active-2 li:nth-child(3),#menu-list.active-2 li:nth-child(4),
#menu-list.active-3 li:nth-child(1),#menu-list.active-3 li:nth-child(2),#menu-list.active-3 li:nth-child(4),
#menu-list.active-4 li:nth-child(1),#menu-list.active-4 li:nth-child(2),#menu-list.active-4 li:nth-child(3)
{position: relative;top:auto}

#menu-list > li.tran-on{opacity: 0;position: absolute}
#menu-list > li.tran-on-no{opacity: 1}


#menu-list.active-1 >li:nth-child(2) h2,#menu-list.active-1 >li:nth-child(3) h2,#menu-list.active-2 >li:nth-child(1) h2,#menu-list.active-2 >li:nth-child(3) h2,#menu-list.active-3 >li:nth-child(1) h2,#menu-list.active-3 >li:nth-child(2) h2{color: #000}

.about-text,.contact-text{opacity: 0;;transform: translateY(5vw) rotate(0deg);}
#menu-list.active-1 .about-text,#menu-list.active-3 .contact-text{opacity: 1;;transform: translateY(0) rotate(0deg);}

/* home */
.hero-text {position: fixed;width: 75%;;right: 2.5%;top:42px}
.hero-text h1{display: inline-block;}
.text-right{float: right}
.text-wrap h1,.text-wrap img{transform: translate(0%, 100%) rotate(-5deg);;opacity: 0}
.text-wrap h1.active,.text-wrap img.active{transform: translate(0%, 0%) rotate(0deg);opacity: 1}
.text-wrap img{height: 12vw;width: auto}



/* section */

.home-hero-wrap.up .text-wrap h1,.home-hero-wrap.up .text-wrap img{transform: translate(0%, -100%)  rotate(0deg);opacity: 0;}
.txt-1 h1{transition-delay: .3s;}
.txt-2 h1{transition-delay: .6s;}
.txt-3 h1{transition-delay: .9s;}
.txt-4 h1{transition-delay: 1.2s;}

.home-hero-wrap.up .txt-1 h1{transition: all .6s cubic-bezier(.38, .005, .215, 1);transition-delay: .15s;}
.home-hero-wrap.up .txt-2 h1{transition: all .6s cubic-bezier(.38, .005, .215, 1);transition-delay: .3s;}
.home-hero-wrap.up .txt-3 h1{transition: all .6s cubic-bezier(.38, .005, .215, 1);transition-delay: .45s;}
.home-hero-wrap.up .txt-4 h1{transition: all .6s cubic-bezier(.38, .005, .215, 1);transition-delay: .6s;}

.text-wrap{display: block;overflow: hidden;position: relative;margin-top: -1vw}

.text-wrap img.step1{transition-delay: .10s;}
.text-wrap img.step2{transition-delay: .20s;float: right}
.text-wrap img.step3{transition-delay: .30s;}
/*.sub-menu li:nth-child(1).active h4{transition-delay: .15s;}
.sub-menu li:nth-child(2).active h4{transition-delay: .3s;}
.sub-menu li:nth-child(3).active h4{transition-delay: .45s;}
.sub-menu li:nth-child(4).active h4{transition-delay: .6s;}
.sub-menu li:nth-child(5).active h4{transition-delay: .75s;}
.sub-menu li:nth-child(6).active h4{transition-delay: .9s;}
.sub-menu li:nth-child(7).active h4{transition-delay: 1.05s;}
.sub-menu li:nth-child(8).active h4{transition-delay: 1.3s;}*/

.home-content{width: 50vw;height: 100vh;position: absolute;top:0;left: 2vw;padding-top: 0 !important;pointer-events: none !important;opacity: 1}
.home-content li{position: absolute !important;top:50px;margin-top: 0 !important;height: calc(100vh - 130px) !important}
.home-content li.img-container{width: 100%}
.home-content li.img-container .txt-wrap{left: 50px}
.home-content li.img-container .txt-wrap h4{color: #deb747 !important;}

.who-btn{cursor: pointer;color: #deb747;animation: flash 2s infinite;}
@keyframes flash {
  0%   {color:#FFF}
  50%  {color: #deb747}
  100% {color:#FFF}
}

.section-title{position: fixed;;left:15%;top:30px;width: 70%;text-align: center;z-index: 7;transition: all 2.4s cubic-bezier(0.65, 0, 0.35, 1);text-transform: uppercase}
.project-title{position: fixed;right: 30px ;bottom: 4vh;text-align: center;z-index: 4;transition-delay: 1.2s;}

.project-info .section-title{transform: translateY(-45vw) rotate(15deg);transition: all 2.4s cubic-bezier(0.65, 0, 0.35, 1);}
.project-info.active .section-title{transform: translateY(0) rotate(0deg)}
 .section-title.out{transform:  translateY(-15vw) rotate(15deg);opacity: 0}

.project-info .section-side-title{transform: translateX(-5vw) rotate(0deg)}
.project-info.active .section-side-title{transform: translateX(0) rotate(0deg)}

.project-info .project-title{transform: translateY(20vw) rotate(0deg)}
.project-info.active .project-title{transform: translateY(0) rotate(0)}

.space-holder{opacity: 0}
.space-holder.active{opacity: 1}

.content{margin-bottom: 120px}
.content li:nth-child(odd){transition-delay: .4s;}
.content li,.sample-card .card-st{position: relative;transition: all 2s cubic-bezier(0.65, 0, 0.35, 1);;opacity: 0; transform: translate(100%) rotate(-10deg); transform-origin: 0% 100% 0px;height: calc(46vw + 30px)}
.sample-card .down-animte{transform: translate(-100%) rotate(10deg); transform-origin: 0% 100% 0px;height: calc(49vw + 30px)}
 .sample-card.odd-item .card-st{transform: translate(-100%) rotate(10deg); }
.content li .img-inner{cursor: pointer}


.content li.show,.sample-card.active .card-st{opacity: 1; transform: translate(0%) rotate(0deg); transform-origin: 0% 0% 0px;}
.content li{overflow: hidden}
.img-inner{width:20vw;transition: all 2s cubic-bezier(0.65, 0, 0.35, 1);; opacity: 1; transform: scale(1.4); transform-origin: 100% 100% 0px;margin-bottom: 60px}
.img-container.show .img-inner,.sample-card.active .img-inner{width:36vw;height: calc(100% - 25px) !important; opacity: 1; transform: scale(1); transform-origin: 0% 0% 0px;}
.sample-card.active .img-inner{width: 100%;position: absolute;height: 100% !important}
.img-container  .txt-wrap{transform: translateY(10vw) rotate(0deg);opacity: 0;position: absolute;bottom: 0;transition-delay: .8s;left: 1.8vw}
.img-container.show  .txt-wrap{transform: translateY(0) rotate(0deg);opacity: 1;}
.content li:nth-child(even){margin-top: 240px}

.scroll-container{width: 100%}

/*.sample-card{transition: all 2.2s cubic-bezier(0.25, 1, 0.5, 1);opacity: 0 ;transform: rotate(-2deg) translateX(2vw) scale(1) ;}
.down-aw{transform: translateY(15vw) rotate(10deg)}
.up-aw{transform: translateY(-15vw) rotate(10deg)}
.sample-card.active{opacity: 1;transform: translateY(-0) rotate(0)}*/
.horizontal{transition: all .3s linear;}
.section-listing-title.title-lead{transform: translateY(-30vw) rotate(15deg);}
.single .horizontal{overflow: hidden}
.card-st {pointer-events: none;}
.card-st .active{pointer-events: auto}
.video-overlay{cursor: pointer;pointer-events: auto}
.popup-video{position: fixed;width: 100%;height: 100%;top:0;left: 0;transform: translateY(100%);opacity: 0;transition: all .8s cubic-bezier(0.65, 0, 0.35, 1);z-index: 999}
.popup-video.active{transform: translateY(0%);opacity: 1}
.popup-video-bg{position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,0.8);top:0;left: 0;}
.popup-video iframe{position: absolute;width: 70vw;height: 60vh;top:20vh;left: 15vw}

/* clients */
.page-id-21 .sample-card{margin-right: 4vw}
.page-id-21 .sample-card img{width: 30vw;float: left;}


/* 2025 */
.control-single{position: fixed;left: 26px;  bottom: 40px;}
.prev-item{background: url(../images/a-left.svg) left center no-repeat;background-size: auto 70%;position: relative;float: left;padding-left: 20px;display: block;width: 100%;margin-bottom: 10px}
.next-item{background: url(../images/a-right.svg) left center no-repeat;background-size: auto 70%;position: relative;float: left;padding-left: 20px;display: block}
.prev-item:hover{background: url(../images/a-left-g.svg) left center no-repeat;background-size: auto 70%;}
.next-item:hover{background: url(../images/a-right-g.svg) left center no-repeat;background-size: auto 70%;}
.prev-item:hover h6,.next-item:hover h6{color: #e1aa2d}
.control-single h6{line-height: .9}

/*.section-side-title{background: url(../images/menu-v.png) center center no-repeat;background-size: 18px;}*/
.preloader{position: fixed;width: 100%;height: 100%;top:0;left: 0;}
.preloader-1{background: #e0dbd1  url(../images/logo_2025.svg) center center no-repeat;background-size: auto 60%;z-index: 9999}
.preloader-2{background: #deb747 url(../images/logo_2025-w.svg) center center no-repeat;background-size: auto 60%;z-index: 9998}
.down-arrow{position: fixed;left: 22.5%;width: 24px; bottom: 30px;transition: all .8s cubic-bezier(0.65, 0, 0.35, 1);}
.home-hero-wrap.up .down-arrow{opacity: 0;transform: translateY(-20px)}

.hints{position: absolute;left: 100px; top: 50%;transform: translateY(-50%);opacity: 0;
        transition: opacity 0.3s ease-in-out;}
#menu-list li h2:hover{color: #deb747 !important;}
.txt-under{position: absolute;left: 0;top: -.5vw;  border-bottom: .6vw solid #000;  line-height: 0.8;}
.txt-under-wrap{position: relative;padding-left: 8vw}