@charset "utf-8";

body,div,dl,dt,dd,p,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,blockquote,form{margin:0;padding:0;}
ul,ol{list-style:none;}
img,a img{border:none;display:block;}
*:link,*:visited{text-decoration:none;}
*:active,*:focus{outline:0;}
table{border-collapse:collapse;border-spacing:0;}
label,button{cursor:pointer;}
input,textarea,select{font-family:inherit;font-size:inherit;vertical-align:middle;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;margin:0;padding:0;}

/* SETUP
------------------------------------------------------------------------------------------------------------------------------------------------------*/
html, body		{ height: 100%; }
body			{ background-color: #111; color: #333; font-family: sans-serif; font-size: 11px; }
#page-layout	{ height: 500px; margin: 0 auto; overflow: hidden; padding-top: 5%; position: relative; width: 1145px; }
#page-header	{ height: 30px; margin-bottom: 20px; }
#page-columns	{ float: left; height: 440px; max-width: 573px; position: relative; }
#page-content	{ background: #FFF; float: left; height: 440px; overflow: hidden; position: relative; text-align: center; width: 572px; }

a:link		{ color: #FFF; text-decoration: none; }
a:visited	{ color: #FFF; text-decoration: none; }
a:hover		{ color: #999; text-decoration: none; }
a:active	{ color: #999; }

::selection			{ background-color: #FFF; color: #000; }
::-moz-selection	{ background-color: #FFF; color: #000; }

@font-face {
    font-family: "BertholdWalbaumBookItalic";
    src: url("/_fonts/berthold-walbaum-book-italic-webfont.eot");
    src: url("/_fonts/berthold-walbaum-book-italic-webfont.eot?#iefix") format("embedded-opentype"),
         url("/_fonts/berthold-walbaum-book-italic-webfont.woff") format("woff"),
         url("/_fonts/berthold-walbaum-book-italic-webfont.ttf") format("truetype"),
         url("/_fonts/berthold-walbaum-book-italic-webfont.svg#BertholdWalbaumBookItalic") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* INTRO
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#intro		{ background-color: #000; height: 100%; position: absolute; top: 0; text-align: center; width: 100%; z-index: 999; }
#intro a	{ display: block; margin: 20% auto 0; padding: 0; width: 250px; }
#intro a h1	{ color: #FFF; font-size: 35px; line-height: 1; margin-bottom: 5px; }
#intro a em	{ color: #999; font-family: "BertholdWalbaumBookItalic", "Times New Roman", Times, serif; font-size: 13px; font-style: normal; letter-spacing: 0.03em; }

/* HEADER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#page-header h1		{ color: #FFF; font-size: 22px; height: 40px; line-height: 20px; overflow: hidden; }
#page-header h1 img	{ display: block; }

/* COLUMNS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#page-columns > nav,
#page-columns > section		{ background: url(/_images/background/page-column.png) no-repeat 0 0; color: #FFF; float: left; height: 350px; padding: 80px 10px 10px; position: relative; width: 171px; }
nav#column-1				{ z-index: 300; }
section#column-2			{ background-position: -191px 0; z-index: 200; }
section#column-3			{ background-position: -382px 0; z-index: 100; }
#page-columns .column-first	{ background-position: -573px 0; }
#page-columns .column-last	{ background-position: -764px 0; }

/* COLUMN 1 (NAV)
------------------------------------------------------------------------------------------------------------------------------------------------------*/
nav#column-1 ul li			{ background: url(/_images/background/line-dots.png) repeat-x bottom left; font-size: 11px; font-weight: bold; height: 17px; line-height: 13px; margin-bottom: 15px; text-transform: uppercase; }
nav#column-1 ul li a		{ color: #FFF; display: block; height: 16px; overflow: hidden; position: relative; padding-right: 15px; }
nav#column-1 ul li a.on		{ background: url(/_images/background/arrow-right.png) no-repeat top right; color: #999; }
nav#column-1 ul li a:hover	{ color: #999; }
nav#column-1 ul li a strong	{ display: inline-block; overflow: hidden; width: 100px; }
nav#column-1 ul li a span	{ background: url(/_images/text/headings.png) no-repeat 0 0; height: 16px; position: absolute; top: 0; left: 0; width: 100px; z-index: 1; }

nav#column-1 ul li.about span	{ background-position: 0 0; }
nav#column-1 ul li.folio		{ height: 29px; }
nav#column-1 ul li.folio a		{ height: 28px; }
nav#column-1 ul li.open			{ height: auto; }
nav#column-1 ul li.folio span	{ background-position: 0 -20px; height: 28px; }
nav#column-1 ul li.clients span	{ background-position: 0 -50px; }
nav#column-1 ul li.contact span	{ background-position: 0 -70px; }

nav#column-1 ul li.about a.on span,
nav#column-1 ul li.about a:hover span	{ background-position: -200px 0; }
nav#column-1 ul li.folio a.on span,
nav#column-1 ul li.folio a:hover span	{ background-position: -200px -20px; }
nav#column-1 ul li.open a:hover span	{ background-position: 0 -20px; cursor: default; }
nav#column-1 ul li.clients a.on span,
nav#column-1 ul li.clients a:hover span	{ background-position: -200px -50px; }
nav#column-1 ul li.contact a.on span,
nav#column-1 ul li.contact a:hover span	{ background-position: -200px -70px; }

/*folio sub nav*/
nav#column-1 ul li.folio ul				{ display: none; font-family: 'BertholdWalbaumBookItalic', "Times New Roman", Times, serif; padding: 4px 0 12px; }
nav#column-1 ul li.open ul				{ display: block; }
nav#column-1 ul li.folio ul li			{ background: none; font-weight: normal; height: 16px; line-height: 16px; margin: 0; text-transform: none; }
nav#column-1 ul li.folio ul li a		{ color: #FFF; height: 16px; }
nav#column-1 ul li.folio ul li a		{ transition: all .2s; -moz-transition: all .2s ease; -o-transition: all .2s ease; -webkit-transition: all .2s ease; }
nav#column-1 ul li.folio ul li a:hover	{ color: #999; }
nav#column-1 ul li.folio ul li a.on		{ background-position: center right; color: #999; }


/* COLUMNS 2 + 3
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*headings*/
#page-columns h2						{ background: url(/_images/background/line-dots.png) repeat-x bottom left; color: #FFF; font-size: 11px; font-weight: bold; height: 17px; line-height: 13px; margin-bottom: 15px; overflow: hidden; position: relative; text-transform: uppercase; }
#page-columns h2 span					{ background: url(/_images/text/headings.png) no-repeat 0 0; height: 16px; position: absolute; top: 0; left: 0; width: 100%; z-index: 1; }
#page-columns .heading-logos-marks span	{ background-position: 0 -90px; }
#page-columns .heading-projects span	{ background-position: 0 -110px; }
#page-columns .heading-studio span		{ background-position: 0 -130px; }

/*sub nav*/
#column-2 nav ul li			{ font-family: 'BertholdWalbaumBookItalic', "Times New Roman", Times, serif; font-size: 11px; line-height: 16px; }
#column-2 nav ul li a		{ color: #FFF; display: block; }
#column-2 nav ul li a		{ transition: all .2s; -moz-transition: all .2s ease; -o-transition: all .2s ease; -webkit-transition: all .2s ease; }
#column-2 nav ul li a:hover	{ color: #999; }
#column-2 nav ul li.on a	{ color: #999; }

/*paragraphs*/
#page-columns p						{ font-family: 'BertholdWalbaumBookItalic', "Times New Roman", Times, serif; font-size: 11px; line-height: 16px; margin-bottom: 16px; }
#page-columns p.br					{ max-width: 167px; }
#page-columns p#folio-description	{ background: url(/_images/background/line-dots.png) repeat-x bottom left; margin: 24px 0 8px; padding-bottom: 28px; }
#page-columns p a					{ transition: all .2s; -moz-transition: all .2s ease; -o-transition: all .2s ease; -webkit-transition: all .2s ease; }

/* CONTENT
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#page-layout .map			{ background-color: #000; width: 382px; }

/* FOLIO
------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*folio image and controls*/
#page-content #folio				{ display: block !important; height: 440px; margin: 0 auto; overflow: hidden; position: relative; width: 572px; }
#page-content #folio img			{ display: none; }
#page-content a#folio-prev			{ background: url(/_images/background/folio-prev.png) no-repeat 0 center; height: 100%; position: absolute; top: 0; left: 0; width: 35px; z-index: 100; }
#page-content a#folio-next			{ background: url(/_images/background/folio-next.png) no-repeat 0 center; height: 100%; position: absolute; top: 0; right: 0; width: 35px; z-index: 100; }
#page-content a#folio-prev:hover,
#page-content a#folio-next:hover	{ background-color: rgba(30,30,30,0.1); background-position: -35px center; }
#page-content a#folio-prev span,
#page-content a#folio-next span		{ display: none; }

/*large numbers*/
#folio-counter	{ background: url(/_images/background/line-dots.png) repeat-x bottom left; height: 50px; overflow: hidden; padding-bottom: 6px; width: 171px; }
#counter-number	{ background: url(/_images/text/numbers-50px.png) no-repeat 0 0; display: block; float: left; height: 50px; }
#counter-total	{ background: url(/_images/text/numbers-50px.png) no-repeat -100px 0; display: block; float: left; height: 50px; width: 71px; }

#counter-number.no-1	{ background-position: 0 0; width: 56px; }
#counter-number.no-2	{ background-position: 0 -50px; width: 74px; }
#counter-number.no-3	{ background-position: 0 -100px; width: 70px; }
#counter-number.no-4	{ background-position: 0 -150px; width: 71px; }
#counter-number.no-5	{ background-position: 0 -200px; width: 67px; }
#counter-number.no-6	{ background-position: 0 -250px; width: 71px; }
#counter-number.no-7	{ background-position: 0 -300px; width: 58px; }
#counter-number.no-8	{ background-position: 0 -350px; width: 68px; }
#counter-number.no-9	{ background-position: 0 -400px; width: 65px; }
#counter-number.no-10	{ background-position: 0 -450px; width: 93px; }
#counter-number.no-11	{ background-position: 0 -500px; width: 83px; }
#counter-number.no-12	{ background-position: 0 -550px; width: 97px; }
#counter-number.no-13	{ background-position: 0 -600px; width: 94px; }
#counter-number.no-14	{ background-position: 0 -650px; width: 96px; }
#counter-number.no-15	{ background-position: 0 -700px; width: 91px; }
#counter-number.no-16	{ background-position: 0 -750px; width: 94px; }
#counter-number.no-17	{ background-position: 0 -800px; width: 83px; }
#counter-number.no-18	{ background-position: 0 -850px; width: 92px; }
#counter-number.no-19	{ background-position: 0 -900px; width: 89px; }
#counter-number.no-20	{ background-position: 0 -950px; width: 100px; }
#counter-number.lt-10	{ margin-right: -4px; }

#counter-total.no-1		{ background-position: -100px 0; }
#counter-total.no-2		{ background-position: -100px -50px; }
#counter-total.no-3		{ background-position: -100px -100px; }
#counter-total.no-4		{ background-position: -100px -150px; }
#counter-total.no-5		{ background-position: -100px -200px; }
#counter-total.no-6		{ background-position: -100px -250px; }
#counter-total.no-7		{ background-position: -100px -300px; }
#counter-total.no-8		{ background-position: -100px -350px; }
#counter-total.no-9		{ background-position: -100px -400px; }
#counter-total.no-10	{ background-position: -100px -450px; }
#counter-total.no-11	{ background-position: -100px -500px; }
#counter-total.no-12	{ background-position: -100px -550px; }
#counter-total.no-13	{ background-position: -100px -600px; }
#counter-total.no-14	{ background-position: -100px -650px; }
#counter-total.no-15	{ background-position: -100px -700px; }
#counter-total.no-16	{ background-position: -100px -750px; }
#counter-total.no-17	{ background-position: -100px -800px; }
#counter-total.no-18	{ background-position: -100px -850px; }
#counter-total.no-19	{ background-position: -100px -900px; }
#counter-total.no-20	{ background-position: -100px -950px; }

/*small numbers*/
#column-3 nav ul			{ overflow: hidden; width: 150px; }
#column-3 nav ul li			{ float: left; font-weight: bold; }
#column-3 nav ul li a		{ background: url(/_images/text/numbers-small.png) no-repeat 0 0; color: #333; display: block; height: 16px; margin-right: 6px; }
#column-3 nav ul li a:hover	{ color: #999; opacity: 0.7; }
#column-3 nav ul li a:hover	{ transition: all .2s; -moz-transition: all .2s ease; -o-transition: all .2s ease; -webkit-transition: all .2s ease; }
#column-3 nav ul li a.on	{ color: #999; }

#column-3 nav ul li.no-1 a		{ background-position: 0 0; width: 6px; }
#column-3 nav ul li.no-2 a		{ background-position: 0 -50px; width: 8px; }
#column-3 nav ul li.no-3 a		{ background-position: 0 -100px; width: 8px; }
#column-3 nav ul li.no-4 a		{ background-position: 0 -150px; width: 8px; }
#column-3 nav ul li.no-5 a		{ background-position: 0 -200px; width: 8px; }
#column-3 nav ul li.no-6 a		{ background-position: 0 -250px; width: 8px; }
#column-3 nav ul li.no-7 a		{ background-position: 0 -300px; width: 8px; }
#column-3 nav ul li.no-8 a		{ background-position: 0 -350px; width: 8px; }
#column-3 nav ul li.no-9 a		{ background-position: 0 -400px; width: 8px; }
#column-3 nav ul li.no-10 a		{ background-position: 0 -450px; width: 12px; }
#column-3 nav ul li.no-11 a		{ background-position: 0 -500px; width: 10px; }
#column-3 nav ul li.no-12 a		{ background-position: 0 -550px; width: 12px; }
#column-3 nav ul li.no-13 a		{ background-position: 0 -600px; width: 12px; }
#column-3 nav ul li.no-14 a		{ background-position: 0 -650px; width: 12px; }
#column-3 nav ul li.no-15 a		{ background-position: 0 -700px; width: 12px; }
#column-3 nav ul li.no-16 a		{ background-position: 0 -750px; width: 12px; }
#column-3 nav ul li.no-17 a		{ background-position: 0 -800px; width: 12px; }
#column-3 nav ul li.no-18 a		{ background-position: 0 -850px; width: 12px; }
#column-3 nav ul li.no-19 a		{ background-position: 0 -900px; width: 12px; }
#column-3 nav ul li.no-20 a		{ background-position: 0 -950px; width: 15px; }

#column-3 nav ul li.no-1 a.on	{ background-position: -100px 0; }
#column-3 nav ul li.no-2 a.on	{ background-position: -100px -50px; }
#column-3 nav ul li.no-3 a.on	{ background-position: -100px -100px; }
#column-3 nav ul li.no-4 a.on	{ background-position: -100px -150px; }
#column-3 nav ul li.no-5 a.on	{ background-position: -100px -200px; }
#column-3 nav ul li.no-6 a.on	{ background-position: -100px -250px; }
#column-3 nav ul li.no-7 a.on	{ background-position: -100px -300px; }
#column-3 nav ul li.no-8 a.on	{ background-position: -100px -350px; }
#column-3 nav ul li.no-9 a.on	{ background-position: -100px -400px; }
#column-3 nav ul li.no-10 a.on	{ background-position: -100px -450px; }
#column-3 nav ul li.no-11 a.on	{ background-position: -100px -500px; }
#column-3 nav ul li.no-12 a.on	{ background-position: -100px -550px; }
#column-3 nav ul li.no-13 a.on	{ background-position: -100px -600px; }
#column-3 nav ul li.no-14 a.on	{ background-position: -100px -650px; }
#column-3 nav ul li.no-15 a.on	{ background-position: -100px -700px; }
#column-3 nav ul li.no-16 a.on	{ background-position: -100px -750px; }
#column-3 nav ul li.no-17 a.on	{ background-position: -100px -800px; }
#column-3 nav ul li.no-18 a.on	{ background-position: -100px -850px; }
#column-3 nav ul li.no-19 a.on	{ background-position: -100px -900px; }
#column-3 nav ul li.no-20 a.on	{ background-position: -100px -950px; }

/* MEDIA QUERIES
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 1140px) {
#page-layout				{ width: 1003px; }
#page-columns				{ max-width: 453px; }
#page-content				{ width: 550px; }
#page-columns > nav,
#page-columns > section		{ background-image: url(/_images/background/page-column-reduced.png); width: 131px; }
section#column-2			{ background-position: -151px 0; }
section#column-3			{ background-position: -302px 0; }
#page-columns .column-first	{ background-position: -453px 0; }
#page-columns .column-last	{ background-position: -604px 0; }
.email						{ font-size: 10px; }

/*folio*/
#page-content #folio				{ margin-left: -11px; }
#page-columns p#folio-description	{ margin: 18px 0 8px; padding-bottom: 12px; }

#folio-counter	{ height: 40px; width: 131px; }
#counter-number	{ background-image: url(/_images/text/numbers-40px.png); height: 40px; min-width: 46px; }
#counter-total	{ background-image: url(/_images/text/numbers-40px.png); height: 40px; width: 52px; }

#counter-number.no-1	{ width: 46px; }
#counter-number.no-2	{ width: 60px; }
#counter-number.no-3	{ width: 56px; }
#counter-number.no-4	{ width: 58px; }
#counter-number.no-5	{ width: 55px; }
#counter-number.no-6	{ width: 58px; }
#counter-number.no-7	{ width: 47px; }
#counter-number.no-8	{ width: 56px; }
#counter-number.no-9	{ width: 53px; }
#counter-number.no-10	{ width: 75px; }
#counter-number.no-11	{ width: 68px; }
#counter-number.no-12	{ width: 79px; }
#counter-number.no-13	{ width: 76px; }
#counter-number.no-14	{ width: 77px; }
#counter-number.no-15	{ width: 74px; }
#counter-number.no-16	{ width: 76px; }
#counter-number.no-17	{ width: 67px; }
#counter-number.no-18	{ width: 74px; }
#counter-number.no-19	{ width: 72px; }
#counter-number.no-20	{ width: 88px; }

#column-3 nav ul		{ width: 100%; }
#column-3 nav ul li a	{ margin-right: 4px; }

}