/* #FAD089,#FF9C5B,#F14E1C,#ED303C,#3B8183,#FAD089,#FF9C5B,#F14E1C */

/******* FONTS *******/

@font-face {
	font-family: "BebasNeue-Bold";
	src: url('/_home/Fonts/BebasNeue/BebasNeue-Bold.ttf');
}

@font-face {
	font-family: "JD-Handcrafted";
	src: url('/_home/Fonts/JDHandcraffted/jd.ttf');
}

@font-face {
	font-family: "Aller-Regular";
	src: url('/_home/Fonts/Aller/Aller_Rg.ttf');
}

@font-face {
	font-family: "Aller-Bold";
	src: url('/_home/Fonts/Aller/Aller_Bd.ttf');
}

@font-face {
	font-family: "Aller-Italics";
	src: url('/_home/Fonts/Aller/Aller_It.ttf');
}

@font-face {
	font-family: "Aller-BoldItalics";
	src: url('/_home/Fonts/Aller/Aller_BdIt.ttf');
}

@font-face {
	font-family: "Aller-Light";
	src: url('/_home/Fonts/Aller/Aller_Lt.ttf');
}

@font-face {
	font-family: "Aller-LightItalics";
	src: url('/_home/Fonts/Aller/Aller_LtIt.ttf');
}

@font-face {
	font-family: "Aller-ExtraBold";
	src: url('/_home/Fonts/Aller/AllerDisplay.ttf');
}

@font-face {
	font-family: "Lora";
	src: url('/_home/Fonts/Lora/Lora-VariableFont_wght.ttf');
}

/******* BODY *******/

body {
	font-family: "Aller", "Helvetica Neue", Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;
	font-weight: normal;
	margin: 0;
	font-size: 11pt;
	line-height: 18pt;
	color: #FFFFFF;
	height: 100%;
		-webkit-text-size-adjust: 100%;
}

	body:after {
		content: "";
		position: fixed; /* stretch a fixed position to the whole screen */
		height: 100vh; /* fix for mobile browser address bar appearing disappearing */
		top: 0;
		left: 0;
		right: 0;
		z-index: -1; /* needed to keep in the background */
		background: url(/_home/Images/Backgrounds/4thQuarterGuy-Background_Couple-on-Path_Blurred_Color.jpg) top right;
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		     -o-background-size: cover;
		        background-size: cover;
	}

	.non-book-body {
		font-family: "Lora", "Times New Roman", sans-serif;
		font-size: 1.25em;
		line-height: 1.5em;
	}


/******* SITE LAYOUT *******/

header, section, aside, footer {
	margin: 0;
	padding: 20px;
	/*border: 1px solid #000000;*/
	/*color: #ffffff;*/
	color: #000000;
}

main {
	/*background: #000000;*/
	background: inherit;
}

header {
	background: #FFFFFF;
	/*background: inherit;*/
	color: #FFFFFF;
}

	header.sticky-top {
		position: sticky;
		z-index: 5000;
		top: 0;
	}

section.feature {
	background: inherit;
	/*background: #d22b1f;*/
	color: #FFFFFF;
	flex: 1;
}

section.action {
	background: inherit;
	/*background: #d22b1f;*/
	color: #FFFFFF;
	flex: 2;
}

section.content {
	background: #FFFFFF;
	/*background: #129a22;*/
	flex: 1;
}

	section.content-half {
		background: #FFFFFF;
		flex: 1;
	}

	section.dom-photo {
		background: #FFFFFF;
		flex: 1;
	}

section.hero-desktop {
	display: none;
	margin: -20px;
}

	section.hero-mobile {
		display: block;
		margin: -20px -20px 20px -20px;
	}

		section.hero-mobile img { width: 100%; }

section.book-thumbnail {
	background: #FFFFFF;
	flex: 1;
}

	section.book-description {
		background: #FFFFFF;
		flex: 2;
	}

section.video-thumbnail {
	background: #FFFFFF;
	flex: 1;
}

	section.video-description {
		background: #FFFFFF;
		flex: 2;
	}

	section.video-player {
		background: #FFFFFF;
		flex: 1;
	}

	section.video-playlist {
		background: #FFFFFF;
		flex: 0 1 200px;
	}

		div.video-playlist {
			height: 100%;
			overflow-y:  scroll;
		}

			div.video-thumbnails {
				margin: 0 0 20px 0;
			}

	section.video-group {
		background: #FFFFFF;
		flex: 1;
		padding-top: 0;
		padding-bottom: 0;
	}

section.sidebar {
	background: #FFFFFF;
	/*background: #673ab7;*/
	flex: 0 1 300px;
}

section.books {
	background: #F14E1C;
	/*background: #129a22;*/
	flex: 1
}

	section.book {
		background: #F14E1C;
		/*background: #129a22;*/
		flex: 1;
		margin-top: -20px;
	}

section.subtag {
	background: #F14E1C;
	background: inherit;
	text-align: center;
	/*background: #129a22;*/
	flex: 1;
	margin-top: -20px;
	color: rgba(255,255,255,0.75);
	font-size: 20pt;
}

footer {
	/*background: #FFFFFF;*/
	background: #4C4E56;
	/*color: #000000;*/
	color: #FFFFFF;
	flex: 1;
	font-size: .6em;
}

	footer.sticky-bottom {
		position: sticky;
		z-index: 5000;
		bottom: 0;
		padding-top: 10px;
		padding-bottom: 10px;
	}

.break {
	flex-basis: 100%;
	height: 0;
	padding: 0;
}

.wrapper {
	margin: auto;
	max-width: 60rem;	/* 60rem = 960px usually - https://pixelsconverter.com/px-to-rem */
}

.space-between {
	justify-content: space-between;
}

.align-items-center {
	align-items: center;
}

section.top-rounded {
	background: #FFFFFF;
	height: 20px;
	flex: 1;
	/*border-radius: 20px 20px 0 0;*/	/* This should match the padding, i.e. 20px is 20px */
	margin-bottom: -40px;	/* This should be double the padding, i.e. 20px becomes -40px  */
}

section.after-top-rounded {
	padding-top: 0; 	/* Override the 20px standard, because 20px is handled via .top-rounded */
}


/******* SITE THEME *******/

.bebasneue {
	font-family: "BebasNeue-Bold", "Helvetica Neue", Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;
}

.jdhandcrafted {
	font-family: "JD-Handcrafted", cursive;
}

a, .a, ins {
	color: #F14E1C;
	border-style: solid;
	text-decoration: none;
	font-weight: bold;
}

	a:hover { color: #4C4E56; }

	a.inverted { color: #4C4E56; }

		a.inverted:hover { color: #F14E1C; }

.b { color: #F14E1C; }

rect.hamburger { fill: #F14E1C; }

h1, .h1, h2, .h2, h3, .h3 {
	font-family: "BebasNeue-Bold", "Helvetica Neue", Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;
	font-weight: normal;
	line-height: normal;
	color: #F14E1C;
}

	h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a {
		font-weight: normal;
		border: 0;
		text-decoration: none;
	}

	h1, .h1 {
		font-size: 28pt;
	}

	h2, .h2 {
		font-size: 36pt;
	}

	h3, .h3 {
		font-size: 24pt;
		color: #4C4E56;
	}

ol, ul {
	padding-left: 40px;
}

	ol { list-style: decimal; }

	ul { list-style: disc; }

		li { margin-bottom: 10px; }

input, textarea, select {
	color: #F14E1C;
	font-weight: bold;
	font-size: 16pt;
	border: 2px solid #F14E1C;
	padding: 3px 5px;
	margin: 0;
}

	input#Submit {
		border: 2px solid #F14E1C;
		padding: 5px 20px;
		background-color: #FFFFFF;
	}

		input#Submit.inverted {
			background-color: #F14E1C;
			color: #FFFFFF;
		}

			input#Submit.inverted:hover { color: #000000; }

	textarea {
		font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;
		font-size: 12pt;
	}

.left { text-align: left; }

.center { text-align: center; }

.right { text-align: right; }

.black { color: #000000; }

.white { color: #FFFFFF; }

.bold { font-weight: bold; }

.even, tr.even td { background-color:  #FFFFFF; }

.odd, tr.odd td { background-color: #B5B5B5; }

.h-spacer { margin-bottom: 40px; }

.valign-middle { 
	height: 100%;
	vertical-align: middle; 
}

.background-transparent { background-color: inherit; }

.background-white { 
	background-color: #FFFFFF; 
	color: #000000;
}

tr.heading td {
	font-weight: bold;
	background-color: #000000;
	color: #FFFFFF;
	position: sticky;
	top: 0;
}

.flex-container-toggle { display: none; }

.font-inherit { font-family: inherit; }

.button-maker { margin-bottom: .75em; }

.g-recaptcha { display: inline-block; }

.iframe-container{
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; 
	height: 0;
	-webkit-box-shadow: 0 0 10px #725215;
	   -moz-box-shadow: 0 0 10px #725215;
		    box-shadow: 0 0 10px #725215;
	margin-bottom: 10px;
	border-radius: 5px;
}

	.iframe-container iframe{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

img.circle-border {
	width: 75%;
	border: 5px solid #F14E1C;
		border-top-left-radius: 50% 50%;
		border-top-right-radius: 50% 50%;
		border-bottom-right-radius: 50% 50%;
		border-bottom-left-radius: 50% 50%;
}

	img.circle-border:hover {
		border-color: #4C4E56;
	}

img.link-border, img.link-border-no-zoom {
	border: 3px solid #F14E1C;
	width: 95%;
	border-radius: 5px;
}

	img.link-border-no-zoom {
		width: 100%;
	}

	img.link-border:hover {
		border: 0;
		border: 3px solid #4C4E56;
		width: 100%;
		border-radius: 5px;
	}

img.rounded {
	border-radius: 0 20px 0 20px;
}

	img.rounded-backwards {
		border-radius: 20px 0 20px 0;
	}

br.clear { clear: all; }

::selection {
	background: #F14E1C; /* WebKit/Blink Browsers */
  }
::-moz-selection {
	background: #F14E1C; /* Gecko Browsers */
}


/******* SITE SECTION SPECIFIC *******/

header {
	padding: 0;
	border-bottom: 5px solid #4C4E56;
}

	header div#NavTitle {
		color: #4C4E56;
		margin: 10px 0 10px 10px;
		float: left;
	}

		header div#NavTitle a { 
			text-decoration: none;
			color: inherit;
			border: 0;
			font-weight: normal;
		}

		header div#NavItems {
			display: none;
		}

			header div#NavItems div.navlink {
				margin: 35px 0 0 15px;
				float: left;
			}

				header div#NavItems div.navlink a {
					font-family: "BebasNeue-Bold", "Helvetica Neue", Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;
					font-size: 1.5em;
					text-decoration: none;
					font-weight: bold;
					border: none;
				}

					div.navlink svg {
						margin-top: -3px; 
						width: 24px; 
						height: 24px;
					}

					div.navlink svg path, div.navlink svg rect, div.navlink svg circle {
						fill: #F14E1C;
					}

						div.navlink svg:hover path, div.navlink svg:hover rect, div.navlink svg:hover circle {
							fill: #4C4E56;
						}

		header div#Mobile-NavItems {
			display: block;
			float: right;
			padding-top: 20px;
			padding-right: 10px;
		}

			div#HamburgerClose {
				display: none;
				color: #F14E1C;
				font-size: 3em;
				padding: 5px 5px 0 0;
				font-weight: normal;
			}

				header div#Mobile-NavItems a {
					text-decoration: none;
					border: 0;
				}

		header div#MobileLinks {
			display: none;
			background-color: #FFFFFF;
			/*background:rgba(0,0,0,0.66);*/
			background:rgba(0,0,0,1);
			margin: 0 -20px 0 0;
			padding-top: 20px;
			text-align: center;
			text-transform: capitalize;
			font-size: 1.5em;
			height: calc(100vh - 100px);
		}

			header div#MobileLinks div.navlink {
				margin: 10px 20px;
				border-bottom: 1px solid #FFFFFF;
				padding: 10px;
			}

				header div#MobileLinks:last-child div.navlink {
					border-bottom: 0;
				}

				header div#MobileLinks div.navlink a {
					border-bottom: 0;
					text-decoration: none;
					font-weight: normal;
					font-family: "BebasNeue-Bold", "Helvetica Neue", Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;
					font-size: 1.5em;
					/*color: #00247C;*/
				}

				header div#MobileLinks div.navlink a:hover { color: #FFFFFF; }

section.feature {
	padding: 0;
	text-align: center;
}

	section.feature img {
		max-width: 15rem;
	}

		section.feature div.book-cover-full img {
			max-width: 100%;
		}

section.action {
	padding: 0;
}

	section.action .action-description {
		margin: 20px;
		background:rgba(0,0,0,0.66);
		padding: 20px;
	}

footer {
	text-align: right;
}

	footer a:hover { color: #FFFFFF; }

	footer .page-quote-container {
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

		footer .page-quote-container .page-quote {
			font-family: "JD-Handcrafted", cursive;
			text-align: center;
			font-size: 2.5em;
			line-height: 1.5em;
		}

		footer .page-quote-container .page-quote-attribution {
			font-family: "BebasNeue-Bold", "Helvetica Neue", Helvetica, Arial, Verdana, "Lucida Grande", sans-serif;
			text-align: center;
			font-size: .5em;
			margin-top: 10px;
		}


/******* ELEMENT SPECIFIC *******/

a.buy-now, a.buy-now-small, a.buy-now-extra-small {
	padding: 10px 20px;
	background-color: #F14E1C;
	text-transform: uppercase;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.5em;
	border: 0;
	text-decoration: none;
}

	a.buy-now:hover, a.buy-now-small:hover, a.buy-now-extra-small:hover {
		color: #000000;
	}

	a.buy-now-small {
		font-size: 1.15em;
	}

	a.buy-now-extra-small {
		display: block;
		font-size: 1em;
	}

.book-cover, .book-cover-full {
	width: 75%;
	margin: 0 auto;
}

	section.book .book-cover, section.book .book-cover-full {
		border: 2px solid #FFFFFF;
	}

		section.book .book-cover:hover, section.book .book-cover-full:hover {
			border-color: #4C4E56;
		}

section.book a {
	border: 0;
	text-decoration: none;
}

.book-thumbnail { text-align: center; }

	.book-thumbnail img { max-width: 75%; }

.book-widget-container {
	margin-left: -20px;
}

	.book-widget {
		float: left;
		margin-right: 20px;
		padding: 10px 20px;
	}

.video-more-container {
	position: relative;
}

	.video-more-overlay {
		color: #FFFFFF;
		font-size: 54px;
		line-height: normal;
		background-color: rgba(0,0,0,.5);
		border-radius: 5px;
		width: 100%;
		height: calc(100% - 36px);
		position:absolute;	/* Make sure parent div is relative */
		top:3px; 
		left:3px;
		z-index: 2000;

		/* Vertical / Horizontal Center */
		display: flex; 
		justify-content: center; 
		align-content: center; 
		flex-direction: column;
		text-align: center;
	}

#Contact input[type=text], #Contact textarea, #Contact select {
	width: 100%;
	margin-bottom: 10px;
	-webkit-box-sizing:content-box; 
	   -moz-box-sizing:content-box;
	    -ms-box-sizing:content-box;
		    box-sizing:content-box;
}

	#Contact textarea {
		height: 80px;
	}

	#Contact input[type="radio"] {
		width: inherit;
		margin: inherit;
		margin-right: 10px;
		transform: scale(2);
		accent-color: #F14E1C;
		opacity: 1;
	}

#Shows {
	border-bottom: 2px solid #F14E1C;
}

	#Shows td {
		padding: 3px 5px;
	}

	#Shows td.border-left, #Shows td.border-right, #Shows td.border-left-black, #Shows td.border-right-black {
		border: 2px solid #F14E1C;
		border-top: 0;
		border-bottom: 0;
	}

		#Shows td.border-left-black, #Shows td.border-right-black { border-color: #000000;}

		#Shows td.border-left, #Shows td.border-left-black { border-right: 0; }

		#Shows td.border-right, #Shows td.border-right-black { border-left: 0; }

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	/*border-bottom: 1px dotted black;*/ /* If you want dots under the hoverable text */
	cursor: pointer;
  }
  
	/* Tooltip text */
	.tooltip .tooltiptext {
		visibility: hidden;
		width: 540px;
		top: 100%;
		left: 50%;
		margin-left: -270px; /* Use half of the width (120/2 = 60), to center the tooltip */
		background-color: #4C4E56;
		color: #FFFFFF;
		text-align: center;
		padding: 5px 0;
		border-radius: 6px;

		/* Position the tooltip text - see examples below! */
		position: absolute;
		z-index: 1;
	}

	/* Show the tooltip text when you mouse over the tooltip container */
	.tooltip:hover .tooltiptext {
		visibility: visible;
		padding: 10px;
		text-align: left;
		font-weight: normal;
	}

		.tooltip:hover .tooltiptext img {
			width: 45%; 
			margin-right: 10px; 
			border: 1px solid #F14E1C;
		}

		.tooltip .tooltiptext::after {
			content: " ";
			position: absolute;
			bottom: 100%;  /* At the top of the tooltip */
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: transparent transparent #4C4E56 transparent;
		}