/*
CUSTOM STYLESHEET
---------------------


/* GLOBAL STYLES
----------------
Add styles beneath this line that you want to be applied across your entire site */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'), url("/wp-content/themes/joefrank/fonts/Oswald-Regular.woff") format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: local('Oswald Bold'), local('Oswald-Bold'), url("/wp-content/themes/joefrank/fonts/Oswald-Bold.woff") format('woff');
  font-display: swap;
}

body {font-size: 18px;}

h1,
h2,
h3,
h4 {
    font-family: 'Oswald' !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

/* UI */
body #wrapper #content .button, body #wrapper #content .button:visited, body #wrapper #content .reply a, body #wrapper #content #respond .form-submit input#submit, input[type=submit] {
	background-color: #095c91;
	-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px 0px rgba(0, 0, 0, 0.5);
	box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px 0px rgba(0, 0, 0, 0.5);
	border: 1px solid #0d3b5c;
	color: #fff;
	font-family: "Oswald";
	font-weight: 700;
	text-transform: uppercase;
}

/* Wrapper */
html body #wrapper {
    background-image: url('../wp-content/themes/joefrank/images/joefrank/background_merged_tinteddarker_5500_close.jpg');
    background-repeat: repeat;
    background-color: #fff;
}

/*Padding on sections */
#inner-wrapper {padding: 0px;} 
.nav-toggle.icon, #content, #header, #footer-widgets, footer#footer {
	padding-left: 2em; 
	padding-right: 2em;
}

/* Headder */
#header {
  padding: 0 0 0;
}
header#header {
	background-color: #095c91;
	position: relative;
	padding-top: 0;
}
#logo .site-title a, header#header .site-description {
	font-family: 'Oswald' !important;
    font-weight: normal !important;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    padding-right: 1em;
}
#logo .site-title a {
	font-family: 'Oswald' !important;
    font-weight: normal !important;
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    bottom: -3px;
    display: block;
    width: 50%;
    font-size: 76px;
}
header#header .site-description  {
	padding-left: 50%;
	text-align: right;
	position: absolute;
	bottom: -2px;
	font-size: 18px;
}

/* Content */
#content {padding-top: 1em;}
body.home article header h2 {display: none;}
	/*input#wp-submit:hover {}*/
	input#wp-submit:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	#text-2 a {
		background-color: #255877;
		background-image: url('images/joefrank/button_background.jpg');
		background-size: 300px auto;
		background-position: center center;
		display: block;
		padding: 10px;
		font-family: 'Oswald';
		border: 1px solid rgba(0,0,0,0.25);
		color: #fff;
		font-size: 1.5em;
		line-height: 1.2em;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px solid rgba(255,255,255,0.2);
		-webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px 0px rgba(0, 0, 0, 0.5);
		box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), inset -1px -1px 0px 0px rgba(0, 0, 0, 0.5);
        color: #ddd;
        font-weight: 300;
	}
	#text-2 a strong {font-weight: 700;}
	#text-2 h4 {
		color: #fff;
		font-size: 1em;
		margin-bottom: 0.5em;
	}
	#text-2 a:hover {
		text-decoration: none;
		color: #fff;
	}
	#text-2 a {display: none;}
	body.home #text-2 a {display: block;}

/* Footer */
#credit ul li {float: left;}
#credit ul li a {
	display: block;
	padding-left: 0.5em;
	padding-right: 0.5em;
	border-left: 1px solid #e6e6e6;
}
#credit ul li:first-child a {
	border-left: none;
}
div.footer-widget-2 ul a {
    font-family: "Oswald";
    font-weight: 300;
    color: #555;
    font-size: 2em;
}
div.footer-widget-2 ul li {
	list-style-type: none;
}

/* Mobile STYLES
-----------------
Add styles inside the media query below that you only want to be applied to the desktop layout of your site */
@media only screen and (max-width: 767px) {
	/* Desktop styles go below this line */

	/* overall content */
	
	.nav-toggle.icon, #content, #header, #footer-widgets, footer#footer {
	padding-left: 1em !important; 
	padding-right: 1em !important;
	}

	/* Header / Navigation */
	section.menus #main-nav, section.menus h3 {display: none;}
	body #content {padding-left: 2em; padding-right:2em;}
	nav#navigation {
		background-color: #444;
		-webkit-box-shadow: inset -6px 0px 6px 0px rgba(0, 0, 0, 0.8);  
        box-shadow: inset -6px 0px 6px 0px rgba(0, 0, 0, 0.8);
        border-right: 1px solid rgba(255, 255, 255, 0.8);
	}
	nav#navigation ul li.menu-item a {
		color: #fff !important;
		font-family: 'Oswald' !important;
		font-weight: normal !important;
		text-transform: uppercase;
		font-size: 1.2em;
	}
	nav#navigation ul.sub-menu li.menu-item a {font-size: 1em;}
	nav#navigation ul.nav li {
		border-top: 1px solid rgba(255,255,255,0.2);
		padding-bottom: 0.5em;
		padding-top: 0.5em;
		}
	nav#navigation ul.sub-menu li {
		border-bottom: 0;
		border-top: 0;
		padding: 0em;
		background-color: transparent;
	}
	#logo .site-title a {
    	width: 100%;
    	font-size: 2em;
	}
	header#header .site-description  {
		padding-left: 0%;
		color: #222;
		text-align: left;
		bottom: -80px;
	}
	header#header {
		margin-bottom: 80px;
		padding-top: 20px;
	}

	/* Streaming on top */
	ul.rss li {display: none;}

}

/* DESKTOP STYLES
-----------------
Add styles inside the media query below that you only want to be applied to the desktop layout of your site */
@media only screen and (min-width: 768px) {
	/* Desktop styles go below this line */

  /* Hide Canvas' main navigation, use only top */

body {
	background-color: #000;
	background-image: url('../wp-content/themes/joefrank/images/joefrank/background_merged_tinteddarker_5500_close.jpg');
/*	background-size: 120% auto; */
	background-attachment: fixed;
}
#navigation {display: none !important}
#top {
    font-family: 'Oswald' !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    position: fixed;
    background: rgb(81,81,81); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(81,81,81,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,81,81,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(81,81,81,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(81,81,81,1) 0%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(81,81,81,1) 0%,rgba(14,14,14,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(81,81,81,1) 0%,rgba(14,14,14,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
    width: 100%;
    top: 0px;
    z-index: 500;
    border-bottom: 1px solid #111;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
    #top ul li a {
        font-size: 18px !important;
        font-family: 'Oswald' !important;
        font-weight: 700 !important;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    #top ul li.current-menu-parent a:hover {
        background-color: #000;
        color: #fff;
    }
html body #inner-wrapper {
	background: transparent;
	border: 0;
	margin: 0px;
	box-shadow: inset 0px 0px 30px 0px rgba(20, 20, 30, 0.2);
}
#content {
	padding-left: 2em;
	padding-right: 2em;
}
html body #wrapper {
    margin-top: 4em;
    margin-bottom: 12em;
    border-radius: 0px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border: 0px;
    padding: 0px;
    box-sizing: border-box;
}
div#header {
    height: 150px;
    position: relative;
}
/*html body div#header #logo a {}*/
#main-area {
    position: relative;
    z-index: 200;
}
div#header #logo .site-description {
    font-family: "Oswald";
    font-weight: 300;
    color: #fff;
    width: 50%;
    position: absolute;
    right: 0;
    top: 139px;
    display: block;
    text-align: right;
    font-size: 1.5em;
    line-height: 1.2em;
}

/* Home Stuff */

body.home h3 {font-size: 1em}
body.home .entry ul.products li.product {width: 29%}
#featured-products-home {
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}
#sidebar .feedback-text {
    font-family: "Oswald";
    font-weight: 300;
    font-size: 1.3em;
    line-height: 1.3em;
    padding-left: 4px;
}
#sidebar .feedback-text:first-letter {display: none}
cite.feedback-author {
    text-align: right;
    font-style: normal;
    font-family: "Oswald";
    font-weight: 700;
    text-transform: uppercase;
}

/* footer */

/* Lines */

#main:after {
    content: "";
    position: absolute;
    top: 0;
    right: -15px;
    height: 100%;
    width: 1px;
    box-sizing: content-box;
    border-right: 1px solid #e6e6e6;
}

/* Sidebar */

#sidebar h3 {
    margin-bottom: 0;
    padding-bottom: 0px;
    font-size: 2em;
}
.feedback .flex-direction-nav {top: 8px}

ul.page-numbers {display: none}
/* Took out so the word From: would show.  Not sure why this was ever hidden - LRF 2014-12-01
 */
.from {
	opacity: 1.0;
	font-size: 0.7em;
}

/* Tabs */

html body .shortcode-tabs {background: transparent}
.shortcode-tabs ul.tab_titles li.nav-tab a {
    font-family: 'Oswald';
    font-size: 1.5em;
}
.shortcode-tabs li.ui-tabs-active a {
    border-top: 1px solid #efefef;
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
    border-bottom: 0px;
    color: #000 !important;
}
.shortcode-tabs li a {border-bottom: 1px solid #efefef}

/* End Desktop*/
	
}

#jfplayer {
	background-color: #000;
	background-image: url('../wp-content/themes/joefrank/images/joefrank/background_merged_tinteddarker_5500_close.jpg');
/*	background-size: 120% cover; */
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #fff;
	padding: 0;
	margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}
.shop-link {
  position: relative;
  color: #fff;
  font-size: 80%;
  text-align: center;
  font-weight: bold;
}
.shop-link a {
  color: #fff;
}
#jfplayer h3 {
	background-color: #0d0661;
	margin: 0;
	padding: 1em;
	}
#jfplayer-support {
	position: absolute;
	bottom: 0px;
	background-color: #555;
	width: calc(100% - 27px);
	padding: 1em;
	text-align: center;
	color: rgba(255,255,255,0.5);
	font-size: 0.75em;
}
#jfplayer-support a {
	color: #fff;
	color: rgba(255,255,255,0.75);
}
#jfplayer-close {
	position: absolute;
	right: 1em;
	top: 1em;
	color: #fff;
	color: rgba(255,255,255,0.5);
	background-color: #555;
	display: block;
	padding: 0.5em;
	border-radius: 5px;
	text-decoration: none;
	font-family: 'Oswald';
}
#jfplayer-close span {color: rgba(255,255,255,0.75);}
#jfplayer-close:hover, #jfplayer-close:hover span {color: #fff;}
/*#video {
	text-align:center;
	padding-top: 0%;
}*/
#create-media {
	text-align:center;
	padding-top: 10%;
}
/*video {
  width: 50%    !important;
  height: auto   !important;
}*/