width: auto;
    max-width: 100%;
    height: auto;/*
 * KAA
 * Created by @levibucsis and @tonyarkles.
 * Copyright Peak Experience.
 */


/* RESET - props to Eric Meyer (meyerweb.com) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }


/* PAGE STYLING */
html { height: 100%; margin: 0; background: #fff; color: #333; font-family: 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 13px; overflow: hidden;}
body { height: 100%; overflow: hidden; background: #f0ece5; }

#loading, #loading img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#loading { z-index: 1; background: #444; opacity: 0; }
#loading img { margin: auto; }

a { color: #1563ba; text-decoration: none; }
a:hover { }

/* #images img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } */
.gallery #main { background: #333; }

#images { height: 100%; }
#images img { min-width: 100%; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; z-index: 2; }
.gallery #images img { /*max-height: 100%; max-width: 100%; */    
	width: auto;
    max-width: 100%;
    height: auto; 
	min-width: 0; }
#images .active { z-index: 3; }
#images .next { z-index: 3; }

#wrapper { position: relative; left: 0; top: 0; overflow: hidden; height: 100%; width: 4000px; z-index: 5; }
#col1, #col2, #main { position: relative; float: left; height: 100%; min-height: 100%; }
#col1, #col2 { overflow-y: scroll; z-index: 5; }
#col1 { z-index: 6; overflow-y: auto; }

#home { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; opacity: 0; }
#home h1 { padding: 30px; color: #fff; font-family: 'Georgia', serif; font-size: 70px; letter-spacing: -2px; line-height: 0.9em; opacity: 0.65; text-transform: none; }
#home .indent { display: block; margin-left: 30px; }

.project-teaser { border-left: 4px solid #e23940; position: absolute; right: 200px; bottom: 10px; background: rgba(0,0,0,0.4); color: #fff; overflow: hidden; }
.project-teaser h2 { float: left; font-size: 15px; line-height: 36px; padding: 0 15px; }
.project-teaser a { background: rgba(255,255,255,0.4); color: #fff; cursor: pointer; float: left; line-height: 36px; padding: 0 10px; font-size: 11px; text-transform: uppercase; }
.project-teaser a:hover { background: rgba(255,255,255,0.6); }

.gallery #content { display: none; }
#content { z-index: 3; }
#content,
#content .new { position: absolute; top: 0; left: 0; bottom: 0; padding: 40px 40px 60px 60px; width: 700px; /* color: #fff;  text-shadow: 1px 1px 0 rgba(0,0,0,0.1); */ }
#content .new { top: 0; left: 0; z-index: 2; opacity: 0; }
#content .old, #content .new { z-index: 10; }
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { margin: 0 0 1em; color: #333; font-weight: 600; text-transform: uppercase; }
#content h1 { margin-top: 40px; color: #464545; font-size: 20px; }
#content h2 { margin-bottom: 0.6em; color: #666; font-size: 16px; }
#content p { margin: 0 0 1.5em; color: #585756; font-size: 16px; line-height: 1.6em; max-width: 600px; }

#content .overlay { position: relative; z-index: 4; background: rgba(255,255,255,0.9); width: 400px; margin: 0 -40px; padding: 40px;  }
#content .overlay h1 { margin-top: 0; }

#content strong { font-weight: bold; }
#content a { font-weight: bold; }
#content a:hover { text-decoration: underline; }
#content em { font-style: italic; }
#content cite { color: #666; }
#content .smallcaps { color: #777; font-size: 0.8em; font-weight: bold; text-transform: uppercase; }

#contactForm input[type="text"],
#contactForm textarea { font-size: 14px; padding: 5px; width: 388px; border: 1px solid #999; box-shadow: inset 1px 1px 3px #eee; }
#contactForm textarea { height: 100px; }
#contactForm p { margin-bottom: .2em; }
#contactForm .error { border: 2px solid #e23940 !important; }
#contact-form-message { margin: .75em 0; color: #e23940; font-size: 110%; line-height: 1.5em; }

#col1, #col2 { min-height: 100%; }
#col1 { position: relative; float: left; width: 150px; z-index: 6; border-left: 4px solid #e23940; border-right: 1px solid #e7e5e1; height: 100%; background: #fff; }

#col1 h1 { height: 113px; width: 101px; margin: 20px auto; background: url('../img/logo.gif') no-repeat 5px 5px; text-indent: -9999px; }
#col1 h1 a { display: block; height: 100%; width: 100%; }

#main-nav { position: absolute; right: 29px; width: 96px; }
#main-nav li { }
#main-nav li a { display: block; margin-top: 3px; padding: 10px 1px; color: #786d5c; font-size: 18px; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; }
#main-nav a:hover { text-decoration: underline; }
#main-nav li.active a { color: #e23940; }
#main-nav li ul { display: none; margin-bottom: 13px; padding: 5px 0; border: 1px solid #d2cfc9; border-width: 1px 0; }
#main-nav li.active ul { }
#main-nav li ul a, #main-nav li.active ul a { margin: 0; padding: 5px 1px; color: #a7a7a7; font-size: 14px; font-style: normal; }
#main-nav li ul li.active a { color: #000; }

#col2 { float: left; height: 100%; width: 190px; background: #fff; }
#projects ul { padding: 2px 0 25px;}
#projects li { height: 58px; width: 171px; position: relative; margin: 6px 9px 0; background: #eee; }
#projects li img { max-width: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0.8; filter: url(filters.svg#grayscale); filter: gray; -webkit-filter: grayscale(1); }
#projects a { position: absolute; left: 0; top: 0; display: block; height: 100%; width: 100%; cursor: pointer; z-index: 2; }
#projects h2 { position: absolute; left: 0; top: 35px; padding: 3px 5px; font-size: 11px; background: #3c312a; color: #fff; z-index: 3; opacity: 0.7; }
#projects li.active h2,
#projects li.active img,
#projects li:hover img,
#projects a:hover h2 { opacity: 1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; filter: none; -webkit-filter: grayscale(0); }

#gallery-controls { z-index: 4; }
#back-control,
#info-box,
#next-control,
#prev-control { position: absolute; color: #333; z-index: 3; opacity: 0; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; }

#back-control,
#return-control span { height: 34px; padding: 3px 17px; line-height: 34px; }
#back-control { top: 0; left: 0; background: rgba(0,0,0,0.2); border-left: 4px solid #e23940; white-space: nowrap; }
#return-control { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 5; display: none; background: rgba(0,0,0,0.8); cursor: pointer; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; filter: none; -webkit-filter: grayscale(0); }
#back-control a,
#return-control span { color: #fff; cursor: pointer; font-size: 15px; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); text-transform: uppercase; }
#return-control:hover { background: rgba(0,0,0,0.6); }
#return-control span { position: absolute; right: 40px; top: 48%; display: block; background: none; }
.mobile-back { height: 40px; padding: 3px 20px; margin: 0; background: rgba(0,0,0,0.2); border: none; border-left: 4px solid #e23940; color: #fff; cursor: pointer; font-size: 15px; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); text-transform: uppercase; }

#next-control, #prev-control { position: absolute; top: 0; bottom: 0; }
#next-control { right: 0; }
#prev-control { left: 0; }
#next-control a,
#prev-control a { display: block; position: absolute; top: 50%; margin: -50px 5px 0; height: 75px; width: 75px; background: transparent url('../img/icons.png') no-repeat 21px 50%; border-radius: 3px; cursor: pointer; text-indent: -9999em; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out;  }
#next-control a { right: 0; }
#prev-control a { background-position: -147px 50%; }

#prev-control a:hover,
#next-control a:hover { background-color: rgba(0,0,0,0.2); }
#back-control:hover { background-color: rgba(0,0,0,0.6); cursor: pointer; }
#prev-control a:active,
#next-control a:active,
#back-control:active { background-color: rgba(255,255,255,0.4); -webkit-transition: all 0s ease-in-out; -moz-transition: all 0 ease-in-out; transition: all 0 ease-in-out; }

.project-more-label, #count { display: none; color: #999; font-family: "Helvetica Neue", Arial, sans-serif; text-transform: uppercase; }
.project-more-label { display: block; position: absolute; right: 15px; top: 12px; margin-left: 7px; font-size: 17px; vertical-align: top; }
#info-box { width: 380px; right: 85px; bottom: 0; background: rgba(0,0,0,0.5); margin-bottom: 0px; padding: 15px; }
#info-box.expanded { background: rgba(0,0,0,0.85); }
#info-box h1 { color: #fff; font-size: 15px; text-transform: uppercase; }
/* #info-box .date { margin: 6px 0 0; color: #bbb; font-size: 10px; text-transform: uppercase; } */
#info-box p, #count { margin: 5px 0 0; color: #aaa;  font-size: 13px; font-size: 14px; line-height: 1.3em; }
#info-box p:first-child { margin-top: 10px; }
#count { position: absolute; top: 10px; right: 15px; color: #fff; }
.project-description { display: none; }
/*
.project-full-description { display: none; }
*/
#project-more-link { display: block; position: absolute; bottom: 0; top: 0; left: 0; right: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
#project-more-link:hover { background: rgba(255,255,255,0.15); }
#project-more-link:active { background: rgba(255,255,255,0.3) !important; -webkit-transition: all 0s ease-in-out; -moz-transition: all 0s ease-in-out; transition: all 0s ease-in-out;  }
.expand #project-more-link:hover { background: none; }

#project-more { display: block; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; color: #fff; font-size: 85%; padding: 10px 0; text-align: center; text-transform: uppercase;  }
#project-more:hover { background: rgba(255,255,255,0.2); }

.hide { opacity: 0; height: 0 !important; margin: 0 !important; }

#staff { float: left; width: 556px; margin-left: -876px; }
#staff li { height: 110px; width: 90px; position: relative; display: inline-block; background-position: 50% 15%; background-size: cover; overflow: hidden; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(1);-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

#staff li:hover, #staff li.active { filter: none; -webkit-filter: grayscale(0); }
#staff li span { position: absolute; opacity: 0.7; bottom: 5%; left: 0; z-index: 5; padding: 3px 5px; background: #3c312a; color: #fff; font-size: 12px; }
#staff li:hover span, #staff li.active span { opacity: 1; }
#staff li a { height: 100%; width: 100%; display: block; cursor: pointer; z-index: 4; }

#staff-detail { width: 300px; opacity: 0; float: left; margin-left: 576px; }
#staff-detail p { margin: 5px 0; line-height: 1.3em; width: 300px; }
#staff-detail p.creds { padding: 0; line-height: 1em; }
#staff-detail #name { margin: 7px 0 5px; color: #333; font-size: 21px; }
#staff-detail #position { color: #666; }
#staff-detail #qualification { color: #999; font-size: 13px; }
#staff-detail #description { }

#scrollbar1 { height: 100%; width: 200px; clear: both; }
#scrollbar1 .viewport { width: 180px; height: 100%; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #ccc; border-radius: 14px; }
#scrollbar1 .scrollbar { position: absolute; top: 0; right: 0; }
#scrollbar1 .track { height: 100%; width: 7px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 7px; cursor: pointer; overflow: hidden; position: absolute; top: 0; right: 2px; }
#scrollbar1 .thumb .end { overflow: hidden; height: 14px; width: 7px; }
#scrollbar1 .disable{ display: none; }

.clear { clear: both; }

/*
@media screen and (max-width: 1150px) { #staff { width: 463px; } }
@media screen and (max-width: 1060px) { #staff { width: 370px; } }
*/

@media screen and (max-width: 1150px) {
    #staff { width: 463px; margin-left: -783px; }
    #staff-detail { margin-left: 483px; }
}

@media screen and (max-width: 1060px) {
    #staff { width: 370px; margin-left: -690px; }
    #staff-detail { margin-left: 390px; }
}

@media screen and (max-width: 970px) {
    #staff { width: 300px; margin-left: -600px; }
    #staff-detail { margin-left: 300px; }
}


* { -webkit-backface-visibility: hidden; }

.msg { display: none; }

.button-mobile { display: none; }

@media screen and (max-width: 700px) {

    body, #wrapper { position: relative; overflow: hidden;  }

    body { height: 100%; width: 100%; }

    .gesture-info { position: absolute; right: 30px; bottom: 70px; z-index: 9999; pointer-events: none; width: 10%; }

    #wrapper { width: 300%; }
    #col1, #col2, #main { float: left; width: 33.33333% !important; border: none; }
    #col2 { display: none; margin-left: 0 !important; }

    #col1 { position: relative; background: url('/img/img1.jpg') no-repeat 50% 50%; background-size: cover; }
        #col1 hgroup { padding: 20px 0; background: rgba(0,0,0,0.5); }
        #col1 h1 { width: 100px; margin: 0 auto; background: url('/img/logomark.gif') no-repeat 50% 50%; background-size: contain; }

    #main-nav { width: 100%; margin: 0; padding: 0 0 10%; right: auto; background: rgba(0,0,0,0.5); text-align: center; }
    #main-nav li ul { display: block !important; margin: 0; padding: 0; border: none; }
    .button-mobile { display: block; position: absolute; z-index: 10; }
    #main-nav li a, #main-nav li ul a { display: inline-block; padding: 10px 20px; font-size: 180% !important; font-weight: 600; -webkit-transition: 0; }
    #main-nav li a { color: #fff; }
    #main-nav li ul a, #main-nav li.active ul a { padding: 5px 20px; color: #ccc; font-size: 150% !important; }
    #main-nav a:hover { text-decoration: none; }
    #main-nav li ul li.active a { color: #e23940; }

    #projects { width: 100%; }
    #projects h2 { top: auto; bottom: 10%; font-size: 18px; }
    #projects ul { padding: 50px 0; }
    #projects li { height: 100px; width: 95%; margin: 0 auto 1%; overflow: hidden; }
    #projects li img { width: 100%; opacity: 1; }
    #projects li.active h2, #projects a:hover h2 { opacity: 0.7; }

    #content, #content .new, #content .overlay { width: 100% !important; padding: 35px 0 70px; max-width: auto; }
    #content .overlay { margin: -40px 0 -70px; }

    #content p, #content h1, #content h2 { width: auto; padding: 0 10%; }
    #content h1 { font-size: 22px; text-transform: none; }
    #content .overlay h1 { margin-top: 40px; }
    /* #content a { color: #e23940; } */

    #gallery, #images { position: relative; height: 100%; }
    .gallery #images img { position: absolute; top: 0; bottom: 0; margin: auto; max-width: 100%; min-width: 100%; min-height: auto !important; }

    #back-control, #return-control { display: none !important; }
    #next-control a, #prev-control a { display: none; border-radius: 0; margin-left: 0; margin-right: 0; }
    #info-box { width: auto; right: 0; left: 0; margin-bottom: 0; }

    #staff, #staff-detail { width: 80%; margin: 0 10%; }
    #staff-detail { margin: 1% 10% 5%; opacity: 0; }
    #staff-detail img { height: auto; width: 100%; }
    #staff li { float: left; width: 32.66666%; margin: 0 1% 1% 0; }
    #staff li:nth-child(3n) { margin-right: 0; }
    #staff li img { min-height: 100%; width: 100%; }
    #staff li span { opacity: 1; background: rgba(0,0,0,0.3); font-size: 14px; }

    #contactForm input[type="text"], #contactForm textarea { width: 97%; }
}