html, body {
  width: 100%;
  margin: 0;
  font-family: 'tnd',sans-serif; 
}
html {

    background: #000
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;;
    background: #000
}

/**::-webkit-media-controls-panel {

  display: none!important;

  -webkit-appearance: none;

}

*::--webkit-media-controls-play-button {

  display: none!important;

  -webkit-appearance: none;

}

*::-webkit-media-controls-start-playback-button {

  display: none!important;

  -webkit-appearance: none;

}
video::-webkit-media-controls {
    display:none !important;
}*/

.mobile-version{display: none !important}

.menu-list li::after,.news-single-inner{transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1)}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto{padding-left: 10px;padding-right: 10px}
.row{margin-left: -10px;margin-right: -10px}



#site-header {
	position: fixed;
	padding: 32px 0;
	top: 0;
	width: 100%;
	z-index: 100;
	transition: all .3s ease;
	-webkit-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);
	z-index: 99;

	
}



#site-header.hide {
	-webkit-transform: translate3d(0, -20px, 0);-o-transform: translate3d(0, -20px, 0);transform: translate3d(0, -20px, 0);
	opacity: 0;
}


#site-header.hide a{pointer-events: none !important}
.page-template-template-home #site-header.hide ,#site-header.hide.open{
	-webkit-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);
	opacity: 1;
}
.page-template-template-home #site-header.hide a{pointer-events: auto !important}
.menu-list li{float: left;list-style: none;margin: 0;margin-left:40px;position: relative}
.menu-list li:nth-child(1){margin-left: 0}
.menu-list li.active h5{border-bottom: 1px solid #FFF}
.menu-list li:nth-child(1).active h5{border-bottom: 1px solid #000}
.menu-list li.active:hover h5{border-bottom: 1px solid #A9A9A9}

.menu-list {display: inline-block;float: right;margin: 0;}

footer{padding: 240px 0 32px 0;z-index: 99;}
.footer .inner{position: absolute;width: 100%;z-index: 2;pointer-events: none}
.footer .inner a{pointer-events: auto}
.footer-item{width: 174px;float: right;display: inline-block}
.home-page section.footer{-webkit-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);background: #000;height: 70vh}
footer a{pointer-events: auto}
.home-footer-wrap{position: absolute;width: 100%;z-index: 2;bottom: 0;pointer-events: none}

.studio-page,.contact-page,.news-page {background: #000}

a:hover{text-decoration: none}
a,a:hover{color: #FFF}
.page-template-template-work a h5 ,.page-template-template-work  a ,.page-template-template-work h1,
.page-template-template-worklisting  a,.page-template-template-work h1,
.single-works a,.single-works a h5{color: rgb(0,0,0)}

.home-page h1,.contact-page h1,.studio-page h1,.home-page h1,.news-page h1{color: #FFF}
.contact-page a,.studio-page a,.home-page a,.news-page a,.home-page h5,.contact-page h5,.studio-page h5,.news-page h5{ color:#FFF}

body.page-template-template-news{background-color: #000 !important}



.grid-wrap{position: fixed;top:0;left: 0;width: 100%;height: 100%;z-index: 999;pointer-events: none;opacity: 0}
.bb-left{width: 1px ;height: 100vh;;position: absolute;left: 40px;top:0}
.bb-right{width: 1px ;height: 100vh;;position: absolute;right: 40px;top:0}
.bb-top{width: 100vw ;height: 1px;;position: absolute;right: 0;top:32px}
.bb-margin-top{width: 100vw ;height: 1px;;position: absolute;right: 0;top:52px}
.bb-margin-bottom{width: 100vw ;height: 1px;;position: absolute;right: 0;top:132px}
.bb-menu{width: 1px ;height: 100vh;;position: absolute;right: 386px;top:0}
#log{display: none}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl{padding-left: 40px;padding-right: 40px}
	
.fixed h5,.arrow,.studio-list li::after,.studio-list li,.work-page .text-list li,span.single-cat::after,.work-title-text,.info-text,.studio-txt,.news-list li,.clients-list li,.fixed .title-txt h1,.single-work-thum video,.single-work-info,.archive-btn span,.single-work-thum,.filter-list h5,.filter-list h5 .text-border,a,a h1,.text-list li h5 {transition: all .2s cubic-bezier(0.25, 1, 0.5, 1);}
.studio-image-2,.studio-image-1,.news-content-wrap,header,.news-inner-wrap{transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);}

a {outline: 0;}

section{overflow: hidden;position: relative}
.section-lead{padding: 126px 0px 90px 0px }
.section-lead h1{padding: 0 !important;max-width: 1440px}

.icon-link span{font-size: 16px;position: absolute;right: 0;top:8px;width: 12px;height: 12px;background:url(../images/arrow-url.svg)center center no-repeat;background-size: contain;transform: scale(0.99);transition: all .2s cubic-bezier(0.25, 1, 0.5, 1);}
.page-template-template-news .icon-link span{;background:url(../images/arrow-url-gray.svg)center center no-repeat;background-size: 12px;}
.icon-link{cursor: default;position: relative;padding-right: 20px}

.page-template-template-news .img-btn span,.page-template-template-contact .img-btn span{;background:url(../images/arrow-img-gray.svg)center center no-repeat;width: 16px;height: 16px;background-size: contain;transform: scale(0.99);top:5px}

.url-link:hover span,.news-list li:hover .url-link span{     -webkit-transform: rotate(45deg) translatez(0);  transform: rotate(45deg) translatez(0);  -webkit-transform-origin: 50%  51%;    }
.img-btn:hover span,.news-list li:hover .img-btn span{    -webkit-transform: translatey(4px);  transform: translatey(4px);  }
.single-works .url-link:hover a{color: #000}

.filter-list{float: right;margin-top: 120px}
.filter-list li{float: left;margin-left: 30px;display: inline-block;position: relative;cursor: pointer}
.filter-list li:nth-child(1){margin-left: 0}
.list-view,.grid-view{display: none}
.list-view.active,.grid-view.active{display: block}
.filter-list li .text-border{bottom:1px;height: 1px;}
.text-border{position: absolute;width: 100%;height: 2px;bottom: 0px;left: 0;background: #000;opacity: 0}
.filter-list li.active .text-border{width: 100%;opacity: 1}
.list-view section{overflow: visible}

.filter-list li.active:hover h5{color: #000 !important;}
.filter-list li.active:hover .text-border{background: #000 !important}

.fix-menu{display: none}

.text-list>li{padding: 15px 0;cursor: pointer}
.text-list>li:last-child .work-list-img{}
.color-white .text-border{background: #FFF}
.break-line {width: 100%;height: 1px ;background: #CCC;margin: 30px 0 35px}
.category-list span{transition: all .2s cubic-bezier(0.25, 1, 0.5, 1);z-index: 2}
.category-list.active .single-cat:hover{color:#000 !important}
.page-template-template-news .category-list.active .single-cat:hover{color:#FFF !important}
/*.category-list span:hover .text-border{width: calc(100% - 2px);opacity: 1}*/
.category-list.active span{opacity: 0;}
.category-list span .text-border{width: calc(100% - 2px);opacity: 1}
.category-list span.single-cat.current .text-border,.category-list.active span.single-cat.current:hover .text-border{opacity: 0;}
.category-list.active.hover>span{opacity: .4}
.category-list span.single-cat{position: relative;display: inline-block;cursor: pointer;text-transform: lowercase}
.category-list.active span.single-cat.current{opacity: 1;pointer-events: auto}

.category-list.active span.single-cat.current::after{content: "　";width:26px;height: 26px;background: url(../images/back.svg)center center no-repeat;background-size: contain;display: inline-block;position: relative;opacity: 1;top: 17px;left: 5px;margin-right: 5px}
.category-list.active span.single-cat.current-cross::after{opacity: 1}
.color-white.category-list.active span.single-cat.current-cross::after{background: url(../images/back-w.svg)center center no-repeat;background-size: contain;}

.img-logo{display: inline-block;width: 156px;height: 40px;margin-top: -7px;background: url(../images/TobyNgDesign-w.svg)center center no-repeat;background-size: contain;margin-left: 1px}
.single-works .img-logo,.page-template-template-work .img-logo{background: url(../images/TobyNgDesign.svg)center center no-repeat;background-size: contain}

.logo h5{color: #FFF}
.home-ss h1{margin-bottom: 16px }


/* preloader */
.preloader{position: fixed;width: 100%;height: 100%;background: #FFF  url(../images/Website_Preload_3.gif)center center no-repeat;background-size: 152px;;z-index: 9999}

/* home */
.home-landing{height: 100vh;transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);}
.home-landing.active{height:320vh}
.home-ss-img{position: fixed;top:0;left: 0;width: 100%;height: 100%;z-index: 2}
.landing  h1{transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);;transform:translateY(30px);opacity: 0 }
.landing.active  h1{transform:translateY(0);opacity: 1}
.home-page section{height: 90vh}
.fixed{padding-left: 40px;-webkit-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);z-index: 1}
.appear{z-index: 2}
.home-page section h1{padding: 227px 0 0 0}
.home-page .home-landing h1{padding: 126px 0 0 0;z-index: 9;position: absolute}
.home-page .inner h1{padding-top: 0;margin-top: 90px}
.fixed .title-txt{display: inline-block;width: auto !important;cursor: pointer}
.fixed .title-txt h5,.fixed .title-txt h1{opacity: 0;}
.title-txt h5{margin-left: 3px}
.fixed .title-txt:hover h5,.visible-title .fixed .title-txt h5 ,.visible-title .fixed .title-txt h1,.fixed .title-txt:hover h1{opacity: 1}
.fixed .title-txt:hover .arrow{margin-left: 5px}
.video-single-wrap{overflow: hidden}

.home-see-all-work{height: 100%;margin-bottom: 0 !important;display: none}
.home-see-all-work li{position: absolute;height: 100%;width: 100vw;top:0;left: 0;opacity:0 }
.home-see-all-work li.active{opacity:.5}
.home-see-all-work-wrap{position: absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 1}
.home-see-all-work-wrap:hover .home-see-all-work {display: block}
.work-single-footer a{ color: #FFF}


.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 0
}
.video-container > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  z-index: 6
}



/* contact */
.contact-page h5{color: #FFF}
.job-listing{border-top:1px solid #404040}
.job-listing li{border-bottom: 1px solid #404040;position: relative;overflow: hidden;max-height: 60px;transition: all .6s cubic-bezier(0.25, 1, 0.5, 1);}
.job-listing li .icon-link{position: absolute;right: 0;top:15px}

.job-listing li.active{max-height: 999px}
.job-listing li :hover .img-btn span{    -webkit-transform: translatey(4px);  transform: translatey(4px);  }

.job-content li{border: none;padding-left: 20px;position: relative}
.job-content li::before{content: "–";position: absolute;;left: 0;}
.job-content ul br{display: none !important}
.job-content ul{margin: 20px 0 0 0}

/* studio */
.studio-page .text-list li{border-bottom: 1px solid #FFF;position: relative}
.studio-page .text-list{border-top:1px solid #FFF;margin-top: 15px}
.clients-img{position: relative}
.clients-img span{position: absolute;width: 100%;height: 100%;top:0;left: 0}
.fixediv{position: fixed;width: calc(100% - 20px);top:132px;width: calc(33.3333vw - 36px);right: 36px}
.fixedivb{position: absolute;top: auto;bottom: 0;right: 10px}


.studio-founder-list li{display: none}
.studio-founder-list li.active{display: block}

.bio-block.active .studio-txt{opacity: 0}
.bio-block.short .studio-image-1,.bio-block.short .studio-image-2{height: 1100px}
.clients-list li{cursor: pointer}
.award-details{padding-right: 60px}
.award-details span{top:3px;right: 10px;background:url(../images/arrow-award.svg)center center no-repeat;width: 16px;height: 16px;background-size: contain;top:5px}
.studio-list li.award-url:hover span{right: 5px}

.show-more-infromation.mobile-version{display: none}
.box{position: absolute; left: 0; top: 0; color: #FFF;display: none;z-index: 999;pointer-events: none}
.box h4{   color: white; }
#founder-section{overflow: hidden}
.bio-txt{cursor: default !important}


/* work List */
.work-page{width: 100%;overflow-x: hidden}
.work-page .text-list li{border-bottom: 1px solid #000;position: relative}
.work-page .text-list{border-top:1px solid #000;margin-top: 15px;}
.work-info{position: relative;float: left;width: 100%}
.info-text{position: absolute;top:0;left: 0;opacity: 0}
/* .single-work-info:hover .work-title-text{opacity: 0} */
.single-work-info{opacity: 0}
.single-work-info:hover .work-info{opacity: .6 !important}
.single-work-info.active{opacity: 1}
.single-work-info:hover .info-text{opacity: 1}
.single-work-thum{position: relative;overflow: hidden}
.single-work-thum video{opacity: 0;}
.single-work-thum:hover video{opacity: 1;}
.work-list-img  {position: absolute;width: 100%;top:57px;left: 66.666667%;opacity: 0;z-index: 9;pointer-events: none}
.work-page .text-list li{cursor: pointer}

.work-page .text-list li:hover{opacity: 1;z-index: 9}
.work-page .text-list li:hover .work-list-img{opacity: 1}
.reorder-btn{cursor: pointer;display: inline-block;background: url(../images/sorting-icon-on.png) right bottom 4px no-repeat;background-size: 8px;;padding-right: 12px}
.reorder-btn.active{background: url(../images/sorting-icon-off.png) right bottom 4px no-repeat;background-size: 8px;}
.page-template-template-news .reorder-btn{background: url(../images/sorting-icon-on-gray.png) right bottom 4px no-repeat;background-size: 8px;}
.page-template-template-news .reorder-btn.active{background: url(../images/sorting-icon-off-gray.png) right bottom 4px no-repeat;background-size: 8px;}


.single-work-thum video{    margin: auto;    position: absolute;    z-index: 1;    top:50%;    left: 0%;    transform: translate(0%, -50%);    visibility: visible;       width: 100%;    height: 101%;    object-fit: cover;top: 49.95%}
.wp-pagenavi{display: none}


/* work single */
.fulldesktop img{margin-left: -40px;width: calc(100% + 80px)}
.filter-btn{cursor: pointer}
.work-single-footer h5{color: #FFF}
.work-single-footer{position: relative;height: 70vh}
.flexslider{border: none !important;position: relative !important;;margin-bottom: 0;background: none}

.nav-btn-mouse{position: fixed;top:0;left: 0;z-index: 9;width: 20px;height: 20px;}
.flex-control-nav{display: none}
.work-video{/*height: 90vh*/;position: relative}
.single-landing{width: 100%;height: calc(100vw/3*2)}
.read-more-content{display: none}
.read-more-content.active{display: inline}
.read-more-btn{cursor: pointer}
.buy-btn{border: 1px solid #000;padding: 16px 32px ;display: inline-block;margin-top: 40px;font-size: 20px}
.buy-btn:hover{background: #000;color: #FFF}
.single-works .read-more-content p{margin-top: 20px}
.video-single-wrap{position: relative;margin-bottom: 20px}
.video-thum{position: absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 9;}
.single-work-slider-wrap{position: relative;}
.custom-navigation{position: absolute;width: 100%;height: 100%;top:0;left: 0;display: none}
.next-btn{width: 20px;height: 30px;background: red;float: right;margin-left: 16px;margin-top: 6px;background:url(../images/arrow-right.png)center center no-repeat;background-size: 18px; }
.prev-btn{width: 20px;height: 30px;background: aqua;float: right;margin-left: 16px;margin-top: 6px;background:url(../images/arrow-left.png)center center no-repeat;background-size: 18px;}
.news-single-inner .next-btn{background:url(../images/arrow-right-w.png)center center no-repeat;background-size: 18px;}
.news-single-inner .prev-btn{background:url(../images/arrow-left-w.png)center center no-repeat;background-size: 18px;}
.next-btn,.prev-btn{cursor: pointer }
.custom-navigation{position: relative;padding-bottom: 0;border-bottom: 1px solid #000;overflow: hidden;height: auto}
.flex-direction-nav .flex-next,.flex-direction-nav .flex-prev{position: relative;display: block;right: auto;left: auto;float: left}

.flex-direction-nav a{width: 100%;height: 100%;opacity: 1 !important;top:0 !important;cursor: none;text-shadow: none !important}
.flex-direction-nav a::before ,.flex-direction-nav a.flex-next::before{content: "　"}

.flex-direction-nav{position: absolute;top: 20px;right: 0;display: inline-block;width: 100%;height:calc(100% - 20px);}
.flex-nav-prev,.flex-nav-next{height: 100%;width: 50%;float: left}
.flexslider:hover .flex-direction-nav .flex-next{right: auto !important;}
.flexslider:hover .flex-direction-nav .flex-prev{left: auto !important;}
.custom-navigation h6{float: right;position: relative;top:auto;right: auto;padding-top: 13px;margin-right: 6px;;text-align: left;padding-bottom: 13px}
.flex-direction-nav span{position: absolute;top:0;left: 0;display: none;color: #000;m}
.single-cat.unclick{pointer-events: none !important}

.normal-img{width: 100%}
.full-img,.full .work-video{width: calc(100% + 64px);margin-left: -32px}
.realted-title{letter-spacing: -1px}

.single-work-content p a{color: #000;border-bottom: 1px solid #000}
.single-work-content p a:hover{color: #A9A9A9;border-bottom: 1px solid #A9a9a9}
.youtube-video-wrap{position: relative;height: 64vw !important}
.youtube-overlay{position: absolute;top:0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.8);z-index: 2; }


.youtube-video-wrap { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; overflow: hidden; 
    max-width: 100%; height: auto; 
} 
.youtube-video-wrap iframe, .youtube-video-wrap object, .youtube-video-wrap embed { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
}

.youtube-video-wrap.proportion169{height:  53vw!important}
.youtube-video-wrap.proportion1610{height: 63vw !important}

/* new */
.archive-btn{position: relative;cursor: pointer;padding-right: 32px}
.archive-btn span{position: absolute;right: 0}
.archive-btn:hover span{right: -6px}
.news-content-wrap{padding: 0 12px;}
.news-content-wrap.active{opacity: 1}
.news-content-wrap img ,.news-content-wrap video{max-width: 100%; height: auto;margin-bottom: 10px}
.news-list{border-top: 1px solid #FFF;margin-top:10px}
.news-single-inner{overflow: hidden;width: 100%;overflow: hidden;height: 0}
.news-single-inner.active{height:calc(38vw + 100px)}
.news-inner-wrap{padding-top: 40px;opacity: 0;position: relative}
.news-inner-wrap.active{opacity: 1}
.img-btn{cursor: pointer}
.news-inner-block{width: 100%;height: 38vw;}

/* clear fix */
.grid:after {  content: '';  display: block;  clear: both;}
.grid-sizer,.grid-item {  width: 33.333%;}
.grid-item{opacity: 0;transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1);}
.grid-item.active{opacity: 1}
.grid-item .inner{padding: 20px;overflow: hidden;display: inline-block;padding-bottom: 30px;width: 100%}
.grid-item {  float: left;}
.grid-item img {  display: block;  max-width: 100%;  width: 100%}
.news-page .text-list>li{border-bottom: 1px solid #FFF}
.grid-item .icon-link span.link-arrow{position: relative;bottom:10px;right: -6px;padding-left: 0;display: inline-block;top:0}

#clients-section{overflow: hidden}


/* mobile */
/* Animation Styles Start */

.mobile-menu{display: none}

.mobile-menu-wrap{position: fixed;width: 100%;height: 100%;background: #000;transform: translateY(-100%);top:0;left: 0;z-index: 98}
.mobile-menu-wrap.active{transform: translateY(0)}

.burger {  position: relative;  display: block;  width: 30px;  height: 30px;  z-index: 1;  padding: 13px 0}
.burger span {  position: absolute;}

.burger span:before,
.burger span:after {
  position: absolute;
  content: '';
}

.burger span:before,
.burger span:after {
  width: 26px;
  height: 1px;
  background-color: #fff;
  display: block;
}


.page-template-template-work .burger span:before,.page-template-template-work .burger span:after,
.page-template-template-worklisting .burger span:before,.page-template-template-worklisting .burger span:after,
.single-works .burger span:before,.single-works .burger span:after{background: #000}

.open .burger span:before,.open .burger span:after,.page-template-template-work,.single-works{background: #FFF}

.menucontrol span {
  transition-duration: 0s;
  transition-delay: .3s;
}

.menucontrol.open span {
  background-color: rgba(255, 255, 255, 0);
  transition-delay: .3s;
}

.menucontrol span:before {
  transition-duration: .3s;
  transition-delay: .3s, 0;
}

.menucontrol.open span:before {
  margin-top: 0;
  transform: rotate(45deg);
  transition-delay: 0, .3s;
}

.menucontrol span:after {
  transition-property: margin, transform;
  transition-duration: .3s;
  transition-delay: .3s, 0;
}

.menucontrol.open span:after {
  margin-top: 0;
  transform: rotate(-45deg);
  transition-delay: 0, .3s;
}


/* no-touch */
.touch    .work-list-img{display: none !important}