/* system */
html { background:#FFFFFF; min-height:100%; }
body, button, input, select, textarea { font:14px/1.6em 'Open Sans', Arial, Verdana, Helvetica, sans-serif; text-transform:uppercase; font-weight:300; color:#231f20; }
body { padding:0; min-height:100%; }
::-moz-selection { background:#0073AE; color:#fff; }
::selection { background:#0073AE; color:#fff; }
/* end system */

/* type */
h1, h2, h3, h4, h5, h6 { font-weight:normal; }
h1 { font-size:18px; line-height:1.1em; margin:0 0 1em; }
h2 { font-size:18px; line-height:1.1em; margin:0 0 1em; }
h3 { font-size:18px; line-height:1.1em; margin:0 0 1em; }
h4 { font-size:18px; line-height:1.1em; margin:0 0 1em; }
h6 { }
a { color:#231f20; text-decoration:none; }
a:hover { text-decoration:underline; }
/* end type */

/* setup */
.holder { max-width:935px; }
img { max-width:100%; }
.bars { position:absolute; right:10px; top:10px; cursor:pointer; display:none; }
.bars .fa { font-size:24px; }
.bars .fa-times { display:none; }
/* end setup */

/* header */
#header { padding:0; font-size:0; margin:0 0 20px; }
#header figure, #header #nav { display:inline-block; vertical-align: bottom; }
#header figure { width:22%; }
#header figure img { max-width:200px; display:block; }
#header figure img.logo-mobile { display:none; }
#header #nav { width:78%; text-align:right; }

#header .bars { top:37px; right:20px; }
.active #header .bars .fa-times { display:inline-block; }
.active #header .bars .fa-bars { display:none; }
/* end header */

/* nav */
#mobile-menu { /*display:none;*/ position:fixed; top:0; right:0; bottom:0; /*left:0;*/ z-index:0; width:200px; min-height:100%; background:#F1F2F2; }
#mobile-menu ul { margin:0; padding:0; list-style:none; }
#mobile-menu li { margin:0; padding:0; }
#mobile-menu li a { display:block; padding:10px 15px; color:#000; font-size:16px; border-bottom:1px solid #000; font-weight:bold; }
#mobile-menu li a:hover, #mobile-menu li.active a { background:#fff; color:#000; text-decoration: none; }

#site { position:relative; z-index:1; min-width:100%; min-height:100%; top:0; bottom:100%; left:0; left:0; background:#fff; padding:20px; -webkit-transition: left 0.2s ease; -moz-transition: left 0.2s ease; -ms-transition: left 0.2s ease; -o-transition: left 0.2s ease; transition: left 0.2s ease; }
#site.active { left:-200px; }

#nav ul { margin:0; padding:0; list-style: none; }
#nav li { margin:0 0 0 40px; padding:0; display:inline-block; vertical-align: top; }
#nav li a { display:block; color:#231f20; text-transform: uppercase; padding:5px 20px; font-size:14px; line-height:1em; border-bottom:1px solid #fff; font-family:'Open Sans Condensed', Arial, Verdana, Helvetica, sans-serif; }
#nav li.active a, #nav li a:hover { text-decoration:none; border-bottom-color:#231f20; }
#nav li#page-item-1 { display:none; }
#nav aside { margin-left:35px; }
#nav aside, #nav ul { display:inline-block; vertical-align: top; }
#nav aside a { margin-left:5px; display:inline-block; vertical-align:top;  }
#nav aside a img { display:block; width:25px; }
/* end nav */

/* banner */
#banner { position:relative; /*min-height:580px;*/ max-width:100%; /*max-width:935px;*/ }
#banner ul { margin:0; padding:0; list-style:none; }
#banner li { margin:0; padding:0; overflow:hidden; }
#banner-images li { width:100%; min-height:400px; background:no-repeat center center; background-size:cover; }
#banner-images li img { width:100%; visibility: hidden; }

/*#banner-controls { position:absolute; top:60px; left:10px; z-index:800; }
#banner-controls li { font-size:70px; text-transform:uppercase; line-height:1.1em; cursor:pointer; }
#banner-controls li a { color:#231f20; }
#banner-controls li a:hover { text-decoration: underline; color:#fff; }
#banner-controls li:hover a { color:#fff; }
#banner-controls li li:hover { text-decoration: underline; }*/

#banner-controls { position:absolute; top:20%; width:100%; z-index:800; text-align: center;}
#banner-controls li { font-size:52px; text-transform:uppercase; line-height:1.1em;  }
#banner-controls li a { color:#fff; }
#banner-controls li a:hover { text-decoration: underline; color:#fff; }
#banner-controls li:hover a { color:#fff; }

/* end banner */

/* content */
#content { min-height:580px; }

#content-copy { max-width:350px; padding:30px; background:rgba(255,255,255,0.9); min-height:400px; }

#content-banner-holder { position:relative; padding-top:160px; }
#content-banner { position:absolute; z-index:1; overflow:hidden; background:no-repeat center center; background-size:cover; width:100%; max-width:100%; /*max-width:935px;*/ top:0; }
#content-banner img { width:100%; visibility: hidden; display:block; }
#content-banner-holder #content-copy { position:relative; z-index:2; }

#contact-details article { margin:0 0 2em; }
#contact-details span { vertical-align: middle; display:inline-block; }
#contact-details article span:first-child { width:50px; padding-right:26px; }
#contact-details img { width:100%; display:block; }
.contact-email { text-transform: none; }
#contact-details h1 { margin-bottom:2em; }
/* end content */

/* projects */
#projects-header { border:5px solid #000; border-width:5px 0; padding:15px 0; margin:0 0 20px; font-size:0; position:relative; }
#projects-header aside, #projects-header nav { display:inline-block; vertical-align: top; }
#projects-header aside { width:25%; }
#projects-header aside h1 { font-weight:normal; cursor:pointer; font-size:14px; }
#projects-header nav { width:75%; font-size:14px; line-height:1.4em; font-family:'Open Sans Condensed', Arial, Verdana, Helvetica, sans-serif; }
#projects-header nav ul { margin:0; padding:0; }
#projects-header nav li { margin:0; padding:0; }
#projects-header nav li span { display:block; cursor:pointer; }
#projects-header nav li > span:hover, #projects-header nav span.active { text-decoration: underline; }
#projects-header nav > ul > li { display:inline-block; margin-right:40px; vertical-align: top; }
#projects-header nav ul ul { margin:10px 0 0; }
#projects-header nav li li { margin:0 0 10px; }
#projects-header .bars { top:12px; right:0; }
.open .bars .fa-times { display:inline-block; }
.open .bars .fa-bars { display:none; }

#projects-body { font-size:0; }
#projects-body article { display:inline-block; /*min-width:290px;*/ width:19%; margin:0 1% 1% 0; vertical-align:top; background:#f1f2f2; position:relative; }
#projects-body article.mix { display:none; }
#projects-body img { width:100%; display:block; }
#projects-body .project-list-details { padding:15px; font-size:11px; line-height:1.7em; position:absolute; width:100%; height:100%; z-index:2; top:0; left:0; }
#projects-body .project-list-details aside { float:right; font-family:'Open Sans Condensed', Arial, Verdana, Helvetica, sans-serif; margin-left:20px; }
#projects-body .project-list-details aside img { max-width:25px; }
#projects-body .project-list-details aside span { display:inline-block; font-size:35px; line-height:0.7; }
#projects-body .project-list-details aside span * { vertical-align:top; }
#projects-body .project-list-details aside span img { display:inline-block; max-width:25px;}
#projects-body .project-list-details .cont { max-height:8.4em; overflow:hidden; clear:both; }
#projects-body article.has-image .project-list-details { display:none; background:rgba(0,0,0,0.65); color:#fff; }
#projects-body article.has-image .project-list-details h3 a { color:#fff; }
#projects-body article.has-image:hover .project-list-details { display:block; }
#projects-body h3 { margin-bottom:30px; font-size:14px; line-height:1.2em; max-height:2.4em; overflow:hidden; }
#projects-body #project-93 h3 { margin-bottom:0; font-size:14px; line-height:1.2em; max-height:2.4em; overflow:hidden; }

#project-details header { font-size:0; margin:0 0 30px; }
#project-details header aside, #project-details header article { display:inline-block; vertical-align: top; }
#project-details header aside:first-child { width:25%; }
#project-details header aside:last-child { width:10%; text-align:right; }
#project-details header article { width:65%; padding-right:20px; }
#project-details header aside img { max-width:30px; }

#project-details header article h2, #project-details header article .cont { display:inline-block; vertical-align: top; }
#project-details header article h2 { font-weight:normal; font-size:14px; line-height:1.7em; width:30%; padding-right:20px; text-decoration: underline;  }
#project-details header article .cont { width:70%; font-size:12px; line-height:1.6em; }

#project-gallery img { display:block; margin:0 0 20px; }

/* end projects */


/* footer */
#footer { margin-top:20px; font-family:'Open Sans Condensed', Arial, Verdana, Helvetica, sans-serif; font-size:0; text-transform:uppercase; }
#footer, #footer a { color:#231f20; }
#footer a:hover { text-decoration: underline; }
#footer div, #footer aside { display:inline-block; vertical-align: top; width:50%; font-size:10px; line-height:1em; }
#footer aside { text-align:right; }
#footer aside span { display:block; white-space:nowrap; overflow:hidden; text-overflow:hidden; text-align:right; width:100%; }
/* end footer */

.row { font-size:0; margin:0 auto; max-width:1000px; }
.column { display:inline-block; vertical-align: top; font-size:14px; }
.column-12 { display:block; width:100%; }
.column-9 { width:75%; margin-right:5%; }
.column-3 { width:20%; }
.column-3 img { max-width:100%; }
.team-holder { position:absolute; left:0; top:0; width:100%; z-index:20; padding:160px 30px 30px; }
.team-holder .team-list { margin:0; padding:0; list-style:none; }
.team-holder .team-item { margin:0; padding:0; }
.team-item > h2 { text-align:center; margin:0; cursor:pointer; }
.team-item > h2 span { display:inline-block; width:100%; max-width:400px; padding:20px; }
.team-body { background:rgba(255, 255, 255, 0.9); display:none; padding:20px 0; }
/*.team-item.active .team-body { display:block; }*/
.team-item.active > h2 span, .team-item > h2 span:hover { background:rgba(255, 255, 255, 0.9); }
.team-item.active > h2 span { width:100%; max-width:100%;  }
@media only screen and (max-width:870px) {
    .team-holder { position:static; padding:30px; }
    .column { width:100%; display:block; }
    .template-team #content-banner { position:relative; }
    .template-team #content-banner-holder { padding-top:0; }
}

@media only screen and (max-height: 900px){
    #banner-controls li { font-size:50px; line-height:1.1em; }
}

@media only screen and (max-height: 800px){
    #banner-controls li { font-size:45px; line-height:1.1em; }
}


@media only screen and (max-width: 1550px){
    #projects-body h3 { margin-bottom:20px; }
}

@media only screen and (max-width: 1490px){
    #projects-body h3 { margin-bottom:10px; }
}

@media only screen and (max-width: 1385px){
    #projects-body article { width:24%; }
    #projects-body h3 { margin-bottom:30px; }
}

@media only screen and (max-width: 1250px){
    #projects-body h3 { margin-bottom:20px; }
}

@media only screen and (max-width: 1200px){
    #projects-body h3 { margin-bottom:10px; }
}

@media only screen and (max-width: 1130px){
    #projects-body article { width:32.33333%; }
    #projects-body h3 { margin-bottom:30px; }
}

@media only screen and (max-width: 970px){
    #projects-body h3 { margin-bottom:20px; }
}

@media only screen and (max-width: 905px){
    #projects-body h3 { margin-bottom:10px; }
}


@media only screen and (max-width: 870px){
    html { overflow-x:hidden; }
    .bars { display:block; }
    #banner-controls { top:10px; }
    #banner-controls li { font-size:35px; line-height:1.1em; }

    #projects-body article { width:49%; }
    #projects-body h3 { margin-bottom:30px; }


    #header figure img.logo-mobile { display:block; }
    #header figure img.logo-desktop { display:none; }

    #header #nav { display:none; }
    #projects-header nav .menu { display:none; }
    #projects-header aside h1 { margin:0; line-height:1em; }
    #projects-header .holder { line-height:0; }
    #projects-header nav > ul > li { display:block; margin:0 0 10px; }
    #projects-header nav ul ul { margin-top:5px; }
    #projects-header nav li li { margin:0 0 10px 15px; }
}


@media only screen and (max-width: 660px){
    #projects-body article { width:100%; margin:0 0 20px; }
    #project-details header aside:first-child,
    #project-details header aside:last-child { width:15%; }
    #project-details header article { width:70%; padding:0; }
    #project-details header article h2, #project-details header article .cont { width:100%; display:block; }
    #project-details header article h2 { margin:0 0 20px; padding:0; }
}

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

    #footer div, #footer aside { display:block; width:100%; text-align:center; }
    #footer div { margin:0 0 5px; }
}