/*
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(../fonts/09dc0b7f23774f55bdbb6137dfd78f7f.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(../fonts/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(../fonts/icon-facebook.svg) center center no-repeat;background-size: 16px; }
.ssbp-li--twitter{background:url(../fonts/icon-twitter.svg) center center no-repeat;background-size: 18px; }
.ssbp-li--linkedin{background:url(../fonts/icon-linkedin.svg) center center no-repeat;background-size: 16px; }
.ssbp-li--email{background:url(../fonts/3db257bbf19e4a98949867ed00dc58e7.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(../images/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(../images/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(../images/openqtc.png) left top no-repeat;background-size: contain;}
.zh_font .qouteafter{background: url(../images/closeqtc.png)right top no-repeat;background-size: contain;}
.zh_font .arealist{width: 50%;float: left}
.zh_font .change-view{margin-top: 8px}