@charset "UTF-8";

/*
Theme Name: FFilm
Theme URI: https://hit.pics/tech/
Author: Hit Pictures Technology
Author URI: https://hit.pics/tech/
Template: twentytwentyone
Description: A custom theme for FilmFetish.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hitpicstd
*/

/*********************************************************************
* Sitewide Styles
*
*
* Customize theme styles: https://allaboutbasic.com/2021/01/05/wordpress-theme-twenty-twenty-one-modifications-and-customizations-of-headers-fonts-styles-and-more/
*
* Working with Unicode Characters:
* https://stackoverflow.com/questions/10393462/placing-unicode-character-in-css-content-value
* https://stackoverflow.com/questions/14298413/what-is-the-html-unicode-character-for-a-tall-right-chevron
* http://shapecatcher.com
* http://www.alanwood.net/unicode/cjk_symbols_and_punctuation.html
* CSS shapes: https://css-tricks.com/the-shapes-of-css/
 *********************************************************************/

/* Hide Navigation on HIT MY PICS intro page */

body.single-post.postid-112466 .top-banner-feed {
	display: none;
}

/* Box Sizing */
.entry-content,
body.archive .left-ent-content,
body.archive .right-ent-content,
aside.widget-area,
aside.widget-area section.widget,
.msnry,
.thumbIcon,
figure.post-thumbnail,
article,
.hpd-share,
.hpd-right,
input,
.wrap-search-pop,
.pop-terms,
.soccntr,
.socplus,
.top-banner-feed,
.top-banner-feed div,
.ffm-wrap-foot,
.ffm-wrap-foot div,
.ffm-heads,
.ffm-heads div,
#lightbox,
#imgcontent,
#htmlcontent,
#lghtclose,
.search-form,
iframe,
img {
	-khtml-box-sizing:border-box;
  	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

img,
.entry-content div img,
aside.widget-area img {
	max-width: 100% !important;
	height: auto !important;
}

/* Emphasize select link hovers */
li.menu-item a:hover,
.alpha-fade:hover,
#lghtclose:hover,
.pop-terms ul li a:hover,
.primary-navigation .menu-item.menu-search:hover,
p.hpd-banner a:hover,
a.feed-thumb-link:hover,
.page-links a:hover,
.ffm-heads div a:hover,
.mrkt-link a:hover {
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity:0.6;
	opacity:0.6 !important;
}

/* Keep divs & content inside .entry-content bounds */
.entry-content div.dates,
.wrap-search-pop {
	max-width: var(--responsive--alignwide-width) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Animate loading of pages in sections
Ref: graphicfusiondesign.com/design/creating-fancy-css3-fade-in-animations-on-page-load */
@-webkit-keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@-moz-keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@-o-keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
/* Transitions affect navigation dropdown menus (pushes them under other page content)
body,
header,
#site-navigation,*/
.top-banner-feed,
#primary.content-area,
.plugin_load_early, /* For custom applications */
.entry-content,
#footer.entry-footer,
.nav-links,
.widget-area,
#footer.site-footer,
.plugin_load_late /* For custom applications */
{
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
 
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
 
-webkit-animation-duration:0.4s;
-moz-animation-duration:0.4s;
animation-duration:0.4s;
}
/*body,
header,
#site-navigation,*/
.plugin_load_early {
-webkit-animation-delay:0.3s;
-moz-animation-delay:0.3s;
animation-delay:0.3s;
}
.top-banner-feed,
#primary.content-area,
.top-banner-feed {
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
animation-delay:0.6s;
}
.entry-content,
#footer.entry-footer {
-webkit-animation-delay:0.8s;
-moz-animation-delay:0.8s;
animation-delay:0.8s;
}
.nav-links,
.widget-area,
#footer.site-footer {
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
animation-delay:1s;
}
.plugin_load_late {
-webkit-animation-delay:1.1s;
-moz-animation-delay:1.1s;
animation-delay:1.1s;
}

/* Add arrow after select links. <span class="lift-off"></span> */
.lift-off:after {
	font: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	content: " \2197";
}

/* Anchor transitions */
a,
a:hover,
a.alpha-fade, /* Use class "alpha-fade" to fade links on hover */
a.alpha-fade:hover,
.mrkt-link a,
.mrkt-link a:hover,
.page-links a,
.page-links a:hover,
li.menu-item a,
li.menu-item a:hover,
.pop-terms ul li a,
.pop-terms ul li a:hover,
article a,
article a:hover,
footer a,
footer a:hover,
input[type="submit"],
input[type="submit"]:hover,
header.entry-header .entry-title a,
header.entry-header .entry-title a:hover,
ul li a,
ul li a:hover,
ul.sub-menu,
ul.sub-menu:hover,
footer.site-footer .site-name a,
footer.site-footer .site-name a:hover,
footer.site-footer .powered-by a,
footer.site-footer .powered-by a:hover,
#lghtclose,
#lghtclose:hover,
.top-banner-feed div,
.top-banner-feed div:hover,
.primary-navigation .menu-item.menu-search,
.primary-navigation .menu-item.menu-search:hover {
	-moz-transition:.4s;
	-webkit-transition:.4s;
	-o-transition:.4s;
	-ms-transition:.4s;
	transition:.4s;
}

/* Remove padding left and right of content */
.post-thumbnail, .entry-content .wp-audio-shortcode, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {
    max-width: var(--responsive--alignwide-width) !important;
}
#main.site-main {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* Footer titles */
.site-name a,
.site-name span {
	font-size: 0.5em !important;
	text-decoration: none !important;
}
.primary-menu-container a{
	text-decoration: none !important;
}
/* Gap below title */
body.page header.entry-header,
body.single header.entry-header,
header.page-header {
	text-align: center;
    padding: 18px 0 0 0 !important;
	margin-bottom: 0 !important;
	border-top: 2px solid var(--global--color-border);
	border-bottom: none !important;
	margin-top:12px !important;
}

body.blog .page-title,
body.page.singular .entry-title,
body.single .entry-title,
body.archive .page-title,
body.search .page-title {
	font-size: 2.2em !important;
}

/* Gap above title */
header#masthead.site-header.has-title-and-tagline.has-menu,
header#masthead.site-header.has-menu {
    padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.archive-description {
    font-size: 1.2em;
}
/* Archives styles 
a.page-numbers:nth-child(2)::before{
	content: "#: ";
} */
span.page-numbers.current{
	text-decoration: none !important;
	background-color: rgba(0, 0, 0, 0.1);
	text-align: center;
	padding: 5px;
	line-height: 1.34; /* Must adjust current page # to match others */
}

.pagination {
	border-top: 1px solid var(--global--color-border);
	margin-bottom: 0;
}

h1.page-title {
    text-align: center !important;
}

/*********************************************************************
* Page Content Styles
**********************************************************************/

.cntr{
	text-align: center;
}

.ftop{
	margin-top:0;
}

.page-links a,
.page-links a:hover {
	text-decoration: none;
}
.entry-content > .alignright {
	max-width: var(--responsive--alignwide-width) !important;
}

.entry-content p {
	margin-bottom:12px !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content ul {
	margin-bottom:18px !important;
}

.hpd-pg-link input,
.hpd-pg-link:last-child input,
.hpd-pg-link:nth-last-child(2) input {
	width: 95%;
	padding-left: 90px;
	background-repeat: no-repeat;
	background-position: 8px center;
}

.hpd-pg-link:nth-last-child(2) input {
	background-image: url(images/page-url.png);
	margin-bottom: 6px;
}

.hpd-pg-link:last-child input {
	background-image: url(images/page-sht-url.png);
	margin-bottom: 14px;
}

.entry-content iframe {
	text-align: center;
	margin: 0 auto;
	display: block;
}

/*********************************************************************
* Flea Market content formatting
**********************************************************************/

.mktcontent h1,
.mktcontent h2,
.mktcontent h3,
.mktcontent h4{
	text-align: center;
}

body.single-fleamrkt .mk{
	display: none;
}

/* Container holding the image and the text */
.mrkt-header {
  position: relative;
}
/* Centered text */
h2.mrkt-text {
  text-align: center;
  width: 76%;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -10%);
  font-size: var(--global--font-size-sm);
  color: #FFFFFF;
  padding: 6px 5px 6px 5px;
  background-color: #33a27f;
  -moz-border-radius:7px;
  -khtml-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  box-shadow:0 6px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;  /* Single line text */
  overflow: hidden; /* Single line text */
  text-overflow: ellipsis; /* Single line text */
}
/* Link text */
.mrkt-link {
  color: #FFFFFF;
  position: absolute;
  bottom: 7px;
  left: 7px;
  background-color: #33a27f;
  padding: 2px 6px 2px 6px;
  -moz-border-radius:3px;
  -khtml-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
}
.mrkt-link a {
  color: #FFFFFF;
  text-decoration: none;
}

/*********************************************************************
* Header and Footer Styles
**********************************************************************/

#film-footer h4 {
	text-align: center;
	margin-top: 30px;
	margin-bottom: 16px;
}

.hp-source {
	margin-bottom: 8px;
}

.hp-source p {
	font-size: 0.8em;
	font-style: italic;
}

.home-logo {
	display: inline-block;
	margin-bottom: 14px;
	width: 50% !important;
}

.home-logo a img {
	max-width: 100px !important;
}

.powered-by {
	display: inline-block !important;
	text-align: right !important;
}

.soccntr,
.ffm-wrap-foot,
.top-banner-feed,
.ffm-heads {
	width: 100%;
	display: flex;
	justify-content: space-between;
  	align-items: center;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}

.soccntr,
.ffm-wrap-foot {
	margin: 12px auto 24px auto;
}

.ffm-heads {
	margin: 6px auto 12px auto;
}

.top-banner-feed {
	margin: 18px auto 20px auto;
}

.top-banner-feed div {
	text-align: center;
	margin: 0 0.3% 0.6% 0.3%;
	flex: 48%;
	background-color: #FFFFFF;
}

.top-banner-feed.homep div {
	margin: 3px 0.3%;
	flex: 32.5%;
	background-color: #FFFFFF;
}

.top-banner-feed div:hover {
	cursor: zoom-in;
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity:0.6;
	opacity:0.6;
}

p.hpd-banner {
	display: block;
	clear: both;
	text-align: center;
	margin: 0 auto 24px auto;
	font-size: 0.9em;
}
p.hpd-banner a,
p.hpd-banner a:hover {
	text-decoration: none;
}

/* flex 100% on small screens to make mobile friendly */
.ffm-wrap-foot div {
	text-align: center;
	margin: 0 auto;
	flex: 100%;
	padding: 6px 0.5% 6px 0.5%;
}

.ffm-heads div {
	text-align: center;
	margin: 7px auto;
	flex: 100%;
	padding: 6px 0.5% 6px 0.5%;
}

.ffm-heads div a,
.ffm-heads div a:hover {
	text-decoration: none;
}

.top-banner-feed div:first-child {
	background-color: transparent;
}

.top-banner-feed div:first-child img {
	padding: 0;
	border: none;
	width: 100%;
}

.ffm-wrap-foot div img,
.top-banner-feed div img,
.top-banner-feed.homep div img,
.ffm-heads div {
	padding: 6px;
	border: 1px dotted var(--global--color-border);
}

.socplus,
.hpd-pg-link {
	margin: 0 auto;
	text-align: center;
}

.socplus {
	flex: 7.5%;
	padding: 0 0.5% 0 0.5%;
}

.hpd-share {
	width: 100%;
	margin-top: 0;
	max-width: var(--responsive--alignwide-width) !important;
	display: block;
	clear: both;
	background-color: rgba(0, 0, 0, 0.1);
	padding: 6px;
}

.entry-footer {
	margin-bottom: 16px !important;
}

.entry-footer,
.site-footer,
.entry-content {
	border:none !important;
	padding-top: 0 !important;
	margin-top: 24px !important;
}

/*********************************************************************
* Page Galleries
**********************************************************************/

/* Address error with captioned images in .entry-content */
figure.wp-caption.alignright {
	max-width: var(--responsive--alignwide-width) !important;
}
figure.wp-caption.alignleft {
	max-width: var(--responsive--alignwide-width) !important;
}

.gallery-icon img {
	width: auto !important;
	max-width: 100%;
}

.gallery-icon a:hover {
	opacity: 0.5;
}

.gallery-icon {
	margin: 5px;
}

.gallery-item {
	width: auto;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	width: 11.11%;
}

.entry-content .gallery {
	max-width: var(--responsive--alignwide-width);
	margin: 0 auto;
	text-align: center;
}

/*********************************************************************
* Page Header and Search Customizations
**********************************************************************/

.site-header > .site-logo {
	padding-bottom: 0;
	border-bottom: none; 
}

body.search h3 {
	margin-bottom: 18px;
}

header.site-header {
	padding-top: 19px !important;
	margin-bottom: 0 !important;
}

.site-logo .custom-logo {
	max-width: 100% !important;
	max-height: 100% !important;
	margin-bottom: 0 !important;
}

input.search-submit {
	background-image: url(images/search.png);
	background-repeat: no-repeat;
	background-size: auto 40px;
	background-position: center;
}

.search-result-count {
	margin-bottom: 20px;
}

h3.pop-term-head {
	margin-top: 20px;
	margin-bottom: 14px;
	text-align: center;
}

.hpdloader .wrap-search-pop {
	color: #FFFFFF !important;
}

/*.over-search, */
.wrap-search-pop {
	display: block;
}

.wrap-search-pop {
	width: 100%;
	display: flex;
	justify-content: space-between;
  	align-items: center;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	margin: 12px auto 16px auto;
}

.pop-terms {
	flex: 30.5%;
	padding: 0 0.5% 0 0.5%;
	margin-bottom: 14px;
}

.pop-terms ul {
	padding-left: 2px;
	list-style: circle inside none;
}

.pop-terms ul li a {
	text-decoration: none;
}

.pop-terms ul li {
	white-space: nowrap !important; /*  Single line text */
	overflow: hidden !important; /*  Single line text */
	text-overflow: ellipsis !important; /*  Single line text */
}

.pop-terms ul li a:hover {
	text-decoration: none;
}

.search-form {
	max-width: var(--responsive--alignwide-width);
	width: 88% !important;
}

.taxon{
	display: none;
}

.addTax.taxon{
	display: inline-block;
}

.search-result-count p {
	margin-bottom: 20px;
}

.menu-item.menu-search {
	background-image: url(images/search-md-gry.png);
	background-repeat: no-repeat;
	background-size: auto 22px;
	background-position: center;
	width: 30px;
	color: transparent;
}
.primary-navigation .menu-item.menu-search:hover,
.primary-navigation .menu-item.menu-search:link,
.primary-navigation .menu-item.menu-search:visited,
.primary-navigation .primary-menu > .menu-item.menu-search:hover {
	/*color: var(--primary-nav--color-link-hover); */
	color: transparent;
}
.primary-navigation .sub-menu .menu-item.menu-search {
	padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding);
	display: block;
	font-size: var(--primary-nav--font-size-sub-menu-mobile);
	font-style: var(--primary-nav--font-style-sub-menu-mobile);
}
.primary-navigation .menu-item.menu-search:focus {
	position: relative;
	z-index: 99999;
	outline-offset: 0;
	text-decoration-thickness: 2px;
}
.primary-navigation .menu-item.menu-search {
	display: block;
	font-family: var(--primary-nav--font-family-mobile);
	font-size: var(--primary-nav--font-size-mobile);
	font-weight: var(--primary-nav--font-weight);
	padding: var(--primary-nav--padding) 0;
	text-decoration: none;
}
/* END Pop up Search */

/*********************************************************************
* Page Specific Customizations
**********************************************************************/

body.post-type-archive-myfct h1.page-title,
body.post-type-archive-myfct .archive-description,
body.post-type-archive-ffmktcrt h1.page-title,
body.post-type-archive-ffmktcrt .archive-description,
body.post-type-archive-fleamrkt h1.page-title,
body.post-type-archive-fleamrkt .archive-description,
body.post-type-archive-mycoup h1.page-title,
body.post-type-archive-mycoup .archive-description {
	display: none;
}
/* Display on search results */
body.search.post-type-archive-myfct h1.page-title,
body.search.post-type-archive-ffmktcrt h1.page-title {
	display: block;
}

body.post-type-archive-myfct header,
body.post-type-archive-ffmktcrt header,
body.post-type-archive-fleamrkt header,
body.post-type-archive-mycoup header {
	text-align: left;
}

body.post-type-archive-myfct header a,
body.post-type-archive-ffmktcrt header a,
body.post-type-archive-fleamrkt header a,
body.post-type-archive-mycoup header a {
	text-decoration: none;
}

/* Crush Collectibles Landing Page */
body.post-type-archive-ffmktcrt header ul {
	list-style: none;
	list-style-type: none;
}
body.post-type-archive-ffmktcrt header ul li {
	padding-left: 12px;
}
article.ffmktcrt figure.content-image-display a img {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
}

/*********************************************************************
* Image lightbox
**********************************************************************/

#lightbox,
#htmlightbox {
    position:fixed;
    top:0; 
    left:0;
    width:100%; 
    height:100%; 
    background-color:rgba(0,0,0,0.8);
    text-align:center;
	z-index:99999;
}
#lightbox #imgcontent {
	position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width:80%; 
	height:80%;
}
#imgcontent img {
    box-shadow:0 0 25px #111;
	width:auto;
	height:auto;
    max-width:100%;
	max-height:100%;
}
#htmlightbox #htmlcontent {
	position:fixed;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width:85%; 
	height:85%;
	background-color:rgba(0,0,0,0.8);
}
.hpdloader {
	margin:0;
	padding:0;
	cursor: pointer;
}
.hpdloader div,
.icon-search {
	display: none;
}
#htmlcontent,
#htmlcontent + div, /* + div select 1st div inside #htmlcontent */
#htmlcontent form,
#htmlcontent .search-form {
	padding: 0;
}
#htmlcontent {
	position: relative;
}
#lghtclose {
	width: 40px;
	height: auto;
	position: absolute;
	top:10px;
	right:10px;
	padding:0;
	margin:0;
}
#lghtclose img {
	max-width: 100%;
	height: auto;
}
#lghtclose:hover {
	cursor: pointer;
}
#htmlcontent + div {
	width: 100%;
	height: 100%;
}
#htmlcontent form {
	width: 100%;
}
#htmlcontent + div,
#htmlcontent form {
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
}
#htmlcontent .search-form input[type=search],
#htmlcontent .search-form input[type=submit] {
	display: inline-block;
	position: static;
	text-align: left;
	margin: 0;
}
#htmlcontent .search-form input[type=search] {
	width:50%;
}
#htmlcontent .search-form input[type=submit] {
	width:auto;
}

/* Fade in div element after delay 
Ref: graphicfusiondesign.com/design/creating-fancy-css3-fade-in-animations-on-page-load */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#lightbox,
#imgcontent img,
#htmlcontent {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
 
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
 
-webkit-animation-duration:0.7s;
-moz-animation-duration:0.7s;
animation-duration:0.7s;
 
-webkit-animation-delay:0.5s;
-moz-animation-delay:0.5s;
animation-delay:0.5s;
}

/*********************************************************************
* Archives Display

NOTE ON CENTERING:
.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}
Set both the justify-content and align-items properties to center
and the flex item will be perfectly centered
ref: https://www.w3schools.com/css/css3_flexbox_container.asp#flex-direction

Flex default for align-items is align-items: stretch
This stretches shorter items to height of tallest. Options are: stretch, flex-start, flex-end, center
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#the_flex_container
 *********************************************************************/

/* space above titles */
body.blog .entry-header,
body.home.blog .entry-header,
body.archive .entry-header,
body.search .entry-header,
body.page-template-page-home .entry-header.hmpage {
	margin-top: 0 !important;
}

body.blog .entry-content div,
body.home.blog .entry-content div,
body.archive .entry-content div,
body.search .entry-content div,
body.page-template-page-home div {
	width: 100%;
	/*
	Doesn't work with masonry::
	display: flex !important;
	justify-content: space-between;
	align-items: flex-start;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;*/
}

body.blog article,
body.home.blog article,
body.archive article,
body.search article,
body.page-template-page-home article {
	width: 100%;
	max-width: 100%;
	display: block;
	height: auto;
	padding: 12px;
	border: 1px dotted var(--global--color-border);
	margin: 0 0.4% 12px 0.4%;
}

body.page-template-page-home article {
	background-color: #FFFFFF;
}

body.blog .entry-footer,
body.home.blog .entry-footer,
body.archive .entry-footer,
body.search .entry-footer,
body.page-template-page-home .entry-footer {
	margin-bottom: 0;
}

body.blog article .entry-title,
body.home.blog article .entry-title,
body.archive article .entry-title,
body.search article .entry-title,
body.page-template-page-home article .entry-title.hmpage {
	margin-top: 0;
	font-size: 1.4em !important;
}

body.blog article .entry-title a,
body.home.blog article .entry-title a,
body.archive article .entry-title a,
body.search article .entry-title a,
body.page-template-page-home article .entry-title a,
header .site-branding a,
header .site-branding a:hover {
	text-decoration: none !important;
}

body.blog article .entry-title a:hover,
body.home.blog article .entry-title a:hover,
body.archive article .entry-title a:hover,
body.search article .entry-title a:hover,
body.page-template-page-home article .entry-title a:hover {
	text-decoration-style: dotted;
}

.hp-source p a,
aside.widget-area ul li a,
footer.entry-footer a,
body.blog article .entry-footer a,
body.home.blog article .entry-footer a,
body.archive article .entry-footer a,
body.search article .entry-footer a,
body.page-template-page-home article .entry-footer a,
body.archive article a,
body.search article a {
	text-decoration-style: dotted;
}

.hp-source p a:hover,
aside.widget-area ul li a:hover,
footer.entry-footer a:hover,
body.blog article .entry-footer a:hover,
body.home.blog article .entry-footer a:hover,
body.archive article .entry-footer a:hover,
body.search article .entry-footer a:hover,
body.page-template-page-home article .entry-footer a:hover,
body.blog article a:hover,
body.home.blog article a:hover,
body.archive article a:hover,
body.search article a:hover,
body.page-template-page-home article a:hover {
	text-decoration-style: solid;
}

body.blog article .entry-footer > span,
body.home.blog article .entry-footer > span,
body.archive article .entry-footer > span,
body.search article .entry-footer > span,
body.page-template-page-home article .entry-footer > span {
	display: block;
}

/*********************************************************************
* Post Thumbnails

Center image:

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Object fit:
figure.post-thumbnail img {
	object-fit: cover;
	width: 200px;
	height: 100px;
}
 *********************************************************************/

/* Thumbnails should be 100% wide on all archives */
body.blog article figure.post-thumbnail img,
body.home.blog article figure.post-thumbnail img,
body.archive article figure.post-thumbnail img,
body.search article figure.post-thumbnail img {
	width: 100% !important;
	z-index: 2;
	position: absolute;
	top:0;
	left:0;
	height:100% !important;
}

figure.post-thumbnail .thumbIcon {
	z-index: 5;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20% !important;
	height: auto !important;
	min-height: 80px;
	padding: 0;
	margin: 0;
}

figure.post-thumbnail .thumbIcon.lrg {
	width: 34% !important;
	min-height: 120px;
}

figure.post-thumbnail .thumbIcon img {
	max-width: 100% !important;
	object-fit: contain; /* keep image proportions */
	opacity: 0.1;
}

figure.post-thumbnail .thumbIcon img:hover {
	opacity: 1.0;
}

figure.post-thumbnail img,
.entry-header .post-thumbnail,
.singular .post-thumbnail {
	max-width: 100% !important;
}

.post-thumbnail .wp-post-image {
	margin-top: 0 !important;
}

figure.post-thumbnail {
	display:block;
	position: relative;
	margin-top: 0 !important;
	margin-bottom: 24px !important;
	margin-left: auto;
	margin-right: auto;
	padding-bottom:65%; /* Rectangular responsive box */
	overflow:hidden; /* Rectangular responsive box */
	width:100%; /* Rectangular responsive box */
	height:0; /* Rectangular responsive box */
	background-size:cover;
	background-position:center center;
	background-repeat: no-repeat;
}

/* For 'standard' $posts */
figure.post-thumbnail.stand {
	padding-bottom:50%;
}

/* Make left or right aligned images in content no larger than 50% width */
.entry-content a img.alignleft,
.entry-content img.alignleft,
.entry-content a img.alignright,
.entry-content img.alignright {
	max-width: 50% !important;
}

/* clear floated elements
 * ref: stackoverflow.com/questions/2062258/floating-elements-within-a-div-floats-outside-of-div-why */
.clearfix {
  overflow: auto;
}

/*********************************************************************
* Post Formats Archives Display
 *********************************************************************/

body.blog article .entry-content,
body.home.blog article .entry-content,
body.archive article .entry-content,
body.search article .entry-content,
body.page-template-page-home article .entry-content {
	margin-bottom: 0 !important;
}

/* Attachments archive view */
body.blog article.attachment .entry-content,
body.home.blog article.attachment .entry-content,
body.archive article.attachment .entry-content,
body.search article.attachment .entry-content,
body.page-template-page-home article.attachment .entry-content {
	margin-top: 0 !important;
}

body.blog article .entry-footer,
body.home.blog article .entry-footer,
body.archive article .entry-footer,
body.search article .entry-footer,
body.page-template-page-home article .entry-footer {
	margin-top: 0 !important;
}

p.mta-footer {
	text-transform: capitalize;
}

p.mta-footer:last-of-type {
	padding-bottom: 18px;
}

/*********************************************************************
 * Widget Area
 *
 * Grid Displays
 * ref: https://www.w3schools.com/cssref/pr_grid.php
 * testing: https://www.w3schools.com/cssref/tryit.php?filename=trycss_grid-template-columns
 *********************************************************************/

aside.widget-area {
	display: grid;
  	grid-template-columns: 100%;
  	grid-gap: 0;
  	grid-row-gap: 0;
  	row-gap: 0; /* grid-row-gap renamed to row-gap in CSS3 8 */
  	border-top: 1px solid var(--global--color-border);
  	padding: 10px;
	margin-top: 0;
}

aside.widget-area section.widget li {
	white-space: nowrap !important; /*  Single line text */
	overflow: hidden !important; /*  Single line text */
	text-overflow: ellipsis !important; /*  Single line text */
}

/*********************************************************************
 * Mobile Display Styles
 *********************************************************************/

#moblsearch {
	display: none;
}

@media only screen and (max-width: 481px) {
	
	#htmlightbox #htmlcontent {
		width:97%; 
		height:97%;
	}

	#moblsearch {
		display: inline-block;
		margin-top: 3px;
		margin-left: 5px;
		margin-right: 5px;
		background-image: url(images/search-md-gry.png);
		background-repeat: no-repeat;
		background-size: auto 22px;
		background-position: center;
		width: 30px;
		color: transparent;
	}

	.primary-navigation .menu-item.menu-search {
		display: none;
	}
}

@media only screen and (min-width: 482px) {
	
	/*  Addresses issue with left and right aligned images not fully aligning to left/right borders */
	:root {
		--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--alignwide-width)));
		--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--alignwide-width)));
	}

/*********************************************************************
 * Home navigation
 *********************************************************************/
	.primary-navigation {
		margin-top: 14px;
		width: 16% !important;
		padding: 0 !important;
	}

	.primary-menu-container {
		padding: 0 !important;
	}

/*********************************************************************
 * Pop up Search
 *********************************************************************/
	.primary-navigation .primary-menu-container > ul > .menu-item.menu-search {
		padding-left: var(--primary-nav--padding);
		padding-right: var(--primary-nav--padding);
	}
	.primary-navigation .menu-item.menu-search {
		display: block;
		font-family: var(--primary-nav--font-family);
		font-size: var(--primary-nav--font-size);
		font-weight: var(--primary-nav--font-weight);
	}

/*********************************************************************
 * RSS retail image display
 *********************************************************************/
	
	/* flex grow to 0 to align widowed <div>
 	* ref: : https://stackoverflow.com/questions/19625702/css-flex-grid-same-width-for-last-item */
	.ffm-wrap-foot div {
		flex: 0 1 31.9%;
	}
}
@media screen and (min-width:600px) {
/*********************************************************************
* Archive Display
 *********************************************************************/
	body.blog article,
	body.home.blog article,
	body.archive article,
	body.search article,
	body.page-template-page-home article {
		width: 48.3%;
		max-width: 48.3%;
		display: inline-block;
		padding: 12px;
	}
	
/*********************************************************************
 * Flea Market Headings
 *********************************************************************/
	.ffm-heads div {
		flex: 0 1 31.9%;
	}
}
@media screen and (min-width:800px) {
/*********************************************************************
 * Main Nav Icons
 *********************************************************************/
	.top-banner-feed div {
		margin: 0 0.3%;
		flex: 14.6%;
	}
/*********************************************************************
 * Flea Market Headings
 *********************************************************************/
	h2.mrkt-text {
		font-size: var(--global--font-size-xl);
		white-space: normal; /* End single line text */
  		overflow: visible; /* End single line text */
  		text-overflow: clip; /* End single line text */
		top: 50%;
  		transform: translate(-50%, -50%);
		padding: 16px 15px 16px 15px;
  		-moz-border-radius:20px;
  		-khtml-border-radius:20px;
 		-webkit-border-radius:20px;
  		border-radius:20px;
	}
/*********************************************************************
* Archive Display
 *********************************************************************/
	body.blog article,
	body.home.blog article,
	body.archive article,
	body.search article {
		width: 32.3%;
		max-width: 32.3%;
		padding: 18px;
	}
	
	body.page-template-page-home article {
		width: 48.3%;
		max-width: 48.3%;
	}

/*********************************************************************
* Widget Area
 *********************************************************************/
	aside.widget-area {
  		grid-template-columns: 32% 32% 32%;
  		grid-gap: 2%;
  		grid-row-gap: 10px;
  		row-gap: 10px; /* grid-row-gap renamed to row-gap in CSS3 8 */
	}
}
@media screen and (min-width:1000px) {

}