/*
Theme Name: BlankSlate
Theme URI: https://www.storyres.com
Author: EZ-NetTools Steve Monson
Author URI: http://eznettools.com/
Description: A modified version of BlankSlate to make editing easier.
Version: 94.0.4
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Tags: black, blue, white, light, one-column, fluid-layout, responsive-layout, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Text Domain: blankslate

BlankSlate WordPress Theme © 2011-2015 TidyThemes
*/

@font-face {
	font-family:"Fallback";
	ascent-override: 90%;
	descent-override:21%;
	size-adjust:110%;
	font-size-adjust:0.5;
	src: local('Georgia');
}
@font-face { 
	font-family: "Merriweather"; 
	src: url("https://fonts.gstatic.com/s/merriweather/v25/u-4n0qyriQwlOrhSvowK_l521wRZWMf6.woff2") format("woff2"); 
	font-style: normal; 
	font-weight: 300; 
	ascent-override: 100%;
	descent-override:30%;
	font-display: swap; 
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { 
	font-family: "Patua One"; 
	src: url("https://fonts.gstatic.com/s/patuaone/v11/ZXuke1cDvLCKLDcimxB44_lu.woff2") format("woff2"); 
	font-style: normal; font-weight: 400; 
	font-display: swap; 
	ascent-override: 79%;
	descent-override:10%;
	unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

html {
--wrapper-bg:#f6fcff;
--main-bg:white;
--text-color:black;
--main-color:rgba(3,70,164,0.9);
--link-color:#0c6aa4;
margin:0;
font-size:130%;
font-family: Fallback;
font-family: 'Merriweather', Fallback;
font-variant-numeric: lining-nums;
--headerHeight:67px;
--offset: calc( var(--headerHeight) + var(--adminbar, 0px) );
scroll-padding-top: calc( var(--offset) + 4px) ;
scroll-behavior: smooth;
}

html.dark-mode {
--wrapper-bg:#0b1824;
--main-bg: #111;
--text-color:#ddd;
--main-color:rgba(3,30,64,0.95);
--link-color:#5dc6f0;
}

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
margin:0;
background-color: var(--wrapper-bg);
background-image: url(https://res.cloudinary.com/ez-nettools/image/upload/v1624654179/transparent-clouds3_hgxhru.webp);
background-image: url(https://www.storyres.com/wp-content/uploads/2021/07/color-clouds2.png);
//background-image: url(https://res.cloudinary.com/monson-productions/image/upload/v1638824887/alternate-background_nfwcbo.avif);
background-attachment:fixed; 
background-position:center;
}

html.admin-bar { --adminbar:32px; }

@media (max-width:1080px) {
	html { --headerHeight:50px; }
}
@media (max-width:782px) {
	html.admin-bar { --adminbar:46px; }
}
@media (max-width:600px) {
	html.admin-bar { --adminbar:0px; }
}
 



.maxwidth { max-width:1280px; margin:auto;  }

#container {
max-width:1280px;
margin:auto;
background: url(/wp-content/uploads/2021/07/paper4.png) white;
background: url(/wp-content/uploads/2021/07/paper4.png) var(--main-bg, white); 
color:var(--text-color, black);
//padding:0 16px;
box-shadow: 0 1px 6px rgba(0,0,0,.25);
}

/*------------------------------------ General Formatting ------------------------------------*/

h1, h2, h3, h4, h5, h6 {
margin: 0.32em auto;
text-rendering: optimizeLegibility;
line-height:1.15;
font-family: 'Patua One', serif;
//font-family: 'Vollkorn', serif;
font-weight:normal;
}

h1 { font-size:2.8em; line-height:1; }

h2 { font-size:1.8em; }

h3 { font-size:1.4em; }

h4 {}
h5 {}
h6 {}

p { line-height:1.55;  }

code {
	display:block; 
    background: #333;
    color: #ddd;
    padding: 12px;
}
.php-code code { 
	background:#135; 
	display:block; 
	overflow-x:scroll; 
}
.css-code code { background:#503; display:block; overflow-x:scroll; }

video {width:100%; }

a { 
	color: #1ac; 
	color:var(--link-color , #1ac);
}

a.deep-link { 
text-decoration:none;
color: #9bd;
text-shadow: 1px 1px #608598;
font-weight: normal;
}

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

ins {text-decoration:none;}

blockquote {position: relative;  font-style:italic;  margin: 1em 1.25em; border-left:double 4px #6665; padding-left:2em;  }
blockquote p { }


.alignright{ float:right; margin-left:1em; clear:right; margin-top:.25em; max-width:58%; }
.alignleft{ float:left; margin-right:1em;   margin-top:.25em; max-width:58%; }
.aligncenter{ display:block; margin:auto; text-align:center; }

figure a {border:solid 2px var(--link-color,#1ac); display:block;}
figure a:hover {border-color:#3bd; }
figure a img {vertical-align:top;}

@media( min-width:900px) {
	:where(.story-content) .alignright {margin-right: -16%; max-width: 68%; }
	:where(.story-content) .alignleft {margin-left: -16%; max-width: 68%; }
}

.responsive-container iframe { width:100%; }
.video-container { width:100%; position: relative; margin:0 0; background:#eee; }
.video-container:after { padding-top: 56%; display: block; content: ""; }
.video-container iframe , .video-container > div {	position: absolute; height:100%; width:100%; }
.mejs-container , .wp-video {max-width: 100%;  width:auto !important; }

.meta-header {display:none;}


.page-template-default #content { overflow:hidden; }

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block }
.clear{clear:both}

.wp-caption{}
.wp-caption-text{}
.gallery-caption{}

.screen-reader-text { clip:rect(1px, 1px, 1px, 1px); position:absolute;}
.screen-reader-text:focus { position:static !important; clip:auto; width:auto; height:auto; overflow:visible; border:dotted 2px #aaa; }

figure.wp-caption { width:auto !important; }




/*------------------------ Header --------------------------------*/

#header {
display:flex;
background: rgba(3,70,164,0.93);
background: linear-gradient(#acf3,35%,#0001) , url(https://www.transparenttextures.com/patterns/otis-redding.png) var(--main-color);
box-shadow:inset 0 0 4px rgba(255,255,255,.15) , inset 0 -2px 2px #0246 , inset 0 -4px 4px #0243 , 0 3px 4px #0005;
z-index:9;
position:relative;
}

.hamburger-button {display:none; }

.dark-mode #header {
	background:#071c39;
}

.sticky-header-active #header {
	position:fixed;
	top:0;
	top:var(--adminbar, 0);
	left:0;
	right:0;
}

#header .inner {
display:flex;
color:white;
max-width:1280px;
margin:0 auto;
width:100%;
}

#header .inner > * {
vertical-align:top;
}
#header a {text-decoration: none; color:white;}

#branding {display:flex; align-items:center; padding:0.3em; flex: 1 0.5 15em;}
.logo-and-tagline {
    display: flex;
    flex-direction: column;
    justify-content: center;
	white-space:nowrap;
	line-height:1.25;
}
#header #logo { margin-right:4px; width:auto; height:2.6em; }
#site-title {font-size:1.35em; margin:0;  font-weight:bold; }
#site-description { font-size:72%;}

#header .settings-wrapper {
	display:flex;
	justify-content:center;
	margin-left:auto;
	box-shadow:inset 1px 1px 6px #0003;
}
.settings-wrapper button {
	display:inline-flex
	flex:1 1 50px;
	background:#012;
	border:none;
	padding:0px 4px;
	cursor:pointer;
	font-size:10px;
	color:var(--main-bg);
	line-height:1.05;
}
.settings-wrapper button img { filter: invert(1); vertical-align:top;  }

.dark-mode .settings-wrapper button { 	background:#ffb; }
.dark-mode .settings-wrapper button img { filter: invert(0);  }


.blend-darken main :where(img , .story-header .featured-image) {  mix-blend-mode:darken; }

.dark-mode .blend-darken main :where(img , .story-header .featured-image) {  mix-blend-mode:normal; }

/*------- Top Navigation --------*/

.nav {display:flex;}

.nav ul {
display:flex;
list-style:none; 
margin:0; padding:0;
}

.nav li {display:inline-flex; position:relative;}

.nav li a {
display:inline-flex;
align-items:center;
padding:.8em;
line-height:1.25;
text-shadow:1px 1px 1px rgba(20,20,20,.25);
}

.nav li a:hover {
  background:rgba(240,150,80,.9);
}

/*---- Dropdown Menus ----*/
.nav li ul {
display:none;
position:absolute;
top:95%;
left:0;
background:rgba(25,50,90,.9);
z-index:999;
font-size:0.8em;
min-width:6rem;
line-height:1.15;
}
.nav li:hover ul { display:block; }


.nav li ul li {display:block;}
.nav li ul li a {display:block;}


/*--- search bar -----*/
#search { float:right; }




/*=============== homepage ====================*/

#home-banner {
	position:relative; 
	min-height: min(35.9vw , 359px);
	background:#89a; 
	margin-top:-1px;
	overflow: hidden; 
	width:100%;  
}
#home-banner img , #home-banner video {width:100%; height:auto; vertical-align:top; }
#banner-text{
position:absolute; 
top:5%; 
left:31%;
right:31%;
color:#0a397c; 
text-align:center;
}
#banner-text h1{
	font-size:2.4em;
}
@media (max-width:1280px) {
	#banner-text {font-size:1.6vw;  }
}
@media (max-width:800px) {
	#banner-text { left:20%; right:20%; }
	#banner-text h1 { font-size:4.6em; }
	#home-banner video {
		max-width:none;
		width:150%;
		margin-left:-26%;
	}
}



/*------------------------ Catalog of Stories -------------------------------*/

.products .product {
border: solid 1px #bbb;
background: rgba(255,255,255,.4);
padding:0.6em !important;
text-align:center;
}
.percent {
display:inline-block;
padding:3px;
background:#b22;
color:white;
margin:0 4px;
 position: absolute;
  right: -10px;
  top: 5px;
}
.percent big {display:block; font-size:125%;}

span.onsale {display:none;}

.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    background: #262;
    color: white;
    width: 100%;
    text-align: center;
    padding: 0.8em;
    box-shadow: 0px 2px 0px rgba(0,50,0,.9);
    text-shadow: -1px -1px #131;
}

.woocommerce div.product p.price ins {
color:#161; 
}

/*:::::::::::::::::::::::::::::::: Article Groups :::::::::::::::::::::::::::::::::*/
.article-group {
border-top: solid 2px #7893;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}

.section-header { text-align:center; overflow:auto; padding:0 16px; }

#category-header p { max-width:100%; text-align:left; text-indent:0; }

.article-group .inner {
display:flex;
flex-wrap:wrap;
padding:8px;
display: grid;
grid-template-columns: repeat( auto-fit, minmax( min(260px, calc(100vw - 32px) ), 1fr) );
}

.article-group-header {
text-align:center;
padding-bottom:2rem;
}

.info-type {
padding:8px 0 0;
margin-top:auto;
border-top:solid 1px #ddd;
}

.summary a.moretag { display:inline-block; text-decoration:underline; }

.summary {
	display:flex;
	flex-direction:column;
	font-size:85%;
	margin:.5em auto;
	margin:8px;
	background:var(--main-bg);
	box-shadow: 0 1px 3px rgba(0,0,0,.15) , inset 0 0 2px 1px #fff5;
	position:relative;
	overflow:hidden;
	flex:1 1 23%;
	max-width:620px;
}

.summary.unfinished { display:none; }

.admin-bar .summary.unfinished { display:inline-block; opacity:.35; }

.post-text {
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	padding:0.5em 1em;
	min-width:50%;
	font-size: .9rem;
}

.title-and-description {
	overflow:hidden; max-height:9.4rem; text-overflow: ellipsis;
}

.story-description { font-size:.9em;  }
#content .story-description p { font-size: min(16px , 1em);  margin:0.4rem 0; }

.meta-author { text-align:center; font-size:16px; font-style:italic; font-style: italic; margin-block: .4rem -.1rem; }

.word-data {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
	line-height:1.1;
}
.word-data span:nth-child(2){	text-align: right; }

.summary .entry-title {margin:.25rem auto; font-size:1.35em; line-height:1; text-align:center;}

.summary a { text-decoration:none; color:#1ac; }
.summary a:hover { text-decoration:underline; }


.featured-image {
background-size:contain;
background-repeat: no-repeat;
background-position: center;
max-height:54vh;
max-height: max( calc(85vh - var(--header-offset, 120px) ) , 200px);
overflow:hidden;
position:relative;
z-index:2;
}
.featured-image img {
	object-fit:contain;
	width: 100%;
height: 100%;
}
/*.featured-image:after {
	display: block;
	content:" ";
	padding-bottom:67%;
	max-height:50vh;
}*/



.summary-image {
background-size:contain;
background-repeat: no-repeat;
background-position: center;
max-height:54vh;
max-height: max( calc(85vh - 120px) , 200px);
overflow:hidden;
position:relative;
z-index:2;
}
.summary-image img {display: block;}
 

.article-group  .featured-image:hover { outline:solid 1px #abc; }

.post-type-label {
position: absolute;
top: 0; right: 0;
padding: .5em 3em;
background: white;
font-weight: bold;
font-size: 0.6em;
text-transform: uppercase;
text-align:center;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
transform: rotate(45deg) translate(35%, 110%);
transform-origin: right bottom;
z-index:3;
}

.post-type-archive .post-type-label, .page-template-template-library .post-type-label, .blog .post-type-label { display:none; }

.post .post-type-label { background:#F0F1C5; }
.guide .post-type-label { background:#C7F0C0; }
.dark-mode .post-type-label {background:#124;}
.course .post-type-label { background:#BBE1F1; }

.in-category {font-size:.85em; line-height:1.05; text-align:center; margin-top: 0.15rem; }

.in-category a {
display:inline-block;
color:#fab23a;
padding:.2em;
font-weight:bold;
text-transform:uppercase;
}

.article-group footer {text-align:center; padding:8px; padding-bottom:16px; }

.button {
	display:inline-block;
	background:#911;
	text-decoration:none;
	padding:8px;
	border-radius:6px; 
	color:white;
}

.button.secondary {
	background:#abc1;
	color:var(--link-color);
	border: solid 2px #3683;
	box-shadow:0 0 0 1px #3687;
}
 



/*:::::::::::::::::::::::::::::::::::::: Simple Stories :::::::::::::::::::::::::::::::::::::::::::::*/

.simple-story {
position:relative;
min-height:100vh;
}

.story-header {
	--border:double 6px #678;
	text-align:center;
	border-bottom:var(--border);
	padding-top:8px;
	position:relative;
	/*width:calc( 100% - var(--chapter-nav-width) );*/
}
.story-header h1 { margin-bottom:0.15em;}

.story-header h1 small {
	font-size:45%;
	display:block;
	margin-top:8px;
}

.story-header  .clip-art-btn {
position:absolute;
top:4px; right:4px;
z-index:4;
background: white;
background:#fff9;
color: #123;
border: solid 2px;
font-weight: normal;
}

.tags {font-size:16px; padding-bottom:4px; }

.simple-story article {	padding:0 0em;}

.section-header h1 {   }

.simple-story .story-content {
padding: 0 1em;
margin:auto; 
max-width:36rem; 
}

.long-story-header h1 {margin:0.15em 0; }


.simple-story img {font-family:sans-serif; color:#999;  }

.simple-story p:first-child:first-letter {
 color: #903;
  float: left;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

.simple-story article p {
margin: 0.8em 0;
}

.simple-story article p:before {
  content: "";
  width:8em;
  display: block;
  overflow: hidden;
}

/*:::::::::::::::::::::::::::::::::: Longform Stories :::::::::::::::::::::::::::::::::::::::::::*/


.long-story {
line-height:1.55; 
--text-width:32rem;

--chapter-nav-width:38px;
--text-padding:38px;
}
.long-story.chapter-nav-closed {
	--chapter-nav-width:1px;
}

.long-story article {
box-shadow:0 2px 4px rgba(0,0,0,0.1);
padding:0;
padding-bottom:24px;
padding-left:var(--text-padding);
padding-right: calc( var(--text-padding) );
position:relative;
}


.long-story-header {
background: url(/wp-content/uploads/2021/07/paper4.png); 
background-color: var(--main-bg, white);
z-index:1;
border:none;
position:relative;
}
.long-story .story-stats:empty { display:none; }

.long-story .story-stats {
    padding: 0.5em;
    background: rgba(10,150,220,0.12);
    display: flex;
    flex-direction: column;
	border:var(--border);
	border-left:none;
	border-right:none;
}
.long-story .story-stats p {
	text-indent:0;
	font-size:16px;
	font-size:clamp(14px , 1.2vw, 16px);
	margin:0.4em 0;
	line-height: 1.35;
	max-width: none;
}
.long-story .pre-story-content p {
	font-size:16px;
	max-width:100%;
}


.long_form p, .long_form pre , .long_form blockquote{ 
max-width:32rem; 
margin:.5rem auto;
}


.long_form p {
text-indent: 1.5em;
}

.long_form h2, .long_form h3 {
max-width:60rem; 
margin:.8rem auto;
text-align:center;
}

.long_form pre {
	font:inherit;
	font-family: 'PT Mono', monospace;
	font-family: 'Nanum Gothic Coding', monospace;
	white-space: pre-wrap;
}

.chapter {
    margin: 0px 0 30px;
}
.chapter-header { //padding-top:var(--offset); }

.chapter:first-of-type { //margin-top:0;  }
.chapter:first-of-type .chapter-header {padding-top:0; }


.chapter-sticky-header {
	position:sticky;
	top: var(--offset) ;
	background:#fffc;
	font-size:12px;
	padding:2px 2px; 
	margin:0 calc( var(--text-padding) * -1);
	margin:0;
	//border-top: solid 1px #8888;
	display: flex;
	justify-content: space-between;
	align-items: center;
	display: grid;
	grid-template-columns: 1fr auto;
	gap:8px;
	--chapPer: calc( (var(--scrollY) - var(--chapY) ) / var(--chapH) * 100%);
	background:linear-gradient( to right, #2a29 var(--chapPer) , transparent var(--chapPer) ) no-repeat bottom, url(https://www.storyres.com/wp-content/uploads/2021/07/paper4.png) var(--main-bg, white);
	background-size: 100% 3px , auto auto;
	border-bottom:solid 1px #8888;
	z-index:1;
}
.chapter-sticky-header:after { 
	content:""; 
	height: 12px; 
	width:100%; 
	background:#0004; 
	filter:blur(4px);
	position: absolute; 
	top:calc(100% - 6px); 
	border-radius:50%; 
	clip-path:polygon( 0% 50% , 100% 50% , 100% 200% , 0% 200%);
}

.chapter-sticky-header span { white-space:nowrap; overflow:hidden; text-overflow: ellipsis; display:inline-block; }
.chapter-sticky-header span[role=button] { border:solid 1px #aaa8; padding: 7px 4px; border-radius: 4px; cursor:pointer; }
.currentChapter { }
.currentBook {  padding-left:1px; font-style:italic; }

#storyEnd {
	//border:dotted thin red;
	position:absolute;
	bottom:0;
	height:60vh;
	width:8px;
}

#storyFooter {
	--percent:calc( var(--scrollPer) * 100% );
	background: linear-gradient( to right, #69cde8 var(--percent), transparent var(--percent)) no-repeat , var(--main-bg);
	background-size: 100% 2px , 0 0;
	position:sticky;
	bottom:0;
	font-size:13px;
	padding:1px 4px;
	display: flex;
	justify-content: space-between;
}
#storyFooter div {  }

.details-chap summary{
	border:solid 1px #abc;
	padding: 24px;
	margin-top:12px;
	border-radius: 4px;
	background: linear-gradient(#abc1, var(--main-bg) 25%, #0471);
	cursor:pointer;
}
.details-chap summary:hover {
	color:#048;
	border-color:#048;
}
.details-chap summary span { }

.details-chap[open] summary {   
	//background:black;
	//color:white; 
	//white-space:nowrap;
	//text-overflow:ellipsis;
}

/*-- Chapter Navigation --*/
.chapter-nav {
display:grid;
flex-wrap:wrap;
flex-direction: column;
position:sticky;
top:var(--offset);
height: calc(100vh - var(--offset) - 21px );
float:right;
overflow:auto;
background: var(--main-bg); 
scrollbar-width: thin;
width:var(--chapter-nav-width);
transition:.2s width cubic-bezier(.17,.84,.44,1);
z-index:2;
}
.chapter-nav::-webkit-scrollbar { width:8px; }
.chapter-nav::-webkit-scrollbar-track  { background:#0001; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);}
.chapter-nav::-webkit-scrollbar-thumb { background:#579; background:linear-gradient(90deg, #579 , #68a, #579); border-radius:4px; }

.chapter-nav ul {margin:0; padding:0; //margin-bottom:64px; list-style:none; flex:1 1 auto; display:flex; flex-direction:column;  }
.chapter-nav li { 
	display:flex; flex:1 1 auto; 
	color: var(--text-color); 
	background: var(--main-bg); 
}

.chapter-nav a {
display: flex;
justify-content: center;
align-items: center;
flex:1 1 auto;
font-size:12px;
padding:8px 2px;
border:solid 1px #8883;
border-top:none;
text-decoration: none;
color:inherit;
text-align:center;
width:100%;
max-width:var(--chapter-nav-width);
	
}
.chapter-nav a > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.chapter-nav li.active { background:#159; color:white; outline:solid gold; }

.chapter-nav li.active + .active { background:#49d; }



/*------ Bookmark Button ----------*/
.bookmark-btn { text-align:right; padding-top:4px; }
.bookmark-btn a { 
	display:inline-block;
	background:#159;
	color:white;
	text-decoration: none;
	font-size: 16px;
	margin-top:4px;
	padding: 2px 8px 2px 20px;
	clip-path: polygon(100% 100% , 100% 0% , 0% 0% , 14px 50% , 0% 100%);
}
.bookmark-btn a.marked { display:none; }

.chapter:target { //outline:dotted 2px #1745; outline-offset:14px; }
.chapter:target .bookmark-btn a.unmarked {display:none;}
.chapter:target .bookmark-btn a.marked {display:inline-block; background:#077d4c; padding-right:40px; }

.bookmark-feedback {
position:absolute;
top: -1px;
left: -32px;
background:#005d8f;
background:linear-gradient(to right, #0002 0px, #2fa8 2px, #fff0 16px 23px, #0004 23px),
	repeating-linear-gradient(#fff5 2px, #0001 3px 4px) , 
	linear-gradient(#004978 , #2f7ca8, #004b7a);
width:24px;
height:36px;
clip-path: polygon( 0% 0% , 100% 0% , 100% 100%, 50% calc(100% - 12px), 0% 100%);
transform-origin:top ;
opacity:0.5;
transition:.4s height ease-out;
will-change: height, opacity;
}
.chapter:target .bookmark-feedback {
display:block;
filter:hue-rotate(-60deg);
height:80px;
opacity: 1;
}




/*------- Book Nav (Might Not Be Used) ---------*/
/*
.bookmark-nav {
	display:none;
    float: left;
    position: fixed;
    top: var(--offset);
	z-index:3;
}

.bookmark-nav img {
	width:24px;
	margin-left:0px;
	cursor:pointer;
}
.bookmark-nav nav { 
 	height:0px; 
	background:#135;
	overflow:hidden;
	transition: .35s cubic-bezier(.77,0,.18,1);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: 0 0 8px 0;
}
.bookmark-open .bookmark-nav nav{
	height:200px;
}
.bookmark-nav nav button {
	background:#123;
	color:white;
	padding:16px;
	margin:1px;
	font:inherit;
	font-size:12px;
	border:solid 1px #888;
	border-radius: 6px;
	cursor:pointer;
}

.bookmark-nav nav button[disabled] { opacity: 0.4; cursor:default; }

.bookmark-nav nav button#addBookmarkBtn {
	background:#074;
	margin-top:4px;
}
.bookmark-nav nav button#clearBtn { padding:4px; background:#911; }

.saved-ribbon {
    background: #159a;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0;
    text-align: center;
    color: #fe5;
}
.saved-ribbon.swoosh {
	animation: 0.6s Swoosh ease-in-out;
	transform-origin:top left;
}

@keyframes Swoosh{
	0% { transform:scaleX(0.01); }
	100% {transform:scaleX(1);}
}
*/


/*:::::::::::::::::::::::::::::::::::::: Fully Illustrated Stories ::::::::::::::::::::::::::::::::::::::::*/

/*------ Full Header --------*/
 


/*---- Header Invisible -----*/
.full_screen_story #header { animation:headerOut .5s cubic-bezier(.08,.82,.17,1) both; 	
	position:fixed;
	top:0; left:0; right:0;  
}
@keyframes headerOut {
	0% { transform: translateY(0%);}
	100% { transform: translateY(-100%); }
}
/*---- Header Visible ------*/

.full_screen_story.header-visible #header {
	display:flex;
	animation: headerIn 0.4s cubic-bezier(.08,.82,.17,1) both;
}
.full_screen_story .admin-bar  #header { top:32px; }
@media ( max-width: 782px ) {
	.full_screen_story .admin-bar  #header { top:46px; }
}

@keyframes headerIn {
	0% { opacity:0; transform:translateY(-100%); }
	100% { opacity:1; transform:translateY(0%); }
}

#wrapper.full_screen_story { padding:0; max-width:100%;} 


.full_screen_story #related_posts {
	display:none;
}

/*--------- Wrapper ----------*/

html.full_screen_story , .full_screen_story body { 
	height: 100%;
    width: 100%;
    height: 100vh;
    width: 100vw;
    margin:0;
    padding:0;
    overflow: hidden;
}

.full_screen_story #footer {display:none;}
.full_screen_story #comments {display:none;}

.full_screen_story #container {max-width:100%;   }

#story-wrapper {
//background:#123;
text-align:center;
position:relative;
//height:100vh ;
height:calc( 100vh - 46px);
height:calc( 100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top)  );
//box-shadow:inset 0 0 2px 0 red;
width:100%;
//-webkit-text-size-adjust: 100%;
-webkit-overflow-scrolling: touch;
position:fixed;
top:0; left:0; right:0; bottom:0;
}

.admin-bar #story-wrapper { height:calc(100vh - 32px); top:32px; }



/*--- Menu Toggle button ------*/

#header-toggle {
	display:flex;
	position:fixed;
	top:0; left:0;
	background:#136c;
	border:solid 1px #456;
	border-left:none;
	border-top:none;
	border-radius:0 0 12px 0px;
	margin:0;
	padding:6px;
	color:#cde;
	font-size:1.15em;
	//box-shadow:inset 2px -1px 2px #def2;  
	z-index:99;
	height:58px;
}
#header-toggle:hover {
	background: #f60;
}

#header-toggle img {width:40px; margin:auto; }

.admin-bar #header-toggle {top:32px;}

@media (max-width:782px) { .admin-bar #header-toggle {top:42px;} }




/*-------- Text ----------*/
.text {
padding:1.5% 0.5%;
position:absolute;
font-size: min(5.2vh , 4vw);
line-height:1.15;
width:40%;
color:white;
fill:white;
text-shadow: 2px 2px 2px rgba(0,0,0,.2);
z-index:9;
}

/*--- Fullscreen Button -----*/
#fullscreen-toggle {
display:block; 
position:fixed;
background:#222;
background:rgba(0,0,0,.7);
padding:7px;
color:white;
border:solid 1px;
font-size:0.75em;
bottom:5px; right:5px; 
z-index:99;
border-radius: 4px;
cursor:pointer;
}
#fullscreen-toggle svg {display:block; margin:auto;}





/*-------- New Splide version ----------------*/

.fullscreen-story {
  min-height:70vh;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.splide {
  width: min(100% , calc( 100vh * 1.545) );
}
.admin-bar .splide {  width: min(100% , calc( ( 100vh - 32px) * 1.54) ); }

.splide__slide {
  background:radial-gradient(#135, #123);
  display:flex;
}
.splide__slide.is-active {
  //border:solid orange;
}
.splide__slide .primary-image {
  object-fit: cover;
	max-width:100%;
}
.splide__slide img { }

/*--- navigatin arrows ----*/
.splide__arrow {
	--button-size: 76px;
	background:#0267; 
	border:none; 
	position:absolute; 
	bottom: calc( var(--button-size) * -1 ); 
	height: var(--button-size); 
	width:var(--button-size); 
	z-index:3; 
	border:solid 1px #fff2; 
	border-right:none; 
	border-radius: 50% 0 0 50%;
	cursor:pointer; 
}
.splide__arrow:hover {
	background:#f60;
}

.splide__arrow[disabled] { opacity:0.05; }

.splide__arrow svg {width: calc( var(--button-size) - 16px ); fill:white;}
.splide__arrow.splide__arrow--prev { transform:scaleX(-1);  left:0; }
.splide__arrow.splide__arrow--next { right:0;}

/*--- page dots -----*/
ul.splide__pagination { position:absolute; left:10%; width:80%; }
.splide__pagination li {display:inline-flex;}
.splide__pagination button {
  background:#3336;
  border:none;
  margin:4px;
  padding:0px;
  height:min(3vw, 24px);
  width:min(3vw, 24px);
  border-radius:50%;
  -webkit-appearance:none;
  cursor:pointer;
  box-shadow: inset -1px -1px #fff3, inset 1px 1px #0002;
  transition:.1s ease-out;
}
.splide__pagination li:hover button {transform:scale(1.15);}

.splide__pagination button.is-active {
  background:#f80;
}


.splide__pagination li:hover button:after {
  content:attr(aria-label);
  position:absolute;
  bottom:105%;
  left:-20px;
  color:white;
  width:100px;
  background:green;
}

/*-------- Animating letters ----------*/
.is-visible .splitting .char {
  animation: slide-in 0.5s cubic-bezier(.5, 0, .5, 1) both;
  animation-delay: calc(50ms * var(--char-index));
}

@keyframes slide-in {
  from {
    transform: translateX(-16em) scale(0.2);
    opacity: 0;
  }
}

@media (orientation: landscape) {
	body.full-story { }
	#story-wrapper .splide  {position:static;}
	.splide__arrow {position:absolute;}
	.splide__arrow { top: calc(50% - calc( var(--button-size) / 2) ); }
	.splide__arrow.splide__arrow--prev {       }
	.splide__arrow.splide__arrow--next { right:0;   }
	ul.splide__pagination { bottom:0; }
}



/*-------------- Related Stories ----------------*/
#related_posts {
    background: rgba(200,200,200,.15);
    border-top: solid 1px #ddd;
    box-shadow: inset 0 6px 8px rgba(0,0,0,.15);
}

/*------------------------ Page & Blog Styling -----------------------------*/
.hentry {
	margin: 0;
}

.blog #content , .archive #content {box-shadow:none;}
.blog .hentry , .archive .hentry , .search-results > article {box-shadow:0 0 4px rgba(0,0,0,.25); overflow: hidden; margin: 0 auto 16px; }

.blog :where(p , ol, ul, h2, h3, h4) {  
	max-width:40rem; 
	margin-left:auto; margin-right:auto; 
}

.blog :where(p , ol, ul) { line-height:1.6;  }

.page-header , .post-header {
	position:relative;
	margin-bottom:4px;
}
.summary-header-link { color:inherit; text-decoration:none; transition: .3s cubic-bezier(.39,.58,.57,1);  }
.summary-header-link:hover {color:#0077c6;}
.blog .featured-image {
	padding-bottom:38%;
	background-size:cover;
	background-position:center;
	background-color:#f5f5f5;
	background-color:var(main-bg);
	box-shadow:inset 0 0 24px 1px rgba(0,0,0,.1);
	vertical-align:top;
	transition: .3s cubic-bezier(.39,.58,.57,1); 
}
.blog .featured-image:after { padding:0; }
.summary-header {position:relative; overflow:hidden;}
.summary-header:hover .featured-image {
	transform:scale(1.05);
}
.entry-title {  line-height:1.05;  }
.entry-title small { font-size: 45%; display: block; }
h2.entry-title {padding:.5rem 0;}
.with-image .entry-title {margin:0;}
.header-content {padding: 0rem 1rem .5rem;}
.with-image .header-content {
	position:absolute;
	bottom:0; left:0; right:0;
	background:rgba(0,0,0,.5);
	background: linear-gradient( rgba(0,0,0,0) , rgba(0,0,0,.5) 55% );
	color:white;
	padding: 1.25rem 1rem .5rem; margin:0;
	text-shadow:1px 1px 2px rgba(0,0,0,.5);
	z-index:2;
}

.summary-content { padding:0 1rem 0.75rem; }
.entry-content {padding:0 16px; display:flow-root; }
.elementor-page .entry-content {padding:0;}

.entry-meta {opacity:.75; font-size:12px;}
.entry-meta a {color:inherit; text-decoration:none;}

.single-clipart .entry-meta {display:none; }

.moretag a {background:none; color:inherit; border:solid 1px #aaa; }
.moretag a span { display:inline-block; transition:.15s cubic-bezier(.17,.84,.44,1); }
.moretag a:hover span { transform:translateX(2px); }


/*------------------- Comments Section -----------------------*/

#nav-below {clear:both; display:flex; flex-wrap:wrap; border-top:solid 1px #ddd; padding:16px 0; margin:16px 0;  font-size:14px; }
#nav-below > div {  flex:1 1 45%;  }
#nav-below a {display:block; padding:8px; line-height:1.15; }
.nav-next {text-align:right;}

.comment-invitation {
	//border-top:solid 1px;
	margin: auto ;
	//padding-top:16px;
}
.comment-invitation p {text-indent:0; max-width:56ch; margin:auto; }

#comments {clear:both; max-width:56ch; margin:0 auto; padding:8px; }

.comments-dropdown {display:block;}

#reply-title {display:none;}

#comments :is(p, ol, ul) {
	max-width:100%;
}
#comments summary {
	cursor:pointer;
	line-height: 1.15;
}
#comments summary:hover {
	 background:#1df2;
}

#commentform {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	gap:8px;
}
.comment-form p{
    grid-column: 1 / span 3;
	text-indent: 0;
}
p.comment-form-author , p.comment-form-email , p.comment-form-url {
	grid-column: span 1;
}

.number-of-comments {
font-size:1.8em;
font-weight:bold;
position:relative;
border-bottom:solid 3px;
padding-bottom:4px;
margin-bottom:12px;
}
.number-of-comments small {display:inline-block; font-size:60%;}

.comments-dropdown summary:hover { }

.all-comments {
margin:0; padding:0;
}

.comments ul { padding:0px; margin:8px 0;}

.comments li {
margin:1rem 0 0 0;
padding: 1rem 0 0 40px;
list-style:none;
border-top:solid 1px #aaa;
position:relative;
}
.comment-body {position:relative; }

.reply {position:absolute; top:0; right:0; }
.avatar  {position:absolute; top:0; left:-40px;}

.comment-notes {font-size:14px;}


#respond {  padding:0px 0px;}
#respond p {margin:4px 0;}

#respond .stars { font-size:1.4rem; }

.comment-form-comment , .form-submit {margin:0;}

.comment-form input, .comment-form textarea {
border:solid 1px #bbb;
box-shadow:inset 2px 2px 6px rgba(0,0,0,.15);
font:inherit;
width:100%;
padding:8px;
}
.comment-form input[type=checkbox], .comment-form input[type=radio] {
	width:auto; 
}

#comment {height:6em; transition:.45s cubic-bezier(.08,.82,.17,1); }
#comment:focus { }

.comment-form input:focus, .comment-form textarea:focus {border:solid 1px #456;}
.comment-form input.submit { 
	display:block; 
	background:#1f53a2; 
	color:white;
	box-shadow:0 1px 2px rgba(0,0,0,.15); 
	margin:16px 0;
	cursor:pointer;
}

.logged-in-as {display:none; margin:0; }
.logged-in-as a {font-size:.85em; padding:8px; border:solid 1px; border-radius:3px; text-decoration:none; line-height:1; }






/*================== Footer ===========================-*/

#footer {
padding: 0;
text-align:center; 
background:#0346a4;
background: linear-gradient(#fff1, #0001) , var(--main-color, #0346a4);
color:white;
overflow:hidden;
}

#footer a {
	color:white;
}

#copyright {
	background:#0002;
	background:linear-gradient( rgba(0,0,0,.2) , rgba(0,0,0,.1) );
	font-size:16px;
	padding:0.8em; 
}


.footer-widget-areas li.widget-container { list-style:none; padding:16px; }

.widget-container ul {
	margin:0;
}
.widget-container ul li {
	line-height:1.5;
}

.widget_nav_menu ul { list-style: none; margin:0; padding:0; display: flex; justify-content: center;  }
.widget_nav_menu ul li a {padding:8px;}

/*::::::::::::::::::::::::::::::::::::::::::::: Media Queries :::::::::::::::::::::::::::::::::::::::::::::::::*/

@media (max-width:1080px) {
	html {font-size:110%;}

	body {}
	#featured-stories li.story {width:175px;}
	#featured-stories li img {width:100%;}
	#featured-stories li figcaption {font-size:.75em;}

	#header {   background:#0346A4; min-height:50px; } 
	#branding {font-size:90%;}


}

@media (max-width:780px) {
	html {font-size:105%;}

	#wrapper { padding:0; }




}

@media (max-width:600px) {
	html {font-size:100%;}

	.summary { flex: 1 1 45%; }

	#featured-stories li.story { flex: 1 1 45%; }
	
	/*------- Hamburger Menu -------*/
	/*-- Hamburger button --*/
	.menu-hamburger #header { }
	.menu-hamburger #header button.hamburger-button {
		display:inline-flex; 
		align-items:center; 
		justify-content:center;
		font-size:2.5rem; 
		width:54px;
		height:100%;
		padding:2px; 
		cursor:pointer;
		background:#024c;
		color:inherit;
		border:solid 1px rgba(200,200,200,0.1);
	}
	.menu-hamburger #header button.hamburger-button img {width:28px; }
	.menu-hamburger #header .hamburger-button[aria-expanded="true"] {background:black; }
	
	/*-- Slide Out Menu --*/
	.menu-hamburger #header #menu { 
		display:block;
		position:fixed;
		top:50px; left:-100%; 
		width:100%; 
		height:calc(100vh - 50px);
		overflow-y:auto;
		transition:.2s cubic-bezier(.45,.05,.28,1);
		background:rgba(0,0,0,0.75);
		z-index:195;
	}
	.menu-hamburger #header #menu.active { 
		left:0;
	}
	/*--- Slide Out Inner Menu --*/
	.menu-hamburger #header #menu .menu { 
		min-height:88%;
		background: #246;
		max-width:calc(100% - 58px);
		flex-direction: column;
	}
	/*--close button --*/
	.menu-hamburger #menu .close-btn {
		position:fixed; 
		top:0; 
		right:-100px; 
		left:auto; 
		border:solid 1px #333; 
		width:20%; 
		align-items:flex-start; 
		opacity:0;
		transition:.15s opacity ease-out;
	}
	.menu-hamburger #menu.active .close-btn { top:50px; right:0; left:auto; bottom:20px; opacity:1; align-items:flex-start; }
	
	/*-- Hamburger Dropdown Menus --*/
	.menu-hamburger #menu li { flex-direction:column; border-bottom:solid 1px rgba(0,0,0,0.4); flex:0 0 100%;  }
	.menu-hamburger #menu li a {text-align:left; justify-content:flex-start; padding:1.4rem;}
	.menu-hamburger #menu li ul{ display:block; position:static; min-width: 100%; height:auto; clip:auto; padding:0 2px; }
	.menu-hamburger #menu .sub-menu > li a::before {  content: "\2937 ";     margin-right: 4px; }
	
	/*-- adjust positioning to account for admin bar --*/
	.menu-hamburger .admin-bar #header #menu  {top:50px;} 

}

@media (max-width:369px) {
	.logo-and-tagline { font-size:calc( 2.75vw + 6px); }
	#header #logo {height: 10vw; }
}