@charset "UTF-8";
/* ----------------------------------------------------------------------------------------------------

NAME: BARR_GLOBAL_STYLES.CSS
-
DATE: 21.12.12
MOD1: 07.02.14
MOD2: 00.00.00
AUTH: DANNY BROOKS
CONT: PHAGEDESIGN.CO.UK | INFO@PHAGEDESIGN.CO.UK | @PhageDesign

-------------------------------------------------------------------------------------------------------
COLOUR REFFERENCES
-
BR BG:      HEX: F6F7F6 / RGB: 255.204.0
BG BLUE:    HEX: 0C47BE / RGB: 255.204.0
BG YELLOW:  HEX: FFCC00 / RGB: 255.204.0
BG GREY LT: HEX: C7C2BA / RGB: 255.204.0
BG GREY DK: HEX: C7C2BA / RGB: 255.204.0

-------------------------------------------------------------------------------------------------------
STRUCTURE
-
01. DEFAULT BASE
02. TYPOGRAPHY
		-FAMILIES
		-RENDERING
		-HEADINGS
03. LAYOUT + GRID

------------------------------------------------------------------------------------------------------- */

@import 'basereset.css';
@import 'animate-transition.css';

/* JS HIDE ON START & TYPEKIT LOADING EVENTS - PREVENTING FOUT
------------------------------------------------------------------------------------------------------- */
.js .hons,
.js .hide,
.js #slides {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	visibility: hidden;
	}

/* BASE
------------------------------------------------------------------------------------------------------- */

/* Apply a natural box layout model to all elements — see http://paulirish.com/2012/box-sizing-border-box-ftw */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html {
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

body {
	background: #f7f7f7;
	position: relative;
	color: #333333;
	height: 100%;
	}

div,
article,
section,
header,
footer,
nav,
figure,
li {
	position:relative;
	}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
	}

/* Beautifully simple clearfix */
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }


/* Default links */
a { cursor: pointer; }
a:link { text-decoration: none; color: inherit; }
a:hover { color: inherit; }
a:focus { outline: none; }
a:visited { color: inherit; }
a:hover, a:active { outline: 0; }


/* Highlight selection */
::-moz-selection { background: #FFCC00; color: #FFFFFF; text-shadow: none; }
::selection { background: #FFCC00; color: #FFFFFF; text-shadow: none; }


/* ----------------------------------------------------------------------------------------------------
TYPOGRAPHY
-------------------------------------------------------------------------------------------------------
AKTIV GROTESK STANDARD — BY DALTON MAGG SERVED UP BY TYPEKIT
200 - HAIRLINE
300 - LIGHT
400 - REGULAR
500 - MEDIUM
700 - BOLD
---------------------------------------------------------------------------------------------------- */

/* TYPEKIT LOADING EVENTS */
.wf-loading .standfirst, .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading p, .wf-loading blockquote  { color: #f7f7f7; }
/* .wf-inactive {} */

body, h1, h2, h3, h4, h5, h6, p {
	font: normal 1em/20px "aktiv-grotesk-std", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
	font-weight: 400;
	-webkit-transition: color 250ms ease-in-out 0s;
	   -moz-transition: color 250ms ease-in-out 0s;
        -ms-transition: color 250ms ease-in-out 0s;
         -o-transition: color 250ms ease-in-out 0s;
            transition: color 250ms ease-in-out 0s;
            }


h1, h2 {
	font-size: 1.375em;
	line-height: 20px;
	font-weight: 300;
	color: #404040;
	padding-top: 20px;
	}

.chrome h1, .chrome h2,
.safari h1, .safari h2,
.ff2 h1, .ff2 h2 { font-weight: 200; }

h2 { margin-bottom: 60px; border-top: 1px solid rgb(232,232,232); }

h3 { font-size: 0.8125em; font-weight: 500; color: #404040; line-height: 20px } /* regular 13/20px */

h4 { font-size: 0.75em; line-height: 1.333333333333333em; margin: 0 0 8px 0; }

h5 { font-size: 0.75em; line-height: 1.333333333333333em; margin: 0 0 8px 0; padding: 0 0 0 8px; }

p { margin-bottom: 20px; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }

dd { margin: 0 0 0 40px; }

ul, ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* --------------------------------------------------
TYPOGRAPHIC STANDFIRSTS
-------------------------------------------------- */
.standfirst p {
	font-size: 22px; /* 22px 1.375em */
	margin-bottom: 30px;
	color: color: #FFFFFF;
	line-height: 30px; /* 30/22 = 1.3636363 */
	font-weight: 300;
	letter-spacing: -0.025em;
	}

.chrome .standfirst p,
.safari .standfirst p,
.ff2 .standfirst p { font-weight: 300; }


#landing .standfirst p { padding-top: 90px; }

.standfirst p:first-child { margin-bottom: 1.363636em; }

.standfirst p:last-child { margin-bottom: 2.727272em; }

.white { color: #FFFFFF; }

#intro { width: 50%; color: #FFFFFF; font-weight: 300; font-size: 25px; line-height: 30px; color: #FFFFFF; margin-top: 120px; letter-spacing: -0.020em; /* -moz-transition: margin 500ms ease;  */}

	.dash { background: transparent url(../img/global/BG_standfirst_dash.gif) no-repeat scroll 0 0; }


/* GLOBAL TYPOGRAPHIC PRESENTATION CLASSES
-------------------------------------------------- */
.kern { padding: 0 0.1em 0 0.1em; }
.kern2 { padding: 0 0.15em 0 0.3em ; }

strong { font-weight: 500; }

.right { float: right; }
.left { float: left; }

.rtnFull { margin: 0 0 0 0 }
.rtnFull:after { content: "-"; display: block; }
.rtnHalf { margin: 0 0 10px 0 }


/* ----------------------------------------------------------------------------------------------------


HOMEPAGE LOADER + NEWS FEED PANEL
---------------------------------------------------------------------------------------------------- */

/* Loading overlay
-------------------------------------------------- */
.loader_overlay {
	width: 100%;
	height: 100%;
	background: #FFCC00;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9000;
	}

.loader_branding {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 240px;
	height: 25px;
	margin: -12px 0 0 -120px;
	background: url(../img/global/svg/Barr_Gazetas_Logotype_Wh.svg) no-repeat scroll 0 100%;
	text-indent: -9999em;
	}

.fade-out {
	opacity: 0;
	}

#imagemesh {
	height: 100%;
	width: 100%;
	z-index: 301;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/fullscreen/mesh-overlay.png) repeat scroll 0 0;
	}


/* Homepage newsfeed (Shortened)
-------------------------------------------------- */
#news_panel {
	background: rgba(0,0,0,0.7);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 60px 0;
	z-index: 500;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	}

.news_feed {
	max-width: 1200px;
	margin: 0 auto;
	border-left: 1px solid rgba(255,255,255,0.3);
	}

.news_feed h2 {
	padding: 0;
	color: #FFFFFF;
	border: none;
	margin: 0;
	font-weight: 300;
	}

#news_feed_nav {
	padding: 0 20px;
	}

#news_feed_nav ul {
	margin: 0;
	padding: 40px 0 0 0;
	color: #FFFFFF;
	font-size: 13px;
	line-height: 20px;
	}

.news_item {
	border-left: 1px solid rgba(255,255,255,0.3);
	width: 40%;
	float: left;
	padding: 0 30px 0 20px;
	}

		.news_item > header {
			margin-bottom: 20px;
			padding: 0;
			background: none;
			}

		.news_item .meta-catagory,
		.news_item p {
			font-size: 13px;
			color: #FFFFFF;
			margin: 0;
			}

		.news_item p:last-child {
			font-size: 13px;
			color: #FFFFFF;
			margin: 20px 0 0 0;
			}

		.news_item a {
			color: inherit;
			}

		.news_item a:hover {
			color: #FFCC00;
			}


/* ----------------------------------------------------------------------------------------------------


BARR: RECENT NEWS
---------------------------------------------------------------------------------------------------- */

/* News months and corrosponding items are all contained within a main news wrapper */
#news-wrapper { width: 100%; border-top: 1px solid rgb(218,218,218); }

	.news-period { /* margin-bottom: 20px; */ padding: 20px 0 0 0; }

	.news-period .news-datestamp { position: absolute; top: -1px; left: 0; font-size: 22px; width: 20%; border-top: 5px solid rgb(218,218,218); font-size: 1.375em; font-weight: 300; padding-top: 15px; }

	.news-period header { margin-bottom: 20px; line-height: 20px; padding: 0 0 20px 0; border-bottom: 1px solid rgb(218,218,218); }

	.news-period header h2 { border: none; margin: 0; padding: 0; line-height: 30px; }

	.news-period header .meta-cat { font-size: 13px; color: #404040; }

	.news-period p { font-size: 13px; line-height: 20px; }

	.news-period > article.news-item:last-child { margin: 0 0 0 20%; }

/* New article - Image + text
------------------------------------------------------------------------------------------ */
article.news-item { width: 80%; margin: 0 0 20px 20%; border-bottom: 1px solid rgb(218,218,218); padding: 0 0 20px 0; }

	article.news-item .news-item-text { padding-right: 40px; }

	article.news-item figure img { display: block; width: 100%; height: auto; margin-top: 20px;  }

	article.news-item figure img:first-child { margin-top: 0; }

	article.news-item .zoom { width: 60px; height: 60px; display: block; position: absolute; bottom: 0; left: 0; line-height: 60px; background: #FFFFFF url(../img/global/icons/icon-zoom.png) no-repeat scroll 0 0; overflow: hidden; text-indent: 100%; white-space: nowrap; cursor: pointer;  }

	article.news-item .zoom:after { content: "Enlarge"; display: block; background: rgba(255,255,255,0.8); /* width: 400px; */ padding: 0 20px; height: 60px; position: absolute; top: 0; left: 60px ; visibility: hidden; }

	article.news-item .zoom:hover:after { visibility: visible; }

	article.news-item .zoom:hover { background-color: #FFCC00; background-position: 0 -60px; }


	.news-item dl { list-style-type: none; font-size: 13px; line-height: 20px; }

		.news-item dl dt,
		.news-item dl dd{ margin: 0; padding: 0; }

		.news-item dl dt { font-weight: 500; }

		.news-item dl dd { font-style: italic; }


/* Core structure & Grid
------------------------------------------------------------------------------------------ */
#wrapper {
	width: 100%;
	min-height: 100%;
	height: auto!important;
	height: 100%;
	position: relative;
	z-index: 300;
	}

	/* ADDITIONAL WRAPPER DIV NEEDED FOR STICKY FOOTER */
	#inner-wrapper {
		background: #f7f7f7;
		padding: 0 24px 180px 24px;
		}

	#container { /* Change this to main */
		max-width: 1200px;
		margin: 0 auto;
		z-index: 400;
		}

	/* GRID SET UP */
	[class*='column-'] { float: left; }

	.column-02 { width: 50%; } /* 02 COLUMN = 600 / 1200 = 50% */

	.column-03 { width: 33.333333%; } /* 03 COLUMN = 400 / 1200 = 33.3333% */

	.column-04 { width: 25%; }

	.column-05 { width: 20%; }

	.column-06 { width: 66.666666%; }

	.column-06 > .column-03 { width: 50%!important; } /* 6 col + direct children */



/* MAP TOP DROP PANEL
------------------------------------------------------------------------------------------ */
#contactPanel { width: 100%; position: fixed; top: 0; left: 0; z-index: -1; }

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

	.contact-details { background: rgba(255,204,0,0.9); width: 100%; height: 400px; padding-left: 20px; position: absolute; top: 0; left: 50%; margin-left: 360px; z-index: 2; overflow: hidden; }

	.contact-details h2 { border-top: none; }

	.contact-details ol { padding: 0; font-size: 13px; line-height: 20px; font-weight: 300; }

a#closeMap {
	display: block;
	position: absolute;
	bottom: -60px;
	left: 0;
	background: #FFFFFF url(../img/global/icons/icon-sprite.png) no-repeat 100% 0;
	height: 60px;
	line-height: 60px;
	padding-left: 20px;
	font-size: 0.75em;
	color: #333333;
	width: 100%;
	}


/* ------------------------------------------------------------------------------------------

HEADER + GLOBAL NAV + MOBILE DEVICE NAV

------------------------------------------------------------------------------------------ */
header[role="banner"] { background: rgba(247,247,247,1); z-index: 3000; /* Sort z-indexes! */ }

	#landing header[role="banner"] { background: rgba(247,247,247,0.90); }

	.header-wrap { margin: 0 auto; max-width: 1200px; height: 180px; }

	.header-wrap a#barr-brand {
		background: transparent url(../img/global/barr_gazetas_logotype_rgb_ms.svg) no-repeat scroll 0 0;
		display: block;
		position: absolute;
		top: 74px;
		left: 0;
		height: 32px;
		width: 240px;
		text-indent: -999em;
		-webkit-transition: left 0.25s linear;
		-moz-transition: left 0.25s linear;
		-o-transition: left 0.25s linear;
		}




/* GLOBAL NAVIGATION DESKTOP
------------------------------------------------------------------------------------------ */
nav {
	position: absolute;
	top: 88px;
	right: 0;
	width: 50%;
	text-align: right;
	}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	font-size: 0.8125em;
	line-height: 1em;
	font-weight: 300;
	}

	nav ul li { float: left; width: 20%; margin: 0; padding: 0; }

	nav ul li a { color: #333333; text-decoration: none; white-space: nowrap; }

	nav ul li a:hover,
	nav ul li a:visited { color: #333333; }

	nav ul li a.selected { color: #404040; font-weight: 500; }


/* MOBILE DEVICE
-------------------------------------------------- */
	nav a#mobile-navigation { height: 60px; width: 60px; background: #FFFFFF url(../img/global/barr_gazetas_device_menu_icon.svg) no-repeat scroll center center; position: absolute; top: -60px; right: 0; cursor: pointer; display: none; }

	nav ul.show-mobile-menu { display: block; }



	/* Follow btns in header */
	#follow {
		list-style-type: none;
		position: absolute;
		top: 0;
		right: 0;
		border-left: 1px solid rgb(218,218,218);
		}

		#follow li {
			width: 40px;
			height: 40px;
			float: left;
			border-right: 1px solid rgb(218,218,218);
			}

		#follow li:first-of-type {
			width: 41px;
			}

		#follow li a {
			display: block;
			width: 40px;
			height: 40px;
			text-indent: 100%;
			background: transparent url(../img/global/icons/follow-sprite.png) no-repeat scroll 0 0;
			white-space: nowrap;
			overflow: hidden;
			}

		#follow li a.linkedIn {
			background-position: 0 -40px;
			}


/* PAGE TITLE STRIP
-------------------------------------------------- */
#title-bar { height: 60px; position: relative; margin-bottom: 60px; border-top: 1px solid rgb(218,218,218); z-index: 9000; } /* 232 */


/* FILTER MENU
---------------------------------------------------------------------------------------------------- */
.project-filter { position: absolute; right: 0; top: -1px; width: 240px; }

	.project-filter a.drop-down { display: block; font-size: 13px; height: 60px; line-height: 56px; width: 240px; padding-left: 8px;
		background: url(../img/global/icons/icon-sprite.png) no-repeat scroll 100% -48px;
		cursor: pointer;
		-webkit-transition: all 500ms ease 0;
		transition: all 500ms ease 0;
		border-top: 4px solid rgb(218,218,218);
		}

	.project-filter a.drop-down:hover,
	.project-filter:hover a.drop-down { background: rgb(255,255,255) url(../img/global/icons/icon-sprite.png) no-repeat scroll 100% -96px; border-top: 4px solid rgb(255,200,0); } /* rgb(255,200,0) */

	.project-filter ul { position: absolute; background: #FFFFFF; display: none; font-size: 13px; color: #544b49; font-weight: 300; } /* rgb(218,218,218) */

	.project-filter ul li { width: 240px; }

	.project-filter ul li a { display: block; height: 60px; line-height: 60px; padding-left: 8px; text-decoration: none; }

	.project-filter ul li a:hover { background: #EFEFEF; }

	.project-filter ul li a.current_filter { font-weight: 500; }

	.project-filter ul.display-menu { display: block; }


/* ----------------------------------------------------------------------------------------------------

Barr Gazetas Profile
---------------------------------------------------------------------------------------------------- */
#profile .profile-text { padding: 59px 0 0 0; border-top: 1px solid rgb(232,232,232); margin-bottom: 70px; }

	.profile-text .column-02:first-child { padding-right: 60px; }

	.profile-text .column-02:last-child { padding-left: 60px; }

	.profile-text p { font-size: 13px; font-weight: 300; }

	.profile-text blockquote { font-size: 22px; line-height: 30px; font-weight: 200; padding: 10px 0 0 0; margin: 0 0 30px 0; color: #717171; letter-spacing: -0.015em; }


/* ----------------------------------------------------------------------------------------------------

Barr Gazetas Team
---------------------------------------------------------------------------------------------------- */
/* Team biography section */
.barr-team { margin: 0 0 160px 0; }

.team-portrait { width: 20%; float: left; border-top: 1px solid rgb(232,232,232); margin-top: 40px; -webkit-transition: opacity 600ms ease-in-out; transition: opacity 600ms ease-in-out; }

	.team-portrait:hover { border-top: 4px solid rgb(255,204,0); }

	.team-portrait:hover h3 { padding: 22px 0 0 0;}

	.team-portrait h3 {  width: 100%; padding: 25px 0 0 0; margin-bottom: 20px; }

	.team-portrait h3 .position-title { display: block; font-weight: 300; }

	.team-portrait img { width: 100%; height: auto; display: block; margin: 0; }

	.team-portrait img:hover { cursor: pointer; }


	.team-portrait.not-current { opacity: 0.25; }

	.team-portrait.not-current:hover { opacity: 1; border-top: 4px solid rgb(255,204,0); }
	.team-portrait.not-current:hover h3 { padding-top: 22px; }

	.team-portrait.not-current.current { opacity: 1; }

	.team-portrait.current { border-top: 4px solid rgb(255,204,0); opacity: 1; }

	.team-portrait.current h3 { padding-top: 22px; }

	/* Display arrow on current portrait */
	.team-portrait.current:after { position: absolute; left: 50%; margin-left: -10px; content: ""; bottom: 0; border-bottom: 10px solid rgb(255,255,255); border-left: 10px solid rgba(255,255,255,0); border-right: 10px solid rgba(255,255,255,0); }


	/* Team biography wrapper + inner. Attached dynamically through JS! */
	.biography-wrapper { width: 100%; background: rgb(255,255,255); float: left; display: none; padding: 0 20px; }

		.biography-inner { width: 40%; margin: 0 auto; opacity: 0; }

		.biography { margin: 0; padding: 80px 0; }

			.biography p { font-size: 13px; margin: 0 0 20px 0; font-weight: 300; }

			.biography p:last-of-type { margin: 0;}

		.biography-close { height: 48px; width: 48px; display: block; position: absolute; top: 0; right: 0; background: #FFCC00 url(../img/global/icons/icon-sprite.png) no-repeat 100% 0; text-indent: -999em; display: none; z-index: 20; }


	.team-name.display { display: block;  }

	.team-name .title { width: 20%; border-top: 1px solid #000; float: left; }


/* Isotope transitions
---------------------------------------------------------------------------------------------------- */
.isotope-item { z-index: 2; }

	.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }

	/* Isotope CSS3 transitions */
	.isotope,
	.isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; }

	.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }

	.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; }

	/* disabling Isotope CSS3 transitions */
	.isotope.no-transition,
	.isotope.no-transition .isotope-item,
	.isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }

	/* End: Recommended Isotope styles */
	/* disable CSS transitions for containers with infinite scrolling*/
	.isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }


/* Portfolio section
---------------------------------------------------------------------------------------------------- */
#folio { width: 100%; }

.project { width: 20%; float: left; position: relative; overflow: hidden; margin-bottom: 40px; border-top: 1px solid rgb(232,232,232); }

	.project h3 { padding: 25px 0; }

	.project h3 .location,
	.project h3 .download { display: block; font-weight: 300; }

	.project.paper h3 { padding-left: 30px; background: transparent url(../img/global/BG_icon_paper_download.png) no-repeat scroll 0 30px; }

	.project:hover { border-top: 4px solid rgb(255,204,0); }

	.project:hover h3 { padding-top: 22px; }

	.project.paper:hover h3 { background-position: 0 27px; }

	.loading { width: 240px; height: 240px; background: #FFCC00; z-index: 3; position: absolute; top: 0; left: 0; }

.thumbnail {
	height: 0;
	width: 100%;
	padding-bottom: 60%;
	-webkit-transition: opacity 250ms linear 0s;
	   -moz-transition: opacity 250ms linear 0s;
	    -ms-transition: opacity 250ms linear 0s;
	     -o-transition: opacity 250ms linear 0s;
	        transition: opacity 250ms linear 0s;
	        }

	.thumbnail:hover { opacity: 0.25; }

	.thumbnail a { display: block; position: relative; }

	.thumbnail img { width: 100%; height: auto; display: block; -webkit-transition: opacity 750ms ease-in-out 0s; -moz-transition: opacity 750ms ease-in-out 0s; -ms-transition: opacity 750ms ease-in-out 0s; -o-transition: opacity 750ms ease-in-out 0s; transition: opacity 750ms ease-in-out 0s; }

	fade-img { opacity: 1; }



/* 05. PROJECT PAGES
---------------------------------------------------------------------------------------------------- */
#project-study { width: 100%; margin-bottom: 40px; background: #FFFFFF; overflow: hidden; }


#casestudy-slides { width: 840px; height: 560px; float: left; position: relative; }

	#casestudy-imgs { width: 100%; height: 100%; }

	#casestudy-imgs img { display: block; width: 100%; height: auto; }


#casestudy-desc { min-width: 240px; margin: 0 0 0 840px; padding: 40px 0 20px 0; }

	#slide-count { display: block; font-size: 1.375em; font-weight: 200; line-height: 1em; margin: 0 0 23px 0; padding-left: 40px; } /* 22/20px */

	#casestudy-desc p { font-size: 13px; padding: 0 40px 0 40px; font-weight: 300; }

	#casestudy-desc ul { margin: 0 0 30px 0; padding: 0 40px 0 40px; list-style-type: none; font-size: 13px; font-weight: 300; font-style: italic; }

	#casestudy-desc ul li { margin-bottom: 10px; }


	#casestudy-desc .intro, #casestudy-desc .complete { float: left; width: 100%; }

	#casestudy-desc .complete { display: none; }

	#casestudy-desc a.readMore { color: #404040; padding-left: 40px; font-size: 13px; line-height: 20px; }


#slides-nav { width: 100%; position: absolute; top: 50%; right: 0; z-index: 4000; margin: -80px 0 0 0; overflow: hidden; }

	#slides-nav a#next,
	#slides-nav a#prev { display: block; width: 40px; height: 160px; float: left; background: transparent url(../img/global/slide-arrow-sprite.png) no-repeat scroll 0 0; text-indent: -999em; /* -webkit-border-bottom-left-radius: 4px; */ }

	#slides-nav a#prev { margin-left: 0; }
	#slides-nav a:hover#prev { background-position: -40px 0; }

	#slides-nav a#next { background-position: 0 -160px; float: right; margin-right: 0; }
	#slides-nav a:hover#next { background-position: -40px -160px;  }

	#gallery-loader { width: 100%; height: 100%; z-index: 300; position: absolute; top: 0; left: 0; background: #ffffff url(../img/global/loader-ani-white.gif) no-repeat scroll 50% 50%; }


/* --------------------------------------------------
05b. PROJECT: SOCIAL SHARE
-------------------------------------------------- */
.share { position: absolute; top: 0; right: 0; }

	.share:hover { background: #FFCC00; }

.share ul { background: none repeat scroll 0 0 #3C393A; display: none; left: 0; padding: 13px 0 14px; position: absolute; width: 240px; padding: 0; }

	.share:hover ul { display: block; }

	.share ul li { float: left; width: 120px; padding: 0; }

	.share ul li a { background: #FFCC00 url(../img/global/social-icons.png) no-repeat scroll 0 0; display: block; height: 48px; line-height: 48px; padding: 0 0 0 32px; color: #FFFFFF; }

	.share ul li a.twitter { border-right: 1px solid #FFFFFF; }

	.share ul li a.facebook { background-position: 0 -48px; }

	.share ul li a:hover { background: #ccc url(../img/global/social-icons.png) no-repeat scroll 0 0; }


/* 07. PROJECT: SIMILAR
---------------------------------------------------------------------------------------------------- */
section.similar { width: 100%; margin-bottom: 90px; }

/* 	section.similar h2 { font-size: 16px; border-top: 1px solid #efefef; height: 48px; line-height: 48px; } */

	#similar-projects { overflow: hidden; margin: 0; padding: 0; }

		#similar-projects li { width: 240px; height: 240px; float: left; border-top: 1px solid rgb(232,232,232); }

		/* #similar-projects li h3 { padding: 0; color: #544B49; } */

		#similar-projects li a { width: 240px; height: 240px; display: block; text-decoration: none; }

		#similar-projects li img { display: block; margin: 0; position: absolute; bottom: 0; left: 0; }

		#similar-projects li:hover { border-top: 4px solid rgb(255,204,0); }
		#similar-projects li:hover h3 { padding-top: 22px; }

		#similar-projects li h3 { padding-top: 25px; }

		#similar-projects li h3 .location { display: block; font-weight: 300; }


/* 08. FOOTER
---------------------------------------------------------------------------------------------------- */
footer { background: #efefef; width: 100%; height: 180px; position: absolute; bottom: 0; left: 0; padding: 0 20px; }

	#innerfooter { max-width: 1200px; margin: 0 auto; padding: 50px 0 0 0; overflow: hidden; }

	#innerfooter ol { font-weight: 300; font-size: 12px; line-height: 20px; float: left; width: 20%; padding: 0 20px 0 0; letter-spacing: 0.02em; }

	#innerfooter ol#copyright { float: right; text-align: right; }


/* 09. MODAL OVERLAY [COOKIES + PRIVACY]
----------------------------------------------------------------------------------------------------*/
#disclaimer_overlay {
	background: rgba(0,0,0,0.8);
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	z-index: 3000;
	}

	#disclaimer_overlay .box {
		height: 600px;
		width: 600px;
		background: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		padding: 60px;
		margin: -300px 0 0 -300px;
		box-shadow: 0 0 6px rgba(0,0,0,0.2);
		}

	#disclaimer_overlay .box #cookie_close { height: 48px; width: 48px; display: block; position: absolute; top: 0; right: 0; background: #FFCC00 url(../img/global/icons/icon-sprite.png) no-repeat 100% 0; text-indent: -999em; }

	#disclaimer_overlay .box h2 { border: none; margin: 0 0 20px 0; padding: 0; }

	#disclaimer_overlay .box p,
	#disclaimer_overlay .box h4 { font-size: 13px; line-height: 20px; font-weight: 300; }

	#disclaimer_overlay .box h4 { font-weight: 500; }

	#disclaimer_overlay .box ul { margin: 0 0 20px 0; font-size: 13px; }

	#disclaimer_overlay .box a { font-size: inherit; font-weight: 500; }



/*
NON-SEMANTIC
non-semantic helper classes
   Please define your styles before this section.
================================================== */

/* ===[ For image replacement ]=== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }

.ir br { display: none; }


/* ===[ Hide from both screenreaders and browsers: h5bp.com/u ]=== */
.hidden { display: none !important; visibility: hidden; }


/* ===[ Hide only visually, but have it available for screenreaders: h5bp.com/v ]=== */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }


/* ===[ Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p ]=== */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }


/* ===[ Hide visually and from screenreaders, but maintain layout ]=== */
.invisible { visibility: hidden; }

/* print styles Inlined to avoid required HTTP connection: h5bp.com/r
================================================== */

@media print {
	* {
	 background: transparent !important;
	 color: black !important;
	 box-shadow: none !important;
	 text-shadow: none !important;
	 filter: none !important;
	 -ms-filter: none !important;
		}

	h1 { font-family: Helvetica, Arial, sans-serif; font-size: 16pt; }

	/* ===[ Black prints faster: h5bp.com/s ]=== */

	a, a:visited {
	 text-decoration: underline;
		}

	a[href]:after { content: " (" attr(href) ")"; }

	abbr[title]:after { content: " (" attr(title) ")"; }

	.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
	 content: "";
		}

	/* ===[ Don't show links for images, or javascript/internal links ]=== */

	pre, blockquote {
	 border: 1px solid #999; page-break-inside: avoid;
		}

	thead {
	 display: table-header-group;
		}

	/* h5bp.com/t  */

	tr, img {
	 page-break-inside: avoid;
		}

	img {
	 max-width: 100% !important;
		}

	#contactPanel, nav, footer { display: none; }


	}