/*
Theme Name: SBM
Theme URI: http://screambluemurder.co.uk
Author: Trippnology
Author URI: http://trippnology.com
Description: Custom theme for Scream Blue Murder
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbm
Domain Path: /languages/
Tags:

SBM is based on Underscores http://underscores.me/, (C) 2012-2014 Automattic, Inc.

Fonts
-----
Titles: 'Brandon Grotesque W01' (regular 400 and bold 700)
Body:   'Trade Gothic Next W01'
This is the old body font. It will be removed once v1.1 goes live
'ITC Garamond W01' (light and light italic 100)

Colours
-------
Orange: #f28e1d
Grey: #999999

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Reset
2.0 - Typography
3.0 - Elements
4.0 - Forms
5.0 - Navigation
	5.1 - Links
	5.2 - Menus
6.0 - Accessibility
7.0 - Alignments
8.0 - Clearings
9.0 - Widgets
10.0 - Content
	10.1 - Posts and pages
	10.2 - Asides
	10.3 - Comments
11.0 - Infinite scroll
12.0 - Media
	12.1 - Captions
	12.2 - Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 - Reset
--------------------------------------------------------------*/
/* Covered by Bootstrap */

/*--------------------------------------------------------------
2.0 Typography
--------------------------------------------------------------*/
body {
	font-size: 16px;
	font-family: 'Trade Gothic Next W01';
	font-weight: 100;
	line-height: 1.5;
	background-color: #e3e3e1;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	font-family: 'Brandon Grotesque W01';
	line-height: 1em;
	font-weight: 700;
}
blockquote {
	font-style: italic;
	font-size: 1.5em;
}
.excerpt {
	/* font-family: 'Brandon Grotesque W01'; */
	font-size: 1.25em;
}
/* Utility class to apply Brandon font */
.brandon {
	font-family: 'Brandon Grotesque W01';
}
@media (min-width: 48em) {
	h1,
	.h1 {
		font-size: 3em;
	}
	h2,
	.h2 {
		font-size: 2.75em;
	}
	blockquote {
		margin-left: -2em;
		margin-right: -2em;
	}
}

/* Utility colours */
.orange {
	color: #f28e1d;
}

/*--------------------------------------------------------------
3.0 Elements
--------------------------------------------------------------*/
hr {
	width: 75%;
	height: 0.125em;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e3e3e1+0,a2a2a2+51,e3e3e1+100 */
	/* Old browsers */
	background: #a2a2a2;
	/* FF3.6-15 */
	background: -moz-linear-gradient(
		left,
		#e3e3e1 0%,
		#a2a2a2 51%,
		#e3e3e1 100%
	);
	/* Chrome10-25,Safari5.1-6 */
	background: -webkit-linear-gradient(
		left,
		#e3e3e1 0%,
		#a2a2a2 51%,
		#e3e3e1 100%
	);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	background: linear-gradient(
		to right,
		#e3e3e1 0%,
		#a2a2a2 51%,
		#e3e3e1 100%
	);
	/* IE6-9 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e1', endColorstr='#e3e3e1',GradientType=1 );
}

/*--------------------------------------------------------------
4.0 Forms
--------------------------------------------------------------*/
.input-group-addon {
	font-size: 16px;
	background-color: #fff;
}

/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
5.1 Links
--------------------------------------------------------------*/
a {
	color: #f28e1d;
}
a:visited {
	color: #f28e1d;
}
a:hover,
a:focus,
a:active {
	color: #999999;
}

/*--------------------------------------------------------------
5.2 Menus
--------------------------------------------------------------*/
.navbar {
	width: 100%;
	margin-bottom: 0;
	z-index: 1;
	border-radius: 0;
}
.navbar-sbm {
	background-color: #181818;
	font-family: 'Brandon Grotesque W01';
	text-transform: uppercase;
}
.navbar-brand {
	float: none;
	height: auto;
	overflow: visible;
	padding: 0.75em;
}
.navbar-brand > img {
	max-width: 156px;
}
.navbar-brand,
.navbar-nav > li > a {
	color: #fff;
	text-shadow: none;
}
.navbar ul {
	margin-bottom: 0;
}
.navbar .social-links,
.navbar .call {
	text-align: right;
	font-size: 1.25em;
}
.navbar .social-links {
	padding-top: 0.3125em;
}
.navbar .social-links a {
	color: #717171;
}
.navbar .social-links a:hover {
	text-decoration: none;
	color: #f38f1e;
}
.navbar .call {
	padding-top: 0.25em;
}
/* This one is only shown on XS */
.navbar .phone-link {
	float: right;
	font-size: 1.25em;
	margin: 0.6125em 1em 0 0;
}
.navbar-toggle {
	margin-right: 0;
	background-color: #000;
	border: 1px solid #444;
}
.navbar-toggle .icon-bar {
	background-color: #f28e1d;
}
.navbar-nav {
	border-top: 1px solid #2e2e2e;
}
.navbar-nav > li > a {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
}
.nav > li > a:hover,
.nav > li > a:focus {
	background-color: #181818;
	color: #f28e1d;
}
.nav > li:last-of-type > a {
	padding-right: 0;
}
/* Dropdowns */
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
	background-color: inherit;
	border-color: inherit;
}
.dropdown-menu {
	background-color: rgba(0, 0, 0, 0.4);
}
.dropdown-menu > li > a {
	color: #fff;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	background-color: inherit;
	color: #f28e1d;
	background-image: none;
}
@media (min-width: 360px) {
	.navbar-brand > img {
		max-width: 196px;
	}
}
@media (min-width: 420px) {
	.navbar-brand > img {
		max-width: 252px;
		padding-bottom: 0.75em;
	}
}
@media (min-width: 48em) {
	.navbar-nav {
		float: right;
	}
	.nav > li > a {
		padding-right: 0.5em;
		padding-left: 0.5em;
	}
	.navbar-collapse {
		padding: 0;
	}
}
@media (min-width: 62em) {
	.nav > li > a {
		padding-right: 1em;
		padding-left: 1em;
	}
}
/*--------------------------------------------------------------
6.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

/*--------------------------------------------------------------
8.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: '';
	display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/
.widget-area {
	padding-top: 1em;
}

.widget {
	margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets */
.widget select {
	max-width: 100%;
}

/* Search widget */
.widget_search .search-submit {
	display: none;
}

.widget ul {
	padding: 0;
	list-style: none;
}

.widget_categories ul {
	font-family: 'Brandon Grotesque W01';
	text-transform: uppercase;
}

/*--------------------------------------------------------------
10.0 Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
10.1 Posts and pages
--------------------------------------------------------------*/
/* Masthead banner */
header.banner {
	background: url('img/banners/banner-underline.png');
	background: url('img/banners/banner-underline.svg');
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #fff;
	min-height: 9em;
}
.banner-caption {
	display: table;
	width: 100%;
}
.banner-caption-inner {
	display: table-cell;
	vertical-align: middle;
}
.banner-caption-inner h1 {
	font-size: 2.5em;
	color: #f28e1d;
}
.banner-caption-inner p {
	font-family: 'Brandon Grotesque W01';
	font-size: 1.25em;
}
.banner-image {
	display: table;
	width: 100%;
	padding-bottom: 10%;
	text-align: center;
}
.banner-image img {
	display: table-cell;
	vertical-align: bottom;
}
@media (min-width: 48em) {
	header.banner {
		min-height: 12em;
		padding-top: 2em;
	}
	.banner-image {
		padding-bottom: 1em;
	}
}
@media (min-width: 62em) {
	.banner-caption-inner p {
		font-size: 1.5em;
	}
}

.sticky {
}
.hentry {
	margin: 0 0 1.5em;
}
.byline,
.updated {
	display: none;
}
.single .byline,
.group-blog .byline {
	display: inline;
}
.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}
.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.newsletter-signup {
	padding: 2em;
}
.newsletter-signup .h2 {
	margin-bottom: 0.25em;
}

.footer-hero-image {
	background: url('img/footer/footer-image-xs.jpg') no-repeat center center;
	background-size: cover;
}
.footer-hero-image .call-out {
	border-bottom: 0;
	padding-top: 3em;
	padding-bottom: 4em;
}
.footer-hero-image h2 {
	margin-bottom: 1em;
	font-size: 3em;
	color: #f38f1e;
}

.footer-main {
	background-color: #f38f1e;
	font-size: 1.25em;
}
.footer-main .container {
	padding-top: 0.75em;
	padding-bottom: 2em;
	background-image: url('img/footer/footer-icons.png');
	background-image: url('img/footer/footer-icons.svg');
	background-position: center bottom;
	background-repeat: no-repeat;
}
.footer-main .icon::before {
	/* This sucks because the icons are not all the same height! */
	vertical-align: middle;
	font-size: 1.25em;
	color: #000;
}
.footer-main a {
	color: #333;
}
/* Why is this one different? */
.footer-main .blog a,
.footer-main .blog .icon::before {
	color: #fff;
}

.footer-sub {
	padding-top: 0.5em;
	background: #000;
	font-family: 'Brandon Grotesque W01';
	text-transform: uppercase;
}
.copyright,
.copyright a,
.credits,
.credits a {
	color: #f38f1e;
	font-family: 'Brandon Grotesque W01';
}

@media (min-width: 30em) {
	.footer-main {
		font-size: 1.5em;
	}
}
@media (min-width: 48em) {
	.footer-hero-image {
		background-image: url('img/footer/footer-image-sm.jpg');
	}
	.footer-main .container {
		padding-bottom: 3em;
		background-size: 600px;
	}
}
@media (min-width: 65em) {
	.footer-hero-image {
		background-image: url('img/footer/footer-image-md.jpg');
	}
	.footer-main .container {
		padding-bottom: 3.5em;
	}
	.footer-sub .credits {
		text-align: right;
	}
}
@media (min-width: 72em) {
	.footer-main .container {
		padding-bottom: 4em;
	}
	.footer-hero-image {
		background-image: url('img/footer/footer-image-lg.jpg');
	}
}

.call-out {
	margin-bottom: 1em;
	padding-top: 1em;
	padding-bottom: 1.5em;
	border-bottom: 1px solid #ccc;
	text-align: center;
}
@media (min-width: 65em) {
	.call-out {
		margin-bottom: 2em;
		padding-top: 2em;
		padding-bottom: 2.5em;
	}
}

p.intro {
	padding: 1.5em 0;
	text-align: center;
	font-size: 1.75em;
}

/* Page Specific */
.portfolio-filter-wrapper {
	padding: 1em 0 0.75em;
	background-color: #fff;
	font-family: 'Brandon Grotesque W01';
	font-size: 1.25em;
	text-align: center;
	box-shadow: 1px 0 3px rgba(0, 0, 0, 0.35);
}
.portfolio-filter a {
	padding: 0.5em 0.125em;
	border-right: 1px solid #f38f1e;
	color: #f38f1e;
}
.portfolio-filter a:last-of-type {
	border-right: none;
}
.portfolio-filter a.active {
	font-weight: bold;
}
.portfolio-items {
}
.portfolio-grid-item {
	margin-bottom: 30px; /* px to match BS grid */
}
.portfolio-caption {
	position: absolute;
	display: table;
	top: 0;
	width: 300px;
	height: 300px;
	padding: 0 0.25em;
	background: #f28e1d;
	background: rgba(243, 143, 30, 0.8);
	text-align: center;
	font-family: 'Brandon Grotesque W01';
	font-size: 2em;
}
.portfolio-caption p {
	display: table-cell;
	vertical-align: middle;
}
.portfolio-caption a {
	color: #fff;
}
.portfolio-caption .tags a {
	color: #444;
}
/* 	.portfolio-caption.animated {
	visibility: visible !important;
	display: block;
}
 */

/* Single portfolio pages */
.project-extra-images img {
	margin-bottom: 1.5em;
}

@media (min-width: 48em) {
	.portfolio-caption {
		width: 158px;
		height: 158px;
	}
}
@media (min-width: 62em) {
	.portfolio-filter a {
		padding: 0.5em 0.5em;
	}
	.portfolio-caption {
		width: 213px;
		height: 213px;
	}
}
@media (min-width: 75em) {
	.portfolio-filter a {
		padding: 0.5em 1em;
	}
	.portfolio-caption {
		width: 263px;
		height: 263px;
	}
}

.testimonial {
	padding: 1em 0;
	font-size: 1.25em;
}
.testimonial.even {
	background-color: #f28e1d;
	color: #fff;
}
.testimonial .icon {
	font-size: 3em;
}
.testimonial .icon {
	color: #f28e1d;
}
.testimonial.even .icon {
	color: #fff;
}
.testimonial.even a {
	color: #444;
}
@media (min-width: 48em) {
	.testimonial {
		padding: 2em 0;
		text-align: center;
	}
}

/* About */
.page-id-134 h2 {
	text-align: center;
}
.page-id-134 .left h3 {
	/* text-align: right; */
}
.value h3 {
	color: #f28e1d;
}
@media (min-width: 48em) {
	.values-left {
		border-right: 1px solid #bababa;
	}
	.values-right {
		padding-left: 1.5em;
	}
}

/* Contact */
.contact-methods {
	padding: 1em 0;
	font-size: 1.125em;
	font-weight: bold;
	text-align: center;
}
.contact-methods .icon {
	font-size: 2em;
}
.contact-form {
	margin-bottom: 2em;
}
.google-map {
	padding: 2em 0;
}
@media (min-width: 48em) {
	.contact-methods {
		padding: 2em 0;
	}
}

/* Services page template */
.page-template-services h2 {
	color: #f28e1d;
}
.page-template-services .main-image {
	margin: 1.5em 0;
	border: 1px solid #ccc;
}

/* Landing page template */
.page-template-landing-page article {
	margin-bottom: 0;
}

.landing-page-banner {
	padding: 1.5em 0;
	background-color: #fff;
}

.landing-page-banner-text {
	text-align: center;
}
.landing-page-banner-text .icon {
	color: #f28e1d;
	font-size: 3em;
}
.landing-page-banner-text .glyphicon {
	color: #f28e1d;
	font-size: 1.5em;
}
.landing-page-banner-form .h2 {
	color: #f28e1d;
}

.page-template-landing-page .fw-quote {
	border-top: 1px solid #999;
	padding: 1.5em 0;
	background-color: #fff;
	text-align: center;
}
.page-template-landing-page .fw-quote .icon {
	color: #f28e1d;
	font-size: 3em;
}
.page-template-landing-page .fw-quote .glyphicon {
	color: #f28e1d;
	font-size: 1.5em;
}
.landing-page-body {
	padding: 3em 0;
}
.landing-page-body a[href^='tel'] {
	font-weight: bold;
}

.landing-page-testimonial {
	position: relative;
	overflow: hidden;
	background-color: #f28e1d;
	text-align: center;
}
.landing-page-testimonial-background {
	position: absolute;
	left: 0;
	right: 0;
}
.landing-page-testimonial .card {
	margin: 1.5em 0;
	padding: 1.5em;
	background-color: #fff;
}
.landing-page-testimonial .icon {
	color: #f28e1d;
	font-size: 3em;
}

@media (min-width: 48em) {
	.landing-page-testimonial {
		background-color: #fff;
	}
}
@media (min-width: 62em) {
	.landing-page-testimonial .card {
		margin: 3em 0;
	}
}
/*--------------------------------------------------------------
10.2 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}
aside ul {
	list-style: square;
	color: #eee;
}

/*--------------------------------------------------------------
10.3 Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}
.bypostauthor {
}

/*--------------------------------------------------------------
11.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer {
	/* Theme Footer (when set to scrolling) */
	display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
12.0 Media
--------------------------------------------------------------*/
/* Full width headers */
.full-width-header {
	position: relative;
}
.header-img {
	width: 100%;
}
.header-img-blur {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
}
.header-caption {
	position: absolute;
	width: 100%;
	bottom: 20%;
	color: #fff;
}
.header-caption h1 {
	font-size: 1.75em;
	margin-bottom: 0;
}
.header-caption p {
	margin-top: 0.5em;
	font-family: 'Brandon Grotesque W01';
	font-size: 1.5em;
	line-height: 1em;
}
.header-credit {
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 1em;
	color: #fff;
	font-size: 12px;
	font-family: 'Brandon Grotesque W01';
}

.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}
/* Responsive images */
img {
	max-width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
12.1 Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}
.wp-caption img[class*='wp-image-'] {
	display: block;
	margin: 0 auto;
}
.wp-caption-text {
	text-align: center;
	font-size: 0.75em;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/*--------------------------------------------------------------
12.2 Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}
.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}
.gallery-columns-2 .gallery-item {
	max-width: 50%;
}
.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
	max-width: 25%;
}
.gallery-columns-5 .gallery-item {
	max-width: 20%;
}
.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}
.gallery-caption {
}

/* Buttons */
.btn {
	border: none;
	border-radius: 0;
	font-family: 'Brandon Grotesque W01';
}
.btn-cta {
	padding-right: 3em;
	background-image: url('img/button-arrow.png');
	background-image: url('img/button-arrow.svg');
	background-position: right;
	background-repeat: no-repeat;
	background-color: #f28e1d;
	color: #fff;
	text-shadow: none;
}
.btn-cta:visited {
	color: #fff;
}