/*
    Theme Name: myTheme
    Theme URI: https://www.hamiltrowebsitedesign.com
    Description: DAVE K PROJECT THEME
    Version: 1.
    Author: hamiltro
*/

/* HTML / FONTS
------------------------------------------------------------------------------------*/
html {
  font-size: 24px;
}
@media (max-width: 2048px) {
  html { font-size: 17px;}
}

@media (max-width: 900px) {
  html { font-size: 15px; }
}
@media (max-width: 400px) {
  html { font-size: 13px; }
}
/* From here on, use rems (or % or vh) for divs and ems for font-sizes within divs) */


@font-face {
	font-family: 'FuturaPT';
	src: url('./assets/fonts/FuturaPT-Light.eot');
	src: url('./assets/fonts/FuturaPT-Light.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/FuturaPT-Light.woff') format('woff'),
		url('./assets/fonts/FuturaPT-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display:swap;
}

@font-face {
    font-family: 'Braggadocio';
    src: url('./assets/fonts/Braggadocio.woff2') format('woff2'),
        url('./assets/fonts/Braggadocio.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* PALETTE / VARIABLES
*****************************************/
:root {
	--body-color: #666;
	--body-alt-color: #EEE;
	--background-color: #980000;
	--a-color: #980000;
	--a-hover-color: #444;
	--outline-color: #DDD; /* tabbing */
	--siteTitle-color: #980000; /* DEEP RED */
	--siteTitle-hover-color: GREY; /*  */
	--pageTitle-color: BLACK; /*  */
	--navbar-wrapper-background-color: #0e0e0e;
	--mainNav-text-link-color: #c40000;
	--mainNav-text-link-hover-color: #FFF;
	--sub-menu-li-bg-color: rgba(238,245,249,0.98);
	--sub-menu-li-bg-hover-color: rgba(243,250,254,0.98);
	--sub-menu-li-border-color: rgba(209, 230,246,0.25);
	--readMore-a-color: #333333;
	--readMore-a-border-color: rgba(0,0,0,0.2);
	--readMore-a-background-color: rgba(0,0,0,0.2);
	--readMore-a-hover-color: #000;
	--readMore-a-hover-border-color: rgba(0,0,0,0.1);
	--readMore-a-hover-background-color: rgba(0,0,0,0.1);
	--border-subtle-color: TRANSPARENT;
	--form-input-border-color: TRANSPARENT;
	--form-button-bg-color: TRANSPARENT;
	--form-button-text-color: TRANSPARENT;
	--form-button-bg-hover-color: TRANSPARENT;
	--wpcf7-sent-color: BLACK;   /*  */
	--footer-background-color: #0e0e0e;;
	--footer-border-color: #888;
	--footer-color: #CCC;
	--footer-a-color: #DDD;
	--footer-button-color: #FFF;
	--footer-button-background-color: #980000;
	--footer-button-hover-color: #000;
	--footer-button-background-hover-color: #FFF;
	--footer-credit-color: #aaa;
	--footer-credit-a-color:#bbb;
	--footer-a-hover-color:#FFF;
	--social-icon-color: #999; /* bg to white color */
	--social-icon-hover-color: #CCC; /* bg to black color */
	--edit-link-color: #000;
	
	--font-siteTitle:  Braggadocio, sans-serif;
	--font-nav:   Oswald,'FuturaPT', 'Open Sans', sans-serif;
	--font-body: 'Open Sans', sans-serif; 
	--font-readMore:  Oswald,,'FuturaPT', 'Open Sans', sans-serif;
	--font-quote: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;
}

body {
	background-color: var(--background-color); /* HEX fallback */
	background-color: color(srgb 0.5962 0 0);/* Safari-ok; not Chrome or Firefox */
	background-color: hsl(0, 100%, 29.8%);/* Firefox, Safari & Chrome-ok;*/
	background-color: color(display-p3 0.545 0.091 0.008);/* Safari-ok; not Chrome or Firefox */
}

h1.mainSiteTitle {
	font-size: 2.4em;
	letter-spacing: 0.01em;
	line-height:1.2em;
	margin-bottom:0;
}

@media (max-width: 951px) {
	h1.mainSiteTitle,
	.navbar-header.navbar-icon {top: 66px;}
}
@media  (max-width: 414px) and (orientation: portrait) {
	.navbar-wrapper {min-height: 130px;}
}

@media (max-width: 667px)	{
	h1.mainSiteTitle {font-size: 2.1em;}
}

@media (max-width: 300px)	{
	h1.mainSiteTitle {font-size: 1.7em;}
	.navbar-wrapper {min-height: 100px;}
}

h1.mainSiteTitle  a:link	{
	text-shadow: 1px 1px 1px #fff;
}

.sectionTitle,
.pageTitle{
	font-family: var(--font-siteTitle);
	font-size: 2.5em;
	margin-bottom: 2em;
}

/* AUDIO PLAYERS
*****************************************/

.audioRow	{
	width: 100%;
}

/*@media (min-width: 600px)	{
	.audioTitle	{
		width: 24%;
		text-align: right;
		padding: 1em 12px 0 0;
		float:left;
	}
	.audioPlayer	{
		width: 70%;
	}
}

.h5ap_standard_player {
	margin-bottom: 40px !important;
}*/

audio.player {
	background-color: var(--background-color);
}

.plyr { 
	font-family: Oswald, sans-serif !important;
	
}

.audioTitle p{ text-transform: uppercase !important;}

.plyr__time {
	font-size: 1em !important;
}

a.plyr__controls__item.plyr__control {
	display: none !important; /* the download option */
}

.plyr--audio .plyr__controls {
	background: rgba(41,41,41,1.0) !important; 
	background-image:linear-gradient(360deg, #272727 0%, #2b2b2b 14.14%, #2e2e2e 28.29%, #323232 42.43%, #363636 56.57%, #393939 70.71%, #414141 99%), radial-gradient(100% 100% at 50% 100%, #feb2b2 0%, rgba(252, 184, 219, 0.75) 25%, rgba(239, 194, 250, 0.5) 50%, rgba(190, 227, 248, 0) 100%)!important;
	border: 2px solid BLACK;
	padding: .5em !important; /* was 0.9em when full-width */
}

.plyr__control svg,{ 
	fill: WHITE !important;
}
.plyr--full-ui input[type="range"] {
	color: BLACK !important;
}	

.plyr--audio .plyr__control.plyr__tab-focus, 
.plyr--audio .plyr__control:hover, 
.plyr--audio .plyr__control[aria-expanded="true"] {
	background: BLACK !important;
}

.plyr--audio .plyr__progress__buffer {
    color: rgba(193, 201, 209, 0.66);
    color: rgba(255, 255, 255, 0.66) !important;
}

.plyr--audio .plyr__controls {
	color: #c4c4c4 !important;
}
a.lyrics_link{
	color: #000;
}
a.lyrics_link:hover{
	color: #fff;
}

div.tracks > div {
	min-height: 120px;
}
 
 .tracks	{
	margin: 3em auto;
}

.audioTitle {
	font-weight: bold;
}

@media (min-width: 600px)	{
	.audioTitle	{
		width: 100%;
		text-align: left;
		padding: 1em 12px 0 0;
		float:left;
	}
	.audioPlayer	{
		width: 100%;
	}
}
.video_embed{
	text-align: center;
}

/* SCREENSIZE TESTER
*****************************************/
p.screensize {display: none;} /* BLOCK FOR TESTING; NONE FOR LIVE */
p.screensize	{font-size: .5em; padding: 4px 10px;margin:0;max-width: 100%;text-align: right; color: green;background-color: #fff;}

@media (max-width: 992px) {p.screensize	{color: orange;}}
@media (max-width: 768px) {p.screensize	{color: red;}}