/*
Theme Name: swap
Author: Dicky
Author URI: http://swwwap.hk
Description: This is a  bootstrap theme for wordpress. 
Version: 1.0
License: swwwap
*/

html{margin: 0 !important;overflow-x: hidden;-webkit-font-smoothing: antialiased;
position: relative;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
a{color: #000;cursor: pointer}
a:focus{outline: none !important}
a:hover{text-decoration: none;color: #3A3A3a}
.page-inner{transform: translateY(120px);-ms-transform:translateY(120px);-webkit-transform:translateY(120px);padding-top: 50px}
.page-template-page-about .page-inner,.single-project .page-inner,.single-news .page-inner{padding-top: 0}
input:focus {
    outline: none !important;
    box-shadow: none;
}
.link-url:hover{color: #CCC9C7}


:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #000;
}

.menu-bg,.arrow-control,.projectinnerwrap{
  -webkit-transition: all 300ms ease;
  transition:         all 300ms ease; 
}
.menu-side,a,.projecttype-single{
  -webkit-transition: all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:         all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.menu-side,.search-layer{
  -webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:         all 400ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.menu-icon span{
  -webkit-transition: all 80ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:         all 80ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.hoverimage{
  -webkit-transition: all 100ms linear;
  transition:         all 100ms linear;
}
.drophoveritem,.job-inner,.arealist li h1,.areadot, .mapicon,.drophead{
  -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1); 
}
.singlepreload{
  -webkit-transition: all 250ms cubic-bezier(0.86, 0, 0.07, 1);;
  transition:         all 250ms cubic-bezier(0.86, 0, 0.07, 1);;
}
.page-inner,.menu,.ss-landing-wrap{
  -webkit-transition: all 400ms cubic-bezier(0.645, 0.045, 0.355, 1) ;
  transition:         all 400ms cubic-bezier(0.645, 0.045, 0.355, 1);	
}
.job-list li:last-child,.contact-list li:last-child,.awards-list-wrap li:last-child,.contact-list li:last-child{border-bottom: none}
.page-template-page-templatespage-terms-php strong{}

/* header and footer */
body {
    -moz-osx-font-smoothing: grayscale;
}
header{width: 100%;padding-top: 20px;padding-bottom: 20px;z-index: 99;background: #FFF;overflow: hidden;}
.page-template-page-home header{position: fixed;padding: 20px 0 19px 0;opacity: 1;top:0}
.logo{height:44px;margin-left:-20px;position: relative;float: left}
.logo-wrap{display: inline-block}
.tagline h3{margin-top: -2px}
.lang-item-en{font-size: 28px;font-weight: normal}
.lang-item-zh{font-size: 22px;font-weight: normal}

/*.drophead{position: fixed;top:0;left: 0;width: 100%;padding-top: 20px;padding-bottom: 18px;background: #FFF;z-index: 100}
.drophead.active{top:-200px}*/
.menu-close {position: absolute;width: 2em;height: 2.4em;display: inline-block;right: 40px;top:20px;z-index: 999}
.menu-icon,.close-btn {position: fixed;width: 2em;height: 2.4em;display: inline-block;right: 40px;top:20px;;z-index: 1000}
.menu-icon span,.menu-close span ,.close-btn span{position: absolute;height:2px;width: 100%;background-color: #000;}
.menu-icon span:nth-child(1),.menu-close span:nth-child(1) {top: 0.8em;}
.menu-icon span:nth-child(2),.menu-close span:nth-child(2) {top: 1.4em;}
.menu-icon.active span:nth-child(1),.menu-close span:nth-child(1),.close-btn span:nth-child(1) {top:1.2em;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.menu-icon.active span:nth-child(2),.menu-close span:nth-child(2),.close-btn span:nth-child(2) {top:1.2em ;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.close-btn span{background: #FFF}

.menu-side{position: fixed;background: none;top:0;right: 0;width: 100%;height: 100%;z-index: 100;padding:24px 37px 30px 37px;pointer-events: none;opacity: 0;z-index: 999}
.menu-side.active{;pointer-events: auto;opacity: 1}
.lang-list{display: inline-block;float: left}
.sub-menu{position: absolute;bottom: 35px;left: 40px;display: inline-block}
.menu-copyright{position: absolute;bottom: 74px;left: 40px;display: inline-block}
.menu-side a{cursor: pointer}
.menu-side a:hover{color: #CCC9C7}
.ss-icon{overflow: hidden;width: 100%}
.ss-icon li{float: left;margin-right: 20px;width: 20px}
.zh_font .ss-icon{margin-left: 3px}
.menu li{position: relative}
#about-menu-ss{position: absolute;top:30px;background: #FFF;width: 50%;height: 60%;display: none}
#about-menu-ss.active{display: block}
.menu-search{position: absolute;left: 180px;bottom: 0}
.menu-bg{position: fixed;width: 100%;height: 100%;top:0;left: 0;z-index: 998;pointer-events: none;opacity: 0;background: #FFF}
.menu-bg.active{opacity: 1}
.current-lang{display: none}


footer{padding-top: 90px;padding-bottom: 35px;background: #FFF;position: relative}
.page-template-page-people footer,.page-template-page-project footer{padding-top: 43px}
.page-template-page-news footer,.page-template-page-career footer{padding-top: 70px}
.page-template-page-contact footer{padding-top: 0}

.btt{cursor: pointer}

.page-inner,.menu-side .menu{transform: translateY(120px);-ms-transform:translateY(120px);-webkit-transform:translateY(120px);;opacity: 0;}
.page-inner.active,.menu-side.active .menu{transform: translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);opacity: 1}

.link-btn{display: inline-block}
.link-btn a{color: #CCC9C7;}
.link-btn:hover a{color: #000}

/* home */
.home .tagline,.home footer{display: none}
.home .page-inner{margin: 0 !important;opacity: 1 !important;padding-top: 0 !important}
.home-hero{position: fixed;top:105px;left: -3px;z-index: 2;width: 100%}
.flexslider .slides > li { 
  background-position: center;
  height: 100%;
  width: 100%;
  display: none; 
  -webkit-backface-visibility: hidden;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.flexslider-container, 
.flexslider .slides, 
.flex-viewport {
    height: 100%;
}

ul.slides {
  margin: 0;
  padding: 0;
}

.flexslider {
  margin: 0; 
  padding: 0; 
  width: 100%; 
  height: 100%; 
  border: 0px; 
}
.windowheight,.singleheightimg,.singleheight{height: 100vh}
.imagescale{height: calc((100vw - 80px)*0.666);width: 100%}


.flex-slider-info{position: absolute;width: 100%;height: 100%;top:0;left: 0;z-index: 8;pointer-events: none}
.flex-direction-nav a.flex-next::before ,.flex-direction-nav a::before{content: " "}
.flex-prev,
.flex-next,.flex-control-paging li a {
  font-size: 0 !important;
}
.counter-slide{position: absolute;bottom: 20px;right: 40px;display: none}
.counter-slide span.spec{padding: 0 14px}
.counter-info{position: absolute;bottom: 33px;left: 40px;width: 80%}
.counter-info p{margin-bottom: 5px;color: #FFF}
.counter-info li,.hero-info li{display: none}
.counter-info li.active,.hero-info li.active{display: block}
.hero-info li.black h1{color:#000 !important}
.counter-info a:hover{color: #FFF}

.arrow-control{position: absolute;top:50%;z-index: 2;cursor: pointer;opacity:0;pointer-events: auto}
.left-arrow{left: 40px;background: url(../img/left-arrow.png) left center no-repeat ;background-size: 10px;width: 30%;height: 80%;top:10%}
.right-arrow{right: 40px;background: url(../img/right-arrow.png) right center no-repeat ;background-size: 10px;width: 30%;height: 80%;top:10%}
.left-arrow.blackon{background: url(../img/left-arrow-black.png) left center no-repeat;background-size: 10px;}
.right-arrow.blackon{background: url(../img/right-arrow-black.png) right center no-repeat;background-size: 10px;}

.arrow-control:hover{opacity: 1}
.flex-control-nav{opacity: 1;width: auto !important}
.flex-control-nav{bottom: 42px;right: 30px}
.blackon.flex-control-paging li a{border: 1px solid #3A3A3a !important;background: none !important}

.flex-control-paging li a{box-shadow: none;background: none;width: 8px;height: 8px ;border: 1px solid #FFF;}
.flex-control-paging li a.flex-active{background: #FFF !important;box-shadow: none !important}
.blackon.flex-control-paging li a.flex-active{background: #3A3A3a !important;box-shadow: none !important}
.homeslide{position: relative;}


/* about */
#area-ss{position: relative}
.about-people-info{position: absolute;z-index: 9;top:15px}
.video-wrap{position: relative}
.video-btn{position: absolute;width: 100%;height: 100%;top:0;left: 0;background: rgba(255,255,255,.2) url(../img/icon-play.svg) center center no-repeat;background-size: 60px}
.count-wrap{position: absolute;left: 0;top:0}
.mapwrapper{position: relative}
.areadot{position: absolute;width: 8px;height: 8px;background: #CCC9C7;border-radius: 100%;cursor: pointer}
.mapicon{margin-left: -100%;margin-top: -100%;opacity: 0}
.areadot.active,.areadot:hover{background: none;z-index: 2}
.areadot.active .mapicon,.areadot:hover .mapicon{opacity: 1}
.arealist li.active h1{color: #000 !important}
.page-template-page-about .flex-control-nav{display: none}

/* expertise */
.filter-listing{float: right;display: inline}
.filter-listing li{float: left;margin-left: 20px}
.projecttype-single{color:#000;cursor: pointer}
.projecttype-single.nontype{color: #CCC9C7}
   
.ex-filter-listing li{float: left;margin-right: 14px;overflow: hidden}
.wp-pagenavi{display: none}
.change-view{margin-top: 6px;float: right}
.job-list.active{border-top:1px solid #CCC9C7;margin-top: 35px}

/* expertise single */
.single-landing{width: 100%;height: 800px}
.section-break-line{width: 100%;height: 1px;background: #CCC9C7;margin: 0 0 25px;position: relative;overflow: hidden}
.crossingline{width: 0%;height: 100%;position: absolute;left: 0;background: #000}
.light-box-video{position: fixed;width: 100%;height: 100%;background: rgb(255,255,255,.95);top:0;left: 0;z-index: 9999999999;padding: 120px 120px;display: none}
.video-icon{width: 100px;height: 100px}
.singleheight li{position: relative}
.video-play{position: absolute;top:calc(50% - 50px);left: calc(50% - 50px);height: 100px;width: 100px;background: url(../img/icon-play.svg) center center no-repeat;background-size: contain;z-index: 2}
.project-wrap{position: relative}
.ajax-preloader{display: none}
.projectcontent{min-height: 768px}
.projectinnerwrap{opacity: 0}
.projectinnerwrap.active{opacity: 1}
.singleheightimg{width: 100%;position: relative}
.ss-landing-wrap{position: fixed;top:60px;left: 0;width: 100%;}
.ss-landing-wrap.active{top:0;}
.ssbp-wrap{margin-left: -12px;}
.ssbp-list li a::after,.ssbp-list li a::before,
.ssbp--theme-1 .ssbp-btn::after,.ssbp-list li a {background: none !important;content: "" !important}
.ssbp-li--facebook{background:url(../img/icon-facebook.svg) center center no-repeat;background-size: 16px; }
.ssbp-li--twitter{background:url(../img/icon-twitter.svg) center center no-repeat;background-size: 18px; }
.ssbp-li--linkedin{background:url(../img/icon-linkedin.svg) center center no-repeat;background-size: 16px; }
.ssbp-li--email{background:url(../img/email-1.png) center center no-repeat;background-size: 18px; }
.ssbp-li--pinterest{background:url(../img/icon-wa-1.png) center center no-repeat;background-size: 18px; }

.ss-landing{position: absolute;top:0;left: 0;width: 100%;height: 800px;background: #EEE;}
.ss-inner{padding-top: 40px;background: #FFF;overflow: hidden;position: relative}
.ssbp-list li{margin-top: 0 !important}

.single-project .flex-control-nav,.single-news .flex-control-nav{bottom: -30px;right: auto;right: 0;padding-right: 0}
.single-project .flex-control-nav a,.single-news .flex-control-nav a{border:  1px solid #000}
.single-project .flex-control-paging li a.flex-active,.single-news .flex-control-paging li a.flex-active{background: #000 !important}

.i-video iframe{width: 100% ;height: 28vw}
.singleheightimg iframe{width: 100%;height: 100%}
.tag-listing h3{font-size: 2.3vw !important;line-height: 2.3vw}


/* career */
.job-list{overflow: hidden}
.job-list li{border-bottom: 1px solid #CCC9C7;padding:20px 0 16px 0;overflow: hidden}
.job-list li h4{cursor: pointer}
.job-inner p{padding: 20px 60px 30px 0 ;margin-bottom: 0}
.job-inner .link-url{padding-bottom: 70px;width: 100%;position: relative;display: block}
.job-inner{overflow: hidden;max-height: 0}
li.active .job-inner{max-height: 999px}
.page-template-page-projectlist .job-list  li:nth-child(1),.page-template-page-career .job-list  li:nth-child(1){padding-top: 0}
.page-template-page-projectlist .typelist,.page-template-page-career .typelist{border-bottom: 1px solid #CCC9C7;margin-bottom: 20px}

/* contact */
.contact-list {border-top: 1px solid #CCC9C7}
.contact-list li{border-bottom: 1px solid #CCC9C7;padding:20px 0 70px 0;overflow: hidden}

/* news */
.news-title {margin-bottom: 60px;position: relative}
.news-title h5{}
.news-title h3{padding-right: 20%}
.border-block{width: 100%;height: 1px;background: #CCC9C7;margin: 40px 0}
.news-type-list li{float: left;margin-right: 5%;}
.newstype-single{color:#000;cursor: pointer}
.newstype-single.nontype{color: #CCC9C7}
/* people */
.pplon{display: none !important}
.people-single-img{width: 95%}
.people-list-wrap{position: relative}
.hoverimage{position: absolute;width: 100%;height: 100%;left: 0;top:0;z-index: 9;opacity: 0}
.hoverimage:hover{opacity: 1}
.qoute span,.qoute .after{width: 20px;height: 20px;background: url(../img/openq.png) left top no-repeat;background-size: contain;;position: relative;float: left;position: absolute;left: -8px}
.qoute {display: inline}
.qouteafter{background: url(../img/closeq.png)right top no-repeat;background-size: contain;;width: 20px;height: 32px;display: inline-block;}
/* awards */

.awards-list-wrap li {padding:20px 0 80px 0;overflow: hidden;border-top: 1px solid #CCC9C7;}
.awards-list-wrap li:nth-child(1){padding-top: 0;border-top: none; }

.awards-list-wrap li li{border-bottom: 1px solid #FFF;}
.awards-list-wrap li li li{padding-top: 0}
.awards-list-wrap li li:nth-child(1){padding-top: 0;border-top: none; }
.awards-list>li{border-bottom: 1px solid #CCC9C7;}
.awards-list li:last-child,.awards-list li li{border: none;padding-bottom: 0}
.awards-list li:last-child>div{margin-bottom: 0 !important}


/* publication */
.publication-item{margin-bottom: 40px}
.publication-item img{width: 100%;height: auto;border: 1px solid #CCC9C7;margin-bottom: 15px}
.publication-item>a>div{padding: 0 !important}
.publication-item span{display: none !important}
.pub-wrap{position: relative;border: 1px solid #CCC9C7;margin-bottom: 15px }

/* zh */
.singlepreloadwrap{position: relative}
.singlepreload{position: absolute;width: 100%;height: 100%;background: #FFF;top:0;right: 0;z-index: 10}
.singlepreload.active{width: 0}
.droplistitem{display: inline-block ;cursor: pointer;padding-bottom:  12px;}
.droplistitem.bold,.droplistitem a{color: #CCC9C7;}
.droplistitem.active,.droplistitem.active a,.droplistitem:hover,.droplistitem:hover a{color:#000;  }

.drophoveritem{;opacity: 1;max-height: 0;overflow: hidden;padding-top: 20px}
.drophoveritem.active{opacity: 1;max-height: 400px;}
.drophoveritem ul{width: 50%;float: left;}
.drophoveritem .drop-list-wrap{margin-bottom: 35px;overflow: hidden}

.typelist{display: none;pointer-events: none;overflow: hidden}
.typelist.active{display: block;pointer-events: auto}

/* search */
.search-btn{cursor: pointer;float: left;width: 28px;height: 28px;margin-right: 14px;}
.search-btn:hover{ color: #CCC9C7 !important}
.search-btn.active{opacity: 0;pointer-events: none}
.search-layer{position: fixed;width: 100%;height: 100%;background: rgba(255,255,255,.95);z-index: 99999;top:0;left: 0;pointer-events: none;opacity: 0}
.search-layer.active{pointer-events: auto;opacity: 1}
body{width: 100% !important}
#search{display: none}
#s{background: none;;box-shadow: none;border: none;text-transform: uppercase;;width: 100%;color:#cdcac8 }
#s:focus{color: #000}

/* Insight */
.insight-highlight{width: 100%;min-height: 58vw}
.insight-highlight .owl-carousel{width:150%;;padding-left: 0}
.page-template-page-insight footer,.single-insight footer ,.single-insight{background: #C9CAC5}
.page-template-page-insight header,.single-insight header{background: none}
.insight-bg{background: #FFF;position: absolute;z-index: 0;top:0;width: 100%;display: none}
.single-insight header h3{color: #FFF !important}
.feature-insight-wrap{width:50%;margin-left: 50px}
.insight-tag {margin-right: 10px;float: left;display: inline-block;position: relative;overflow: hidden}
.page-template-page-insight .droplistitem {color: #000 !important}
.page-template-page-insight .drop-list-wrap h5,.single-insight a{color: #000}

.page-template-page-insight .project-wrap h3{width: 50%}


.page-template-page-insight .owl-item  .insight-thum{width: 33% !important; }
.page-template-page-insight .owl-item.active.target .insight-thum{width: calc(100% - 60px) !important;opacity: 1;margin-left: 40px}
.page-template-page-insight .owl-item {opacity: .4}
.page-template-page-insight .owl-item.active.target {opacity: 1}
.page-template-page-insight .owl-item.active.target .project-wrap{padding-left: 40px}
.owl-item.active.target img{ transition-delay: 0s !important; }
.page-template-page-insight .tagline h3{color: #FFF}
.page-template-page-insight {background:  #C9CAC5}

.feature-insight-wrap li{display: none}
.owl-item .insight-thum{
  -webkit-transition: all 1200ms cubic-bezier(0.86, 0, 0.07, 1);;
  transition:         all 1200ms cubic-bezier(0.86, 0, 0.07, 1);
}

.insight-filter-list{position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,.95);z-index: 99999;top:0;left: 0;padding: 90px 0;display: none}
.insight-filter,.close-btn{cursor: pointer}
.scroll-area{position: fixed;bottom:0;width: 100%;height: 90px;background: url(../img/arrow.png) center center no-repeat;background-size:42px;z-index: 9;opacity: 0 }
.insight-list{margin-left: -40px;width: calc(100% + 80px);overflow: hidden}
.insight-list li{width: 50%;float: left;padding: 0 40px}
.insight-list li.clearfix{width: 100%;}
.tag-listing{padding-bottom: 70px;overflow: hidden;;padding: 0 60px;width: 33.3%;float: left}
.tag-listing li{width: 100%;float: left}
.insight-thum{width: 100% !important;height: 24.7vw;position: relative}
.owl-item.active.target .insight-thum{height: 37vw}
.owl-item .insight-thum{height: 16vw}
 .insight-thum{height: calc((42vw - 80px)*0.666);}

.insight-right{width: 25%;height: 50vw;position: absolute;right:40px;background: url(../img/arrow-right.svg) right center no-repeat;background-size:24px;z-index: 9}

.insight-filter-list{overflow: scroll}
.insight-highlight-single{margin-bottom: 60px}

/*.single-insight .flexslider {padding-bottom: 40px}*/
.single-insight .flex-control-nav{bottom: -20px;right: 0;padding-right: 0 !important;margin-right: -5px}
.single-insight .flex-control-paging li a{box-shadow: none;background: none;width: 8px;height: 8px ;border: 1px solid #000;font-size: 0 !important}
.single-insight .flex-control-paging li a.flex-active{background: #000 !important;box-shadow: none !important}

.stable-des{margin-top: 9px;width:60% !important;}
.loop-des{width: 100%;text-align: left;margin-top: 10px}
.insight-tag a,.stable-des,.loop-des{color: #6F6F6F}
.insight-tag a:hover{color: #000}
.page-template-page-insight .pnc,.single-insight .pnc{margin-left: 40px}

.owl-dot span{width: 8px;height: 8px;background: #666;display: block !important;border-radius: 100%;margin-right: 12px}
.owl-dot.active span{background: #FFF}
.insight-filter-list .owl-dots{position: fixed;bottom: 40px;right: 30px}
.right-arrow-tag{position: fixed;top:calc(50% - 30px);right: 30px;background: url(../img/right-arrow.png) center center no-repeat;background-size:contain;width: 30px;height: 24px;cursor: pointer;z-index: 99}
.left-arrow-tag{position: fixed;top:calc(50% - 30px);left: 30px;background: url(../img/left-arrow.png) center center no-repeat;background-size:contain;width: 30px;height: 24px;cursor: pointer;z-index: 99}
.ssbp-wrap .ssbp-list{margin-left: -8px !important}

/* zh */
.zh_font .job-list li{padding-bottom: 20px}
.zh_font .menu-side{padding:34px 37px 30px 37px;}
.zh_font .qoute span,.zh_font .qoute .after{background: url(../img/openqtc.png) left top no-repeat;background-size: contain;}
.zh_font .qouteafter{background: url(../img/closeqtc.png)right top no-repeat;background-size: contain;}
.zh_font .arealist{width: 50%;float: left}
.zh_font .change-view{margin-top: 8px}