/*
Theme Name: BYP RELOADED
Author: sarah huny young
Author URI: http://scda.co/
Version: 1.0
*/

/*

palette:

crimson: #f3000f
gold: #eeb03e
lt gray: #efefef

-------------------

ToC:

0.0 resets
1.0 global styles
	1.1 wordpress
2.0 basic structure
	2.1 header
	2.2 sectionheaders & storyblocks
	2.3 nav slideout
	2.4 search overlay
	2.5 newsletter sign-up
	2.6 footer
3.0 homepage
	3.1 top story
	3.2 videos & podcast
	3.3 category blocks
	3.4 slider
4.0 article
5.0 pages
	5.1 staff
	5.2 tabbed template
6.0 archive (category, author)

*/

@font-face {
    font-family: 'DIN';
    src: url('media/fonts/din_condensed_bold-webfont.woff2') format('woff2'),
         url('media/fonts/din_condensed_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* 
-------------------------------------------------------
0.0 resets
------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	outline: 0;
	vertical-align: baseline;
}

body {
	height: 100%;
	background-color: #fff;
	color: #000;
	font: 1em/1.7em "Playfair Display";
	overflow-x: hidden;
	position: relative;
}

/* html { height: 100%; } */

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

a:hover { color: #d90103; }

h1 {
	font-size: 3.1em;
	font-weight: 400;
	line-height: 1.1em;
}

#homepage h1 {
	text-indent: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

p { padding-bottom: 20px; }

blockquote { 
	margin-bottom: 20px;
	padding: 10px;
	background-color: #efefef;
	position: relative;
}

blockquote p {
	padding: 10px 20px 10px 45px;
	font-style: italic;
}

blockquote p:last-of-type {
	padding: 0 20px 10px 45px;
}

blockquote p:before {
	content: '"';
	font-weight: 700;
	font-family: Georgia;
	font-size: 3em;
	font-style: normal;
	position: absolute;
	top: 23px;
	left: 23px;
}

img {
	width: 100%;
	height: auto;
	display: block;
	border: none;
}

li { vertical-align: top; }

ul, ol, li { list-style: none; }

table, td, form, fieldset {
	border: none;
	border-collapse: collapse; 
	border-spacing: 0;
}

button, .button, input[type=submit] {
	padding: 10px 15px;
	background-color: #eeb03e;
	border: none;
	color: #fff;
	border: 1px solid #eeb03e;
	font: 400 0.8em "Roboto";
	text-transform: uppercase;
	display: inline-block;
}

button a, .button a { color: #eaeaea; }

button:hover, .button:hover, input[type=submit]:hover { cursor: pointer; }

button:hover, .button:hover, input[type=submit]:hover {
	background-color: #f3000f;
	border-color: #f3000f;
}




/* 
-------------------------------------------------------
1.0 global styles
------------------------------------------------------- */

div, span { position: relative; }

html.disable-scrolling, 
html.disable-scrolling body, 
.disable-scrolling { overflow: hidden; }

.clear { clear: both; }

.float-left {
	float: left;
	display: inline-block;
}

.float-right {
	float: right !important;
	display: inline-block;
}

.align-center {
	margin: 0 auto;
	text-align: center;
}
.align-left { text-align: left; }
.align-right { text-align: right; }

.uppercase { text-transform: uppercase; }

.none { display: none; }

.indent { margin-left: 35px; }

.full-opacity { opacity: 1 !important; }

.caps { text-transform: uppercase; }

.underline { text-decoration: underline; }

.bg-black { background-color: #000; color: #fff;}

.pad-right { padding-right: 12px; }
.pad-left { padding-left: 12px; }

.margin-right { margin-right: 12px; }
.margin-left { margin-left: 12px; }

.cushion { 
	margin: 25px 0; 
	padding: 25px 0;
}

.col-full { width: 100%; }

.col-4 { width: 25%; }
.col-4.pad-left { width: calc(25% - 15px); }
.col-4.pad-right { width: calc(25% - 15px); }
.col-4.pad-right.pad-left { width: calc(25% - 18px); }

.col-3 { width: 33.3333%; }
.col-3.pad-left { width: calc(33.3333% - 15px); }
.col-3.pad-right { width: calc(33.3333% - 15px); }
.col-3.pad-right.pad-left { width: calc(33.3333% - 18px); }

.col-2 { width: 50%; }
.col-2.pad-left { width: calc(50% - 15px); }
.col-2.pad-right { width: calc(50% - 15px); }
.col-2.pad-left.pad-right, 
.col-2.pad-right.pad-left { width: calc(50% - 18px); }

.col-23 { width: 75%; }
.col-23.pad-left { width: calc(75% - 15px); }
.col-23.pad-right { width: calc(75% - 15px); }
.col-23.pad-left.pad-right, 
.col-23.pad-right.pad-left { width: calc(75% - 18px); }

.col-4, .col-3, .col-2, .col-23 { 
	float: left; 
	vertical-align: top; 
}


/* 1.1 wordpress -------------------------------------- */

.alignleft {
	margin: 7px 30px 15px 0;
	float: left;
}

.alignright {
	float: right;
	margin: 7px 0 15px 30px;
}

div.aligncenter {
	width: 100%;
	margin: 0 auto 20px;
	text-align: center;
}

img.alignleft, img.alignright {
	width: auto;
	height: auto;
} 

.wp-caption-text {
	width: 100%;
	padding: 12px 0 0 0;
	font: 400 0.7em/1.4em "Roboto";
}

.entry ul, .entry ol { margin: 0 0 20px 35px; }

.entry ul li { list-style-type: circle; }
.entry ol li { list-style-type: decimal; }

.entry hr {
	margin-bottom: 20px;
	outline: 0;
	border: 0;
	border-bottom: 1px dotted #000;
}


/* 
-------------------------------------------------------
2.0 basic structure
------------------------------------------------------- */

#bg { width: 100%; }

#site {
	padding-top: 277px;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.container {
	width: 1300px;
	margin: 0 auto;
	overflow: hidden;
}

.contentblock {
	width: calc(100% - 150px);
	margin: 0 auto;
}

header #nav, #menu-byp-supreme-main-menu {
	font: 1.3em "DIN", Arial Narrow, Arial, sans-serif;
	text-transform: uppercase;
}

header #nav {
	font-size: 1em;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 12px;
}

#nav li { display: inline-block; }

#nav li a {
	padding: 20px 15px;
	color: #fff;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

#nav li:first-child a { padding-left: 0; }
#nav li:last-child a { padding-right: 0; }

#nav li.active a { color: #f3000f; }

#nav li a:hover, #nav li.current-menu-item a { color: #d90103; /*border-color: #fff;*/ }

#navclick {
	width: 22px;
	display: none;
	position: absolute;
	top: 26px;
	left: 0;
}

#header.active #navclick { top: 17px; }

#navclick:hover { cursor: pointer; }

#navclick a { display: block; }

#navclick .row {
	width: 100%;
	height: 3px;
	margin-bottom: 4px;
	display: block;
	background-color: #fff;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#navclick:hover .row { background-color: #f3000f; }

body.nav-open #navclick .row { opacity: 0; }

body.nav-open #navclick .row:first-child {
	margin-top: 7px;
	opacity: 1;
	transform: rotate(45deg);
}

body.nav-open #navclick .row:last-child {
	margin-top: -14px;
	opacity: 1;
	transform: rotate(-45deg);
}

.more {
	margin-top: 20px;
	text-align: center;
	letter-spacing: 0.1em;
	font-size: 0.8em;
	font-style: italic;
	z-index: 1;
}

.more:hover a { color: #f2000f; }

.more a {
	padding: 0 10px;
	color: #000;
	background-color: #fff;
	display: inline-block;
}

.more span {
	font-style: normal;
	text-transform: uppercase;
}

.more:before {
	width: 100%;
	margin: 0 auto;
	border-top: 1px solid #f2000f;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	z-index: -1;
}

.more .fa-angle-right { color: #f2000f; }

.social-media li {
	display: inline-block;
	color: #eeb03e;
}

.social-media li:first-child a { padding-left: 0; }
.social-media li:last-child a { padding-right: 0; }

.social-media li a { padding: 12px;}

.social-media li a, 
.launch-search, 
.launch-search a { color: #eeb03e; }

.social-media li a:hover, .launch-search a:hover { color: #fff; }

.social-media li a span {
	visibility: hidden;
	width: 1px;
	display: inline-block;
}

.launch-search {
	position: absolute;
	top: 25px;
	right: 0;
}

#header.active div.launch-search { display: none; }

.launch-search span {
	display: inline-block;
	padding-left: 10px;
	font: 1em "DIN";
	text-transform: uppercase;
}


/* 2.1 header ------------------------------------------ */

header {
	width: 100%;
	height: 247px;
	margin-bottom: 30px;
	background-color: #000;
	color: #fff;
	text-align: center;
	position: absolute;
	z-index: 999;
	-webkit-transition: all 0s ease;
	transition: all 0s ease;
}

header > .container { height: 100%; }

header.active {
	height: 50px;
	margin: 0;
	position: fixed;
	animation: aniheader 0.5s;
}

header.active .container { height: 50px; }

@-webkit-keyframes aniheader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes aniheader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#logo {
	width: 175px;
	height: 157px;
	margin: 25px auto 65px;
}

#wordmark { display: none; }

header.active #logo {
    width: 44px;
    margin: 8px 0 0;
    height: 50px;
	position: absolute;
    top: 0;
    left: 0;
	display: none;
}

header.active #wordmark {
	width: 228px;
	position: absolute;
    top: 10px;
    left: 0;
	display: block;
}

header.active #nav {
	padding-top: 13px;
	display: inline-block;
	position: relative;
	bottom: auto;
	vertical-align: top;
}

header .social-media {
	position: absolute;
	top: 20px;
	left: 0;
}

header .social-media .launch-search { display: none; }

header.active .social-media {
	margin: 10px 0 0 0;
	display: inline-block;
	top: auto;
	left: auto;
	right: 0;
}

header.active .social-media .launch-search {
	display: inline-block;
	position: relative;
	top: auto;
}

header.active .launch-search { display: none; }


/* 2.2 sectionheaders & storyblocks  ------------------- */

.sectionheader {
	margin-bottom: 25px;
	z-index: 1;
	text-align: center;
	color: #f2000f;
	font: 900 0.8em "Roboto";
	text-transform: uppercase;
}

.bg-black .sectionheader { color: #eeb03e; }

.sectionheader:before {
	width: 100%;
	margin: 0 auto;
	border-top: 1px solid #f2000f;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	content: "";
	z-index: -1;
}

.bg-black .sectionheader:before { border-color: #eeb03e; }

.sectionheader h3, .sectionheader h2, .sectionheader h1 {
	padding: 0 10px;
	font-size: 0.9em;
	background-color: #fff;
	display: inline-block;
}

.sectionheader h1 {
	font-size: 3em;
	font-weight: bold;
}

.bg-black  .sectionheader h2 { font-size: 1.6em; }

.bg-black .sectionheader h2, 
.bg-black .sectionheader h3 { background-color: #000; }

.mini-sectionheader {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 5px;
	background-color: #f3000f;
	color: #fff;
	z-index: 1;
}

.mini-sectionheader h3 {
	padding: 3px 5px;
	font: bold 0.7em "Roboto";
	text-transform: uppercase;
}

.mini-sectionheader h3 a { #fff; }

.storyblock, .wordblock, .jp-relatedposts-post { margin-bottom: 50px; }

.storyblock.with-header { padding-top: 5px; }

.features .storyblock { margin-bottom: 30px; }

.storyblock h4, .quote-author h4, h4.jp-relatedposts-post-title {
	font-size: 0.9em;
	line-height: 1.4em;
	font-weight: bold;
}

.storyblock h4 a, h4.jp-relatedposts-post-title a { color: #000; }

.blockwrap .storythumb { padding-bottom: 50px; }

.blockwrap .deets {
	padding-top: 8px;
	position: absolute;
	bottom: 0;
	background-color: #fff;
}

.storythumb, .jp-relatedposts-post-thumbs img { margin-bottom: 10px; }

.storyblock.with-header .storythumb { margin-top: 5px; }

.storyblurb {
	padding: 0;
	font: 300 1em/1.5em "Roboto";
}

.storyblock .deets .storyblurb {
	margin-top: 8px;
	font-size: 0.8em;
}

.byline {
	letter-spacing: 0.1em;
	font-size: 0.9em;
	font-style: italic;
	text-align: center;
}

.byline a { color: #000; }

.byline span {
	font-style: normal;
	text-transform: uppercase;
}

.wordblock blockquote {
	margin-bottom: 20px;
	padding: 15px 20px;
	font-size: 0.9em;
	line-height: 1.7em;
}

.quote-author img {
	width: 80px;
	height: auto;
	display: inline-block;
	margin-right: 15px;
	border-radius: 100%;
	float: left;
}

.quote-author h4 {
	width: calc(100% - 95px);
	float: right;
}

.quote-author h4 a { color: #000; }

.follow { text-align: center; }

.follow ul {
	margin: 0 auto;
	display: inline-block;
}

.follow li { margin-bottom: 30px; }
.follow li:last-child { margin-bottom: 0; }

.follow .icon {
	width: 42px;
	margin-right: 12px;
	display: inline-block;
	vertical-align: middle;
}

.follow .followers {
	width: calc(100% - 58px);
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

.follow .followers strong {
	padding-bottom: 5px;
	display: block;
	font-size: 1.4em;
}

.follow .followers span {
	font: 400 0.7em "Roboto";
}

.follow a { color: #efefef; }
.follow a:hover { color: #000; }

.follow .fa-stack-1x, .follow a .fa-stack-1x { color: #000; }
.follow a:hover .fa-stack-1x { color: #efefef; }


/* 2.3 nav slideout  ----------------------------------- */

#navOverlay {
	background-color: #000;
	color: #fff;
}

#navOverlay a { color: #fff; }

#navpanel { padding: 20px; }

#navpanel #logo {
	width: 75px;
	height: 68px;
	margin: 10px auto 20px;
	display: block;
}

#navpanel ul#menu-byp-supreme-main-menu li { padding-bottom: 10px; }

#navpanel .social-media li a { color: #eeb03e; }
#navpanel .social-media li.launch-search { display: none; }

#navpanel ul#menu-byp-supreme-secondary-menu { padding-bottom: 5px; }
#navpanel ul#menu-byp-supreme-secondary-menu li { 
	padding-bottom: 10px;
	font: 400 0.7em "Roboto";
	text-transform: uppercase;
}

/* 2.4 search overlay  --------------------------------- */
	
.overlayAll {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	text-align: center;
	position: fixed;
	overflow-y: scroll;
	color: #fff;
	display: none;
}

.overlayAll a { color: #fff; }

.overlayWrap {
	margin: 0 auto;
	position: absolute;
	top: calc(50% - 72px);
	left: 0;
	right: 0;
}

.overlayAll .closeme {
	display: block;
	color: #fff;
	position: fixed;
	top: 20px;
	right: 25px;
	z-index: 9999;
}

#searchOverlay { z-index: 10003; }

body.disable-scrolling #searchOverlay {
	text-align: center;
	z-index: 10003;
}

#searchOverlay form {
	width: 700px;
	margin: 0 auto;
}

#searchform label {
	display: block;
	padding-bottom: 30px;
	font: 400 1.2em "Roboto";
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

#searchform label img {
	width: 300px;
	margin: 10px auto 0;
}

#searchform input {
	width: calc(100% - 44px);
	display: inline-block;
	padding: 10px 10px 10px 0;
	vertical-align: middle;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #fff;
	font: 1em/1em 'Playfair Display';
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
}

#searchform button {
	width: 30px;
	display: inline-block;
	vertical-align: middle;
	background-color: transparent;
	border: none;
}

#searchform button a, .overlayAll .closeme a {
	display: block;
	color: #fff;
}

#searchform button a:hover, .overlayAll .closeme a:hover {
	text-decoration: none;
	cursor: pointer;
	color: #f3000f;
}

	
/* 2.5 newsletter sign-up  ----------------------------- */

.newsletterCTA {
	width: 100%;
	padding: 25px 0;
	background-color: #000;
	color: #fff;
	text-align: center;
}

#homepage .newsletterCTA { margin-bottom: 50px; }

.newsletterCTA h3 {
	margin-bottom: 18px;
	font-size: 2em;
	font-weight: 400;
}

.newsletterCTA form {
	width: 700px;
	margin: 25px auto 0;
}

.newsletterCTA .formrow {
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}

.formblock { text-align: left; }

form label {
	margin-bottom: 10px;
	display: block;
	font: 700 0.8em "Roboto";
	text-transform: uppercase;
}

form input[type=text] {
	padding: 10px 15px;
	font: italic 400 0.8em "Roboto";
}

.newsletterCTA form input[type=text] {
	width: 190px;
	background-color: #000;
	border: 1px solid #eeb03e;
	color: #eeb03e;
}

.required {
	padding-right: 5px;
	color: #f3000f;
} 

.bg-black .note {
	font: 400 0.7em "Roboto";
	color: #565656;
}

.bg-black .activated .note { padding-top: 20px; }

.expanded-content { 
	height: 0;
	opacity: 0;
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.activated .expanded-content {
	height: auto;
	margin-top: 25px;
	opacity: 1;
}

.listrow {
	margin: 25px 0;
	text-align: left;
}

.listrow li {
	margin-left: 25px;
	display: inline-block;
}

.listrow li span {
	margin-left: 5px;
	font: italic 400 0.8em "Roboto";
}

.listrow label { margin: 0 0 10px 25px; }

.continue { margin: 20px 0; }

#success_message {
	display: block;
	margin-top: 20px;
	font: 400 0.9em "Roboto";
	color: #5dff5d;
}

.ctct-form-errorMessage {
	color: #f3000f;
	font: 400 0.6em "Roboto";
}

.formblock .ctct-form-errorMessage {
	position: absolute;
	top: 0;
	right: 0;
	text-align: right;
}

.listrow  .ctct-form-errorMessage { margin: 0 0 5px 25px; }


/* 2.6 footer  ----------------------------------------- */

footer {
	width: 100%;
	padding: 25px 0;
	color: #fff;
	text-align: center;
	border-top: 1px solid #eeb03e;
}

footer.bg-black { background-color: #151515; }

#homepage footer.bg-black {
	background-color: #000 !important;
	border: none;
}

footer a { color: #fff; }
footer a:hover { color: #eeb03e; }

.footer-wrapper {
	width: 800px;
	margin: 0 auto;
}

.footer-logo {
	width: 100%;
	text-align: right;
}

.footer-logo img {
	width: 70px;
	display: inline-block;
}

footer li { display: inline-block; }

footer ul { 
	padding-top: 12px;
	text-align: left;
	font: 400 1em/2em "DIN";
	text-transform: uppercase;
}

footer li a { padding: 10px; }
footer li:first-child a { padding-left: 0; }

footer.bg-black .note { padding-top: 0; }




/* 
-------------------------------------------------------
3.0 homepage
------------------------------------------------------- */

/* 3.1 top story -------------------------------------- */

.features { padding-top: 10px; }

.topstory-sectionheader {
	padding: 8px 10px 5px 8px;
	font: 900 0.7em "Roboto";
	text-transform: uppercase;
	background-color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
}

topstory-sectionheader h2 { color: #f3000f; }

.topstory h4, .category-mainstory h4 {
	margin-bottom: 12px;
	font-size: 2.3em;
	line-height: 1.1em;
}

.topstory h4 a { padding: 0 7px; }

.topstory h4 a, .category-mainstory h4 a { color: #000; }

.topstory .storyblurb, .category-mainstory .storyblurb { margin-bottom: 12px; }

.topstory .slide { float: left; }


/* 3.2 videos & podcast ------------------------------- */

#site .media .bx-wrapper { margin-bottom: 0; }

.media .storyblurb {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.videos .storythumb, 
.podcast .storythumb {
	max-height: 366px;
	margin-bottom: 20px;
	overflow: hidden;
}

.videos .story-title, .podcast .story-title {
	width: calc(100% - 40px);
	padding: 12px 20px 20px;
	position: absolute;
	bottom: 0;
	background: transparent url(media/images/transp-000.png);
	z-index: 2;
}

.videos .story-title h4, .podcast .story-title h4 {
	font-size: 1.8em;
	line-height: 1.2em;
	font-weight: 400;
}

.videos .play-button {
	width: 100%;
	height: 100%;
	display: block;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.videos .play-button:before {
	margin: 0 auto;
	font-size: 8em;
	opacity: .5;
	position: relative;
	top: 80px;
}

.videos .storythumb a, 
.podcast .storythumb a { color: #fff; }

.podcast .storythumb .flex-wrapper {
	width: calc(100% - 100px);
	padding-left: 50px;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	top: 0;
	bottom: 0;
}

.podcast .flex-wrapper .deets {
	width: calc(100% - 40px);
	padding: 12px 20px 20px;
	background: transparent url(media/images/transp-000.png);
}

.podcast .play-episode { padding-top: 10px; }

.play-episode .fa, .podcast .subscribe .fa { font-size: 0.75em; }

.play-episode .fa:before, .podcast .subscribe .fa:before {
	 width: 1.5em;
	 display: inline-block;
}

.podcast .play-episode span, .podcast .subscribe li a span {
	font: 0.9em "Roboto";
	text-transform: uppercase;
}

/*.podcast .story-title { margin-bottom: 5px; }*/

.podcast .subscribe li { height: 20px; }


/* 3.3 category blocks ---------------------------------*/

.category-block { margin-bottom: 50px; }

.category-block h2 { font-size: 1.6em; }

.category-stories { padding-top: 12px; }

.category-stories > .col-2:nth-of-type(3) { clear: left; }

.category-block .more { margin-top: 0; }


/* 3.4 slider ------------------------------------------*/

#site .bx-wrapper {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border: 0;
	background: transparent;
	overflow: hidden;
}

#site .bx-wrapper .bx-viewport { padding-bottom: 30px; }

#site .bx-wrapper .bx-controls { position: unset; }

#site .bx-wrapper .bx-controls .bx-controls-direction {
	width: 100%;
	height: 20px;
	position: absolute;
	bottom: 0;
	font: 400 0.6em "Roboto";
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

#site .bx-wrapper .bx-controls .bx-controls-direction .bx-prev, 
#site .bx-wrapper .bx-controls .bx-controls-direction .bx-next {
	width: auto;
	height: auto;
	background: none;
	text-indent: 0;
	top: auto;
	left: 0;
	bottom: 0;
}

#site .bg-black a.bx-prev, #site .bg-black a.bx-next { color: #eeb03e; }

#site .bx-wrapper .bx-controls .bx-controls-direction .bx-next {
	right: 0;
	left: auto;
}

#site .bx-wrapper .bx-controls .bx-controls-direction .bx-prev:before {
	padding-right: 5px;
	content: '<';
}

#site .bx-wrapper .bx-controls .bx-controls-direction .bx-next:after {
	padding-left: 5px;
	content: '>';
}

#site .bx-wrapper .bx-pager {
	width: 125px;
	margin: 0 auto;
	padding-bottom: 0;
	color: #f3000f;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
}

#site .bg-black .bx-wrapper .bx-pager { color: #eeb03e; }

#site .bx-wrapper .bx-pager.bx-default-pager a.active {
	background-color: #f3000f;
	border: 1px solid #f3000f;
}

#site .bg-black .bx-wrapper .bx-pager.bx-default-pager a.active {
	background-color: #eeb03e;
	border: 1px solid #eeb03e;
}
 
#site .bx-wrapper .bx-pager.bx-default-pager a:focus, 
#site .bx-wrapper .bx-pager.bx-default-pager a:hover, 
#site .bx-wrapper .bx-pager.bx-default-pager a {
	width: 8px;
	height: 8px;
	background: #fff;
	border: 1px solid #f3000f;
}

#site .bg-black .bx-wrapper .bx-pager.bx-default-pager a:focus, 
#site .bg-black .bx-wrapper .bx-pager.bx-default-pager a:hover, 
#site .bg-black .bx-wrapper .bx-pager.bx-default-pager a { 
	background: #000;
	border: 1px solid #eeb03e;
}

#site .bg-black .bx-wrapper .bx-pager.bx-default-pager a:hover { background: #eeb03e; }




/* 
-------------------------------------------------------
4.0 article
------------------------------------------------------- */

body#single #site > .container { max-width: 1150px; }

.articleheader {
	margin: 0 auto 5px;
	text-align: center;
}

article .articleheader .byline { text-align: center; }

.entryheader { margin-bottom: 10px; }

.hero-img, .userblock, .featured-img { margin-bottom: 30px; }

.hero-img .wp-caption-text { text-align: center; }

.entry ul.meta { margin: 0; }

.meta li {
	display: inline-block;
	font: 0.7em/1em "Roboto";
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.meta li:before {
	margin-left: 5px;
	padding-right: 10px;
	content: "|";
}

.meta li:first-child:before {
	margin: 0;
	padding: 0;
	content: "";
}

.meta li a { font-weight: 700; }

article .byline {
	margin: 15px 0;
	text-align: left;
}

.articlebody { margin: 0 0 20px; }

.col-23.pad-right.entrycol { width: calc(100% - 335px); }

body#single .sidebar.col-4.pad-left {
	width: 310px !important;
	padding: 0;
}

.entry h4 { padding-bottom: 20px; }

.tweet-quote {
	width: 300px;
	margin: 0 25px 15px 0;
	float: left;
}

.tweet-quote blockquote {
	padding: 0 0 10px;
	background-color: transparent;
}

.tweet-quote blockquote p {
	padding: 0 0 0 40px !important;
	font-style: normal;
	font-weight: 700;
	font-size: 1.1em;
}

.tweet-quote blockquote p:before {
	color: #eeb03e;
	font-size: 3.5em;
	top: 13px;
	left: 0;
}

.tweet-quote .quote-author {
	padding: 0 0 12px 40px;
	font-size: 1.2em;
}

.tweet-this {
	padding-left: 40px;
	color: #eeb03e;
	font-size: 0.8em;
}

.tweet-this a { color: #eeb03e; }

.tweet-this .fa span {
	font: 700 1em "Roboto";
	text-transform: uppercase;
}

.tagged {
	margin-bottom: 30px;
	font: 0.8em "Roboto";
}

.tagged h4 {
	width: 60px;
	display: inline-block;
	color: #f3000f;
	font-weight: 700;
	text-transform: uppercase;
}

#single .userblock { margin-top: 30px; }

.userblock .avatar {
	width: 135px;
	height: 135px;
	margin-right: 30px;
	float: left;
	vertical-align: top;
}

.userblock .avatar img { border-radius: 100%; }
	
.userblock .bio {
	width: calc(100% - 165px);
	float: right;
	vertical-align: top;
}

.userblock .bio h3 {
	margin-bottom: 10px;
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
}

.userblock .bio h3 a { color: #000; }

.userblock .bio p { padding-bottom: 0; }

.side-bucket { margin-bottom: 50px; }

.top-stories .storyblock {
	margin-bottom: 30px;
	position: relative;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	counter-increment: row;
}

.top-stories .storyblock img, .tptn_posts_daily .storyblock img {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.top-stories .storyblock:hover .deets, .tptn_posts_daily .storyblock:hover .tptn_after_thumb { background-color: transparent;}
.top-stories .storyblock:hover img, .tptn_posts_daily .storyblock:hover img { opacity: .2; }
.top-stories .storyblock:hover h4, .tptn_posts_daily .storyblock:hover .tptn_after_thumb a { color: #000; }

.top-stories .storyblock:last-child { margin: 0; }

.top-stories li.storyblock:before {
    width: 25px;
    height: 25px;
    content: counter(row);
    font: 700 0.8em/25px "Roboto";
	color: #fff;
	background-color: #f3000f;
    text-align: center;
    border-radius: 25px;
    position: absolute;
    top: -12px;
    left: 6px;
	z-index: 200;
}

.top-stories .storythumb { 
	max-height: 180px;
	overflow: hidden;
}

.top-stories .storyblock .deets, .tptn_posts_daily .tptn_after_thumb {
	width: calc(100% - 40px);
	margin-left: 20px;
	position: absolute;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	/* safari fix: */
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.tptn_posts_daily .tptn_after_thumb {
	font-size: 0.9em;
	line-height: 1.4em;
	font-weight: bold;
}

.top-stories .storyblock h4, .tptn_posts_daily .tptn_after_thumb a {
	padding: 12px 20px 20px;
	color: #fff;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.tptn_posts_daily .tptn_after_thumb a { display: block; }

.top-stories .storyblock h4 a, .tptn_posts_daily .tptn_after_thumb a { color: #fff; }

.jp-relatedposts-post-thumbs img { max-height: 146px; }

.jp-relatedposts-post { width: calc(33.3333% - 15px); }

.jp-relatedposts-post-excerpt { display: none; }

.jp-relatedposts-grid {
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}

.comments-embed { margin-bottom: 50px; }




/*
-------------------------------------------------------
5.0 page
------------------------------------------------------- */

body#pagepage .articlebody h2 {
	margin-bottom: 20px;
	font: 700 1.2em "Roboto";
}

body#pagepage .articlebody h2:hover { color: #000; }

body#pagepage .articlebody h2:hover { cursor: pointer; }

.about-menu {
    margin: -15px 0 30px;
    text-align: center;
	font: 400 0.8em "Roboto";
	text-transform: uppercase;
}

.about-menu li { display: inline-block; }

.about-menu li ul {
	display: inline-block;
	vertical-align: middle;
}

.about-menu li a {
	padding: 10px;
	color: rgba(0, 0, 0, 0.45);
}
 
.about-menu li.current-menu-item a, 
.about-menu li.menu-item a:hover { color: #000; }
.about-menu li.current-menu-item ul.sub-menu li a { color: rgba(0, 0, 0, 0.45) }

.about-menu li.current-menu-item { font-weight: 700; }
.about-menu li.current-menu-item ul.sub-menu { font-weight: 400; }


/* 5.1 staff -------------------------------------------*/

body.people .userblock.user-admin {
	padding-bottom: 20px;
	border-bottom: 1px dotted #f4524d;
}

body.people .userblock.user-staff {
	width: calc(50% - 22px);
	margin: 0 20px 20px 0;
	padding-top: 30px;
	display: inline-block;
	vertical-align: top;
	border-top: 1px dotted #f4524d;
}

body.people .userblock.user-staff.first-two {
	padding-top: 0;
	border-top: none;
}

body.people .userblock.user-staff.odd /* added in jquery */ { margin: 0 0 20px 20px; }

body.people .userblock.user-staff:first-of-type, body.people .userblock.user-staff:nth-of-type(2) {}

body.people .userblock .bio h3 {
	margin-bottom: 5px;
	font: 700 1.2em "Roboto";
	color: #f3000f;
}

body.people .userblock.user-admin .bio h3 { font-size: 1.5em; }

body.people .userblock .bio h3 a { color: #f3000f; }

.userblock .position {
	margin-bottom: 20px;
	font: 400 0.8em "Roboto";
	text-transform: uppercase;
}

.userblock.user-admin .position { font-size: 1em; }

.userblock.user-staff .bio .storyblurb { font-size: 0.9em; }

body.people .userblock.user-staff .avatar {
	width: 120px;
	height: 120px;
	margin: 0 0 20px;
	float: none;
}

body.people .userblock.user-staff .bio {
	width: 100%;
	float: none;
}


/* 5.2 tabbed template ---------------------------------*/

.tab { margin-bottom: 20px; }

body#pagepage .articlebody .tabbed h2 {
	font-size: 1em;
	text-transform: uppercase;
	color: #f3000f;
}

body#pagepage .articlebody h2 span {
	margin-right: 8px;
	padding: 0 2px;
	font-size: 0.7em;
	vertical-align: middle;
}

.tab.tab-collapsed .entry { display: none; }

.tab .entry li { padding-bottom: 20px; }

.tab .entry li ul li, .tab .entry li:last-child { padding-bottom: 0; }

.tab .entry ul { margin-bottom: 0; }

.books-container {
	margin-bottom: 20px;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}

.books-container .book { width: 30%; }

.books-container .book-cover {
	width: 100px;
	margin-bottom: 10px;
}

.books-container .book-cover img { max-height: 160px; }

.books-container .book-info {
	font-size: 0.9em;
	line-height: 1.5em;
}

.books-container .book-info .book-title {
	margin-bottom: 8px;
	display: block;
	font-style: italic;
}




/* 
-------------------------------------------------------
6.0 archive (category, author)
------------------------------------------------------- */

.category-mainstory .byline {
	text-align: left;
	font-size: 0.75em;
}

.category-mainstory .storyblurb { margin-bottom: 6px; }

.archivelist { margin-top: 25px; }

.archivelist .row { 
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
}

.archivelist .row .col-3.pad-right { width: calc(33.3333% - 20px); }

.archivelist .storythumb img { max-height: 175px; }

.userblock .sectionheader {
	margin-bottom: 15px;
	text-align: left;
}

.userblock .sectionheader h1 {
	padding-left: 0;
	font-size: 1.5em;
}

.userblock .social-media li a { color: #f3000f; }

body.authorpage .sidebar { margin-top: 4px; }

body.authorpage .container > .sectionheader { display: none; }

h2.all-posts {
	font: 700 0.8em "Roboto";
	text-transform: uppercase;
	color: #f2000f;
}

.wp-pagenavi {
	margin-bottom: 30px;
	clear: both;
	text-align: center;
	font-family: "Roboto";
	font-size: 0.9em;
}

.wp-pagenavi a, .wp-pagenavi span {
	margin: 2px;
	padding: 3px 5px;
	text-decoration: none;
	border: 1px solid #fff;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current { border-color: #000; }

.wp-pagenavi span.current { font-weight: bold; }