@import url('https://mail.richardrobbarchitects.com/css/favicon.ico'); 	
@import url('https://mail.richardrobbarchitects.com/css/reset.css'); 
@import url('https://mail.richardrobbarchitects.com/css/gridlock-base.css'); 
@import url('https://mail.richardrobbarchitects.com/css/gridlock-12.css'); 
@import url('https://mail.richardrobbarchitects.com/css/navigation.css');
@import url('https://mail.richardrobbarchitects.com/css/fonts-site.css'); 
@import url('https://mail.richardrobbarchitects.com/css/fonts-icon.css'); 
@import url('https://mail.richardrobbarchitects.com/css/slideshow.css'); 
<!--[if IE 7]><link rel="stylesheet" href="css/fonts-icon-ie7.css"><![endif]-->
	
							
/* For anything below 500*/

@media screen and (min-width: 500px) {  /* For small tablets above 500 */

}
@media screen and (min-width: 740px) { /* For large tablets above 740 */

}
@media screen and (min-width: 980px) { /* For small desktops above 980 */

}
@media screen and (min-width: 1220px) { /* For large tablets above 1220 */

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { /* For ipads portrait and landscape */

 }



/* class overrides  ----------------------------------------------------------------------------------------------------*/


.teal4 {
	color: #28826e;
	color: rgb(040,130,110);
}
.teal3 {
	color: #73d7b9;
	color: rgb(115,215,185);
}
.teal2 {
	color: #bef0dc;
	color: rgb(190,240,220);
}
.teal1 {
	color: #f0fff5;
	color: rgb(240,255,245);
}
.black4 {
	color: #303030;
}
.black3 {
	color: #333333;
}
.black2 {
	color: #666666;
}
.black1 {
	color: #999999;
}
.black0 {
	color: #f0f0f0;
}
.white {
	color: #fff;
}

.shadow-white {
	text-shadow: 1px 1px #ffffff;
}
.shadow-black {
	text-shadow: 1px 1px #303030;
}


.float-left {
	float: left;
}
.float-right {
	float: right;
}
.clear {
	clear: both;	
}

@media screen and (min-width: 740px) {
	.wrapper-left h1, .wrapper-left h2, .wrapper-left h3, .wrapper-left h4, .wrapper-left h5, .wrapper-left h6, .wrapper-left p, .wrapper-left [class^="icon-"] {
		text-align: left;	
	}
	.wrapper-left img {
		float: left;
	}
	.wrapper-right h1, .wrapper-right h2, .wrapper-right h3, .wrapper-right h4, .wrapper-right h5, .wrapper-right h6, .wrapper-right p, .wrapper-right [class^="icon-"]  {
		text-align: right;	
	}
	.wrapper-right img {
		float: right;
	}
}



/* Generic Site elements  ----------------------------------------------------------------------------------------------------*/

/* Divider */
.divider {
	height:1px;
	width: 100%;
	margin: 0px auto;
	clear: both;
}
.divider.solid{
	border-top: solid 1px #999999;
}
.divider.height10 {
	margin: 5px auto;
}
.divider.height25 {
	margin: 10px auto;
}
.divider.height50 {
	margin: 25px auto;
}
.divider.height100 {
	margin: 50px auto;
}
.divider.height150 {
	margin: 75px auto;
}
.divider.height200 {
	margin: 100px auto;
}


/* responsive hidden objects -----------------------------------------------------------------------------------------*/
.hideon-all {
	display: none !important;	/* Hides on everything*/	
}

@media screen and (min-width: 740px) { /* For large tablets above 740 */
	.hideon-tabletup {
		display: none !important;	/* Hides on anything larger than a phone*/	
	}
}
@media screen and (min-width: 980px) { /* For small desktops above 980 */
	.hideon-desktopup {
		display: none !important;	/* Hides on anything larger than a tablet*/
	}
}

@media screen and (max-width: 500px) { /* For large tablets above 740 */
	.hideon-mobiledown {
		display: none !important;	/* Hides on anything smaller than a tablet*/	
	}
}
@media screen and (max-width: 740px) { /* For small desktops above 980 */
	.hideon-tabletdown {
		display: none !important;	/* Hides on anything smaller than a desktop*/
	}
}
@media screen and (max-width: 980px) { /* For small desktops above 980 */
	.hideon-desktopdown {
		display: none !important;	/* Hides on anything smaller than a desktop*/
	}
}



/* Sections  ----------------------------------------------------------------------------------------------------*/

body {
	background: #303030;
	height: auto;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}

section {
	background: #fff;
	padding: 200px 0;
	position: relative;
	overflow: visible;
}
@media screen and (min-width: 740px) { /* For large tablets above 740 */
	section {
		padding: 150px 0;
	}
}

/* Rules for dark  background sections */
.section-black {
	background: #303030;
}
.section-black h1, .section-black h2, .section-black h4, .section-black h5, .section-black h6, .section-black a  {
	color: #fff;
}
.section-black h3 {
	color: #fff;
}
.section-black p  {
	color: #f2f2f2;
}

.section-black ul.list-standard {
	color: #f2f2f2;
}

.section-black .button  {
	background: #303030;
	color: #fff;
	border: solid 1px #73d7b9;
}
@media screen and (min-width: 740px) {
	.section-black .button  {
		border: solid 1px #fff;
	}
}
.section-black .button:hover,
.section-black .button:active,
.section-black .button:focus
{
	background: #fff;
	color: #303030;
}
.section-black .button  [class^="icon-"] {
	color: #fff;
}
.section-black .button:hover  [class^="icon-"] {
	color: #000;
}


/* Parallax  ----------------------------------------------------------------------------------------------------*/
.parallax {
    background-repeat: no-repeat;
    /* custom background-position */
    background-position: 50% 50%;
    /* ie8- graceful degradation */
    background-position: 50% 50%\9 !important;
}



/* Splash   ----------------------------------------------------------------------------------------------------*/

.section-splash { 
	height: 610px;
	height: 100vh;
	padding: 0 0 0; /* padding added to wrapper-splash-overlay */
	background-color: #303030;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
	background-attachment: scroll;
}
.section-splash-overlay { 
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 100px 0 0 0;
	position: absolute;
	top: 0;
	background-color: transparent;
	background-color: rgba(0,0,0,0.4);
}
@media screen and (min-width: 740px) {
	.section-splash { 
		height: 100vh;
	}
	.section-splash:after { /* triangle separator */
		display: none; /* hidden for now */
		width: 0;
		height: 0;
		content: "";
		position: absolute;
		bottom: -19px;
		left: 50%;
		z-index: 3;
		-webkit-transform:translateZ(3px);
		-moz-transform:translateZ(3px);
		-o-transform:translateZ(3px);
		transform:translateZ(3px);
		margin-left: -20px;
		border-top: 20px solid #303030; 
		border-right: 20px solid transparent;
		border-left: 20px solid transparent;
	}
	.section-splash-overlay { 
		padding: 200px 0 0 0; /* padding added to wrapper-splash-overlay */
	}
}
@media screen and (min-width: 980px) {
	.section-splash { 
		height: 750px;
		height: 100vh;
		background-attachment: fixed;
	}
	.section-splash-overlay { 
		padding: 150px 0 0 0; /* padding added to wrapper-splash-overlay */
	}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  { 
	.section-splash { 
		height:  650px;
		height: 100vh;
	}
	
}

/* splash page backgrounds */
@media screen and (max-width: 719px) {
	body.index .section-splash {
	}
}
@media screen and (min-width: 720px) {
	body.index .section-splash {
		background-color: #fff;
	}
}
body.studio .section-splash {
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-splash-studio.jpg);
}
body.projects .section-splash:after { /* triangle separator */
	display: none;
}
body.residential .section-splash { 
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-splash-linedrawing-blairmore-white.svg);
}
body.commercial .section-splash { 
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-splash-linedrawing-kipmarina-white.svg);
}
body.industrial .section-splash { 
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-splash-linedrawing-buchanans-white.svg);
}
body.public .section-splash { 
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-splash-linedrawing-cappielow-white.svg);
}
body.masterplanning .section-splash { 
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-splash-linedrawing-cappielow-white.svg);
}


body.index .section-splash-overlay, body.contact .section-splash-overlay { 
	background-color: transparent;
	background-color: rgba(0,0,0,0);
}

/* section-splash ----------------------------------------------------------------------------------------------------*/ 

body.index .section-splash {
	background-size: cover !important;
	background-color: #000 !important;
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-splash-index-curved.jpg);
}

body.index .section-splash h1 {
	color: #ffffff;
	line-height: 1em;
	text-shadow: 1px 1px 25px #000000;
}
body.index .section-splash p {
	color: #000000;
	text-shadow: 1px 1px 15px #ffffff;
	font-weight: bold;
}
body.index .section-splash .button  {
	color: #ffffff;
	border: solid 2px #73d7b9;
	background: none;
}
@media screen and (min-width: 740px) {
	body.index .section-splash .button  {
		border: solid 2px #ffffff;
	}
}
body.index .section-splash .button:hover,
body.index .section-splash .button:active,
body.index .section-splash .button:focus
{
	border: solid 2px #73d7b9;
}
body.index .section-splash .button  [class^="icon-"] {
	color: #ffffff;
	position: relative;
	left: 0px;
}
body.index .section-splash .button:hover  [class^="icon-"] {
	color: #73d7b9;
	left: 5px;
}


/* section-services -------------------------------------------------------------------------*/ 
#section-services { 
	background: #f9f9f9;
	padding: 50px 0;
}
#section-services img  {
	margin: 0px auto;
}
.wrapper-services  {
	width: 100%;
	margin: 0px auto 50px auto ;	
	text-align: center;
}
.wrapper-services h6 {
	color: #000000;
	font-size: 1.2em;
	text-align: center;
}
.wrapper-services p {
	text-align: center;
}
.wrapper-services [class^="icon-"]  {
	text-align: center;
	margin: 0 auto;
	color: #28826e;
	width: 100%;
	font-size: 5em;
}
@media screen and (min-width: 740px) {
	.wrapper-services {
		height: 225px;	
	}
	.wrapper-services h6 {
		font-size: 1em;
		margin-top: 15px;
	}
	.wrapper-services p {
		font-size: 0.75em;
	}
	.wrapper-services [class^="icon-"]  {
		padding-bottom: 5px;
	}
}
@media screen and (min-width: 980px) {
	#section-services { 
		padding: 150px 0 50px 0;
	}
	.wrapper-services  {
		margin: 0px ;
	}
	.wrapper-services:hover {
	}
	.wrapper-services h6 {
		font-size: 1.5em;
		margin: 0;
		-webkit-transform:translateY(15px);
		-moz-transform:translateY(15px);
		-o-transform:translateY(15px);
		transform:translateY(15px);
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-services:hover h6,
	.wrapper-services:active h6,
	.wrapper-services:focus h6
	{
		-webkit-transform:translateY(0px);
		-moz-transform:translateY(0px);
		-o-transform:translateY(0px);
		transform:translateY(0px);
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	.wrapper-services p {
		width: 150%;
		margin-left: -25%;
		-webkit-transform:translateY(25px);
		-moz-transform:translateY(25px);
		-o-transform:translateY(25px);
		transform:translateY(25px);
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-services:hover p,
	.wrapper-services:active p,
	.wrapper-services:focus p
	{
		-webkit-transform:translateY(0px);
		-moz-transform:translateY(0px);
		-o-transform:translateY(0px);
		transform:translateY(0px);
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	.wrapper-services [class^="icon-"] {
		color: #999999;	
		margin: 0;
		padding: 0;
		transition: all 0.15s ease-in;
		-webkit-transition: all 0.15s ease-in;
		-moz-transition-duration: all 0.15s ease-in;
		-o-transition-duration: all  0.15s ease-in;
	}
	.wrapper-services:hover [class^="icon-"] {
		color: #28826e;
	}
	
}


/* section-staff --------------------------------------------------------------------------*/ 
.wrapper-staff {
	margin: 0 0 100px 0;	
}
.wrapper-staff h4 { 
	font-size: 1.2em;
}
.wrapper-staff h5 { 
	font-size: 0.6em;
}
.wrapper-staff h5:after { /* divider line */
	content: "-";
	display: block; 
	width: 100%;
	height: 2px;
	background: #f0f0f0;
	margin: 10px 0 0 0;
	text-indent: -9999em;
	overflow: hidden;
}
 .thumbnail-staff {
	width: 100%;
	height: 0;
	padding: 50% 0;
	background: #73d7b9;
	border: solid 1px #000000;	
	overflow: visible;
	position: relative;
	transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	-moz-transition-duration: all 0.15s ease-in;
	-o-transition-duration: all  0.15s ease-in;
}
.wrapper-staff:hover .thumbnail-staff,
.wrapper-staff:active .thumbnail-staff,
.wrapper-staff:focus .thumbnail-staff,
{
	border: solid 1px #73d7b9;	

}
.thumbnail-staff img {
	width: 100%;
	position: absolute;
	bottom: 0px;
}

.wrapper-staff .thumbnail-staff img.static {
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
}
.wrapper-staff .thumbnail-staff img.animated {
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

.wrapper-staff a img { /* contact email text */
	width: 100%;
	max-width: 100%;
	position: relative;
	bottom: 20px;
}
.wrapper-staff a [class^="icon-"] { /* hide email icon for small widths */
	display: none;
}

@media screen and (min-width: 500px) {
	.wrapper-staff h4 { 
		font-size: 1.8em;
	}
	.wrapper-staff h5 { 
		font-size: 0.8em;
		margin-bottom: 5px;
	}
	.wrapper-staff a img { /* contact email text */
		width: 80%;
		max-width: 80%;
		bottom: 0px;
	}
	.wrapper-staff a [class^="icon-"] { /* hide email icon for small widths */
		display: inline-block;
	}
}
@media screen and (min-width: 740px) {
	.wrapper-staff h4 { 
		font-size: 1.4em;
	}
	.wrapper-staff a img { /* contact email text */
		width:60%;
		max-width: 60%;
	}
}
@media screen and (min-width: 980px) {
	 .wrapper-staff .thumbnail-staff {
		background: #f0f0f0;
	}
	 .wrapper-staff:hover .thumbnail-staff {
		background: #73d7b9;
	}
	.wrapper-staff .thumbnail-staff img.static {
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	.wrapper-staff .thumbnail-staff img.animated {
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-staff:hover .thumbnail-staff img.static {
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-staff:hover .thumbnail-staff img.animated {
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	
	.wrapper-staff a img {
		width: 85%;
		max-width: 85%;
	}
	.wrapper-staff:hover a img {
	}
	.wrapper-staff h4 { 
		font-size: 1.8em;
	}
	.wrapper-staff h5 {
		position: relative;
		top: 10px;
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-staff a {
		position: relative;
		top: 30px;
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-staff:hover h5,
	.wrapper-staff:active h5,
	.wrapper-staff:focus h5,
	.wrapper-staff:hover a,
	.wrapper-staff:active a,
	.wrapper-staff:focus a
	{
		top: 0px;
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
}


/* section-clients ----------------------------------------------------------------------------------------------------*/ 

.wrapper-client {
	width: 100%;
	height: 100px;
	text-align: left;
	margin: 0 0 20px 0 ;
	position: relative;
	transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	-moz-transition-duration: all 0.15s ease-in;
	-o-transition-duration: all  0.15s ease-in;
}
.wrapper-client h6 {
	display: none;
	color: #000;
	text-align: center;
	text-indent: -9999px;
	position: relative;
	bottom: -45px;
	z-index: 1002;
	-webkit-transform:translateZ(1002px);
	-moz-transform:translateZ(1002px);
	-o-transform:translateZ(1002px);
	transform:translateZ(1002px);
}

.wrapper-client img {
	margin: 0 auto;
	padding: 15px;
	max-width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition-duration: all 0.2s ease-in;
    -o-transition-duration: all  0.2s ease-in;
}

.wrapper-client .static {
	display: block;
	z-index: 2;
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	-o-transform: translateZ(2px);
	transform: translateZ(2px);
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition-duration: all 0.3s;
	-o-transition-duration: all  0.3s;
}
.wrapper-client .animated {
	z-index: 1;
	-webkit-transform:translateZ(1px);
	-moz-transform:translateZ(1px);
	-o-transform:translateZ(1px);
	transform:translateZ(1px);
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition-duration: all 0.3s;
	-o-transition-duration: all  0.3s;
}

@media screen and (min-width: 500px) {
	.wrapper-client {
		height: 150px;
		margin: 20px auto; /* grid spacing vertically*/
	}
	.wrapper-client img {
		padding: 25px;
	}
}
@media screen and (min-width: 740px) {
	.wrapper-client {
		height: 110px;
		margin: 7px auto; /* grid spacing vertically*/
		padding: 10px;
		text-align: center;
		border: solid 1px #73d7b9;
	}
	.wrapper-client img {
		width: 100%;
		padding: 10px;
	}
}
@media screen and (min-width: 980px) {
	.wrapper-client {
		height: 140px;
		margin: 10px auto; /* grid spacing vertically*/
		text-align: center;
		border: solid 2px #fff;
	}
	.wrapper-client:hover {
		background: #fff;
	}
	
	.wrapper-client img {
		padding: 25px; /* controls size of images*/
	}
	
	.wrapper-client h6 {
		color: #000;
		text-align: center;
		text-indent: 0px;
		position: absolute;
		bottom: 10px;
		-webkit-transform:translateY(5px);
		-moz-transform:translateY(5px);
		-o-transform:translateY(5px);
		transform:translateY(5px);
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-client:hover h6 {
		-webkit-transform:translateY(0px);
		-moz-transform:translateY(0px);
		-o-transform:translateY(0px);
		transform:translateY(0px);
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	.wrapper-client .static {
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	.wrapper-client .animated {
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-client:hover .static {
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-client:hover .animated {
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
}
@media screen and (min-width: 1220px) {
	.wrapper-client {
		height: 175px;
		margin: 13px auto; /* grid spacing vertically*/
	}
}


/* section-icons */

#section-icons {
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-icons-666666.svg);
	background-repeat: both;
	background-size: 100%;
}

/* section-tabs */
#section-tabs {  
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-icons-666666.svg);
	background-repeat: both;
	background-size: 75%;
	background-attachment: fixed !important;
}

#section-tabs a {
	font-size: 0.75em;
	font-weight: bold;
	display: block;
	width: 100%;
	color: #ffffff;
	text-align: center;
	border: solid 2px #999;
	background-color: rgba(48,48,48,0.7);
	padding: 10px 0;
	margin: 20px 0 0 0;
	position: relative;
	transition: all 0.1s ease-in;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition-duration: all 0.1s ease-in;
    -o-transition-duration: all  0.1s ease-in;
}
#section-tabs a [class^="icon-"] {
	font-size: 2em;
	color: #28826e;
}

@media screen and (min-width: 980px) {
	#section-tabs {
		padding-top: 250px;
		background-image: url(https://mail.richardrobbarchitects.com/images/site-background-icons-666666.svg);
		background-repeat: both;
		background-size: 75%;
		background-attachment: fixed !important;
	}
	#section-tabs a {
		color: #999999;
		border: solid 2px #999999;
	}
	#section-tabs a:hover,
	#section-tabs a:active,
	#section-tabs a:focus
	{ 
		color: #ffffff;
		border: solid 2px #73d7b9;
		-ms-transform: scale(1.1); /* IE 9 */
		-webkit-transform: scale(1.1); /* Safari */
		transform: scale(1.1);
		cursor: default;
	}
	#section-tabs a [class^="icon-"] {
		font-size: 2em;
		color: #999999;
	}
	#section-tabs a:hover [class^="icon-"],
	#section-tabs a:active [class^="icon-"],
	#section-tabs a:focus [class^="icon-"]
	{ 
		color: #000000;
	}
}



/* section-advice ---------------------------------------------------------------------*/ 

#section-advice {
		background-image: url(https://mail.richardrobbarchitects.com/images/site-background-questionmark.svg);
		background-repeat: no-repeat;
		background-size: auto 110% ;
		background-attachment: fixed !important;
		background-position: center left;
}
#section-advice h3:after {
	display: none; 
}

@media screen and (min-width: 980px) {
	#section-advice {
			background-position: center right;
	}
}

/* section-directory ---------------------------------------------------------------------*/ 

#section-directory {
		background-image: url(https://mail.richardrobbarchitects.com/images/site-background-questionmark.svg);
		background-repeat: no-repeat;
		background-size: auto 110% ;
		background-attachment: fixed !important;
		background-position: center left;
}


@media screen and (min-width: 980px) {
	#section-directory {
			background-position: center right;
	}
}
.wrapper-directory {
	padding: 20px;
	border: solid 1px #999;
	background: #fff;
	margin-bottom: 25px;
	transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	-moz-transition-duration: all 0.15s ease-in;
	-o-transition-duration: all  0.15s ease-in;	
}
.wrapper-directory img {
	width: 50%;
	margin: 0px auto;
}
.wrapper-directory h4 {
	margin-bottom: 10px;
}
.wrapper-directory h5 {
	text-transform: none;
	margin-bottom: 5px;
}
.wrapper-directory a {
  	font-family:  'helveticaneue', Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.25em;
	font-weight: normal;
	font-style: normal;
	text-align: left;
	text-transform: none;
}

@media screen and (min-width: 740px) {
	.wrapper-directory {
		height: 165px;
	}
	.wrapper-directory h4 {
		font-size: 1.2em;
	}
}
@media screen and (min-width: 980px) {
	.wrapper-directory:hover,
	.wrapper-directory:active,
	.wrapper-directory:focus
	{
		border: solid 1px #73d7b9;	
	}
	.wrapper-directory img {
		width: 20%;
		margin-right: 15px;
		float: left;
	}
	.wrapper-directory h5:hover,
	.wrapper-directory h5:active,
	.wrapper-directory h5:focus
	{
	}
}

/* section-process -------------------------------------------------------------------------------------*/ 

.wrapper-process {
	margin-bottom: 50px;
}
.wrapper-process-number {
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 5px 20px 0 0;
	border: solid 1px #303030;
	float: left;
	background: #ffffff;
	position: relative;
	overflow: hidden;
	transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	-moz-transition-duration: all 0.15s ease-in;
	-o-transition-duration: all  0.15s ease-in;
}
.wrapper-process-number h1 {
	color: #303030;
	position: relative;
	line-height: 0.65;
	transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	-moz-transition-duration: all 0.15s ease-in;
	-o-transition-duration: all  0.15s ease-in;
}


.wrapper-process h4 {
	font-size: 2.5em;
	margin: 0;
	padding: 0;
}
.wrapper-process h5 {
	color: #999;
}
.wrapper-process img {
	width: 50%;
}
@media screen and (min-width: 740px) {
	.wrapper-process-number {
	}
	.wrapper-process-number h1 {
		font-size: 3em;
		top: -1px;
		left: -4px;
	}
	.wrapper-process h4 {
		font-size: 2.5em;
	}
	.wrapper-process img {
		width: 100%;
	}
}
@media screen and (min-width: 980px) {
	.wrapper-process-number {
		width: 58px;
		height: 58px;
		border: solid 2px #ffffff;
		background: #303030;
	}
	.wrapper-process-number h1 {
		color: #ffffff;
	}
	.wrapper-process:hover .wrapper-process-number {
		border: solid 2px #ffffff;
		background: #ffffff;
		position: relative;
		overflow: visible;
	}
	.wrapper-process:hover .wrapper-process-number h1  {
		color: #303030;
	}
	.wrapper-process h4 {
		font-size: 3em;
	}
	.wrapper-process img {
		position: relative;
		opacity: 0.15;
		filter: alpha(opacity=15); /* For IE8 and earlier */
	}
	.wrapper-process:hover img {
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}	
}

/* Studio sections --------------------------------------------------------------------------------------------*/ 
#section-rias {
}
#section-history {
	padding: 100px 0 300px 0;
	background-image: url(https://mail.richardrobbarchitects.com/images/site-background-splash-linedrawing-consultation.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
}
#section-history .button {
	background: #fff;
}
@media screen and (min-width: 980px) {
	#section-history {
		padding: 100px 0 400px 0;
	}
}
@media screen and (min-width: 1220px) {
	#section-history {
		padding: 100px 0 600px 0;
	}
}

/* Location sections ------------------------------------------------------------------------------*/ 

#section-locations {
	padding-top: 200px;
	background-image: url(https://mail.richardrobbarchitects.com/images/about-location-map-teal-4.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
}
#section-locations h2 {
	color: #ffffff;
	position: relative;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	transform: scale(0.7);
}
#section-locations .locations-left h2 {
	text-align: left;
}
#section-locations .locations-center h2 {
	text-align: left;
}
#section-locations .locations-right h2 {
	text-align: left;
}
@media screen and (min-width: 740px) {
	#section-locations {
		background-attachment: fixed;
	}
	#section-locations h2 {
		margin: 5px 0;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1);
	}
	#section-locations .locations-center h2 {
		text-align: center;
	}
	#section-locations .locations-right h2 {
		text-align: right;
	}
}

@media screen and (min-width: 980px) {
	#section-locations h2 {
		color: #999999;
	}
	#section-locations h2:hover,
	#section-locations h2:active,
	#section-locations h2:focus
	{
		color: #ffffff;
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1);
	}
}

/* project map section ------------------------------------------------------------------------------*/ 
#section-projectmap {
	background: #fff;
	padding: 0;
	margin: -50px 0; /* Remove border around map */
}
#section-projectmap h3 {
	padding: 0;
	margin: 0 0 25px 0;
}
#section-projectmap h3:after {
	display: none; /* disable bar at bottom */
}
#section-projectmap .wrapper-iframe {
	padding-bottom: 140%; /* ratio percentage */
}
@media screen and (min-width: 500px) {

}
@media screen and (min-width: 740px) {
	#section-projectmap h3 {
		font-size: 3em;
		position: absolute;
		top: 0px;
		margin: 0;
	}
	#section-projectmap .wrapper-iframe {
		padding-bottom: 70%; /* ratio percentage */
	}
}
@media screen and (min-width: 980px) {

}




/* Project sections -----------------------------------*/
@media screen and (min-width: 980px) {
	body.projects .section-black {
		padding: 5% 0;
	}
}

/* work page ----------------------------------------------------------*/

@media screen and (max-width: 500px) {
	body.projects #section-slideshow {
		position: relative;

	}
}


/* thumbnails --------------------------------------------------------------*/

#section-projects-header {
	background: #303030;
	border-bottom: solid 3px #999;
	padding-bottom: 0;	
	padding-top: 25px;
}

#section-projects-thumbnails {
	background: #ffffff;
	margin-top:0;
	padding-top: 25px;	
}
 
#section-projects-thumbs {
	padding-top: 0;	
}
body.projects .wrapper-optionbox  {
}
#section-projects-information {
	padding: 50px 0;	
}
#section-projects-information img {
	float: left;	
	text-align: left;
}


/* projects tabbed content */
.navigation-projects-header {
	text-align: center;
}
.navigation-projects-header h2 {
	color: #ffffff;
	text-align: center;
}

.navigation-projects {
	width: 100%;
	margin: 0 auto;
}
.navigation-projects:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	line-height: 0;
	visibility: hidden;
}

@media screen and (min-width: 740px) {
	#section-projects-header {
		padding-top: 250px;
	}
	.navigation-projects {
		margin: 0 auto;
	}
}
@media screen and (min-width: 980px) {
	.navigation-projects {
		width: 940px;
	}
}
@media screen and (min-width: 1220px) {
	.navigation-projects {
		width: 1160px;
	}
}

.tab {
	display: inline-block;
	float: left;
	width: 11%;
  	font-family: 'helveticaneue', Helvetica, Arial, sans-serif;
	font-size: 0.75em;
	font-weight: regular;
	text-align: center;
	color: #999999;
	padding: 15px 0px 0px 0px; 
	border-bottom: solid 3px #999999;
	position: relative;
	top: 3px; /* push tabs down over border*/
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition-duration: all 0.2s ease-in;
	-o-transition-duration: all  0.2s ease-in;
}
.tab:hover,
.tab:active,
.tab:focus
{
	color: #ffffff;
	border-bottom: solid 3px #ffffff;
	cursor: pointer;
}
body.residential #nav-residential.tab,
body.estates #nav-estates.tab,
body.commercial #nav-commercial.tab,
body.industrial #nav-industrial.tab,
body.public #nav-public.tab, 
body.healthcare #nav-healthcare.tab, 
body.education #nav-education.tab, 
body.marine #nav-marine.tab, 
body.leisure #nav-leisure.tab,
body.religious #nav-religious.tab,
body.masterplanning #nav-masterplanning.tab

{ /* active tab for each category page */
	color: #73d7b9;
	border-bottom: solid 3px #73d7b9;
}
#nav-residential.tab [class^="icon-"],
#nav-estates.tab [class^="icon-"],
#nav-commercial.tab [class^="icon-"],
#nav-industrial.tab [class^="icon-"],
#nav-public.tab [class^="icon-"],
#nav-healthcare.tab [class^="icon-"],
#nav-education.tab [class^="icon-"],
#nav-marine.tab [class^="icon-"],
#nav-leisure.tab [class^="icon-"],
#nav-religious.tab [class^="icon-"],
#nav-masterplanning.tab [class^="icon-"]
 { /*  tab icons*/
	font-size: 3.5em;
	position: relative;
	text-align: center;
	margin: 0px auto;
}
#nav-residential.tab [class^="icon-"]
{ /*  tab icons*/
	top: 4px;
}
#nav-estates.tab [class^="icon-"]
{ /*  tab icons*/
	top: 3px;
}
#nav-commercial.tab [class^="icon-"]
{ /*  tab icons*/
	top: 4px;
}
#nav-industrial.tab [class^="icon-"]
{ /*  tab icons*/
	top: 6px;
}
#nav-public.tab [class^="icon-"]
{ /*  tab icons*/
	top: 6px;
}
#nav-healthcare.tab [class^="icon-"]
{ /*  tab icons*/
	top: 2px;
}
#nav-education.tab [class^="icon-"]
{ /*  tab icons*/
	top: 4px;
}
#nav-marine.tab [class^="icon-"]
{ /*  tab icons*/
	top: 2px;
}
#nav-leisure.tab [class^="icon-"]
 { /*  tab icons*/
	top: 7px;
}
#nav-religious.tab [class^="icon-"]
 { /*  tab icons*/
	top: 0px;
}
#nav-masterplanning.tab [class^="icon-"]
 { /*  tab icons*/
	top: 8px;
}


.tab span { /* hides text and shows icon only on mobiles */
	position: relative;
	display: block;
	opacity: 0;
	opacity: 0.35;
	filter: alpha(opacity=35); /* For IE8 and earlier */
	-webkit-transition: all 0.1s ease-in;
	-moz-transition-duration: all 0.1s ease-in;
	-o-transition-duration: all  0.1s ease-in;
}
.navigation-projects .tab:nth-child(odd) span { 
	bottom: 20px;
}
body.residential #nav-residential.tab span,
body.estates #nav-estates.tab span,
body.commercial #nav-commercial.tab span,
body.industrial #nav-industrial.tab span,
body.public #nav-public.tab span,
body.healthcare #nav-healthcare.tab span,
body.education #nav-education.tab span,
body.marine #nav-marine.tab span,
body.leisure #nav-leisure.tab span,
body.religious #nav-religious.tab span,
body.masterplanning #nav-masterplanning.tab span { /* shows text and shows icon only on mobiles */
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

@media screen and (min-width: 500px) {
	.tab {
	}
	.tab:hover {
	}
	body.residential #nav-residential.tab,
	body.estates #nav-estates.tab,
	body.commercial #nav-commercial.tab,
	body.industrial #nav-industrial.tab,
	body.public #nav-public.tab,
	body.healthcare #nav-healthcare.tab,
	body.education #nav-education.tab,
	body.marine #nav-marine.tab,
	body.leisure #nav-leisure.tab,
	body.religious #nav-religious.tab,
	body.masterplanning #nav-masterplanning.tab
	{ /* active tab for each category page */
	}
}
@media screen and (min-width: 740px) {
	.tab {
		font-size: 1em;
		padding: 15px 15px 0px 15px; 
	}
	.navigation-projects .tab:nth-child(odd) span {
		bottom: 0px;
	}	
	body.residential #nav-residential.tab,
	body.estates #nav-estates.tab,
	body.commercial #nav-commercial.tab,
	body.industrial #nav-industrial.tab,
	body.public #nav-public.tab,
	body.healthcare #nav-healthcare.tab,
	body.education #nav-education.tab,
	body.leisure #nav-leisure.tab,
	body.marine #nav-marine.tab,
	body.religious #nav-religious.tab,
	body.masterplanning #nav-masterplanning.tab
	{ /* active tab for each category page */
		color: #73d7b9;
	}
	body.residential #nav-residential.tab [class^="icon-"],
	body.estates #nav-estates.tab [class^="icon-"],
	body.commercial #nav-commercial.tab [class^="icon-"],
	body.industrial #nav-industrial.tab [class^="icon-"],
	body.public #nav-public.tab [class^="icon-"],
	body.healthcare #nav-healthcare.tab [class^="icon-"],
	body.education #nav-education.tab [class^="icon-"],
	body.leisure #nav-leisure.tab [class^="icon-"],
	body.marine #nav-marine.tab [class^="icon-"],
	body.religious #nav-religious.tab [class^="icon-"],
	body.masterplanning #nav-masterplanning.tab [class^="icon-"]
	{ /* active tab for each category page */
		color: #73d7b9;
	}
	#nav-residential.tab [class^="icon-"],
	#nav-estates.tab [class^="icon-"],
	#nav-commercial.tab [class^="icon-"],
	#nav-industrial.tab [class^="icon-"],
	#nav-public.tab [class^="icon-"],
	#nav-healthcare.tab [class^="icon-"],
	#nav-education.tab [class^="icon-"],
	#nav-marine.tab [class^="icon-"],
	#nav-leisure.tab [class^="icon-"],
	#nav-religious.tab [class^="icon-"],
	#nav-masterplanning.tab [class^="icon-"]
	 { /*  tab icons*/
		font-size: 3.5em;
	}
	
}
@media screen and (min-width: 980px) {
	.tab:hover,
	.tab:active,
	.tab:focus
	{
		cursor: pointer;
	}
	.tab span {
		position: relative;
		bottom: 0px;
	}
	.tab:hover span,
	.tab:active span,
	.tab:focus span
	 {
		bottom: 5px;
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
		
	}
	
	/* active category tab */
	body.residential #nav-residential.tab,
	body.estates #nav-estates.tab,
	body.commercial #nav-commercial.tab,
	body.industrial #nav-industrial.tab,
	body.public #nav-public.tab,
	body.healthcare #nav-healthcare.tab,
	body.education #nav-education.tab,
	body.leisure #nav-leisure.tab,
	body.marine #nav-marine.tab,
	body.religious #nav-religious.tab,
	body.masterplanning #nav-masterplanning.tab
	{ 
		color: #73d7b9;
	}
	body.residential #nav-residential.tab span,
	body.estates #nav-estates.tab span,
	body.commercial #nav-commercial.tab span,
	body.industrial #nav-industrial.tab span,
	body.public #nav-public.tab span,
	body.healthcare #nav-healthcare.tab span,
	body.education #nav-education.tab span,
	body.leisure #nav-leisure.tab span,
	body.marine #nav-marine.tab span,
	body.religious #nav-religious.tab span,
	body.masterplanning #nav-masterplanning.tab span
	{ 
		bottom: 5px;
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
		color: #73d7b9;
	}
}




/* Project Thumbnails ------------------------------------------------------------------------------------*/

.wrapper-thumbnail {
	border: solid 2px #000000;
	background-color: #fff;	
	margin: 10px 0;
}
.wrapper-thumbnail.superseded {
	display: none;
}
.thumbnail {
	display: block;
	width: 100%;
	padding: 50% 0;
	position: relative;
	overflow: hidden;
}

.thumbnail h4,  .thumbnail h5 {
	color: #ffffff;	
	text-shadow: 1px 1px 15px #000000;
	margin: 0;
}
.thumbnail .thumbnail-text {
	width: 90%; 
	padding: 10px  0 0 10px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	-webkit-transform: translateZ(3px);
	-moz-transform: translateZ(3px);
	-o-transform: translateZ(3px);
	transform: translateZ(3px);
}

.thumbnail [class^="icon-"] {
	display: none;
}
.thumbnail img {
	width: 100%;
	height: auto;
	position: absolute; 
	bottom: 0;
	left: 0;
	transition: all 0.1s ease-in;
	-webkit-transition: all 0.1s ease-in;
	-moz-transition-duration: all 0.1s ease-in;
	-o-transition-duration: all  0.1s ease-in;
}
@media screen and (min-width: 740px) {
	.wrapper-thumbnail {
		margin: 8px 0;
	}
	.thumbnail {
		padding: 50% 0;
	}
	.thumbnail .thumbnail-text {
		padding: 15px  0 0 15px;
	}
	.thumbnail h4 {
		font-size: 1.2em;
	}
	.thumbnail h5 {
		font-size: 0.8em;
	}
	.thumbnail img {
		bottom: 0;
	}
}
@media screen and (min-width: 980px) {
	
	.wrapper-thumbnail {
		background-color: #fff;	
		border: solid 2px #fff;
		margin: 10px 0;
	}
	.wrapper-thumbnail:hover,
	.wrapper-thumbnail:active,
	.wrapper-thumbnail:focus
	{
		border: solid 2px #73d7b9;
	}
	.thumbnail .thumbnail-text {
		top: 10px;
		left: 10px;
	}
	.thumbnail h4 {
		color: #000;
		text-shadow: none;
		font-size: 1.5em;
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
		transform: translateY(5px);
		-webkit-transform: translateY(5px);
		-moz-transform :translateY(5px);
		-o-transform: translateY(5px);
	}
	.thumbnail:hover h4,
	.thumbnail:active h4,
	.thumbnail:focus h4
	{
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-o-transform: translateY(0px);
	}
	.thumbnail h5 {
		color: #666;
		font-size: 0.6em;
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
		transform: translateY(25px);
		-webkit-transform: translateY(25px);
		-moz-transform: translateY(25px);
		-o-transform: translateY(25px);
	}
	.thumbnail:hover h5,
	.thumbnail:active h5,
	.thumbnail:focus h5
	{
		opacity: 1;
		text-shadow: none;
		filter: alpha(opacity=100); /* For IE8 and earlier */
		transform: translateY(0px);
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-o-transform: translateY(0px);
	}
	.thumbnail  [class^="icon-"] {
		width: 100%;
		text-align: center;
		font-size: 1.5em;
		line-height: 0;
		color: #000;
		display: none; /* icons currently hidden */
		position: absolute;
		top: 45%;
	}
	.thumbnail img {
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	.thumbnail:hover img {
		opacity: 0.0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
}
@media screen and (min-width: 1220px) {
	.wrapper-thumbnail {
		margin: 12px 0;
	}
}


/* work page ----------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 500px) {
	body.projects #section-slideshow{
		margin: 12px 0;
	}
}


/* Comparison wrapper -------------------------------------------------------------*/

.wrapper-comparison {
	margin-top: 50px;
	margin-bottom: 50px;	
}

.wrapper-comparison .wrapper-imageswap {
	margin: 50px 0;
}

@media screen and (min-width: 500px) {
	.wrapper-comparison .wrapper-imageswap {
		margin: 0 0 160px 0;	
	}
}
@media screen and (min-width: 720px) {
	.wrapper-comparison .wrapper-imageswap {
		margin: 0 0 84px 0;	
	}
}
@media screen and (min-width: 980px) {
	.wrapper-comparison .wrapper-imageswap {
		margin: 0 0 110px 0;	
	}
}
@media screen and (min-width: 1220px) {
	.wrapper-comparison .wrapper-imageswap {
		margin: 0 0 140px 0;	
	}
}


/* Contact ------------------------------------------------------------------------------*/ 

@media screen and (max-width: 500px) {
	body.contact .section-splash {
		height: 750px;
		height: 125vh;
	}
}

/* Blog ----------------------------------------------------------------------------------------------------*/

body.blog .section-black {
	padding-bottom: 00px;	
}


/* Header and logo */

.wrapper-blog-header img {
	width: 100%;
}
@media screen and (max-width: 739px) { /* only on mobile */
	.wrapper-blog-header h2, 
	.wrapper-blog-header h3,
	.wrapper-blog-header p
	{
		text-align: center;
	}
	.wrapper-blog-header h2, 
	.wrapper-blog-header p
	{
		margin-bottom: 25px;
	}
	
	/* Mailchimp Form*/
	#section-blog #mc_embed_signup label {
		text-align: center;
	}
	
	#section-blog #mc_embed_signup input {
		text-align: center;
	}
	
	#section-blog input#mc-embedded-subscribe {
		text-align: center !important;
		margin: 0px auto !important;
	}
	#section-blog #mc_embed_signup {
		text-align: center !important;
	}
	
	#section-blog .clear {
		text-align: center !important;
	}
	
}


/* Archive */
.wrapper-blog-archive {
	position: relative;	
	margin-bottom: 200px;
}
.wrapper-blog-archive-year {
	margin: 25px 0 25px 0;
	padding: 0 0 25px 0;
	border-bottom: dashed 2px #e2e4e7;
}
.wrapper-blog-archive-tags {
	margin: 25px 0 25px 0;
	padding: 0 0 25px 0;
	border-bottom: dashed 2px #e2e4e7;
}
.wrapper-blog-archive h3 {
	margin: 0 0 20px 0;
	padding-top: 5px;
	border-bottom: solid 5px #e2e4e7;
}
.wrapper-blog-archive h4 {
  	font-family:  'helveticaneue', Helvetica, Arial, sans-serif;
	font-weight: bold;
	margin: 0 0 5px 0;
}
.wrapper-blog-archive a {
  	font-family:  'helveticaneue', Helvetica, Arial, sans-serif;
}
.wrapper-blog-archive a.inactivelink {
	margin: 0 0 0 0;
	color: #f0f0f0;
}

@media screen and (min-width: 740px) {
	
	.wrapper-blog-archive {
		padding-top: 0px;	
	}
	.wrapper-blog-archive a {
		margin: 0px 3px 0 0 !important;
		padding: 0 0 0 10px;
		border-left: solid 2px #f0f0f0;
		display: block;
		margin: 0 0 5px 10px;
	}
	.wrapper-blog-archive a:hover,
	.wrapper-blog-archive a:active,
	.wrapper-blog-archive a:focus
	{
		border-left: solid 10px #73d7b9;
	}
	
	.wrapper-blog-archive a.inactivelink {
		margin: 0px 3px 0 0 !important;
	}
	.wrapper-blog-archive a.inactivelink:hover,
	.wrapper-blog-archive a.inactivelink:active,
	.wrapper-blog-archive a.inactivelink:focus {
		border-left: solid 10px #f0f0f0;
		color: #f0f0f0;
	}
	.wrapper-blog-archive-tags a {
		margin: 5px 0 !important;
		padding: 2px 5px;
		
		border: solid 2px #f0f0f0;
	}
	.wrapper-blog-archive-tags a:hover,
	.wrapper-blog-archive-tags a:active,
	.wrapper-blog-archive-tags a:focus
	{
		border: solid 2px #73d7b9;
	}
	.wrapper-blog-archive h3, .wrapper-blog-archive h4, .wrapper-blog-archive h5, .wrapper-blog-archive h6, .wrapper-blog-archive p   {
		text-align: left;
	}
}



/* Control of Tags */

.tag-all,
.tag-budgetbuild,
.tag-community,
.tag-favouritespaces,
.tag-news,
.tag-projects,
.tag-sketchseries
 { /* first hide all blog posts */
	 display: none;
 }
.tag-all .hideon-all,
.tag-budgetbuild .hideon-all,
.tag-community .hideon-all,
.tag-favouritespaces .hideon-all,
.tag-news .hideon-all,
.tag-projects .hideon-all,
.tag-sketchseries .hideon-all
 { /* first hide all blog posts */
	 display: none !important;
 }



 body.filter-budgetbuild .tag-budgetbuild,
 body.filter-community .tag-community,
 body.filter-favouritespaces .tag-favouritespaces,
 body.filter-news .tag-news,
 body.filter-projects .tag-projects,
 body.filter-sketchseries .tag-sketchseries
 { /* only display posts on relevant blog pages */
	 display: block;
 }
 body.filter-all .tag-all,
 body.filter-all .tag-budgetbuild,
 body.filter-all .tag-community,
 body.filter-all .tag-favouritespaces,
 body.filter-all .tag-news,
 body.filter-all .tag-projects,
 body.filter-all .tag-sketchseries
 { /* show all on main page */
	 display: block;
 }


/* Articles */
.wrapper-blog-article {
	margin-bottom: 100px;
	padding-bottom: 100px;
}
.wrapper-blog-article img {
	width: 100%;	
}

@media screen and (min-width: 500px) { 
	.wrapper-blog-article .wrapper-iframe {
		padding-bottom: 60%; /* ratio percentage */
	}
}
@media screen and (min-width: 740px) { 
	.wrapper-blog-article .wrapper-iframe {
		padding-bottom: 65%; /* ratio percentage */
	}
}
@media screen and (min-width: 980px) { 
}
@media screen and (min-width: 1220px) { 
	.wrapper-blog-article .wrapper-iframe {
		padding-bottom: 55%; /* ratio percentage */
	}
}

.wrapper-blog-article img.news-border-full {
	border: solid 2px #000000;	
}
.wrapper-blog-article img.news-border-bottom {
	border-bottom: solid 5px #000000;	
}


.wrapper-blog-article h3 {
	font-size: 2em;
	margin: 10px 0 0 0;
}
#section-blog h3:after {
	display: none; 
}

.wrapper-blog-article h5 {
	font-size: 1em;
	margin: 5px 0px 15px 0px;
	padding: 0px 0 15px 0;
	border-bottom: solid 1px #f0f0f0;
}
.wrapper-blog-article p {
	margin-bottom: 10px ;
}
.wrapper-blog-article [class^="icon-"] {
	color: #e0e0e0;
	font-size: 2em ;
	position: relative;
	top: 3px;
}
.blog-column .wrapper-blog-article .button {
	margin-bottom: 10px;
}
.blog-column .wrapper-blog-article .news-ribbon {
	width: 100%;
	margin: 0px auto;
	border-top: solid 2px #e0e0e0;
	transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	-moz-transition-duration: all 0.15s ease-in;
	-o-transition-duration: all  0.15s ease-in;
}
.wrapper-blog-article:hover [class^="icon-"],
.wrapper-blog-article:active [class^="icon-"],
.wrapper-blog-article:focus [class^="icon-"]
{
	color: #73d7b9;
}



@media screen and (min-width: 740px) {
	.blog-column a.sitelink   {
		display: block;
	}
	.blog-column .wrapper-blog-article {
		padding-bottom: 50px;
		text-align: left;
	}
	.wrapper-blog-article h3 {
		text-align: left;
	}
	.wrapper-blog-article h6 {
		margin: 20px 0 0px 0;
		text-align: left;
	}
	.wrapper-blog-article p {
		text-align: left;
	}
	.blog-column .wrapper-blog-article .news-ribbon {
		width: 100%;
		background-position: left -10px;
	}
	.blog-column .wrapper-blog-article:hover .news-ribbon {
		background-position: left 0px;
	}
}

@media screen and (min-width: 980px) {
	.wrapper-blog-article img {
	}
	.wrapper-blog-article:hover img,
	.wrapper-blog-article:active img,
	.wrapper-blog-article:focus img
	{
	}
	
}

/* Facebook Share Buttons */
.fb-share-button {
	margin: 15px 0 0 15px;
	clear: both;
}

.pluginCountButton {
    color: #f00 !important;
    font-size: 11px !important;
    line-height: 1em !important;
    text-align: center !important;
    white-space: nowrap !important;
	border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	-o-border-radius: 0px !important;
}

.addthis_inline_share_toolbox {
	margin-top: 25px;
}

/* Social Feeds */

.wrapper-news-social {
}
#facebook-wrapper {
	width:100%;
	background: #ffffff;
	margin: 50px auto;
	padding: 50px 0px 50px 0px;
	text-align: left;
}
#likebox-wrapper {
	width: 100%;
	height: 700px;
	margin: 0px auto;
	text-align: left;
}
.fb-like-box {
	border: none;
	text-align: center;
}


 



/* Blog Thumbs */

.blog-wrapper {
	padding: 50px 0;
	border-bottom: solid 1px #999999;	
}
.blog-column h3 {
	margin: 0 0 20px 0;
	padding-top: 5px;
	border-bottom: solid 5px #e2e4e7;
}
.blog-wrapper h4 {
	display: inline-block;
	width: auto;
	border-bottom: solid 3px #ffffff;
	margin-bottom: 10px;
}
.blog-wrapper:hover h4,
.blog-wrapper:active h4,
.blog-wrapper:focus h4
{
	border-bottom: solid 5px #73d7b9;
}
.blog-wrapper h6 {
	margin-top: 10px;
	width: 100%;
	font-size: 2em;
	color: #73d7b9 ;
  	font-family: 'helveticaneue', Helvetica, Arial, sans-serif;
	text-align: left;
}

.blog-wrapper p
{

}

@media screen and (min-width: 980px) {
	.blog-wrapper h6 {
		color: #f0f0f0 ;
	}
	.blog-wrapper:hover h6,
	.blog-wrapper:active h6,
	.blog-wrapper:focus h6
	{
		color: #73d7b9 ;
	}
}

/* reference ----------------------------------------------------------------------------------------------------*/
.wrapper-reference {
	margin: 100px 0;
	padding: 25px 0;
	border-top: solid 5px #f0f0f0;
	border-bottom: solid 5px #f0f0f0;
	transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	-moz-transition-duration: all 0.15s ease-in;
	-o-transition-duration: all  0.15s ease-in;
}
.wrapper-reference  [class^="icon-"] {
	color: #73d7b9;
	font-size: 3em;	
	margin: 0;
	padding: 0;
	float: left;
	text-align: left;
}
.wrapper-reference  p {
  	font-family: 'minion', Georgia, "Times New Roman", Times, serif;
	color: #303030;
	margin-bottom: 5px;
}
.wrapper-reference  h6 {
  	font-family:  'helveticaneue', Helvetica, Arial, sans-serif;
	font-style: normal;
	text-transform: none;
}
@media screen and (min-width: 980px) {
	.wrapper-reference {
		margin: 150px 0;
		border-top: solid 2px #f0f0f0;
		border-bottom: solid 2px #f0f0f0;
	}
	.wrapper-reference  [class^="icon-"], .wrapper-reference [class*=" icon-"] {
		color: #999999;
	}
	.wrapper-reference:hover [class^="icon-"], .wrapper-reference:hover [class*=" icon-"]  {
		color: #73d7b9;
	}
}

/* calltoaction-----------------------------------------------------------------*/

.section-calltoaction { 
	width: 100%;
	height: 600px;
	height: 100vh;
	padding: 0;
	background-color: #303030;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
}
.section-calltoaction.dark { 
	background-color: #fff;
}
.wrapper-calltoaction-overlay { 
	width: 100%;
	height: 100%;
	height: 100vh;
	padding: 150px 0;
	-background-image: url(https://mail.richardrobbarchitects.com/images/site-background-pattern-diamonds-black.svg);
	background-repeat: repeat;
	background-color: rgba(48,48,48,0.2);
}
.section-calltoaction.dark .wrapper-calltoaction-overlay { 
	-background-image: url(https://mail.richardrobbarchitects.com/images/site-background-pattern-diamonds-white.svg);
	background-repeat: repeat;
	background-color: rgba(255,255,255,0.2);
}

.section-calltoaction h1, .section-calltoaction h2, .section-calltoaction h3, .section-calltoaction h5, .section-calltoaction h6, .section-calltoaction p, .section-calltoaction [class^="icon-"] {
	width: 100%;
	color: #fff; 
	text-shadow: 1px 1px 85px #000000;
	text-align: left;
}
.section-calltoaction.dark h1, .section-calltoaction.dark h2, .section-calltoaction.dark h3, .section-calltoaction.dark h5, .section-calltoaction.dark h6, .section-calltoaction.dark p, .section-calltoaction.dark [class^="icon-"]  {
	color: #000000; 
	text-shadow: 1px 1px 105px #fff;
}
.section-calltoaction p {
  	font-family:   'minion', Georgia, "Times New Roman", Times, serif;
	font-size: 3em;
	line-height: 1.2em;
}
.section-calltoaction .button  {
	color: #ffffff;
	border: solid 2px #73d7b9;
	background: none;
}
@media screen and (min-width: 740px) {
	.section-calltoaction .button  {
		border: solid 2px #ffffff;
	}
}

.section-calltoaction .button:hover,
.section-calltoaction .button:active,
.section-calltoaction .button:focus
{
	border: solid 2px #73d7b9;
}
.section-calltoaction .button  [class^="icon-"] {
	color: #ffffff;
	position: relative;
	left: 0px;
}
.section-calltoaction .button:hover  [class^="icon-"],
.section-calltoaction .button:active  [class^="icon-"],
.section-calltoaction .button:focus  [class^="icon-"]
{
	color: #73d7b9;
	left: 5px;
}

.section-calltoaction.dark .button  {
	color: #000000;
	border: solid 2px #73d7b9;
	background: none;
}
@media screen and (min-width: 740px) {
	.section-calltoaction.dark .button  {
		border: solid 2px #000000;
	}
}
.section-calltoaction.dark .button:hover,
.section-calltoaction.dark .button:active,
.section-calltoaction.dark .button:focus
{
	border: solid 2px #73d7b9;
}
.section-calltoaction.dark .button  [class^="icon-"] {
	color: #000000;
}
.section-calltoaction.dark .button:hover  [class^="icon-"],
.section-calltoaction.dark .button:active  [class^="icon-"],
.section-calltoaction.dark .button:focus  [class^="icon-"]
{
	color: #73d7b9;
}
@media screen and (min-width:740px) {
	.section-calltoaction p {
		font-size: 4em;
		line-height: 1.2em;
	}
}
@media screen and (min-width:980px) {
	.section-calltoaction { 
		background-attachment: fixed;
	}
	.section-calltoaction p {
		font-size: 5em;
	}
}

/* Footer ----------------------------------------------------------------------------------------------------*/ 
#section-footer {
	padding: 100px 0 ;
	margin: 0;
	background: #333;
}
#section-footer p {
	color: #999;
	font-size: 1em;	
	line-height: 1.2;
	padding: 5px 0;
	margin: 0 0 25px 0;
}
#section-footer h3 {
	font-size: 1.5em;	
	color: #fff;
	margin: 80px 0 0 0;
}
#section-footer h3:after {
	content: "-";
	display: block; 
	width: 100%;
	height: 3px;
	background: #999;
	margin: 5px 0 15px 0;
	text-indent: -9999em;
	overflow: hidden;
}
#section-footer a {
	color: #999;
	font-size: 1em;	
	padding: 5px 0;
	margin: 0;
}


@media screen and (min-width:740px) {
	#section-footer ul img {
		width: 40%;
	}
	#section-footer h3 {
	}
}
@media screen and (min-width:980px) {
	#section-footer ul img {
		width: 85%;
	}
	#section-footer h3 {
		margin: 42px 0 0 0;
	}
}
@media screen and (min-width:1220px) {
	#section-footer ul img {
		width: 80%;
	}
}


 /* contact column */
.footer-contact a {
	color: #999;
}
.footer-contact a:hover,
.footer-contact a:active,
.footer-contact a:focus
{
	color: #73d7b9 !important;
}

.footer-contact ul,
.footer-connect ul
{
	padding: 0;
	margin-top: 12px;
}

.footer-contact ul li {
	display: block;
	color: #999;
	line-height: 1.2em;
	width: 100%;
	padding: 5px 0;
	position: relative;
}
.footer-contact ul li a {
  	font-family: 'helveticaneue', Helvetica, Arial, sans-serif;
	display: inline-block;
	width: auto;
	font-size: 1em;
	line-height: 1.2em;
	color: #999;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.footer-contact ul li a:hover,
.footer-contact ul li a:active,
.footer-contact ul li a:focus
{
	color: #73d7b9;
}

/*  icons */
.footer-contact [class^="icon-"]  {
	color: #999;
	font-size: 1.2em;
	margin: 10px 10px 0 0;
}
.footer-contact ul li:hover [class^="icon-"],
.footer-contact ul li:active [class^="icon-"],
.footer-contact ul li:focus [class^="icon-"]
{
	 color: #73d7b9;
 }
 
 
/*  connect column  */

#section-footer .footer-connect li.nav-social { 
	margin-top: 15px;
	width: auto;
	float: left;
	display: inline;
}
#section-footer .footer-connect li.nav-social a { 
	font-size: 1.2em;
	padding: 0.35em 0.25em;
	margin: 0 21px 0 0;
	color: #999;
	border: solid 2px #999;
}
#section-footer .footer-connect li.nav-social:last-child a { 
	margin: 0 0px 0 0;
}
#section-footer .footer-connect li.nav-social a:hover { /* makes social icons a quarter of container (for 4 icons) */
	color: #fff;
	border: solid 2px #73d7b9;
}

.footer-connect img {
	max-width: 75px;	
}

/*  Subscribe column  */
 
 
 /* Mailchimp Form*/
.footer-subscribe img {
	width: 20%;
	margin-right: 15px;
	float: left;
}

@media screen and (min-width: 740px) {
	.footer-subscribe img {
		width: 15%;
		float: left;
	}
	.footer-subscribe p {
		margin-top: 75px !important;
	}
}
@media screen and (min-width: 980px) {
	.footer-subscribe img {
		width: 30%;
		margin-bottom: 15px;
	}
	.footer-subscribe p {
		margin-top: -10px !important;
	}
}

#mc-embedded-subscribe-form {
	padding: 0 !important;	
}

 
#mc_embed_signup {
	background: transparent !important;
	clear: left !important;
  	font-family: 'helveticaneue', Helvetica, Arial, sans-serif !important;
	font-size: 1em !important;
}

#mc_embed_signup label {
  	font-family: 'minion', Georgia, "Times New Roman", Times, serif !important;
	font-size: 1em;
	font-weight: bold;
	color: #666666;
}

#mc_embed_signup input {
  	font-family: 'helveticaneue', Helvetica, Arial, sans-serif !important;
	font-size: 1em !important;
	font-weight: regular !important;
	color: #fff !important;
	background: transparent !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: solid 1px #666666 !important;
	border-left: none !important;
	margin: 0px 0px 15px 0px !important;
	padding: 0px 0px 0px 0px !important;
	border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	-o-border-radius: 0px !important;
	transition: all 0.15s ease-in!important;
	-webkit-transition: all 0.15s ease-in!important;
	-moz-transition-duration: all 0.15s ease-in!important;
	-o-transition-duration: all  0.15s ease-in!important;
}
#mc_embed_signup input:hover,
#mc_embed_signup input:active,
#mc_embed_signup input:focus
{
	border-bottom: solid 1px #73d7b9 !important;
}

input#mc-embedded-subscribe {
	cursor: pointer !important;
	margin: 25px 0 !important;
	padding: 20px !important;
	line-height: 0em !important;
	font-size: 1em !important;
	font-weight: bold !important;
	border: 2px solid #73d7b9 !important;
	background: #303030 !important;
}
input#mc-embedded-subscribe:hover,
input#mc-embedded-subscribe:active,
input#mc-embedded-subscribe:focus
{
	color: #000 !important;
	border: 2px solid #73d7b9 !important;
	background: #73d7b9 !important;
}

 
@media screen and (min-width: 740px) { /* For large tablets above 1220 */
	#mc_embed_signup label {
		width: 25% !important;
		float: left !important;
		line-height: 2em !important; 
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
	
	#mc_embed_signup input {
		width: 70% !important;
		float: left !important;
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
	input#mc-embedded-subscribe {
		width: auto !important;
		margin: 25px 0 !important;
		padding: 20px !important;
		line-height: 0em !important;
		font-size: 1em !important;
		font-weight: bold !important;
		border: 2px solid #73d7b9 !important;
		background: #303030 !important;
	}

}
@media screen and (min-width: 980px) { /* For large tablets above 1220 */
	#mc_embed_signup label {
		font-size: 0.8em !important;
		width: 25% !important;
		float: left !important;
		line-height: 1em !important; 
		margin-top: 7px !important;
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}
}





/* Footer-sub ----------------------------------------------------------------------------------------------------*/ 

#section-footer-sub {
	padding: 25px 0 ;
	margin: 0;
	background: #000;
}
#section-footer-sub a {
	color: #999;
	font-size: 1em;	
	padding: 5px 0;
	margin: 0;
}
#section-footer-sub ul {
	margin: 10px 0;
}

#section-footer-sub ul li {
	display: inline;
}
#section-footer-sub ul img {
	width: 50px;
}

@media screen and (min-width:740px) {
	
}
@media screen and (min-width:980px) {
}
@media screen and (min-width:1220px) {
}





/* Image Classes  ----------------------------------------------------------------------------------------------------*/

img {
	transition: all 0.15s ease-in;
	-webkit-transition: all 0.15s ease-in;
	-moz-transition-duration: all 0.15s ease-in;
	-o-transition-duration: all  0.15s ease-in;
}

.image-display {
	width: 100%;
	margin-top: 50px;
	margin-bottom: 50px;
	border: solid 2px #000000;	
}
.image-diagram {
	border: solid 2px #000000;	
}


.image-floater {
	width: 450px;
	position: absolute;
	top: 200px;
	z-index: 0;
	-webkit-transform:translateZ(0px);
	-moz-transform:translateZ(0px);
	-o-transform:translateZ(0px);
	transform:translateZ(0px);
	border: none;
}
@media screen and (min-width: 740px) { 
	.image-floater {
		width: 450px;
		position: absolute;
		top: 200px;
		z-index: 0;
		-webkit-transform:translateZ(0px);
		-moz-transform:translateZ(0px);
		-o-transform:translateZ(0px);
		transform:translateZ(0px);
	}
	.image-floater.left {
		left: -100px;
	}
	.image-floater.right {
		right: -100px;
	}
}
@media screen and (min-width: 980px) { 
	.image-floater.left {
		left: -50px;
	}
	.image-floater.right {
		right: -50px;
	}
}


/* Imageswap styles  ------------------------------------------------------------------------------*/

.wrapper-imageswap {
	text-align: center;
	width: auto; 
	height: 0;
	margin-bottom: 50px;
	padding: 35% 0;
	position: relative;
	overflow: visible;
}
.wrapper-imageswap img {
	margin: 0 auto;
	max-width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	border: solid 1px #000000;
	transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition-duration: all 0.2s ease-in;
    -o-transition-duration: all  0.2s ease-in;
}



.wrapper-imageswap .static {
	display: block;
	z-index: 2;
	-webkit-transform: translateZ(2px);
	-moz-transform: translateZ(2px);
	-o-transform: translateZ(2px);
	transform: translateZ(2px);
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition-duration: all 0.3s;
	-o-transition-duration: all  0.3s;
}
.wrapper-imageswap .animated {
	z-index: 1;
	-webkit-transform:translateZ(1px);
	-moz-transform:translateZ(1px);
	-o-transform:translateZ(1px);
	transform:translateZ(1px);
	opacity: 0;
	filter: alpha(opacity=0); /* For IE8 and earlier */
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition-duration: all 0.3s;
	-o-transition-duration: all  0.3s;
}

	.wrapper-imageswap .static {
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	.wrapper-imageswap .animated {
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-imageswap:hover .static,
	.wrapper-imageswap:active .static,
	.wrapper-imageswap:focus .static
	{
		opacity: 0;
		filter: alpha(opacity=0); /* For IE8 and earlier */
	}
	.wrapper-imageswap:hover .animated,
	.wrapper-imageswap:active .animated,
	.wrapper-imageswap:focus .animated
	{
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}


/* Responsive iframe  */
.wrapper-iframe {
	position: relative;
	padding-bottom: 100%; /* ratio percentage */
	margin: 50px auto;
	height: 0;
}
.wrapper-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	-webkit-transform:translateZ(1000px);
	-moz-transform:translateZ(1000px);
	-o-transform:translateZ(1000px);
	transform:translateZ(1000px);
}
@media screen and (min-width: 500px) { 
	.wrapper-iframe {
		padding-bottom: 40%; /* ratio percentage */
	}
}
@media screen and (min-width: 740px) { 
	.wrapper-iframe {
		padding-bottom: 45%; /* ratio percentage */
	}
}
@media screen and (min-width: 980px) { 
}
@media screen and (min-width: 1220px) { 
	.wrapper-iframe {
		padding-bottom: 35%; /* ratio percentage */
	}
}

/* Responsive videos  */
.wrapper-video {
	width: 100%;
	position: relative;	
}
video {
  width: 100%    !important;
  height: auto   !important;
}