@charset "gb2312";
@import url('fonts/demo-async.css');




/*
orange:
rgb(247,148,30)

60% grey:
rgb(130,130,130)

40% grey:
rgb(169,169,169)


*/


/* DEFAULTS */
* { box-sizing: border-box; 	*behavior: url(css/boxsizing.htc); -moz-box-sizing: border-box; margin:0; padding:0; -webkit-font-smoothing:subpixel-antialiased; 
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent; /* For some Androids */
 }
img,
iframe { display:block; border:none; }
.clear, .clearfix { clear:both; width:0 !important; height:0 !important; }
.table { display:table; }
.table-cell { display:table-cell; vertical-align:middle }
.reflectX { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1);  }
.border { border:solid 1px rgb(65,0,73); outline:solid 7px white; }
#preloader { position:fixed; top:-9999px }

.vHolder { display:table; width:100%; height:100% }
.vCenter { display:table-cell; width:100%; height:100%; vertical-align:middle}


.imageHolder { position:relative; display:block }
.imageHolder .image { position:absolute; top:0; left:0; width:100%; height:100%; /* fix top crack on news thumbs */ background-size:cover; background-position:center }
.news .slide .image { background-size:contain; background-repeat:no-repeat}
.imageHolder.open_fancybox { cursor:pointer }

.mobile { display:none !important }

.spacer { width:100%; _width:84.375%; }  /*  = 3 / (2 * value) */
.media .spacer { width:100% !important }
.spacer img { width:100% }

html { background-color:white }



/* IMAGE LOADING */
img, .image { opacity:0; transition:opacity .5s ease }
img.loaded, .image.loaded { opacity:1 }
.imageHolder { _background-color:rgb(245,245,245); background-image:url(../images/ui/loader-ring.gif); background-size:35px; background-position:center; background-repeat:no-repeat }


/* TEXT */
body { -webkit-text-size-adjust:100%; }
body { font-family:Swiss721-wf, courier, arial, sans-serif; font-weight:400; color:rgb(169,169,169); font-size:14px; }
.logo { font-family:Swiss721-wf, courier, arial, sans-serif !important }
a { text-decoration:none; color:rgb(183,4,2); cursor:pointer;  }
p a:hover, .button:hover { opacity:.5 }
h1 {
	font-weight:400;
	font-size:1em;
	text-transform:uppercase;
	padding-bottom:.5em; 
	color:rgb(169,169,169);
}
h2, .more { 
	font-weight:400;
	font-size:.89em;
	text-transform:uppercase;
}
h2 { color:rgb(169,169,169); }
.more {
	color:rgb(247,148,30)
}
h2 {   margin-top:2em; margin-bottom:-.35em }
h2:first-child { margin-top:0; margin-bottom:auto }

h2 a, .more { _display:block; padding:5px 0; cursor:pointer }
h2 a { padding-top:0 } 
h3 { 
	font-weight:400;
	font-size:1.1em;
	margin-top:.71em;
	text-transform:uppercase;
	color:rgb(169,169,169);
}
h4, p, li {
	font-weight:300;
	font-size:1em;
	line-height:1.5;
	margin-top:.71em;
}
p { text-transform:none }
#contentWrap li,
#tinymce li { padding-left:0; margin-left:20px }

.zh 
{ font-family: "Hiragino Sans GB", "冬青黑体", STXihei, "华文细黑", "Microsoft YaHei", YaHei, "微软雅黑?", sans-serif !important;  }





/* STRUCTURE */




#wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 4% }
.block { width:100%; }

.section { margin-top:6% }
.section:first-of-type { margin-top:0 }
.section h1 { margin-top:7% }
.section h1:first-child { margin-top:-2px; 	border-bottom:solid 1px rgba(169,169,169,.5); }

.section.media h1 { _margin-top:4% }
.section .noBorderTop { border-top:none }

#contentWrap { opacity:1; transition:opacity .5s ease }
#contentWrap.hide { opacity:0; transition:opacity .5s ease }

/* BLOCKS */
.section .block:first-of-type { border-top:none }
.block img { width:100% }

.block.half,
.block.twothirds,
.block.full-columns-below { padding:3.5% 0; border-top:solid 1px rgba(169,169,169,.5); }
.block.full-columns-below .item .text p { margin-top:0 }
.block.full-columns-below .item .imageHolder { margin-top:3.5%}
.block.full-columns-below .item .text { margin-top:2.5% }
.block.full-columns-below .item .imageHolder:first-child,
.block.full-columns-below .item .text:first-child { margin-top:0 }



.block.columns6 { border-top:solid 1px rgba(169,169,169,.5); } 
.block.columns6 .clear.clear6 { display:block }
.block.columns6 .clear.clear4 { display:none }
.block.columns6 .clear.clear3 { display:none }

.block.half .item,
.block.twothirds .item { display:table; width:100% }


.block.half .text,
.block.half .imageHolder,
.block.twothirds .text,
.block.twothirds .imageHolder { display:table-cell; }

.block.half .text,
.block.twothirds .text { vertical-align:middle; text-align:center; padding:0 40px }

.block.half .text,
.block.half .imageHolder { width:50%}




.block.twothirds .text { width:33.75%}
.block.twothirds .imageHolder { width:66.25%}

.block.half.news .text, .block.twothirds.news .text { text-align:left }

.block.full-columns-below .text { margin-top:2%;
/*
-moz-column-count: 2;
-moz-column-gap: 24px;
-webkit-column-count: 2;
-webkit-column-gap: 24px;
column-count: 2;
column-gap: 24px;
*/
}
.block.full-columns-below .text p { display:block; float:left; width:50%}
.block.full-columns-below .text p:nth-of-type(1) { padding-right:2% }
.block.full-columns-below .text p:nth-of-type(2) { padding-left:2% }

.block.half.contact .text { text-align:left; padding-left:0 }

.block.columns { border-top:solid 1px rgba(169,169,169,.5); padding-top:3.5%; padding-bottom:3.5% }

.block.columns .item { float:left; text-align:center }
.block.columns .text { padding:30px 20px 0 }
.block.columns6 .text { padding:8% 15px 0 }
.moreThumbs .block.columns .text { _text-align:left }


.block.columns3 .item { width:32.5%; margin-right:1.25%; }
.block.columns3 .item:nth-of-type(3n) { margin-right:0 }
.block.columns4 .item { width:24.25%; margin-right:1%; }
.block.columns4 .item:nth-of-type(4n) { margin-right:0 }
.block.columns6 .item { width:16%; margin-right:0.8%; }
.block.columns6 .item:nth-of-type(6n) { margin-right:0 }
.block.columns6 .clear { margin-top:4% }
.item.empty { margin:0 !important }

.block.founder { width:50%; float:right; margin-top:7%; margin-bottom:7% }
.block.founder .text { text-align:center; width:100%; max-width:500px; margin:0 auto; padding:7% }
.block.founder .imageHolder.phone { display:none }
.block.founder:nth-of-type(2) .text { padding-top:0 }

.projects.block.columns3 { text-align:justify; text-align-last:justify  }
.projects.block.columns3 .item { display:inline-block; text-align:center; text-align-last:center; vertical-align:top; float:none; margin-right:0  }
.projects.block.columns3 .item:nth-of-type(n+4) { margin-top:3.5% }



.block .item.placeholder { display:none }


.block.expertise .item { width:50%; float:left; padding:4% 30px 2% 70px;}
.block.expertise .item:nth-child(2n + 1) { clear:both }

.block.expertise .item.sidebar { background-color:rgb(240,240,240); width:45%; float:right; padding:25px 20px 15px; margin-top:25px }
.block.expertise .item.sidebar h3::before { display:none }
.block.expertise .item.sidebar .imageHolder { margin:15px 0 30px }


.block.expertise .sidebar .more { text-align:right }

.block.bullets .item { padding-left:70px }

.block.bullets .item h3 { position:relative}

.block.bullets .item h3::before,
.block.bullets .item h3 span::before { content:""; position:absolute; left:-70px; top:-16px; display:block; width:50px; height:50px; background-size:contain; background-position:center; background-repeat:no-repeat}

.block.bullets .item.urban-renewal h3::before { background-image:url(../images/icons/icons_expertise_urban.png) }
.block.bullets .item.heritage-development h3::before { background-image:url(../images/icons/icons_expertise_heritage.png) }
.block.bullets .item.holistic-design h3::before { background-image:url(../images/icons/icons_expertise_holistic.png) }
.block.bullets .item.branded-environments h3::before { background-image:url(../images/icons/icons_expertise_branded.png) }
.block.bullets .item.contextual-perspective h3::before { background-image:url(../images/icons/icons_expertise_contextual.png) }
.block.bullets .item.public-architecture h3::before { background-image:url(../images/icons/icons_expertise_public.png) }

/* circles */
.block.bullets .item h3::before { border-radius:100%; background-color:rgb(247,148,30);  }
 
/* numbers */
.block.bullets .item h3 span::before { padding-top:20px; color:white; text-align:center; padding-top:13px; font-size:21px }

.block.bullets .item:nth-of-type(1) h3 span::before { content:"1" }
.block.bullets .item:nth-of-type(2) h3 span::before { content:"2" }
.block.bullets .item:nth-of-type(3) h3 span::before { content:"3" }
.block.bullets .item:nth-of-type(4) h3 span::before { content:"4" }
.block.bullets .item:nth-of-type(5) h3 span::before { content:"5" }
.block.bullets .item:nth-of-type(6) h3 span::before { content:"6" }
.block.bullets .item:nth-of-type(7) h3 span::before { content:"7" }
.block.bullets .item:nth-of-type(8) h3 span::before { content:"8" }
.block.bullets .item:nth-of-type(9) h3 span::before { content:"9" }


.block.newslist { width:100%; max-width:700px; margin:0 auto;}
.block.newslist .item { margin:40px 0 30px;}


.block.portfolioList { border-top:0 }
.block.portfolioList .item,
.block.team .item { text-align:left; }
.block.portfolioList .item li,
.block.team .item li { list-style:none; margin-left:0 !important; }
.block.portfolioList .item li:first-of-type,
.block.team .item li:first-of-type { margin-top:15px }

.block.portfolioList .item li { margin-top:0 }
.block.team .item li { margin-top:12px }

.section.team .text { width:100% !important; padding:0 }



.projectInfo h1 p { display:inline; margin-left:15px; line-height:1 }
.factbox { display:table; margin-top:15px; margin-bottom:30px; width:100% }
.factbox .item { display:table-cell; width:16.666% }



/* PORTFOLIO LIST */
#portfolioListHolder { position:relative; }
#portfolioListHolder .section { _position:absolute; top:0; left:0; _opacity:0; _visibility:hidden; _transition:opacity .5s ease, visibility .5s; margin-top:0; padding-top:3%; width:100%  }
#portfolioListHolder .section.show { _opacity:1; _visibility:visible; }
#portfolioListHolder .section.placeholder { position:relative; visibility:hidden !important }

#portfolioSort a { color:rgb(169,169,169); }
#portfolioSort a.on { color:rgb(247,148,30); cursor:default; opacity:1 }



/* STORYBOARD */
.block.storyboard { width:100%; margin-top:3px; _background-color:rgba(0,0,0,.05) }
.block.storyboard.main { _height:600px; _background-color:rgb(240,240,240) }
.block.storyboard.thumbs { _height:100px; font-size:2.333px;  }
.storyboard .imageHolder { width:100%; height:100% }
.storyboard .image { background-size:cover; background-position:center }




.thumbs .slide { opacity:.2; cursor:pointer; transition:opacity .3s ease; background-color:white }
.thumbs .slide:hover { opacity:.6 }
.thumbs .slide.on { opacity:1 } 

.storyboard .text { padding:6%; background:white }
.storyboard .slide.left .text { padding-right:10% }
.storyboard .text .full { display:block }
.storyboard .text .shorter { display:none }

.storyboard p { font-size:1.1em; max-width:600px; margin:0 auto }

.storyboard .caption .text { height:auto }
.storyboard .caption .text p { margin-top:0; font-size:1em }


/*
.storyboard .halfV .image,
.storyboard .halfV .text { width:50%; height:100% }
.storyboard .halfH .image,
.storyboard .halfH .text { width:100%; height:50% }

.storyboard .halfV.imageLeft .image,
.storyboard .halfV.imageRight .text { float:left }
.storyboard .halfV.imageRight .image,
.storyboard .halfV.imageLeft .text { float:right }

.storyboard .halfH.imageBottom .image { position:relative;top:50% } 
.storyboard .halfH.imageBottom .text { position:relative;top:-50% } 

.storyboard .text { display:table; }
.storyboard .textInner { display:table-cell; vertical-align:middle }
*/

.storyboard .left .text,
.storyboard .left .image { width:50%; height:100%; float:left }

.storyboard .top .text,
.storyboard .top .image { width:100%; height:50%; }


.storyboard .full .image,
.storyboard .caption .image { width:100%; height:100% }
.storyboard .full .text { display:none }

.storyboard .caption .text { position:absolute; width:40%; left:4%; bottom:5.5%; background-color:rgba(0,0,0,.6); padding:2%; color:white }







/* GENERAL LAYOUT */
#loader { display:none; position:fixed; z-index:-1; width:100%; height:100%; background-image:url(../images/ui/loader-ring.gif); background-size:40px; -ms-behavior: url(../css/backgroundsize.min.htc); background-position:center;background-repeat:no-repeat;
}



/* NEWS */
h1.newsHeader { border-bottom:solid 1px rgba(169,169,169,.5); }
.newsSection { margin-top:3.5% }
.newsSection:first-of-type { margin-top:0 }
.newsSection .newsWrap { display:none }
.newsSection.open .newsWrap { display:block; padding-bottom:50px }

.newsSection .chevron { transition:opacity .5s ease }
.newsSection .chevron.down { opacity:1 }
.newsSection .chevron.up { opacity:0 }
.newsSection.open .chevron.down { opacity:0 }
.newsSection.open .chevron.up { opacity:1 }




















/* FOOTER */ 
#footer { clear:both; border-top:solid 1px rgba(169,169,169,.5); margin-top:80px; margin-bottom:20px; position:relative }
#footer p { font-size:.85em; max-width:calc(100% - 110px) }
#footer p a { color:inherit }

#footer .social { position:absolute; top:5px; right:0; width:120px}
#footer .social a { width:22%; margin-left:11%; float:right }
#footer .social a img { width:100% }

#footer .social .qr { position:relative; }
#footer .social .qr img.qrImage { position:absolute; bottom:40px; left:-47px; width:120px; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s ease }
#footer .social .qr img.qrImage.show { opacity:1; visibility:visible }



/* CAROUSELS - GENERAL */
.slick-carousel { width:100%; height:100%; }
.slick-slider { margin-bottom:0 }
.slick-list, .slick-track { width:100%; height:100% }
.slide { position:relative; width:100%; height:100%; background-size:cover; background-position:center; background-repeat:no-repeat; transition:background-image .5s ease; }
.slide .content { position:absolute; top:0; left:0; width:100%; height:100% }



/* UI - ARROWS */
.carousel-button { position:absolute; z-index:2; top:48%; top:calc(50% - 35px); width:70px; height:70px; background-size:35px; background-position:center; background-repeat:no-repeat;  cursor:pointer; opacity:1; transition:opacity .3s ease }
.carousel-button:hover,
.carousel-button.slick-disabled { opacity:.5 } 
.carousel-prev { left:calc(4.7% - 30px); background-image:url(../images/ui/ui-kokai_left.png); }
.carousel-next { right:calc(4.7% - 30px); background-image:url(../images/ui/ui-kokai_right.png); }

/*
.carousel-button.portfolio { background-size:60px; _-webkit-filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.5)); }
.carousel-prev.portfolio { background-image:url(../images/ui/ui_left-white.png); } 
.carousel-next.portfolio { background-image:url(../images/ui/ui_right-white.png); } 
.main .carousel-prev { background-image:url(../images/ui/ui_left-grey.png); }
.main .carousel-next { background-image:url(../images/ui/ui_right-grey.png); }
.main .slide.jerry .carousel-prev { background-image:url(../images/ui/ui_left-white.png); }
.main .slide.jerry .carousel-next { background-image:url(../images/ui/ui_right-white.png); }
*/

/* UI - DOTS */
.slick-dots { bottom:13px }
.slick-dots li { width:14px; height:14px; margin:0 10px !important; }
.slick-dots li button { width:100%; height:100%; background-color:rgb(255,255,255); border-radius:100%; border:solid 1px rgb(247,148,30); transition:background-color .3s ease-out, opacity .3s ease }
.slick-dots li:hover button { opacity:.5; background-color:rgb(247,148,30)}
.slick-dots li.slick-active button { opacity:1 !important; background-color:rgb(247,148,30); }
.slick-dots li button:before { content:'' }


/* UI - SCROLLDOWN */
.scrollDown { position:absolute; z-index:1; left:calc(50% - 35px); bottom:40px; width:70px; height:70px; background-image:url(../images/ui/ui-cc_down.png); background-size:28px auto; background-repeat:no-repeat; background-position:center; cursor:pointer; transition:opacity .5s ease }
.scrollDown:hover,
.scrollDown.show { opacity:.5 }


/* UI - MEDIA ZOOM */
.zoom { position:absolute; bottom:10px; right:10px; width:20px; height:20px; background-image:url(../images/ui/ui-kokai_zoom.png); background-size:cover; background-position:center }

/* UI - CHEVRON */
.chevron{
    position:relative;
	top:5px;
	left:5px;
}
.chevron:before,
.chevron:after{
    position:absolute;
    content:"";
    border:8px solid transparent;/*adjust size*/
}


.chevron.down { top:5px }
.chevron.down:before{
    top:0;
	border-top-color:rgb(247,148,30);/*Chevron Color*/
	border-bottom-color:transparent;
}
.chevron.down:after{
    top:-2px;/*adjust thickness*/
	border-top-color:rgb(255,255,255);/*Match background colour*/
	border-bottom-color:transparent;
}


.chevron.up { top:-5px }
.chevron.up:before{
    top:0;
	border-top-color:transparent; 
	border-bottom-color:rgb(247,148,30);/*Chevron Color*/
}
.chevron.up:after{
    top:2px;/*adjust thickness*/
	border-top-color:transparent; 
	border-bottom-color:rgb(255,255,255);/*Match background colour*/
}




/*Change four 'top' values below to rotate (top/right/bottom/left)*/



.image.image_founders { background-size:100%; background-position:left 40% }


/*
@media screen and (min-aspect-ratio: 8/5) { 
.block.storyboard.thumbs { _margin-top:-11.1% } 


#contentWrap { 
	padding-right:150px !important; 
}
.factbox { _margin-top:5px; _margin-bottom:15px }
.factbox .item,
.factbox .item h2,
.factbox .item p { display:inline;  }

.factbox .item h2::after { content: ':'}
.factbox .item h2::before { content: ' / '; margin-left:5px; margin-right:5px  }
.factbox .item:first-child h2::before { content: ''; margin:0 }

.factbox .item:nth-of-type(3n) p::after { content:''; margin:0}

}

*/




/* MENU */
#menuWrap { font-size:0px }  /* for inline-block horizontal spacing */
.menu { display:block; font-size:0;position:relative; margin-bottom:25px }
.menu.right { width:124px;  }
.menu.left { width:calc(100% - 124px) } 
.menu.left, .menu.right { display:inline-block }
.menu > li { display:inline-block; position:relative; }
.menu > li > a { display:block; font-size:14px; padding:24px; text-transform:uppercase; }
.menu > li.logo a { padding-left:0; position:relative; left:-1px}

.menu.right { text-align:right}
.menu.right li:last-of-type a { padding-right:0 }

.submenu { position:absolute; left:50%; transform:translate(-50%, -20px); white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s ease, max-height .5s ease }


.en .menu > li.portfolio { position:static }
.en .menu > li.portfolio .submenu { left:0; transform:translate(-19px, -20px); }
.menu > li.on .submenu { opacity:1; visibility:visible; transition:opacity .5s ease .5s, visibility .5s ease .5s, max-height .5s ease  }
.submenu a { display:inline-block; font-size:13px; padding:19px; text-transform:lowercase }

.submenu.portfolio { _left:0 }

.menu li[data-href=home] .submenu,
.menu li[data-href=contact] .submenu { display:none !important }



/* MENU TEXT */
.orange { color:rgb(183,4,2) }
.menu a { color:rgb(169,169,169); font-weight:400 }
.menu .submenu a { font-weight:400 }
.menu li.on > a,
.menu li a.on { color:rgb(183,4,2)  }
.menu > li.logo a { font-weight:400; font-size:34px;  }

a { transition:opacity .3s ease, color .3s ease; }
a:hover { opacity:.7 }










#mobileBar { display:none }

/* SUBMENU */

/* .menu li .submenu { display:block; position: absolute; width:100%; left: 0px; top:102px; z-index:2; opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s } 

.menu li:hover .submenu,
.menu li.on .submenu,
.menu:hover li.on:hover .submenu { opacity:1; visibility:visible }

.menu li .submenu a { display:block; float:left; text-decoration:none;  background-image:none; width:auto; height:auto; padding:8px 0 7px;  }
*/ 



/* IMAGE HOVERS */
.x_hoverbar { position:absolute; bottom:0; left:0; width:0; height:5px; background-color:rgb(247,148,30); _transform:scaleX(0); transition:width .5s ease; }
.x_imageHolder:hover .hoverbar { _transform:scaleX(1); width:100%;transition:width 1s ease; }

#contentWrap { margin-top:50px }


@media (min-width:1025px) {
.desktopHide { display:none !important }

#menuWrap { display:block !important }
.menu { display:inline-block !important }
.menu li.on .submenu { display:block !important }

.menu > li.logo a { font-size:24px }


/* NEW MENU */
#wrap { max-width:none; padding:0 }
#menuHolder { position:fixed; top:0; left:0; height:100vh; _border-right:solid 1px rgb(169,169,169); width:270px; padding:0 35px 0 55px }
#contentWrap { margin-top:0; margin-left:270px; padding:55px 80px 0 3% }
#loader { width:calc(100% - 270px); margin-left:270px }

#menuHolder { _display:table; }
#menuHolder #header { _display:table-cell; _vertical-align:middle; padding-top:22px}

.menu.left { width:100% } 

.menu > li { display:block; margin-top:20px }
.menu > li > a { padding:0 }

.submenu { position:relative; left:0; transform:none !important; overflow:hidden }
.submenu a { display:block; padding:1px 0 !important; letter-spacing:.3px  }

.submenu { max-height:0; }
li.portfolio.on .submenu { max-height:250px }
li.about.on .submenu { max-height:130px }

.menu.left { text-align:right }
.menu.right { display:block !important; text-align:right; width:100% }


.menu.left { margin-bottom:35px }
.logo { margin-bottom:33px; border-bottom:solid 1px rgba(169,169,169,.5);width:100px; margin-left:80px }
}




@media (max-width: 1024px) {
#contentWrap { margin-top:100px }
#header { background-color:white } 
#header.up { -webkit-transform:translateY(-54px); transform:translateY(-54px); }



.block.full-columns-below .text p { float:none; width:100%}
.block.full-columns-below .text p:nth-of-type(1) { padding-right:0 }
.block.full-columns-below .text p:nth-of-type(2) { padding-left:0 }


/* SMART MENU */
#header { position:fixed; z-index:100; top:0; left:0; width:100%; padding:0 4%; background-color:rgba(255,255,255,.95) }
#header { -webkit-transition:-webkit-transform .5s ease; transition:transform .5s ease; } 
#header.up.stick { -webkit-transform:translateY(0px); transform:translateY(0px); }



/* MOBILE BAR */
#mobileBar { display:block; height:42px; z-index:10; width:100%; padding:7px 0; transition:background-color .5s ease; cursor:pointer; _background-color:rgb(230,230,230); border-bottom:solid 1px rgba(169,169,169,.5);  }
#mobileBar .logo { width:200px; float:left; font-size:21px; margin-top:2px }
#mobileThumb { display:block; margin:0 auto; width:28px; padding-top:8px; float:right}
#mobileThumb:hover { opacity:1; }
.bar3 { border-radius: 1px; display: block; height: 2px; width:100%; margin-top:4px; background-color:rgb(247,148,30); }
.bar3:first-of-type { margin-top:0 }



#menuWrap { position:relative; width:100%; margin:auto; border-bottom:solid 1px rgba(169,169,169,.5); }
.menu { position:absolute; bottom:0; width:100%; height:101px; list-style: none; z-index:2; margin-bottom:0 }

.storyboard p,
.storyboard .caption .text p { font-size:.9em; }

/* MENU */
.menu > .logo a { display:none; }

#mobileBar:hover,
.menu li:hover,
.menu li.on { _background-color:rgb(230,230,230); }

#menuWrap { display:none; max-height:calc(100vh - 42px); _overflow-y:scroll; _-webkit-overflow-scrolling:touch; }


.menu { position:relative; height:auto; width:100% !important; text-align:left !important; }
.menu li.logo { display:none }
.menu li { display:block; width:100% !important; height:auto; text-indent:0; background-image:none !important; border-top:solid 1px rgba(169,169,169,.5); margin:0 }
.menu.left li:nth-of-type(2) { border-top:none }
.menu li a {  display:block; padding:9px 0; line-height:normal; color:rgb(169,169,169); font-weight:400; text-transform:lowercase  }
.menu li:hover { _opacity:.5 }
.menu:hover li.on .submenu { opacity:1; visibility:visible }

.menu li .submenu { position:relative; top:0; font-weight:normal; background-image:none; visibility:visible; opacity:1; display:none; background-color:rgb(245,245,245) }
.menu li.on .submenu { display:block }
.menu li .submenu a { float:none; width:100%; padding: 5px 0 !important; margin:0; font-size:12px; font-weight:300 }




/* SUBMENU */
.submenu { -webkit-transform:none !important; transform:none !important; left:0 !important }


.mobile { display:block !important }
.desktop { display:none !important }


body { font-size:14px }






.block.half .text, .block.half .imageHolder, .block.twothirds .text, .block.twothirds .imageHolder { display:block; width:100% }
.block.half .text, .block.twothirds .text { padding-top:20px; padding-bottom:20px; }
.founders .block.half .text { padding-bottom:20px }



.block.half.contact .text { padding-top:0; padding-bottom:30px }

.block.columns.columns3 .item,
.block.columns.columns4 .item { width:100%; margin-top:4% }
.block.columns.columns3 .item:first-of-type,
.block.columns.columns4 .item:first-of-type { margin-top:0 }

.block.columns.columns3 .item .imageHolder,
.block.columns.columns4 .item .imageHolder { width:25%; float:left }
.block.columns.columns3 .item .text,
.block.columns.columns4 .item .text { width:75%; float:left; text-align:left; padding-top:0px; padding-bottom:30px }


.block.columns.columns3.portfolioList,
.block.columns.columns3.team { padding-top:0; padding-bottom:0 }
.block.columns.columns3.portfolioList .item,
.block.columns.columns3.team .item { margin-top:8%}

.section.team { margin-top:0 }
.section.team .text { text-align:center !important }

.block.full-columns-below .text { -moz-column-count:1; -webkit-column-count:1; column-count:1; _padding:0 40px; _text-align:center;  }


.block.expertise .item { width:100% !important }

.founders .arrow { display:none }

.block.columns6 .item { width:32%; margin-right:2%; }
.block.columns6 div:nth-of-type(3n) { margin-right:0; }
.block.columns6 .clear { margin-top:4% }
.block.columns6 .clear.clear6 { display:none }
.block.columns6 .clear.clear4 { display:none }
.block.columns6 .clear.clear3 { display:block }

.block.twothirds.news .text { padding-top:20px }


.factbox .item { width:25% }


.section.team .item.top .text,
.section.team .item.mid .text { padding-bottom:0 }
.section.team .item.inner h1 { display:none }

.section.team .item { margin-top:0 !important }

.section.team.full .block,
.section.team.full .text { padding:0 }
.section.team.full .text p:first-child { margin-top:15px }

.projects.block.columns3 .item { text-align:left; text-align-last:left; }

.fancybox-nav span { visibility:visible !important }
}



@media (max-width:600px) {

.block.columns.columns3 .item .imageHolder, 
.block.columns.columns4 .item .imageHolder { width:100%; float:none }
.block.columns.columns3 .item .text, .block.columns.columns4 .item .text { float:none; width:100%; padding-top:20px; text-align:left; padding-bottom:20px  }


.block.founder { width:100% }
.block.founder .text { padding:5% 2% 3% }
.block.founder .imageHolder.main { display:none }
.block.founder .imageHolder.phone { display:block }
.block.founder:nth-of-type(2) .text { padding-top:5% }


/*
.block.columns.columns3 .item .text {  padding-top:0; padding-bottom:0 }
*/

/* break the slideshow */
.storyboard .slick-slide { clear: both; opacity: 1 !important; left: 0 !important; border-bottom: solid 3px white; }  
.storyboard .carousel-button { display:none !important }
.storyboard .slick-track { -webkit-transform:none !important; transform:none !important }
/*
#content.gallery, #content.guestbook { display:block; height:auto; }
*/

.storyboard .slide.left .text { padding:6% }
.block.storyboard.thumbs { display:none }

.storyboard .caption .text { width:92% }
.storyboard p { margin-top:0; font-size:.8em }
.storyboard .slide.left .text { padding:0 0 0 15px }

.moreThumbs { margin-top:150px; }
.expertise .item .text p { display:none }


.projectInfo h1 p { display:block; margin-left:0; margin-top:7px; margin-bottom:3px }

.factbox .item { display:block; width:100%; margin-bottom:10px }
.factbox .item h2,
.factbox .item p { display:inline }
}


@media (max-width:420px) {
	.block.columns6 .item { width:100%; padding-bottom:10% }
	.storyboard .text .full { display:none }
	.storyboard .text .shorter { display:block }
}