/* Reset
__________________________________________________ */

html,body,h1,h2,h3,h4,h5,h6,p,blockquote,
address,pre,cite,code,dfn,abbr,acronym,kbd,
a,samp,img,ins,i,b,u,strike,small,big,font,
tt,q,dl,dt,dd,ul,ol,li,applet,object,iframe,
form,fieldset,label,legend,th,td,th,tbody,
tfoot,thead,tr,caption{
	font-size:100%;
	margin:0;padding:0;border:0;outline:0;
	font-weight:normal;font-style:normal}

:focus{
	outline:0}

header, footer, aside, img{
	display:block}

/* General
__________________________________________________ */

body{
	font: 62.5% 'Sabon LT W01 Roman';
	line-height:1.5;
	color:#777;
	-webkit-text-size-adjust: none;}

p, ul, ol, table{
	font-size:14px;
	margin-bottom:9px}

ul p{
  	font-size:1em}

a{
	color:#333;
	text-decoration:none}

a:hover{
	color:#666}

h1, h2, h3{
	font-size:18px;
	font-family:'Avenir LT W01 85 Heavy';
	color:#333}

#current-page{
	color:#ecac00}

.work-external-site{
color:#ecac00}

/* Wrapper
__________________________________________________ */

#wrapper{	
	max-width:1096px;
	padding: 0 3.28467%;
	margin:0 auto}

/* Header
__________________________________________________ */

header{
	height:auto;
	min-height:120px;
padding: 0 3.28467%;
	position:relative;
}

/* Raised by Bears Logo */

#branding{
	position:absolute;
	left:0;
	top:24px;
left:20px;
	width:300px;
	height:78px;
xbackground:#f5f5f5}

#branding a{
	display:block;
	background: url(../images/elements/rbb-logo.png) no-repeat;
	height:100%;
	width:100%;
	text-indent:-9999px;
background-size: 300px 78px}

/* Content
__________________________________________________ */

#content{
	margin-bottom:3.82979%}

/* Content - Page Colors */

body#people #primary-content.full{
	padding:0;}

body#contact #primary-content.full{
	padding:0;}

.person{
	background:#f1f1f1;
	margin-bottom:18px}

.person-images{
	width:25%;
	margin:3% 3% 3% 3%;
	float:right}

.person-images img{
	width:100%;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%}

.person-details{
	width:45%;
	padding:3% 0 3% 8.48540%;
	float:left}

.person-details h2{
	padding-bottom:6px;
	border-bottom: 1px solid #ecac00;
	margin-bottom:12px;
	width:80%}

body#news #content{
	min-height:618px;
	background:#8fc9c8}

body#contact #content{
	background:#c5a5a4}
	
#contact #content p{
	color:#fff}

/* Primary Content */

#primary-content{
	padding:8.48540%}

#contact-content{
	padding:8.48540%}
	
/* Project Listing Thumbs */

.project-listing{
	position:relative;
	background:#f1f1f1;
	width:31%;
	float:left;
	margin-bottom:3%;
	margin-right:3%}

.project-listing.third,
.project-listing.sixth{
	margin-right:0px}

.project-listing img{
	width:100%}

.listing-caption{
	position:absolute;
	bottom:0px;
	width:100%;
	height:100%}

.listing-caption h2{
	position:absolute;
	bottom:0;
	font-size:15px;
	padding:2% 4%;
	line-height:1.3;
	color:#fff;
	background:url(../images/elements/project-over-bg.png)}

.listing-caption:hover h2{
	color:#000}

/* Project Pages */

.project-image{
	background:#f5f5f5}

.project-image img{
	width:100%;
	margin-bottom:3%;}

.project-image img.sixtysix{
	width:66%;
	margin: 0 auto;
	margin-bottom:3%;}

.project-copy{
	width:50%;
	padding-left:8.48540%;
	padding-bottom:6%}

/* Contact */

#contact-content p{
	float:left;
	margin-right:72px}

a.info-email{
display:block;
margin-top:6px}

#map{
	height: 315px;
	width: 100%;}

/* Footer
__________________________________________________ */

footer{
	padding-bottom:36px;
	border-top:1px dotted #ccc;
	padding-top:3.82979%}

#fit-the-fuk-wud-i-want-wi-a-pram footer,
#contact footer{
	border-top:0px dotted #ccc;
	padding-top:0%}

/* Guff */

#footer-spiel{
	float:left;
	width:26.63138%;
	margin-left:8.48540%;
	margin-right:7.31021%}

/* Contact */

#footer-contact{
	float:left;
	width:23.63138%;
	margin-right:10.31021%}

#footer-contact span{
	color:#ecac00}

/* Clearing
__________________________________________________ */

header:after,
#content:after,
footer:after,
.person:after,
#contact-content:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}

header,
#content,
footer,
.person,
#contact-content{
	zoom: 1;}

/* Media Queries - 768px
__________________________________________________ */

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

.person-details{
	width:63%;
padding:3%}

#wrapper{
	padding: 0}

header,
#content,
footer{
	margin: 0 3.28467%;}

#content{
	margin-bottom:3.82979%}

body#people #content,
body#news #content,
body#contact #content{
	min-height:inherit}

/* Footer */
  
#footer-spiel{
	display:none}  

#fit-the-fuk-wud-i-want-wi-a-pram #footer-spiel{
	display:block;
	margin-left:8.48540%;
	width:60%;}  
  
#footer-contact{
	width:60%;
	margin-left:8.48540%;}
  
#footer-logos{
	float:right;
	margin-right:8.48540%;}
	
/* Project Listing Thumbs */

.listing-caption h2{
	font-size:14px;}
	
/* Project Pages */
	
.project-copy{
	width:83.0294%}
	
/* Flex Slider - Home Page */
  
.flex-caption h2,
.flex-caption p{
	width:80%}

/* Project Listing Thumbs */

.project-listing{
	width:48.5%}

.project-listing.second,
.project-listing.fourth,
.project-listing.sixth{
	margin-right:0px!important}

.project-listing.third{
	margin-right:3%}
}

/* Media Queries - 580px
__________________________________________________ */

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

p, ul, ol, table{
	font-size:15px}

/* Header */

header{
	min-height:100px;
	margin:0}

#branding{

	top:30px;}
	
/* Project Pages */

.project-image img.sixtysix{
	width:100%;}

.project-copy{
 	padding-left:3.28467%;
	width:93.43066%}
  
/* Footer */
	
#footer-contact{
	margin-left:3.28467%}

#fit-the-fuk-wud-i-want-wi-a-pram #footer-spiel{
	width:92%;
	margin-left:3.28467%}
	
#footer-logos{
	margin-right:3.28467%;}

#contact-content p{
	margin-right:36px}

.person-details{
	clear:both;
	float:none;
	width:80%;
	margin:0 auto;
	padding:6%}

.person-details p,
.person-details h2{
	text-align:center;
	width:100%}

.person-images{
	float:none;
	width:45%;
	margin:0 auto!important;
	padding-top:6%}

.person-images img{
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%}



#branding{
	width:250px;
	height:65px}

#branding a{
	background-size: 250px 65px}

.nav-toggle{
	margin-right:3.28467%;}

#map{
	height: 200px;}

.project-image img,
.project-image img.sixtysix{
margin-bottom:6%}

}

/* Media Queries - 400px
__________________________________________________ */

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

/* Project Listing Thumbs */

.project-listing{
	width:100%;
margin-bottom:3.82979%}

.project-listing{
	margin-right:0!important}

.person-images{
	width:60%;}

.person-details{
	clear:both;
	float:none;
	width:auto;
	margin:0 auto!important}

}

/* Pixel Ratio Queries
__________________________________________________ */

@media screen and (-webkit-min-device-pixel-ratio: 2) {
#branding a{
	x background-image: url(../images/elements/rbb-logo.png);
  	x background-size: 100px 25px}
}



.home-hero img{
width:100%!important}

.panel-left{
width:65.875912408759%; /* 722/1096 */
margin-right:1.824817518248%; /* 20/1096 */
float:left;}

.panel-right{
width:32.025547445255%; /* 351/1096 */
float:left;}

.large-image{
background:#f1f1f1;
margin-bottom:2.770083102493% /* 20/722 */}

.square-left{
width:48.614958448753%; /* 351/722 */
float:left}

.square-right{
float:right;
width:48.614958448753%; /* 351/722 */}

.square-top{
margin-bottom:5.698005698006%; /* 20/351 */}

.tall-bottom{}