* {
	box-sizing: border-box; }
  
  body {
	padding: 0;
	margin: 0;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #444; }
  
  .btn {
	display: inline-block;
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.7);
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	border-style: solid;
	border-width: 1px;
	border-radius: 0.3rem;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
	.btn + .btn {
	  margin-left: 1rem; }
  
  .btn:hover {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.3); }
  
  @media screen and (min-width: 64em) {
	.btn {
	  padding: 0.75rem 1rem; } }
  
  @media screen and (min-width: 42em) and (max-width: 64em) {
	.btn {
	  padding: 0.6rem 0.9rem;
	  font-size: 0.9rem; } }
  
  @media screen and (max-width: 42em) {
	.btn {
	  display: block;
	  width: 100%;
	  padding: 0.75rem;
	  font-size: 0.9rem; }
	  .btn + .btn {
		margin-top: 1rem;
		margin-left: 0; } }
  
  .page-header {
	color: #fff;
	text-align: center;
	background-color: #ccc;
	background-image: url('../img/bg.jpg');
	background-size: cover;
	background-position: center;
  }
  
  @media screen and (min-width: 64em) {
	.page-header {
	  padding: 5rem 6rem; } }
  
  @media screen and (min-width: 42em) and (max-width: 64em) {
	.page-header {
	  padding: 3rem 4rem; } }
  
  @media screen and (max-width: 42em) {
	.page-header {
	  padding: 2rem 1rem; } }
  
  .project-name {
	margin-top: 0;
	margin-bottom: 0.1rem; }
  
  @media screen and (min-width: 64em) {
	.project-name {
	  font-size: 3.25rem; } }
  
  @media screen and (min-width: 42em) and (max-width: 64em) {
	.project-name {
	  font-size: 2.25rem; } }
  
  @media screen and (max-width: 42em) {
	.project-name {
	  font-size: 1.75rem; } }
  
  .project-tagline {
	margin-bottom: 2rem;
	font-weight: normal;
	opacity: 0.7; }
  
  @media screen and (min-width: 64em) {
	.project-tagline {
	  font-size: 1.25rem; } }
  
  @media screen and (min-width: 42em) and (max-width: 64em) {
	.project-tagline {
	  font-size: 1.15rem; } }
  
  @media screen and (max-width: 42em) {
	.project-tagline {
	  font-size: 1rem; } }
  
  .main-content :first-child {
	margin-top: 0; }
  .main-content img {
	max-width: 100%; }
  .main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
	margin-top: 2rem;
	margin-bottom: 1rem;
	font-weight: normal;
	color: #159957; }
  .main-content p {
	margin-bottom: 1em; }
  .main-content code {
	padding: 2px 4px;
	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
	font-size: 0.9rem;
	color: #383e41;
	background-color: #f3f6fa;
	border-radius: 0.3rem; }
  .main-content pre {
	padding: 0.8rem;
	margin-top: 0;
	margin-bottom: 1rem;
	font: 1rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
	color: #567482;
	word-wrap: normal;
	background-color: #f3f6fa;
	border: solid 1px #dce6f0;
	border-radius: 0.3rem; }
	.main-content pre > code {
	  padding: 0;
	  margin: 0;
	  font-size: 0.9rem;
	  color: #567482;
	  word-break: normal;
	  white-space: pre;
	  background: transparent;
	  border: 0; }
  .main-content .highlight {
	margin-bottom: 1rem; }
	.main-content .highlight pre {
	  margin-bottom: 0;
	  word-break: normal; }
  .main-content .highlight pre, .main-content pre {
	padding: 0.8rem;
	overflow: auto;
	font-size: 0.9rem;
	line-height: 1.45;
	border-radius: 0.3rem; }
  .main-content pre code, .main-content pre tt {
	display: inline;
	max-width: initial;
	padding: 0;
	margin: 0;
	overflow: initial;
	line-height: inherit;
	word-wrap: normal;
	background-color: transparent;
	border: 0; }
	.main-content pre code:before, .main-content pre code:after, .main-content pre tt:before, .main-content pre tt:after {
	  content: normal; }
  .main-content ul, .main-content ol {
	margin-top: 0; }
  .main-content blockquote {
	padding: 0 1rem;
	margin-left: 0;
	color: #819198;
	border-left: 0.3rem solid #dce6f0; }
	.main-content blockquote > :first-child {
	  margin-top: 0; }
	.main-content blockquote > :last-child {
	  margin-bottom: 0; }
  .main-content table {
	display: block;
	width: 100%;
	overflow: auto;
	word-break: normal;
	word-break: keep-all; }
	.main-content table th {
	  font-weight: bold; }
	.main-content table th, .main-content table td {
	  padding: 0.5rem 1rem;
	  border: 1px solid #e9ebec; }
  .main-content dl {
	padding: 0; }
	.main-content dl dt {
	  padding: 0;
	  margin-top: 1rem;
	  font-size: 1rem;
	  font-weight: bold; }
	.main-content dl dd {
	  padding: 0;
	  margin-bottom: 1rem; }
  .main-content hr {
	height: 2px;
	padding: 0;
	margin: 1rem 0;
	background-color: #eff0f1;
	border: 0; }
  
  @media screen and (min-width: 64em) {
	.main-content {
	  max-width: 64rem;
	  padding: 2rem 6rem;
	  margin: 0 auto;
	  font-size: 1.1rem; } }
  
  @media screen and (min-width: 42em) and (max-width: 64em) {
	.main-content {
	  padding: 2rem 4rem;
	  font-size: 1.1rem; } }
  
  @media screen and (max-width: 42em) {
	.main-content {
	  padding: 2rem 1rem;
	  font-size: 1rem; } }
  
  .site-footer {
	padding-top: 2rem;
	margin-top: 2rem;
	border-top: solid 1px #eff0f1; }
  
  .site-footer-owner {
	display: block;
	font-weight: bold; }
  
  .site-footer-credits {
	color: #819198; }
  
  @media screen and (min-width: 64em) {
	.site-footer {
	  font-size: 1rem; } }
  
  @media screen and (min-width: 42em) and (max-width: 64em) {
	.site-footer {
	  font-size: 1rem; } }
  
  @media screen and (max-width: 42em) {
	.site-footer {
	  font-size: 0.9rem; } }
  
  
	  /************************************************/
  
  
  
  .blog_navbar{margin:0 0 0 28px;  }
  .blog_navbar a:hover{color:black;}
  .blog_navbar .navbar-nav .nav-item a:focus, .blog_navbar .navbar-nav .nav-item .active {background-color:#1c8a43!important;color:#fff!important;font-size:19px!important;font-weight: bold;}
  .blog_navbar .navbar-nav .nav-item .active a {color:#fff!important;font-size:19px!important;font-weight: bold;}
 
  
  
  .blog_icon{width:32px;height:32px;display:inline;position:relative;float:left;margin-right:1rem;}
  .blog_icon img{width:100%;height:100%;}
  
  
  .dot{min-width:3px;width: 3px!important;height: 3px!important;border-radius: 50%;align-self: center;background-color: rgb(68, 67, 67);display:inline-block;vertical-align:middle;margin-left:3px;margin-right:3px;}
  .imageContainer{height:300px;overflow:clip;}
  
  /*<!---https://css-tricks.com/multi-line-truncation-with-pure-css/--->*/
  
  :root {
	/* generic line height */
	--lh: 1.7rem;
  
  /* vars for scaling and repositioning */
	--font: calc(36px + (97 - 36) * ((100vw - 300px) / (1800 - 300)));
		  --line: calc(var(--font) * 2);
		  --move: calc(-0.85 * var(--line));
  }
  
  
  /*OVER FLOW ELLIPSE FOR MULTI-LINE ITEMS */
		  /*This method (below) only works for one line*/
		  
			  /*text-overflow:ellipsis;*/
			  /*white-space: nowrap;*/
			  /*overflow:hidden;*/ 
		  /*Not useful here as we want multiple lines displayed*/
   /*Here we will position an ellipse manually using psuedo classes and cover it when not needed*/
   /* this is a work around to be sure, but overcomes the single line limitation.*/		
  .truncate-overflow {
	  line-height: var(--lh);
	--max-lines: 4;
	  position: relative;
		max-height: calc(var(--lh) * var(--max-lines));
		overflow: hidden;
  /*	padding-left:15px;*/
  /*  	padding-right: 20px; *//* space for ellipsis */
  
  
  }
  .truncate-overflow::before {
	position: absolute;
	content: "...";
	/*Positioning the ellipse - We'll cover it after, if no overflow */
	/* tempting... but shows when lines == content */
	/* top: calc(var(--lh) * (var(--max-lines) - 1)); */
	
	/*
	inset-block-end: 0;
	inset-inline-end: 0;
	*/
	bottom: 0;
	right: 5px;
  }
  .truncate-overflow::after {
	content: "";
	  position: absolute;
	/*
	inset-inline-end: 0;
	*/
	right: 5px;
	/* missing bottom on purpose*/
	width: 1.5rem;
	height: 1.5rem;
	background: white;
  }
  .truncate-overflow::after > .truncate-overflow::before{display:none;content: "";}
  
  /* Custom Classes */
  .w100{width:100%;}
  .no-background{background:none;}
  .borderless{border:0;}
  
  .text-decoration-none{text-decoration:none!important;}
  
  .pointer {cursor:default!important;pointer-events:none;}
  
  .border{border:1px solid #ccc;}
  .blogpostTitle{font: normal normal bold 26px/32px 'josefin slab',serif;}
  .blogpostTitle_shrink{font: normal normal bold 18px/24px 'josefin slab',serif;}
  
  .font-size-small{line-height:14px;font-size:12px;}
  
  .nopadding {padding:0;}
  
  /* Padding Classes Not Present in Bootstrap 3 */
  .padding-xs { padding: .25em; }
  .padding-sm { padding: .5em; }
  .padding-md { padding: 1em; }
  .padding-lg { padding: 1.5em; }
  .padding-xl { padding: 3em; }
  
  .padding-x-xs { padding: .25em 0; }
  .padding-x-sm { padding: .5em 0; }
  .padding-x-md { padding: 1em 0; }
  .padding-x-lg { padding: 1.5em 0; }
  .padding-x-xl { padding: 3em 0; }
  
  .padding-y-xs { padding: 0 .25em; }
  .padding-y-sm { padding: 0 .5em; }
  .padding-y-md { padding: 0 1em; }
  .padding-y-lg { padding: 0 1.5em; }
  .padding-y-xl { padding: 0 3em; }
  
  .padding-top-xs { padding-top: .25em; }
  .padding-top-sm { padding-top: .5em; }
  .padding-top-md { padding-top: 1em; }
  .padding-top-lg { padding-top: 1.5em; }
  .padding-top-xl { padding-top: 3em; }
  
  .padding-right-xs { padding-right: .25em; }
  .padding-right-sm { padding-right: .5em; }
  .padding-right-md { padding-right: 1em; }
  .padding-right-lg { padding-right: 1.5em; }
  .padding-right-xl { padding-right: 3em; }
  
  .padding-bottom-xs { padding-bottom: .25em; }
  .padding-bottom-sm { padding-bottom: .5em; }
  .padding-bottom-md { padding-bottom: 1em; }
  .padding-bottom-lg { padding-bottom: 1.5em; }
  .padding-bottom-xl { padding-bottom: 3em; }
  
  .padding-left-xs { padding-left: .25em; }
  .padding-left-sm { padding-left: .5em; }
  .padding-left-md { padding-left: 1em; }
  .padding-left-lg { padding-left: 1.5em; }
  .padding-left-xl { padding-left: 3em; }
  
  .margin-xs { margin: .25em; }
  .margin-sm { margin: .5em; }
  .margin-md { margin: 1em; }
  .margin-lg { margin: 1.5em; }
  .margin-xl { margin: 3em; }
  
  .margin-x-xs { margin: .25em 0; }
  .margin-x-sm { margin: .5em 0; }
  .margin-x-md { margin: 1em 0; }
  .margin-x-lg { margin: 1.5em 0; }
  .margin-x-xl { margin: 3em 0; }
  
  .margin-y-xs { margin: 0 .25em; }
  .margin-y-sm { margin: 0 .5em; }
  .margin-y-md { margin: 0 1em; }
  .margin-y-lg { margin: 0 1.5em; }
  .margin-y-xl { margin: 0 3em; }
  
  .margin-top-xs { margin-top: .25em; }
  .margin-top-sm { margin-top: .5em; }
  .margin-top-md { margin-top: 1em; }
  .margin-top-lg { margin-top: 1.5em; }
  .margin-top-xl { margin-top: 3em; }
  
  .margin-right-xs { margin-right: .25em; }
  .margin-right-sm { margin-right: .5em; }
  .margin-right-md { margin-right: 1em; }
  .margin-right-lg { margin-right: 1.5em; }
  .margin-right-xl { margin-right: 3em; }
  
  .margin-bottom-xs { margin-bottom: .25em; }
  .margin-bottom-sm { margin-bottom: .5em; }
  .margin-bottom-md { margin-bottom: 1em; }
  .margin-bottom-lg { margin-bottom: 1.5em; }
  .margin-bottom-xl { margin-bottom: 3em; }
  
  .margin-left-xs { margin-left: .25em; }
  .margin-left-sm { margin-left: .5em; }
  .margin-left-md { margin-left: 1em; }
  .margin-left-lg { margin-left: 1.5em; }
  .margin-left-xl { margin-left: 3em; }
  
  /* FLEX */
  .flex-container {
	/* We first create a flex layout context */
	display: flex;
  
	/* Then we define the flow direction 
	   and if we allow the items to wrap 
	 * Remember this is the same as:
	 * flex-direction: row;
	 * flex-wrap: wrap;
	 */
	flex-flow: row wrap;
  
	/* Then we define how is distributed the remaining space */
	justify-content: space-around;
  }
  .flex-container .flex-item{width:48%;}
  
  @media (max-width: 650px) {
  .content .thumbnail{display:none; }
  
	.imageContainer, #blog_header, #blog_header img, .imgMed, .thumbnail {
	  display: none;
	  width:0!important;
	  height:0!important;
	}
  
	.flex-container {
	   flex-direction: column;
		}
  .flex-container .flex-item{width:100%;}
  }
  .content{min-width:375px!important;}
  
  #blog_header{  border-radius: 25px;}
  #AllPosts, .first  {border-radius: 15px 0 0 0;}
  #More, .dropdown  {border-radius: 0 15px  0 0;}
  
  
  /*Header Banner Section*/
  #blog_header{
	  background-color:#1c8a43;
	  color:white;padding-left:30px;padding-right:30px;padding-bottom:10px;
  }
  .banner > img {
		 /* width: 100%;*/
		  height: auto;
		  display:inline-block; /* to get rid of the whitespace */
		  float:right;
		  height: var(--line);
	  /* margin-top: var(--move);
	  position:relative; */
	  }
  
  .banner_text {
	  /*font-family:'Josefin Slab', serif; *//*loaded via 'addtohead function' from gool=gle fonts*/
	  font-weight:bold;
	  /*letter-spacing:-0.3rem;*//*letter-spacing:-2px;*//* trying to match original */
	  color:#f08527;
	  /*color: #bada55!important;*/ /* This color provides no contrast */
	  /*background-color: hsla(0, 0%, 0%, 0.48);*//* 1 option for contrast, but not ideal */
	  /**Webkit functions work okay, but are non-standard...*/
	  -webkit-text-stroke-width: calc(var(--font) / 22);
		-webkit-text-stroke-color: #000000;
	  -webkit-text-fill-color:#f08527;
  
	  /*text-shadow: 2px 2px #bada55;*/
	  
	  font-size: var(--font);
	  line-height: var(--line);
	  
	  text-align: center;
	  margin-left: cal(3rem* var(--line));
	  padding: 0 1rem;
	  /*margin: 0;*/
	  max-width:1800px;
  
	  height: var(--line);
	  /* margin-top: var(--move);
	  position:relative; */
	  
	  transform: translateY(var(--move));
	  margin-bottom: calc(-1 * var(--line));
  
  }
  .banner_subtext{ 
	  color:#18ade1;
	  -webkit-text-fill-color:#18ade1;
	  
	  
  }
  @media (min-width: 1200px){
	  .transform_text{
	  font-size: calc(var(--font)*1.1);
	  -webkit-text-stroke-width: calc(var(--font) / 27);
	  }
  }
  @media (min-width:1800px){
	  .banner_text{
		  position:absolute;
		  left:20%;
		  top:97px;
		  font-size: 97px!important;
		  margin-bottom: !important;
		  transform: none!important;
  
	  }
	  .banner_subtext{
		  
		  font-size: 97px!important;
		  margin-bottom: !important;
		  transform: none!important;
  
	  }
	  
  
	  .banner > img {width:90%;margin-right:-80px;}
  
  }
  
  @media (min-width:2500px){
	  .banner_text{
		  top:50px;
		  -webkit-text-stroke-width: calc(var(--font) / 30);
		  
		  
		  
  
	  }
  }