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

BARR GAZETAS MEDIA QUERIES
------------------------------------------------------------------------------------------ */

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

BREAKPOINT 800 - SMALLER SCREENS + TABLET DEVICES
------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1024px) {



/* ----------------------------------------------------------------------------------------------------------------------------------
WARNING FOR DEVELOPMENT ONLY: REMOVE FROM PRODUCTION DOCUMENTS!
------------------------------------------------------------------------------------------------------------------------------------- */
/* body:before{ content: "BP 1000 - MASTER GRID SET = 960"; padding: 0.5em; display: block; text-align: center; background: black; opacity: 0.5; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; } */
/* ---------------------------------------------------------------------------------------------------------------------------------- */


/* PB 1000 -  GRID */
#container { max-width: 960px!important; }
#casestudy-slides { width: 960px!important; height: 640px!important; }

/* Reset isotope project widths */
div.project { width: 25%!important; } /* 240 / 960 = 25% */

/* SLIDEDOWN CONTACT PANEL + GOOGLE MAP */
div.contact-details { margin-right: -480px; }

/* About */
.people li img { margin: 0 16px 32px 0; }
.people li .bio { margin-left: 216px; }
.people li .bio p { padding: 0 0 0 0; }

/* BP 1024 | PROJECT */
#casestudy-desc { margin: 0; padding: 32px 0 16px 0; float: left; }
#casestudy-desc h1 { padding: 0 0 16px 16px; margin: 0; line-height: 1.2em; }
#casestudy-desc .intro { float: left; width: 50%; }
#casestudy-desc .complete { float: left; width: 50%; display: block; }
#casestudy-desc p { padding: 0 48px 0 16px; }
#casestudy-desc a.readMore { display: none; }

#slide-count { margin: 0 16px 0 0; float: right; }

#similar-projects li:nth-child(5) { display: none; }
}



/* 800.BP
---------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 799px) {
	/* body:before{ content: "BP 800 - MASTER GRID SET = 720"; padding: 0.5em; display: block; text-align: center; background: black; opacity: 0.5; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; } */

	#casestudy-slides { width: 720px!important; height: 480px!important; }

	/* STANDFIRST */
	.column-02.standfirst { width: 100%; }

	.column-03 { width: 50%; }
	.column-06 { width: 100%; }

	/* MAP */
	#contactPanel .contact-details { position: absolute; top: 0; left: 50%; margin-left: 100px; z-index: 2; overflow: hidden; }

	/* Reset isotope project widths */
	div.project { width: 33.3333%!important; } /* 240 / 720 = 33.3333% */

	.people li { overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.05); margin: 0 25px 32px 0; }

		.people.right li { margin: 0 0 32px 25px; }

		.people li img { margin: 0 16px 32px 0; }

		.people li .bio { margin-left: 0px; float: left;  }

	#casestudy-desc { margin: 0; padding: 32px 0 16px 0; float: left; }

		#casestudy-desc h1 { padding: 0 0 16px 16px; margin: 0; line-height: 1.2em; }

		#casestudy-desc .intro { float: left; width: 50%; }

		#casestudy-desc .complete { float: left; width: 50%; display: block; }

		#casestudy-desc p { padding: 0 48px 0 16px; }

		#casestudy-desc a.readMore { display: none; }

	/* SIMILAR PROJECTS */
	#similar-projects li:nth-child(1n+4) { display: none; } /* DISPLAY ONLY 3 SIMILAR PROJECTS AT THIS SIZE */

}


/* 500.BP - Smaller devices landscape
---------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
/* body:before{ content: "500.BP <= 480px"; padding: 0.5em; display: block; text-align: center; background: black; opacity: 0.5; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; } */

	#inner-wrapper { padding: 0 0 420px 0; }

	/* 500 Header + Navigation
	------------------------------------------------------------ */
	header[role="banner"] { width: 100%; background: rgb(255,255,255); }

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

		.header-wrap a#barr-brand { top: 21px; left: 20px; background-size: 75%; }

	nav { top: 60px; left: 0; width: 100%; }

		nav ul { display: none; font-size: 13px; line-height: 59px; text-align: left; background: rgb(255,255,255); }

		nav ul li { width: 100%; }

		nav ul li:last-child { border-bottom: none; }

		nav ul li a { display: block; height: 59px; padding-left: 10px; border-bottom: 1px solid rgb(232,232,232); }

		nav ul li a.selected { background: #FFCC00; color: rgb(255,255,255); font-weight: 700; border-bottom: none; }

		nav a#mobile-navigation { display: block; }

		#follow { display: none; }


/* Barr Portfolio
------------------------------------------------------------ */

div.project { width: 50%!important; }



/* CASESTUDY IMAGES */
#casestudy-slides { width: 480px!important; height: 320px!important; }
#slides-nav { display: none; }
#project-study { margin: 0 0 16px 0; }

	/* 600 / 1200 = 50% */
	.column-02 { width: 100%; }
	.column-03 { width: 100%!important; padding-bottom: 32px; }

	/* ABOUT */
	.profile-text .column-02:first-child,
	.profile-text .column-02:last-child { padding: 0; }

	.profile-text blockquote { font-size: 17px; line-height: 25px; color: #333333; font-weight: 300; }



/* BP 480 | PROJECT */
#casestudy-desc { margin: 0; padding: 32px 0 16px 0; float: left; }
#casestudy-desc h1 { padding: 0 0 16px 8px; margin: 0; line-height: 1.2em; }
#casestudy-desc .intro { float: left; width: 100%; }
#casestudy-desc .complete { float: left; width: 100%; display: block; }
#casestudy-desc p { padding: 0 16px 0 8px; }
#casestudy-desc a.readMore { display: none; }

/* BP 480 | SIMILAR PROJECTS */
#similar-projects li { width: 216px; height: 216px; }

	#similar-projects li:nth-child(1n+3) {display: none }

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

	#similar-projects li img { width: 216px; height: 144px; display: block; margin: 0 0 8px 0; }


/* CONTACT + MAP */
#contactPanel #map { width: 100%; height: 300px; }

	#contactPanel .contact-details { width: 100%; height: 300px; padding-left: 20px; position: absolute; top: 0; left: 0; margin-left: 0; z-index: 2; overflow: hidden; }

	div.contact-details { padding: 16px 0 0 0; width: 100%; height: 300px; right: 0; margin-right: 0; }

	a#closeMap { width: 100%; }


.project-filter a.drop-down { background-image: none; text-align: center; }


/* Index header */
#index header { background: #FFFFFF; z-index: 700; }
#index header .inner-header { max-width: 1200px; margin: 0 auto; position: relative;  height: 120px; }

#index nav { top: 72px; left: 0; width: 50%; z-index: 9800;}



/* BP 480 | FOOTER */
footer { height: 420px; }
footer #innerfooter ol { float: none; width: 100%; text-align: center; }
footer #innerfooter ol#copyright { display: none; }

/* STANDFIRST */
.standfirst { width: 100%; }

	.standfirst p { font-size: 20px; margin-bottom: 1.25em; line-height: 1.25em; font-weight: 300; letter-spacing: -0.015em; padding: 0 15px 0 20px; }

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

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


h2 { font-size: 1em; margin-bottom: 1.25em; line-height: 1.25em; font-weight: 300; padding-top: 20px; }

h3 { font-size: 12px; }

}


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


Breakpoint 320 | Smartphone Portrait
---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 400px) {


/* Global elements
-------------------------------------------------- */
h3 { font-weight: 700!important; }


header[role="banner"] { position: fixed; /* visibility: hidden; */ }

.header-wrap a#barr-brand { top: 21px; left: 10px; background-size: 75%; }

#container { /* max-width: 320px!important; */ padding-top: 60px; }

#title-bar { height: 60px; margin-bottom: 0; border-top: none; }

#title-bar h1, #title-bar h2 { display: none; }

/* STANDFIRST */
	.standfirst p { font-size: 16px; margin-bottom: 1.25em; line-height: 1.25em; font-weight: 300; letter-spacing: -0.015em; padding: 0 15px 0 20px; }

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

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


/* Portfolio filter menu
-------------------------------------------------- */
.project-filter { top: 0; width: 100%; }

	.project-filter a.drop-down { width: 100%; background: rgb(218,218,218); background-image: none!important; padding-left: 0; color: #FFF; border-top: none; font-weight: 700; }

	.project-filter a.drop-down:hover,
	.project-filter:hover a.drop-down { background: rgb(218,218,218); border-top: none; }

	.project-filter ul { width: 100%; }

		.project-filter ul li { width: 50%; float: left; border-bottom: 1px solid rgb(218,218,218); border-right: 1px solid rgb(218,218,218); }

		.project-filter ul li:last-child { width: 100%; }

		.project-filter ul li a { padding: 0!important; text-align: center; }


/* 400: Portfolio
-------------------------------------------------- */
div.project { width: 100%!important; margin-bottom: 10px; padding: 10px 10px 0 10px; }

div.project:first-child { border-top: none; }

	.project h3 { padding: 0 0 0 10px; width: 50%; float: right; /* letter-spacing: -0.01em; */ }

	.project:hover { border-top: 1px solid rgb(232,232,232); }

	.project:hover h3 { padding-top: 0; }

	.thumbnail { width: 50%; padding-bottom: 30%; float: left; }

	.project.paper h3 { padding-left: 10px; background-image: none; }


/* 400: Homepage
-------------------------------------------------- */
#intro { width: 100%; color: #FFFFFF; font-weight: 300; font-size: 18px; line-height: 20px; margin-top: 100px; letter-spacing: -0.020em; padding: 0 20px; }

#news_panel { background: rgba(247,247,247,1); padding: 0 0 0 0; }

	.news_feed { max-width: 1200px; margin: 0 auto; border-left: none; padding: 0 20px; }

	#news_feed_nav { float: none; width: 100%; padding: 0; border-bottom: 1px solid #FFF; margin-bottom: 30px; height: 60px;  }

	#news_feed_nav ul { display: none; }

	.news_item { border-left: none; border-bottom: 1px solid #FFF; width: 100%; float: none; padding: 0 0 30px 0; margin-bottom: 30px; }

	.news_feed h2 { color: #333333;}

	.news_feed_nav h2 { color: #333333; background: aqua; line-height: 30px; }

	.news_item .meta-catagory,
	.news_item p,
	.news_item p.news_item { font-size: 12px; color: #333333!important; }

	.news_item > header { margin-bottom: 10px; }


	#casestudy-slides { width: 320px!important; height: 213px!important; }

	#similar-projects li:nth-child(3) { display: none; }


/* 400: Team page
------------------------------------------------------------ */
.barr-team { margin: 0; }

.team-portrait { width: 100%; padding: 10px 10px 0 10px; margin-top: 0; }

.team-portrait img { width: 50%; float: left; margin: 0 0 10px 0;}

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

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

	.team-portrait h3 {  width: 50%; padding: 0 0 0 10px; margin-bottom: 0px; float: right; }

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

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

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

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

	.team-portrait.current:after { border: none; }

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

	.biography-wrapper { padding: 0 20px; }

	.biography-inner { width: 100%; }

}

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

RETINA GRAPHICS | 4GS + iPad

------------------------------------------------------------------------------------------ */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {

	header h1,
	header a#barr-brand { background: url(../img/global/barr-gazetas-logo@2x.png); -webkit-background-size: 240px 32px; background-size: 240px 32px; width: 240px; height: 32px; }
	header a#barr-brand { display: block; }

	#home-overlay .overlay-brand { background: url(../img/global/barr-gazetas-logo@2x.png) no-repeat scroll 0 0; -webkit-background-size: 240px 32px; background-size: 240px 32px; width: 240px; height: 32px; }

} /* End Retina */