body {
    font-family: -apple-system,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;

	background:white;
	margin: 0px;
	padding: 0px;
	border: none;
	color: #363636;
	line-height:1.2;
}

.wp-block-image img {
	max-height: max(800px, 50vh); 
}

/* Add this to vertical images to not get it distorted */
.wp-block-vertical-image img {
/* 	max-height: max(800px, 50vh);  */
	width:auto;
	
}
	

.wp-block-image figcaption {
	text-align:center;
	font-style:inherit;
	font-size: smaller;


}

/* Fixed via settings in the comment plugin */
/* @media screen and (max-width: 800px) {
	#wpcomm .wc-comment-author a {
		white-space: normal;
	}
} */

h1 {
	font-size:1.8em;
	font-weight:normal;
	color:black;
}

a {
	color: #008fff;
    text-decoration: none;
	word-wrap: break-word; 
	max-width: 100%;	/* was hardcoded, which caused issues with image links to limit to 300 px */
}


img {
	border:none;
}

.main {
	margin: 0 25px 0 25px;
}

.main a:hover {
	color: #008fff;
}

.post h1 {
	margin-top:0;
}

.category_title h1 {
	margin-top:0;
}


.preferred_header_font {
/*	font-family: Oriya MN, Myriad Pro, Helvetica Neue, Helvetica, sans-serif;;*/
}

.header {
	background-color: rgb(57,57,57);
	height: 4em;
	margin-top:30px;
	margin-left:10px;
	margin-right:10px;
	margin-bottom:0px;
	
	padding-bottom: 10px;
	
	font-size: 22px; /* Base fond size for the header */
	
	color:white;
	
	display: flex;
	flex-direction: row;
	position:relative;
	
}

#header_logo {
	position: absolute;
	left: 15px;
	top: -25px;
}

.header_left_group {
	min-width: 235px;
	align-self: center; /* Vertically center in the dark bar */
}

.header_links a {
	color: white;
}

.header_links a:hover {
	color: #008fff;
}

.redwood_monkey_link a {
	color: #ff9696;
}

.redwood_monkey_link a:hover {
	color: #f81818;
}


.header_name {
   font-size: 2.68em; /* 59px Based on 22px for "group" */
   margin-bottom: -0.3em; /* Needed to push up the subtitle */
}

.header_subname {
	font-size: 0.8em;
	padding-top:0.4em;
	margin-left: 15px;
}

.flex_middle_spacer {
	flex-grow: 1; /* This item in the middle grows; the left/right side are fixed, until a min size */
}

.header_logo_spacer {
	width:80px; /* tree logo spacer */
	flex-shrink: 0; /* Makes it NOT shrink; this is changed when  we hit < 950px */
}

.header_right_group {
	text-align: right;
	margin-right: 29px;
	display:flex;
	justify-content: flex-end;
	flex-direction: column;
	flex-shrink: 0; /* Makes it NOT shrink; this is changed when  we hit < 950px */
}

.header_text_links a {
	margin-left: 0.35em;
	margin-right: 0.35em;	
}

.header_right_group {
	font-size:0.9em;
}

.social_group div.header_text_links {
	margin-top: -.1em;
	
}

.page_links_group {
	display:flex;
}

.page_links {
	font-size: 1.3em;
	margin:0px 10px 10px 10px;
}

.page_links a {
	color:black;
	margin-right:0.9em;
}	

.page_links div {
	display:inline-block;	
}

.page_links a:hover {
	color: #008fff;	
}

.shop_group {
	display:flex;
	background-color: rgb(96, 96, 96);	
	
	height: 35px;
	margin-top: 0px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 5px;	
	
	padding-right: 1.3em; /* Right aligns the text with About */
	
	font-size: 1.25em;
}

.subscribe-header {
	margin-top:8px;
}


.shop_group_item {
	padding-top: 0.2em;
	margin-right: 0.5em;
	color: white; /* Products text */
	padding-left:7px;
}


.social_group {
	height: 30px;
	padding-top: 10px;
	display:flex;
}

.category_title {
	text-align:center;
	margin-bottom: 4px;
}


.sidebar_box {
	background: rgba(232, 232, 232, .5);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
 	padding: 10px; 
	margin: 10px 10px 16px 10px
}

.sidebar_post_preview {
	text-align: center;
 	width:320px;
}

.sidebar_post_preview img {
 	width: 300px; 
	height: 100%;
}

.sidebar_post_title {
	padding-top:5px;
}

.sidebar_post_title a {
	color: black;
	font-size: 1.25em;
	padding: 2px;
	
}

.square_ad {
	text-align: center;
	display: inline-block;
	width: 300px;
	height: 250px
}

.index_single_post_ad {
	height: 300px;
}

.index_single_post_ad ins {
	margin:0 auto; /* center google ads */
}

#social_icons {
	display:none;
}

.social_icons {
	padding-right: 7px;
}


.index_single_post {
	display:flex;
	flex-direction: column;	
	width: 380px;
	margin: 25px 25px 25px 25px;
	position:relative;
}

.index_single_post h2 {
	font-weight: normal;
	margin-top: 8px;
	margin-bottom: 4px;

}

.index_single_post img {
	max-width: 100%;
	height:100%;
}

.index_single_post a {
	color: rgb(13, 13, 13);	
}

.index_single_post_exceprt {
	color: rgb(100, 100, 100);
	margin-top: 1px;
}


.index_single_post_categories {
	margin-top:5px;
	color: rgb(180, 180, 180);

}

.index_single_post_categories a {
 	color: rgb(180, 180, 180); 

}

/* Used on single.php and index.php */
.post_date_square {
	background: rgba(232, 232, 232, .5);
	border-radius: 10px;
	width: 74px;
	height: 74px;
	text-align: center;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
	flex-shrink: 0;
}

/* Position and color override of the date on the index.php */
.index_post_date_square {
	background: rgba(232, 232, 232, .95);
	position: absolute;
	left: -30px;
	top: 100px;
}


.date_month {
	margin-top:5px;
	font-size:20px;
}

.date_day {
	margin-top: -7px;
	font-size: 30px;
}

.date_year {
	margin-top: -5px;
	font-size: 15px;
}

.all_posts {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	
}

.paginate_links {
	font-size:18px;
	text-align: center;
}

.page-numbers {
	padding-left: 2px;
	padding-right: 2px;
}

.small_square_post_preview {
	overflow: auto;
	padding:5px;
	margin:5px;
}

.small_square_post_preview_title {
	font-size: 1.2em;
}

.tags {
	margin-top: 5px;
	margin-bottom:20px;
	/* color: rgb(180, 180, 180);  */
	
}

.tags a {
	color: rgb(180, 180, 180);
}


/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
	.date_month {
		margin-top:0px;
	}
}


/* Allow the left header group to shrink when at small sizes */
@media screen and (max-width: 970px) {
	.page_links {
		font-size: 20px; /* from 20 */
	}
}


@media screen and (max-width: 920px) {
	.page_links {
		font-size: 18px;
	}
	
	.index_single_post {
		width: 300px;
	}
	.index_single_post_ad {
		padding:0;
	}
}

@media screen and (max-width: 840px) {
	.header {
 		font-size: 18px; 
	}
	#header_logo {
		left: 13px;
		top: -35px;	
		transform: scale(0.9);
	}	

	/* Shrink the sidebar boxes (and ads) to half the size they were */
	.sidebar_post_preview {
		text-align: center;
		 width:160px;
	}
	
	.sidebar_post_preview img {
		 width: 150px; 
		height: 100%;
	}	
	.square_ad {
		text-align: center;
		display: inline-block;
		width: 150px;
		height: 125px
	}
		
}

@media screen and (max-width: 750px) {
	.index_single_post {
		width: 420px; /* back to wider */
	}
}

@media screen and (max-width: 735px) {
	/* Reset the flow to be vertical...maybe do at 700px? */
	.header {
		flex-direction: column;
		height: 140px;
		align-items: center;
	}
	.header_left_group { /* corbin fix */
		margin-left:0px;
	}
	/* Remove this right hand spacer now that we are centering the search group */
	.header_right_group {
		margin-right:0px;
	}

	/* column wrap the sidebar and center the contents */	
	.single_post_content_container {
		flex-direction: column;
	}

	.single_post_sidebar {
		margin-left:auto;
		margin-right:auto;
	}
	
	.sidebar_box {
		display:none; /* Hide the sidebar boxes !! I think it looks better on phones. I used to set the margins to auto */
/*
		margin-left: auto;
		margin-right: auto;
*/
	}
	
	.search_group {
		margin-right:auto; /* margin-left is already auto; this moves from right align to centering */
	}
	
	.header_logo_shrink_item {
		display:none;
	}

/* it would be better if this was based on the parent "header" font size and then I don't have to change it. */
	.shop_group {
		font-size: 1.0em;
		height: 28px;
	}
	
	.header_logo_spacer {
		width: 60px;
	}
	
}

@media screen and (max-width: 550px) {
	.main {
		margin-left:5px;
		margin-right:5px;
		
	}
	.header_group_right {
		margin-right:5px;
	}
}


/* iphone 8 plus and smaller */
@media screen and (max-width: 475px) {
	.header {
		height: 7.5em;
	}
	.search_field_input {
		font-size: 20px;
		width: 140px;
	}
	
	.header_left_group { /* corbin fix?? */
		margin-left:10px;
	}
	
	.size-main_index_thumbnail {
		width:100%;
		height:100%;
	}
	
	.category_title {
		margin-top:5px;
		margin-bottom:5px;
	}
	
	.category_title h1 {
		margin-top: 4px;
		margin-bottom: 5px;
	}
	
/*
	.single_post_content_container {
		margin-top:5px;
	}
*/
	
	.index_post_date_square {
		left: 5px;
		top: -30px;	
	}
	
	#header_logo {
		left: 0px;
		top: -35px;
		transform: scale(0.8);
	}
	.search_font {
		font-size: 0.9em;
	}
	
	.page_links {
		margin-left:10px;
		text-align:center;
	}

	.sidebar_box {
		padding:0;
	}
	.social_group {
		margin-left: 30px;
	}
	
	.header_subname {
		font-size: 0.65em;
	}
	
	.shop_group {
		font-size: 0.9em;
		padding-right:0;
		height:25px;
	}	
	
	.header_logo_spacer	 {
		width:40px;
	}
	.header_right_group {
		margin-top:0.7em;
	}
	
}

@media screen and (max-width: 375px) {
	#header_logo {
		left: -10px;
		top: -45px;
		transform: scale(0.75);
	}
	.header {
		font-size: 16px; 
	}
	.shop_group {
		font-size:0.8em;
		
	}
	.shop_group_item {
		padding-left:0;
		padding-right:0;
		
	}
	.login_item {
		display:none;
	}
}

@media screen and (max-width: 321px) {
	.header {
		font-size: 14px; 
	}	
	
	.sidebar_post_preview {
		width:300px;
	}
	
	.search_group {
		/* harcoded side margins and no more centering at this size */
		margin-left: 50px;
		margin-right:5px;
	}
}
.videowrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; 
	height: 0;
}

.videowrapper iframe,
.videowrapper object,
.videowrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.dont_break_out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

.search_group { 
	display: table;	
	margin-left: auto; /* right aligns */
}

.search_field_input_container  {
	background-color: rgb(96, 96, 96);	
}

.search_font {
	font-family: Myriad Pro, Helvetica Neue, Helvetica, sans-serif;
	font-size: 1.0em;
}

.search_field_input  {
	background-color: rgb(96, 96, 96);
	border-radius: 0px;
	-webkit-appearance: none;
	border:0;
	padding: 1px 0px 0px 8px;
	color: white;
	width: 170px;
}

.search_group_item {
	display: table-cell;	
}

.search_submit_group, .search_button {
	background-color: rgb(234, 234, 234);

}

.search_button {
	border-width: 0;
/* 	background-color: rgb(234, 234, 234); */
	color:black;
	padding: 0 12px 0 10px;
}


.svg_icon_container {
	display:inline-block;
	padding-left: 2px;
	padding-right:2px;
}

.svg_icon {
	width: 18px;
	height: 18px;	
 	fill: white;
}


/* ---------- DROP DOWN MENU */

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown  {
  border: none;
  outline: none;
  color: white;
/*   padding: 14px 16px; */
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding:0 0 0 0;
  margin: 6px 0 0 0;

}

.dropdown-content a {
  float: none;
  color: black;
  padding: .3em 1em;
  text-decoration: none;
  display: block;
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* --------- END DROP MENU */



/* START ------------- single.php */

.single_post_header {
	display:flex;
	justify-content:left;
	margin-top:14px;
}

.single_post_header h2 {
	margin-top: 0;
	margin-bottom:12px;
	font-weight: 500;
	font-size: 2em;
	color: black;
}

.single_post_title_categories {
	margin-left: .7em;
}

.single_post_content_container {
	display:flex;
	margin-top:5px;
		
}

.single_post_content {
	margin-left:auto;
	margin-right:auto;
	width:100%;	
	max-width:800px; /* The CONTENT's max width is set right here!! Corbin. This matches my max image size i'm using of 800, and looks better. see .wp-block-image */
}


.single_post_content_inset {
	margin-left:10px;
	margin-right:10px;
}

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


/* END ------- single.php */


/* OLD stuff below!!! */


/* Photo shadows/borders. borrowed from the net. */

.landscape, .portrait {
	font-size: 15px;
	line-height: 20px;
	clear: both;
	display: block;
	background-color: #fff;
	padding: 20px;
	border: 1px solid #85878c;
	margin: 0 auto 45px auto;
	position: relative;
	text-align: center;	
}

.landscape img, .portrait img {
	border: 1px solid #85878c;
}

.landscape { 
	width: 500px; 
}

.portrait {
	width: 300px;
}


.photo_title {
	text-align: center;
	font:bold 1.1em/1;
}

.content_bottom {
	background-repeat: no-repeat;
	padding-top:10px;
	padding-bottom:10px;
	text-align: center;
}

.content_bottom p {
	padding:0px;
	margin:0px;
	font-size:12px;
}

img.attachment-tiny_square {
	text-align: left;
	float: left;	
	padding-left: 2px;
	padding-right: 5px;
}



.prev_and_next_container {
	display: flex;
    align-items: flex-start;
	
}

.prev_and_next_item {
	width:50%;
	
	background: rgba(232, 232, 232, .5);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
	padding:5px;
}
.prev_and_next_title {
	font-size: smaller;
	text-align:center;
}

.square_thumb_and_text_container {
	display: flex;
}

.square_thumb_image {
	flex-shrink: 0; /* don't let it shrink */
}

.square_thumb_text {
	margin-left:5px;
	text-align: center;
}

@media screen and (max-width: 475px) {
	.square_thumb_and_text_container {
		flex-direction: column;
	}
	 .square_thumb_image {
		margin-left:auto;
		margin-right: auto;
	}	

	.square_thumb_text {
		margin-left: 0;
	} 

}