/*
Theme Name: Weird History Podcast
Theme URI: http://www.weirdhistorypodcast.com
Author: Upswept Creative
Author URI: http://www.upsweptcreative.com
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: InterestingTimes
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

InterestingTimes is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
4.0 - Slider
5.0 - Navigation
6.0 - Footer
7.0 - Alignments
9.0 - Widgets
10.0 - Content
	10.1 - Homepage Content
	10.2 - Posts and pages
	10.3 - Asides
	10.4 - Comments
11.0 - Infinite scroll
12.0 - Media
	12.1 - Captions
	12.2 - Galleries
--------------------------------------------------------------*/

body {
	font-family: 'PT Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Pathway Gothic One', Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 56px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

a {
	color: #a90005;
}

a:hover, a:visited {
	color: #6c1010;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

.entry-header {
	background: url('https://www.weirdhistorypodcast.com/wp-content/uploads/2019/02/Laelops-Charles_Knight-1896.jpg') top center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: -10px;
}

.page-header {
	padding: 15px 20px 15px 230px;
	text-shadow: 2px 2px 0px #000;
	color: #FFF;
}

.page-header .entry-title {
	background: none !important;
}

.entry-title {
	background: #CCC;
}

.entry-title a {
	background: #FFF;
	padding: 0 10px;
}

.date-block {
	position: relative;
	background: #000;
	color: #FFF;
	font-size: 20px;
	padding: 8px 10px;
	top: -5px;
}

.edit-link {
	background: #DDD;
	margin: 5px;
	padding: 5px;
	font-size: 12px;
}

.tags-links {
	margin-left: 5px;
}

.entry-meta, .posted-on, .byline {
	font-family: 'Pathway Gothic One', Arial, Helvetica, sans-serif;
	font-size: 20px;
}

.powerpress_player {
	margin: 10px 0;
	padding: 10px;
	background: #DDD;
}

.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
	background: #6c1010 !important;
}


@media screen and (max-width: 768px) {
	h1 {
		font-size: 48px;
	}

	h2 {
		font-size: 30px;
	}

	h3 {
		font-size: 24px;
	}

	h4 {
		font-size: 20px;
	}

	.date-block {
		font-size: 16px;
		padding: 7px 8px;
		top: -6px;
	}

}

/*--------------------------------------------------------------
4.0 Slider
--------------------------------------------------------------*/
.carousel {
	width:100vw;
	min-height: 75vh;
	background: url('http://www.weirdhistorypodcast.com/wp-content/uploads/2019/02/Laelops-Charles_Knight-1896.jpg') center;
	background-repeat: no-repeat;
	background-size: cover;
}

a.carousel-control {
	top: 50px;
	height: 55vh;
	background: none !important;
	color: #EEE;
}

a.carousel-control:hover {
	color: #FFF;
}

.carousel-indicators {
	position: relative;
	padding-top: 30px;
}

.carousel-indicators li {
	border: 1px solid #222;
}

.carousel-indicators .active {
	background: #FFF;
}

.carousel-inner, .item{
	/* height: 100%;
	width: 100vw; */
	text-align: center;
	margin: 0px auto;
	float: none !important;
}

.carousel-message {
	background-color: rgba(0,0,0,0.8);
	display: inline-block;
	margin: 65px auto 0 auto;
	padding: 0 !important;
	color: #fff;
	text-align: left;
}

.carousel-message .slide-body {
	transform: translateY(-45px);
	/* height: 500px;*/
	max-width: 750px;
	padding: 0 25px;
}

.slide-thumbnail{
	background-color: #e3e3e3;
	color:black;
	margin: 0 0 10px 20px;
	float: right;
}

.mobile-slide{
	margin: 10px 0;
	display: none;
}

.type {
	background-color: #6c1010;
	display: inline-block;
	/* height: 30px; */
	line-height: 36px;
	padding: 0 10px;
	transform: translateY(18px);
}

a.button {
	margin: 10px 0;
	padding: 10px 20px;
	background: #8e4343;
	font-family: 'Pathway Gothic One', Arial, Helvetica, sans-serif; 
	font-size: 1.5em;
	color: #FFF;
}

a.button:hover {
	color: #FFF;
	transition: all 0.3s;
	background: #4a0000;
}

.widget .button {
	font-size: 1.1em;
}

.slide-button button{
	border: none;
	border-radius: 0;
	padding-right: 45px;
	transition: all 0.3s;
	background: url('img/arrow.png') no-repeat #8e4343;
	background-position: 90% 50%;
	font-family: 'Pathway Gothic One', Arial, Helvetica, sans-serif; 
	font-size: 1.5em;
	color: #FFF;
}

.slide-button button:hover {
	color: #FFF;
	transition: all 0.3s;
	background: url('img/arrow.png') no-repeat #4a0000;
	background-position: 90% 50%;
}

@media screen and (max-width: 768px){
	a.carousel-control {
		top: 100px;
		height: 75vh;
	}

	.carousel-inner{
		width: 100vw;
	}
	.carousel-inner .item{
		width: 85vw;
		margin-left: 7.5vw;
		margin-right: 7.5vw;
	}

	.carousel-message #message-body{
		font-size: 0.9em;
		float: none;
	}

	.slide-thumbnail{
		display: none;
	}

	.mobile-slide{
		display: block;
		width: 100%;
		height: auto;
	}


	.carousel-message .slide-body #slide-header{
		font-size: 1.7em;
	}

	.slide-button button {
		font-size: 1.3em;
	}

}


.top-episode {
	margin-bottom: 20px;
	padding: 0 20px 20px 20px;
	background: #EEE;
	border: 1px solid #CCC;
}

.top-episode .type {
	color: #FFF;
	transform: translateY(-20px);
}

.top-episode #slide-header {
	margin-top: 0px;
}

.episode-block {
	margin-bottom: 20px;
}

.episode-block img {
	float:right;
	margin: 15px 0 10px 10px;
}

.episode-block .slide-button button {
	font-size: 1.2em;
}


/*--------------------------------------------------------------
5.0 Navigation
--------------------------------------------------------------*/

.navbar {
	top: 32px;
	margin-bottom: 30px;
	border: none;
}

.navbar-toggle{
	border: none;
}

.navbar-default .navbar-toggle:hover{
	background-color: #000;
}

.navbar-default .navbar-toggle .icon-bar{
	height: 5px;
	width:30px;
	background-color: #fff;

}

.navbar-nav {
    width: 100%;
    text-align: center;
}

.navbar-nav li {
	float: none;
	display: inline-block;
	color: #fff;
	font-family: 'Pathway Gothic One', Arial, Helvetica, sans-serif;
	font-size: 20px;
}

.navbar-default .navbar-nav li a {
	padding-bottom: 10px;
	color:#ffffff;
	transition: all 0.2s;
}
.navbar-default .navbar-nav li a:hover {
	border-bottom: solid 5px grey;
	color: #fff;
	transition: all 0.2s;
}

.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover {
	color:#ffffff;
	background-color: #000;
	transition: all 0.3s;
}

.navbar-default .navbar-nav>.open>a {
	border-bottom: 5px solid #e7e7e7;
}

.dropdown-menu {
	background: #333;
}

.dropdown-menu li {
	width: 100%;
}

.dropdown-menu li a:hover {
	 border: 0 !important;
	 background: #000 !important;
}

.logo {
	top: -32px;
	position: absolute;
	z-index: 1;
	height: 120px;
	width: 180px;
	background-color: #ffffff;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.4);
	text-align: center;
}

.navbar-default{
	background-color: #000000;
}

.navbar .container .navbar-header .navbar-brand{
	color: #000;
	width: inherit;
}


.navbar-brand img {
	position: absolute;
	top: 0px;
	width: 180px;
	height: auto;
}

.navbar-default .navbar-toggle:focus{
	background-color: #000;
}

@media screen and (max-width: 998px) {

	.navbar-nav li {
		font-size: 18px;
	}

}

@media screen and (max-width: 767px){

	.logo {
		max-width: 150px;
		height: 105px;
	}

	.logo img {
		max-width: 100%;
	}

	.navbar .container .navbar-header .navbar-brand {
		padding: 0px !important;
	}

	.navbar-collapse{
		padding: 0;
		padding-top: 25px;
	}
	.navbar-collapse .nav {
		width: 100vw;
		margin: 0;
	}
	.navbar-collapse .nav li{
		display: block;
		text-align: left;
	}
	.navbar-collapse .nav li>a:hover{
		border-bottom: none;
	}
	.navbar-collapse .nav .active a{
		border: none;
	}
	.navbar-collapse .nav .active:hover a{
		border: none;
	}

	.page-header {
		padding: 15px 20px;
		text-align: right;
	}

}
/*--------------------------------------------------------------
6.0 Footer
--------------------------------------------------------------*/
.footer-nav{
	padding-top: 25px;
}
.footer-nav .custom-nav .nav li a{
	padding-bottom: 10px;
	background-color: #000;
	color:#ffffff;
	transition: width 0.2s;
}
.footer-nav .custom-nav .nav li a:hover{
	border-bottom: solid 5px grey;
	color: #fff;
	transition: all 0.2s;
}
.footer-nav .custom-nav .navbar-nav .active a, .footer-nav .custom-nav .navbar-nav .active a:hover{
	color:#ffffff;
	background-color: #000;
	border-bottom: 5px solid grey;
	transition: all 0.2s;
}

@media screen and (max-width: 768px){

	.footer-nav .navbar-nav li{
		display: block;
		width: auto;
		font-size: 14px;
	}

	.footer-nav .custom-nav .nav li a{
		padding: 3px;
	}

	.footer-nav .custom-nav .nav li a:hover{
		border-bottom: solid 3px grey;
		color: #fff;
	}
}

#colophon {
	margin-top: 50px;
	background-color: #000;
	position: relative;
	width: 100vw;
}

.footer-logo{
	margin: 30px 0;
	max-width: 150px;
	background-color: #fff;
	float: left;
}

.footer-logo img {
	margin: auto;
	max-width: 100%;
	height: auto;
}

#copyright-col {
	padding-top: 10px;
	background-color: #fff;
	font-size: 11px;
}


.footer-menu {
	margin-left:0;
	padding:0 0 30px 0;
}

.footer-menu li {
	display:inline;
	list-style-type:none;
}

.footer-menu li a {
	border-left:1px solid #ddd;
	padding: 0 8px;
}

.footer-menu > li:first-child > a {
	border-left:none;
	padding:0 8px 0 0;
}

@media screen and (max-width: 768px){
	.footer-logo{
		width: 125px;
		height: 125px;
		margin-left: 0;
	}

	.footer-nav .custom-nav .nav{
		margin:0 0 20px 0;
	}
	.custom-nav{
		text-align: center;
	}
}


/*--------------------------------------------------------------
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;
}


/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/
.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;
}

.home .widget {
	font-size: 1.2em;
}




/*--------------------------------------------------------------
10.0 Content
--------------------------------------------------------------*/
html, #page{
	width: 100vw;
}

#main{
	left:0;
}

#home-container{
	margin-top: 30px;
}

/*--------------------------------------------------------------
10.1 Homepage Content
--------------------------------------------------------------*/

.info-region{
	position: relative;
	top: -10px;
	background-color: #eaeaea;
	width: 100vw;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	padding: 30px 15px;
}
.info-region p{
	max-width: 50vw;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.3em;
	color: #4a0000;
}

.info-region .supsystic-social-sharing {
	display: none !important;
}

.episode-tile{
	margin-bottom: 20px;
	background-color: #6c1010;
	overflow: hidden;
}

.episode-tile:after {
  content: "";
  display: block;
  padding-bottom: 95%;
}

.tile-header{
	min-height: 40px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.75);
	color: #fff;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin: 0;
	font-size: 20px;
}

.episode-tile .hover-content{
	display: none;
	height: 100%;
	width: 100%;
	color: #fff;
	padding: 0 20px 30px 20px;
	font-size: 12px;
}

#recent-posts a:hover{
	text-decoration: none;
}

.episode-tile:hover .hover-content{
	display: block;
}

.episode-tile .hover-container{
	position: absolute;
	height: calc(100% - 20px);
	width: calc(100% - 30px);
	padding-top: 10px;
	-webkit-transition: background 0.35s linear;
  -moz-transition: background 0.35s linear;
  -ms-transition: background 0.35s linear;
  -o-transition: background 0.35s linear;
  transition: background 0.35s linear;
	z-index: 10;
	overflow: hidden;
}
.episode-tile:hover .hover-container{
	background-color: rgba(0,0,0,0.75);
}

.episode-tile #tile-header{
	-webkit-transition: background 0.35s linear;
	-moz-transition: background 0.35s linear;
	-ms-transition: background 0.35s linear;
	-o-transition: background 0.35s linear;
	transition: background 0.35s linear;
}

.episode-tile:hover #tile-header{
	background-color: transparent;
}

/* MEDIA QUERIES */
@media screen and (max-width: 768px) {
	.info-region {
		padding: 15px;
	}

	.episode-tile:hover .hover-content{
		display: none;
	}
	.episode-tile:hover .hover-container{
		background-color: transparent;
	}
	.episode-tile:hover #tile-header{
		background-color: rgba(0,0,0,0.75);
	}

	.info-region p{
		max-width: 80vw;
		font-size: 1em;
		padding: 15px;
	}

}

#home-container{
	padding: 0;
}

#home-content{
	min-height: 200px;
	width: 100%;
	margin: 0px;
}

#recent-posts{
	min-height: 200px;
	display: flex;
	flex-wrap: wrap;
}
#recent-posts-header{
	width: 100%;
	color: #fff;
	height: 50px;
	background-color: black;
	padding: 0px 20px;
	margin: 0;
	line-height: 50px;
	margin-bottom: 10px;
}

#tags{
	min-height: 200px;
	font-size: 1.5em;
}
#tags-header{
	width: 100%;
	color: #fff;
	height: 50px;
	background-color: #6c1010;
	padding: 0;
	padding-left: 20px;
	margin: 0;
	line-height: 50px;
}

@media screen and (max-width: 768px){
	#home-container .row {
		width: 100vw;
	}

  	#recent-posts a{
		width: 100%;
		margin: 10px;
	}

	#recent-posts{
		min-height: 200px;
		/* display: flex;
		flex-wrap: wrap; */
	}
	#recent-posts-header{
		width: 100%;
		color: #fff;
		height: 50px;
		background-color: black;
		padding: 0;
		padding-left: 20px;
		margin: 0;
		line-height: 50px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.episode-tile{
		width: 100%;
		margin: 0;
	}

	#tags{
		min-height: 200px;
		font-size: 1.5em;
	}
	#tags-header{
		color: #fff;
		height: 50px;
		background-color: #6c1010;
		padding: 0;
		padding-left: 20px;
		margin: 0;
		line-height: 50px;
	}

}

/*--------------------------------------------------------------
10.2 Posts and pages
--------------------------------------------------------------*/
.sticky {
}
.hentry {
	margin: 0 0 60px;
}
.byline,
.updated {
	display: none;
}
.single .byline,
.group-blog .byline {
	display: inline;
}
.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.post-navigation {
	margin: 20px 0px;
}

.post-navigation a {
	text-decoration: none;
	color: #FFF;
	font-size: 12px;
}

.nav-previous, .nav-next {
	display: inline-block;
	padding: 5px 10px;
	background: #777;
}

.nav-previous:hover, .nav-next:hover {
	background: #000;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.nav-next {
	float: right;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
10.3 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

.wdform-page-and-images {
	font-family: 'PT Sans', Arial, Helvetica, sans-serif !important;
}

/*--------------------------------------------------------------
10.4 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
--------------------------------------------------------------*/
.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%;
}

/*--------------------------------------------------------------
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;
}
.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 {}