@media only screen and (min-width: 100px) and (max-width:321px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
.drop-list-wrap li{width: 100% !important}
.drop-list-wrap li:nth-child(even){padding-left: 0 !important}

}

@media only screen and (min-width: 320px) and (max-width:766px) {
	.mobile-hide{display: none}
	html{width: 100% !important;overflow-x: hidden !important}
	h1{  vertical-align:middle}
	h1.extra{font-size: 42px;line-height: 32px}
	h1  ,#s,h2.qoute	{ font-size:42px;line-height: 36px;letter-spacing: -.6px}
	h2 	{ font-size:32px;line-height: 34px ;letter-spacing: 0 }
	h3 	{ font-size:28px;line-height: 28px ;letter-spacing: 0 }
	h4 	{ font-size:18px;line-height: 20px	}
	h5 	{ font-size:16px;line-height: 20px;	}
	h6,.search 	{ font-size:12px;line-height: 18px	;font-weight: normal !important}
	
	p	{margin-bottom: 10px;font-family:'Metric Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;color: #000;font-size: 15px;line-height: 18px}
	.tagline{margin-top: -6px}
	.zh_font h1 , .zh_font #s{  vertical-align:middle}
	.zh_font h1.extra{font-size: 36px;line-height: 48px}
	.zh_font h1 	{ font-size:36px;line-height: 36px;letter-spacing: -.6px}
	.zh_font h2 	{ font-size:28px;line-height: 36px;letter-spacing: -.8px }
	.zh_font h3 	{ font-size:24px;line-height: 26px ;letter-spacing: 0 }
	.zh_font h4 	{ font-size:18px;line-height: 26px	}
	.zh_font h5 	{ font-size:16px;line-height: 20px;	}
	
	.tag-listing h3{font-size: 28px !important;line-height: 1.1em}
	.offset-sm-1,.offset-sm-6,.offset-sm-9{margin-left: 0;max-width: 100%}
	
	.margin-60-bottom{margin-bottom: 30px}
	.margin-90-bottom{margin-bottom: 60px}
	.container{padding: 0 22px !important}

	
	.zh_font p	{font-family:'Metric Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;color: #000;font-size: 14px;line-height: 22px}
	.tagline h3.bold,.tagline h2.bold{font-size:27px;line-height: 20px;margin-left: -2px;letter-spacing: -.8px;margin-top: 0}
	.zh_font .tagline h3.bold{font-size: 22px !important;line-height:30px;}

	.menu-side h1,#s { font-size:48px !important;line-height: 48px !important;}
	.zh_font .menu-side h1 , .zh_font #s{ font-size:38px !important;line-height:48px !important;margin-top: 0}
	
	
	input{    -webkit-appearance: none;border-radius: 0;}
	.crossingline{display: none}
	
	.logo{margin-left: -17px;}
	.logo img,.drophead img{width: 215px;height: auto}
	.menu-icon{top:16px}
	
	header{padding-top: 18px;padding-bottom: 16px}
	.page-template-page-home header,.drophead{padding-top: 18px;padding-bottom: 10px}
	
	
	.filter-listing{float: left}
	.filter-listing li{margin-left: 0;margin-right: 10px;}

	.arrow-control{position: absolute;}
	.single .counter-slide{bottom: 10px}
	.ss-landing{margin-bottom: 30px}
	
	.video-wrap{margin-bottom: 40px}
	.mobile-gray{font-family:'Metric Regular';}
	.flex-control-nav {bottom: 27px;left: 15px;right: auto}
	.droplistitem{padding-bottom: 5px;}
	.zh_font .droplistitem{padding-bottom: 10px}
	.droplistitem-wrap{ margin-bottom: 10px;overflow: hidden}

	/* home */
	.logo{height:40px}
	.home .page-inner{position: fixed;width: 100vw;height: 100vh;top:0}
	.home-hero,	.zh_font .home-hero{top:90px}
	.left-arrow{left: 20px;top:30%}
	.right-arrow{right: 20px;top:30%}
	.counter-slide{right: 20px;bottom: 20px}
	.counter-info{left: 20px;bottom: 50px}
	
	/* people */
	.people-landing{margin-bottom: 30px}
	.people-single-img{width: 100%;margin-bottom: 30px !important}
	.qoute span,.qoute .after,.qouteafter{width: 20px;height: 30px;}
	/* about */
	.about-people-info{position: relative;z-index: 9;top:0}
	.count-wrap{left: 0}
	.mapwrap{margin-top: 0 !important;}
	.map-ss{margin-bottom: 0 !important}
	.zh_font .arealist{width: 50%}
	
	/* project */
	.project-subtitle{margin-top: 0;}
	.page-template-page-project .project-subtitle{margin-top: 0;margin-bottom: 25px !important}
	.single-project .ss-icon{margin-bottom: 30px !important}
	.singleheight,.singleheightimg{height: 220px !important}
	.drop-list-wrap ul{padding-left: 0 !important;}
	.change-view{margin-top: 0 !important;}
	.drop-list-wrap li{width: 50%;float: left;}
	.drop-list-wrap li:nth-child(even){padding-left: 10px}
	.projecttype .col-sm-6{width: 100%;max-width: 100% }

	/* news */
	.news-title h3{padding-right: 10%}
	.news-title{margin-bottom: 30px}
	.news-type-list li{width:45%}
	
	
	/* menu */
	.menu-icon{right: 18px;transform: scale(1);}
	.menu-side,.zh_font .menu-side{padding: 20px;padding-top: 13px }
	.sub-menu{left: 22px;bottom: 21px}
	.menu-copyright{left:20px;bottom: 75px}
	.sub-menu .lang-list{margin-bottom: 14px !important}
	.search-wrap-btn{margin-bottom: 6px;overflow: hidden}
	.ss-icon li{width: 20px}
	
	
	/* contact */
	.page-template-page-contact .ss-landing{margin-bottom: 30px !important}
	
	/* career */
	.mobile-gray.ss-location{margin-bottom: 0}
	
	/* footer */
	footer input{margin-left: 0 !important;margin-top: 15px;margin-bottom: 15px}
	footer .col-md-2{width: 100%;text-align: left !important;margin-bottom: 15px}

	.sub-menu a,footer .desktop-hide span a{width: 100% !important;display: block;position: relative}
	.sub-menu span span{display: none}
	
	/* drop */
	.drophoveritem ul{width:100%}
	
	/* insight */
	.insight-highlight .owl-carousel{width: calc(100% - 20px)}
	.page-template-page-insight .owl-item.active.target img,.page-template-page-insight .owl-item.active.target .project-wrap{padding-left: 20px}
	.insight-highlight{min-height: 100vw}
	.page-template-page-insight .owl-item .insight-thum,.insight-highlight-single .insight-thum{background: #EEE;width: 100vw !important;height: 107.5vw !important}
	.insight-highlight-single .insight-thum,.insight-single-inner{margin-left: -22px;width: calc(100% + 44px) !important}
	img.insight-thum{height: auto !important}
	.insight-list li{width: 100%;padding: 0}
	.insight-list{width: 100%;margin-left: 0}
	.insight-thum{height: 51vw !important}
	.offset-2{margin-left: 0}
	.page-template-page-insight .owl-item.active.target .insight-thum{width: 100% !important;padding: 0  !important;margin-left: 0;height: 100vw !important}
	.insight-highlight .owl-carousel{width: 100% !important}
	.insight-highlight .project-wrap,.insight-highlight-single .project-wrap{margin-top: -60px !important;width:75%}
	.insight-highlight,.insight-highlight-single{height: auto !important; padding-bottom: 60px}
	.insight-highlight .project-wrap h2,.insight-highlight-single .project-wrap h2{    background-color:#FFFFFF;
    color: #000;
     display:inline;
     white-space:pre-wrap;

    padding: 2px;padding-left:0px;box-shadow: -6px 0 0 #FFFFFF;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;margin: 10px 6px;text-transform: uppercase}
    .insight-highlight .project-wrap h5.mid-bold,.insight-highlight-single .project-wrap h5.mid-bold{background: #FFF;display: inline-block;float: left;padding:3px 6px;;margin-bottom: 0}
    .insight-name-wrap{float: left;position: relative;margin-bottom: 10px}
	.insight-right{display: block;height: 54vh}
	.tag-listing{width: 100%}

	.tag-listing li{width: 100%}
	.menu-icon, .close-btn{top:15px;right: 20px}
	.left-arrow-tag,.right-arrow-tag{display: none}
	
	.tag-listing{padding: 0 0}
	.tag-listing li{margin-bottom: 10px}

	.insight-highlight,.insight-highlight-single{padding-left: 0;padding-right: 0;overflow: hidden}
	.flex-slider-info{height: 80%}
	/* preloader */


	.prelogo{width: 300px !important}
	#preloader li:nth-child(2) .step5.active {margin-top: 26px !important;}
	h1.extrapre {font-size: 62px !important;line-height: 48px;letter-spacing: -2px;}
	h1.super{font-size: 6em;line-height: .8em}
	h1.superex{font-size: 18em;line-height: .8em}
	.centerwrap{width: 320px}
	.b1,.b2{height: 6px}
	
	#preloader li:nth-child(2) .step5.active{margin-top: 36px !important}
	#preloader li:nth-child(2) .step5{margin-top: -20px !important}
	#preloader li:nth-child(2) .ev{transform: translateY(-60px);-ms-transform: translateY(-60px);-webkit-transform: translateY(-60px);}
	

	#preloader li:nth-child(3) .text-wrap{height: 52px;overflow: hidden;margin-top: 106px}
	#preloader li:nth-child(3) .text-wrap.active{transform:translateY(-60px); ;-ms-transform:translateY(-60px);-webkit-transform:translateY(-60px)}
	#preloader li:nth-child(3) h1.step2{transform:translateY(-2px);;-ms-transform:translateY(-2px);-webkit-transform:translateY(-2px)}
	#preloader li:nth-child(3) h1.step2.active{transform:translateY(-60px);;-ms-transform:translateY(-60px);-webkit-transform:translateY(-60px)}

	#preloader li:nth-child(6) .step2.active{letter-spacing: 10px;transform:translateX(4px);;-ms-transform:translateX(4px);-webkit-transform:translateX(4px)}
	
	.imagetxt .scale14,.imagetxt .colb{transform: scale(.78);-ms-transform:scale(.78);-webkit-transform:scale(.78)}
	
	#preloader li:nth-child(11) .step1 h1{padding-top: 0}
	#preloader li:nth-child(11) .text-wrap{height: 48px}
	#preloader li:nth-child(11) h1.step2.active{transform:translateX(-62px) scale(.8);;-ms-transform: translateX(-62px) scale(.8);-webkit-transform:translateX(-62px) scale(.8)}
	#preloader li:nth-child(11) h1.step3.active{transform:translateY(-48px) scale(.8);-ms-transform: translateY(-48px) scale(.8);-webkit-transform:translateY(-48px) scale(.8)}
	#preloader li:nth-child(11) .step5.active{transform:translateX(-100%);-ms-transform: translateX(-100%);-webkit-transform:translateX(-100%)}

	#preloader li:nth-child(12) .text-wrap{height: 48px}
	#preloader li:nth-child(12) .colwrap {transform:translateX(100%) !important;-ms-transform: translateX(100%)!important ;-webkit-transform:translateX(100%)!important }
	#preloader li:nth-child(12) .colwrap.active {transform:translateX(-5%) !important;-ms-transform: translateX(-5%)!important ;-webkit-transform:translateX(-5%)!important }

	#preloader li:nth-child(16) h1,#preloader li:nth-child(17) h1{transform:translateY(60px);-ms-transform:translateY(60px);-webkit-transform:translateY(60px);font-size: 63px !important;line-height: 48px;}
	#preloader li:nth-child(16) .text-wrap.active h1,#preloader li:nth-child(17) .text-wrap h1{transform:translateY(-10px);-ms-transform:translateY(-8px);-webkit-transform:translateY(-8px)}	
	.bottom55{bottom: -22px}
	
	#preloader li:nth-child(17) .text-wrap.active h1,#preloader li:nth-child(17) .text-wrap.active h1{transform:translateY(-60px);;-ms-transform:translateY(-60px);-webkit-transform:translateY(-60px)}
	
	.scale16{transform: scale(3);-ms-transform:scale(3);-webkit-transform:scale(3)}
	.imagetxt .part{transform:translateX(-20px) scale(.6);;-ms-transform: translateX(-20px) scale(.6);-webkit-transform:translateX(-20px) scale(.6)}
	
	.griditem>li{width: 33.33%;height: 12%;padding-top: 10%}
	.listitem>li{float: left;width: 50% ;height:16%;padding-top: 12%}
	.search-btn{cursor: pointer;float: left;width: 24px;margin-right: 14px;margin-top: -2px}
	.zh_font .search-btn{margin-top:2px}

	
	.zh_font .lang-list{margin-bottom: 16px !important}
	.page-inner{margin-top: 0;padding-top: 30px}
	form,input{margin: 0 !important;padding:  0 !important}
	
	h6.desktop-hide  span span{display: none !important}
}

@media only screen and (min-width: 767px) and (max-width:992px) {
	.desktop-hide{display: none}
	.container{padding: 0 40px}
	.ipad-hide{display: none}
	
	
	.logo{margin-left: -21px}
	form,input{margin: 0 !important;padding:  0 !important}

	/* insight */

	.insight-highlight{min-height: 62vw}
	
	/* news */
	.news-title{margin-bottom: 20px}
	
	
}
@media only screen and (min-width: 993px) and (max-width:1400px) {
	.desktop-hide{display: none}
	form,input{margin: 0 !important;padding:  0 !important}


	
}

@media only screen and (min-width: 1401px) and (max-width:6000px) {
	.desktop-hide{display: none}
	.page-template-page-insight .page-inner h2,.single-insight  .page-inner  h2,.page-template-page-insight .page-inner h3{font-size: 2.6vw;line-height: 2.4vw}
	.page-template-page-insight .page-inner h5,.page-template-page-insight  .page-inner h4,.single-insight .page-inner h4,.single-insight .page-inner h5,.insight-tag {font-size: 1.35vw;line-height: 1.2em}
	.zh_font.page-template-page-insight  h2,.zh_font .single-insight h2{line-height: 3.2vw !important}
	.zh_font .tag-listing h3.bold{line-height: 2.8vw !important}
	.zh_font.page-template-page-insight .page-inner h5,.zh_font.single-insight .page-inner h5{font-size: 1.25vw;line-height: 1.2em}

}
@media only screen and (min-width: 100px) and (max-width:1655px) {
	.en_font .sp-hide{opacity: 0 !important}

}
@media only screen and (min-width: 100px) and (max-width:1291px) {
	.zh_font .sp-hide{opacity: 0 !important}

}