@charset "UTF-8";

/*
Theme Name: Hit Pictures Default Two
Theme URI: https://hit.pics/tech/
Author: Hit Pictures Technology
Author URI: https://hit.pics/tech/
Template: twentytwentyone
Description: A custom theme for Hit Pictures.
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/
 *********************************************************************/

/* 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,
.soccntr,
.socplus,
#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 */
#lghtclose:hover,
.primary-navigation .menu-item.menu-search:hover {
	filter:alpha(opacity=60);
	-moz-opacity:0.6;
	-khtml-opacity:0.6;
	opacity:0.6;
}

/* 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,*/
#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.8s;
-moz-animation-duration:0.8s;
animation-duration:0.8s;
}
/*body,
header,
#site-navigation,*/
.plugin_load_early {
-webkit-animation-delay:0.5s;
-moz-animation-delay:0.5s;
animation-delay:0.5s;
}
#primary.content-area,
.entry-content {
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
animation-delay:1s;
}
#footer.entry-footer {
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
animation-delay:1.5s;
}
.nav-links,
.widget-area,
#footer.site-footer {
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
animation-delay:2s;
}
.plugin_load_late {
-webkit-animation-delay:2.2s;
-moz-animation-delay:2.2s;
animation-delay:2.2s;
}

/* 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,
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,
.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.single-post .entry-title,
body.archive .page-title,
body.search .page-title {
	font-size: 3em !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
**********************************************************************/

.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 {
	margin-bottom:18px !important;
}

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

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

.soccntr {
	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 24px auto;
}

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

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

.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-footer {
	margin-bottom: 16px !important;
}

.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-content iframe {
	text-align: center;
	margin: 0 auto;
	display: block;
}

.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; 
}

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;
}

/* Pop up Search */
.search-form {
	max-width: var(--responsive--alignwide-width);
	width: 88% !important;
}

.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 */

/*********************************************************************
* 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 {
	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
 *********************************************************************/

body.blog .entry-content div,
body.home.blog .entry-content div,
body.archive .entry-content div,
body.search .entry-content 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 {
	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.blog .entry-footer,
body.home.blog .entry-footer,
body.archive .entry-footer,
body.search .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 {
	font-size: 1.4em;
}

header .site-branding a,
header .site-branding a:hover {
	text-decoration: none !important;
}

.hp-source p a,
aside.widget-area ul li a,
footer.entry-footer a,
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.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.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-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.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.blog article a:hover,
body.home.blog article a:hover,
body.archive article a:hover,
body.search 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 {
	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:50% 0;
	background-repeat: no-repeat;
}

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

/*********************************************************************
* 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 {
	margin-bottom: 0 !important;
}

body.blog article .entry-footer,
body.home.blog article .entry-footer,
body.archive article .entry-footer,
body.search 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)));
	}
/*********************************************************************
 * 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);
	}
}
@media screen and (min-width:600px) {
/*********************************************************************
* Archive Display
 *********************************************************************/
	body.blog article,
	body.home.blog article,
	body.archive article,
	body.search article {
		width: 48.3%;
		max-width: 48.3%;
		display: inline-block;
		padding: 12px;
	}
}
@media screen and (min-width:800px) {
/*********************************************************************
* Archive Display
 *********************************************************************/
	body.blog article,
	body.home.blog article,
	body.archive article,
	body.search article {
		width: 32.3%;
		max-width: 32.3%;
		padding: 18px;
	}

/*********************************************************************
* 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) {

}