@media only screen and (min-width: 320px) and (max-width:919px) {

h1, .h1,h3, .h3,.menu-list li h5  {font-size: 30px/* 34*/;line-height:1.15;letter-spacing: -1.4px}
h2, .h2 {font-size: 35px;}
h4, .h4 ,h5, .h5 ,.studio-list li::after,p,.job-content{font-size:20px;line-height: 1.3;letter-spacing: -.2px;}
h6, .h6 {font-size: 14px;line-height: 1}

.bb-left{width: 1px ;height: 100vh;background: green !important;position: absolute;left: 15px;top:0}
.bb-right{width: 1px ;height: 100vh;background: green !important;position: absolute;right: 15px;top:0}
.bb-top{width: 100vw ;height: 1px;background: green !important;position: absolute;right: 0;top:32px}
.bb-margin-top{width: 100vw ;height: 1px;background: green !important;position: absolute;right: 0;top:52px}
.bb-margin-bottom{width: 100vw ;height: 1px;background: red !important;position: absolute;right: 0;top:107px}
.bb-menu{width: 1px ;height: 100vh;background: green !important;position: absolute;right: 386px;top:0}

.desktop-version,.l-desktop-version{display: none}
.mobile-version{display: block !important}
.fix-menu{display: block;width: 100%;position: fixed;z-index: 9;bottom: 0;padding:10px  15px ;background: #FFF}
.fix-menu h5{color: #000 }
.fixed-body{position: fixed;width: 100%;height: 100vh;top:0;left: 0}
.fixed-body a {color: #FFF !important}

.page-template-template-work .fix-menu{background: #000}
.page-template-template-work .fix-menu h5{color: #FFF }
.menu-list li.active h5{border: none !important}

.page-template-template-work footer,.page-template-template-news footer,.page-template-template-studio footer{padding-bottom: 70px}
.mobile-menu-wrap footer{padding-bottom: 30px}

.page-template-template-work .fix-menu .filter-list li.active .text-border{background: #FFF}

.fix-menu .filter-list{margin-top: 0}

h1 br,footer .order-12 br{display: none}
.fixed h1.on br{display: block}
.menu-list li.active:hover h5{border: none}

.margin-90-top{margin-top: 30px}
.margin-90-bottom{margin-bottom:30px}
.margin-60-bottom,.margin-30-bottom{margin-bottom: 30px}
.margin-120-bottom{margin-bottom: 44px}


.margin-15-bottom{margin-bottom: 10px}
.margin-5-bottom,.mobile-margin-0-bottom{margin-bottom: 0}

.break-line{margin: 14px 0 }
.text-list>li{padding: 14px 0 13px}
.page-template-template-home video{display: none}

.page-inner{padding-top:100px}
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl{padding: 0 15px }
.section-lead{padding: 0 0 60px 0}
.text-border{bottom: 3px}

.mobile-menu{position:absolute;right: 15px;top:26px;width: 26px;height: 26px;}
.mobile-menu{display: block}
.mobile-menu-wrap.active .menu-list{display: block;left: 15px;top:100px}
.menu-list li{width: 100%;margin-left: 0}
.menu-list li:hover::after{opacity: 0}
.mobile-menu-wrap footer{position: absolute;bottom: 0}
.mobile-menu-wrap footer h5,.menu-list a ,header.open a{color: #FFF !important}
header.open.active{top: 0 ; opacity: 1}

.menu-list {position: fixed;top:0;left: 0;background: #000;width: 100%;height: 100%;display: none}
.menu-list li{margin-bottom: 10px}
footer .text-right{text-align: left !important}
footer{padding-top: 70px;}
footer .col-sm-2{margin-bottom: 15px}
.footer-item{width: 100%;margin-bottom: 20px}
.footer,.work-single-footer{padding-top: 45px !important;}
.work-list-img{display: none}
.listing-cat{color: #A6A6A6 }
footer .footer-txt{;margin-bottom: 28px}
.home-page section.footer{height: 420px }

.img-logo{display: inline-block;width: 128px;height: 40px;margin-top: -12px;}

.open .img-logo{background: url(../images/TobyNgDesign-w.svg)center center no-repeat;background-size: contain}

/* home */
.fixed{left: 0;top:0;position: absolute;width: 100%;height: 100%}
.fixed.landing{top:130px}
.home-page{padding-top: 0;}
.home-page .home-landing h1{padding-top: 0;position: absolute;z-index: 9;}
.fixed{padding-left: 15px}
.mobile-landing{display: none}
.fixed.landing{position: fixed}
.mobile-active{opacity: 0}
.home-page section h1{padding-top:130px}
.scrollimate, .appear, .slide-in, .slide-out, .simplax, .lines::before, .lines::after, .blur, .parallax-come-forward{
	animation-delay:none;
	-webkit-animation-delay:none
}
.fixed h1{width: 91% !important}
.logo h5{display: none}
.logo img{display: block;}
.home-see-all-work-wrap li{background-size: cover !important}
.fixed .title-txt{width: 100% !important}
.footer  h1{padding-top: 0 !important;margin-top: 0 !important}
.home-see-all-work-wrap{display: none !important}

/* contact*/
.contact-title{margin-bottom: 15px}

/* work */
.single-works .section-lead{padding-bottom: 30px}
.category-list.active span.single-cat.current::after {width: 17px;height: 17px;top:11px}
.single-landing{margin-right: 15px;margin-left: 15px;width: calc(100% - 30px);margin-bottom: 20px;margin-top: 20px}
.more-infromation{padding: 10px 0;border-top:1px solid #000}
.read-more-content{display: block;margin-top: 20px;margin-bottom: 20px}
.read-more-btn{display: none}
.show-more-infromation{max-height: 0;overflow: hidden}
.show-more-infromation.active{max-height: 99999px}
.single-work-content::after{content: "　";width: calc(100% - 30px);height: 1px ;background: #000;position: absolute;bottom: 0;left: 15px;}
.more-infromation::after{content: "　";position: absolute;right: 22px;background: url(../images/plus.svg)center center no-repeat;background-size: 16px;top:10px}
.more-infromation.active::after{background: url(../images/less.svg)center center no-repeat;background-size: 14px;}
.sub-info-wrap,.content-intro{padding-top: 12px}
.single-work-slider-wrap{padding: 0}
.single-work-slider{width: 100%}
.custom-navigation{position: relative;padding-bottom: 0;border-bottom: 1px solid #000;overflow: hidden;height: auto;display: none}
.flex-direction-nav .flex-next,.flex-direction-nav .flex-prev{position: relative;display: block;right: auto;left: auto;float: left}

.flex-direction-nav{position: absolute;bottom: -40px;right: 0;display: inline-block;width: 80px;display: none}
.flexslider:hover .flex-direction-nav .flex-next{right: auto !important}
.flexslider:hover .flex-direction-nav .flex-prev{left: auto !important}
.flex-direction-nav{right: -26px}
.flex-direction-nav .flex-next{margin-left: 16px}
.single-work-slider-wrap{background: none !important}
.custom-navigation h6{float: left;position: relative;top:auto;right: auto;padding-top: 13px;margin-right: 70px;;text-align: left;padding-bottom: 13px}
.single-work-content{margin-bottom: 0}
.buy-btn{border: 1px solid #000;padding: 10px 20px ;margin-top:30px;width: 100%;text-align: center}
.realted-title{letter-spacing:-.2px}
.single-work-thum video{display: none !important}
.single-work-info:hover .single-work-thum{opacity: 1 !important}
.listing-cat.mobile-version{color: #A9A9A9}
.realted-title{font-size: 35px;line-height:1.15;letter-spacing: -1.4px}
.work-content-wrap{padding-bottom: 12px;border-bottom: 1px solid #CCC;margin-bottom: 64px}
.single-works h1{margin-bottom: 24px}
.single-works .custom-navigation h6{color: #000}
.news-single-inner.margin-30-bottom{margin-bottom: 0}
.news-inner-wrap{margin-bottom: 0;padding-top: 16px}
.page-template-template-news .flex-direction-nav .flex-next{width:20px;height: 40px;top:0;background:  url(../images/arrow-right-w.png) center center  no-repeat;background-size: 16px;color: #000}
.page-template-template-news .flex-direction-nav .flex-prev{width: 20px;height: 40px;top:0;background: url(../images/arrow-left-w.png) center center  no-repeat;background-size:  16px;color: #000}
.flexnav-text{display: none !important}
.work-video {float: left;height: auto;margin-bottom: 20px }
.popup-video .popup-inner{width: calc(100% - 30px)}
.popup-close{background: url(../images/icon-video-close.svg)center center no-repeat;background-size: contain;width: 30px;
    height: 21px;
    top: 29px;
    right: 13px;}
.fulldesktop img{width: 100%;margin-left: 0}
.work-content-wrap .flex-control-nav{display: block; bottom: 10px;z-index: 9}
.flex-control-paging li a.flex-active{background: rgba(255,255,255,.9)}
.flex-control-paging li a{background: rgba(255,255,255,.5);width: 8px;height: 8px;box-shadow: none !important}
.flex-control-nav li{margin: 0 4px}
.flex-control-paging li a:hover {
  background: #FFF;
  background: rgba(255,255,255,0.7);
}
.video-single-wrap .work-video{margin-bottom: 0}
 .bna-slider {      transition: all 0s cubic-bezier(0.9, 1, 0.22, 1);	  transform: translateX(0);left: 50%

}

/* studio */
.award-year{text-align: right}
.award-details{margin-top: 16px}
.award-url{padding-bottom: 13px !important}
.studio-page .text-list li:last-child{border: none !important}
.studio-list li::after {display: none}
.studio-image-1{max-width: calc(50% + 10px);padding-right: 5px;}
.studio-image-2{max-width: calc(50% + 10px);padding-left: 5px}
.studio-image-1,.studio-image-2{opacity: .3}
.studio-image-1.active,.studio-image-2.active{opacity: 1}
.studio-more-infromation::after{content: "　";position: absolute;right: 22px;background: url(../images/plus-w.svg)center center no-repeat;background-size: 16px;top:0}
.studio-more-infromation.active::after{background: url(../images/less-w.svg)center center no-repeat;background-size: 16px;}
.page-template-template-studio .show-more-infromation .row{padding-top: 40px;margin-bottom: 6px !important}
.studio-page .text-list{border: 0}
.studio-page .text-list .row{padding-top: 0}
.studio-txt{display: block}
.clients-list{margin-bottom: 20px}
.show-more-infromation.mobile-version.active{display: block !important}

.filter-list li.active:hover h5{color: #FFF !important;}
.filter-list li.active:hover .text-border{background: #FFF !important}
.show-more-infromation .text-list > li:last-child{padding-bottom: 0 !important}

/* news */
.news-list-button{text-align: left !important}
.news-list-location{color: #A6A6A6 !important}
.news-list{margin-top: 0 !important;margin-bottom: 60px !important}
.grid-item>a{padding: 10px}
.grid-sizer, .grid-item{width: 100%}
.news-content-wrap{padding: 0}
.grid-item .inner{padding: 16px}
.news-list>li{padding-bottom: 16px}
.icon-link{margin-top: 16px}
.icon-link span,.award-details span{position: relative;top:0;right: 0;padding-left: 4px;background-size: 11px;display: inline-block;width: 12px;height: 12px;top:0;overflow: hidden;margin-left: 2px}
.page-template-template-news .img-btn span,.award-details span{width: 14px;height: 14px;top:2px;background-size: 12px}
.archive-btn{padding-right: 0}
.studio-list li.award-url:hover span{right: auto}
.news-single-inner.active{height: 100%}
.news-single-inner.active{max-height: 3000px;}
.news-single-inner.active.slider{max-height: 3000px;}

.list-news-btn,.grid-news-btn{display: none}
.list-news-btn.active,.grid-news-btn.active{display: block}
.filter-list li.active .text-border{display: none}
.list-view .section-lead{display: none}
.filter-list li.active h5{border-bottom: 1px solid #FFF}
.img-btn:hover span,.news-list li:hover .img-btn span{-webkit-transform: translatey(0);transform: translatey(0);}
.url-link:hover span,.news-list li:hover .url-link span{transform: rotate(0deg) translatez(0);}
.news-single-inner .margin-30-bottom{margin-bottom: 0}
.listing-year{text-align: right}
.news-view.list-view .listing-year{text-align: left;width: 130%}


/* contact */
.page-template-template-contact .img-btn span{top:0;}
.page-template-template-contact .icon-link{padding-right: 0;margin-top: 8px;top:0 !important}

.job-listing li{max-height: 46px;padding: 8px 0}
.job-listing li:last-child{border: none}
.job-content li{border: none;padding-left: 20px;position: relative;max-height:999px;padding-top:  0;padding-bottom:  0}
.job-content li::before{content: "–";position: absolute;;left: 0;}
.job-content ul br{display: none !important}
.job-content ul{margin: 20px 0 0 0}
.job-listing li.active{max-height: 1999px}
}

@media only screen and (min-width: 576px) and (max-width:919px) {
	
h1, .h1{font-size: 38px}	
.menu-list li h5,.page-template-template-home h1	{font-size: 48px}
.footer h1{font-size: 38px}

.icon-link{margin-top: 0}
.grid-sizer, .grid-item{width: 50% !important}
h1 br{display: block !important}
.footer-item{ width: 50%}
 footer .order-12 br{display: block}

/* menu */
.mobile-menu-wrap.active .menu-list{top:126px}

/* home */
.footer{height: 420px !important}
.home-page section.footer{-webkit-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);background: #000;height: 50vh}

/* awards */
.award-year{text-align: left;}
.award-details{margin-top: 0 !important;padding-right: 0}

}

@media only screen and (min-width: 920px) and (max-width:1440px) {
	
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl{	padding-left: 32px;padding-right: 32px;}
	
.bb-left{width: 1px ;height: 100vh;background: red !important;position: absolute;left: 32px;top:0}
.bb-right{width: 1px ;height: 100vh;background: red !important;position: absolute;right: 32px;top:0}
.bb-top{width: 100vw ;height: 1px;background: red !important;position: absolute;right: 0;top:32px}
.bb-margin-top{width: 100vw ;height: 1px;background: red !important;position: absolute;right: 0;top:52px}
.bb-margin-bottom{width: 100vw ;height: 1px;background: red !important;position: absolute;right: 0;top:132px}
.bb-menu{width: 1px ;height: 100vh;background: red !important;position: absolute;right: 386px;top:0}


/* home */
.fixed{padding-left: 32px}

.filter-list h5:hover,.single-cat:hover,a:hover,a:hover h1,.text-list li:hover h5,.work-single-footer footer a:hover{color: #A9A9A9}
.filter-list h5:hover .text-border,.single-cat:hover .text-border,.menu-list li:hover::after {background: #A9A9A9}

}

@media only screen and (min-width: 1441px) and (max-width:2400px) {
.grid-sizer, .grid-item{width: 25% !important}

/* Home */
.home-page h1{font-size: 60px}
.home-page section h1{padding: 248px 0 0 0}

.home-ss-img.mobile-version{display: none}
.home-ss-img.desktop-version{display: none}
.home-ss-img.l-desktop-version{display: block}


.footer h1{font-size: 48px !important}
.full-img,.full .work-video{width: calc(100% + 80px);margin-left: -40px;}	
.fixediv{position: fixed;width: calc(100% - 20px);top:132px;width: calc(33.3333vw - 40px);right: 40px}
.fixedivb{position: absolute;top: auto;bottom: 0;right: 10px}

.filter-list h5:hover,.single-cat:hover,a:hover,a:hover h1,.text-list li:hover h5,.work-single-footer footer a:hover{color: #A9A9A9}
.filter-list h5:hover .text-border,.single-cat:hover .text-border,.menu-list li:hover::after {background: #A9A9A9}

}


@media only screen and (min-width: 320px) and (max-width:919px) and (orientation:landscape) {
	.home-ss-img.desktop-version,.home-ss-img.mobile-version{display: none !important}
	.home-ss-img.l-desktop-version{display: block !important}

}