@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700");
/* @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Emoji:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Emoji:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --sidebarWidth: 220px;
  --sideLogoWidth: 150px;
  --topbarHeight: 70px; /* Also used for topbar-left width. */
  --hamburgerWidth: 60px;
  --topLogoWidth: 150px;
  --transitionTime: 700ms;
  --gallery-img-height: 200px;
  --gallery-cap-height: 40px; /* allow for two lines */
  --sidebar-color-bg: #025c02;
  --content-color-bg: #eeeeee;
  --gallery-color_bg: white;
  --h2-h3-color: #025c02;
}
body {
  font-family: 'Source Sans Pro', sans-serif;
  /* overflow: hidden; */
}
h2 {
  margin: 15px 0 5px 0;
  font-size: 30px;
  color: var(--h2-h3-color);
}
h3 {
  margin: 5px 0 15px 0;
  font-size: 24px;
  color: var(--h2-h3-color);
}
#outer {
  background-color: red;
  display: grid;
  grid-template-columns: var(--sidebarWidth) 0px 1fr;
  grid-template-rows: 0px 1fr;
  transition: var(--transitionTime);
}
#sidebar {
  overflow-y: scroll;
  background-color: var(--sidebar-color-bg);
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items:   center;
  justify-content: start;
}
#sidelogo {
  background-color: var(--content-color-bg);
  /* width: var(--sideLogoWidth); */
  width: calc(var(--sidebarWidth) - 50px);
  transition: var(--transitionTime);
  /* margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px; */
  margin: 20px auto 12px auto;
  padding: 16px 10px 16px 10px;
  border: 1px solid white;
  border-radius: 8px;
}
.sidebar-addr {
  font-family: "Asap Condensed";
  font-size: 17px;
  color: white;
  text-align: center;
  padding: 0 0 20px 0;
  line-height: 1.25em;
}
.sidebar-addr a {
  color: white;
}
.topbar-addr {
  font-family: "Asap Condensed";
  font-size: 15px;
  color: white;
  text-align: center;
  padding: 0;
  margin: 0;
  margin-left: 10px;
  line-height: 1em;
}
.topbar-addr a {
  color: white;
}
.sidebar-note {
  font-family: "Asap Condensed";
  font-size: 13px;
  color: white;
  text-align: center;
  padding: 20px 0 0 0;
  line-height: 1.25em;
}
#topbar-left {
  background-color: var(--sidebar-color-bg);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
#hamburger {
  width: 0px;
  transition: var(--transitionTime);
}
#topbar-right {
  background-color: var(--sidebar-color-bg);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* align-items: center; */
  /* justify-content: center; */
}
#toplogo {
  background-color: var(--content-color-bg);
  border: 1px solid white;
  border-radius: 8px;
  width: var(--topLogoWidth);
  transition: var(--transitionTime);
}
#content-wrap {
  background-color: lightgray;
  grid-column: 2 / span 2;
  display: flex;
  flex-direction: column;
}
#content {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 1.5em;
  background-color: var(--content-color-bg);
  overflow-y: auto;
  flex: 1 0 0;
}
article {
  padding: 15px;
}
header {
  padding-bottom: 10px;
}

#nav > ul > li > ul {
	display: none;
}
#nav ul {
	margin: 0;
	list-style: none;
	padding-left: 0;
}
#nav li {
  display: table-row;
  text-align: center;
  line-height: 20px;
  /* margin:0px auto 0px auto; */
	border-top: solid 1px rgba(0, 0, 0, 0.25);
	box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.075);
	padding: 0.5em 0 0.5em 0;
}
#nav li:first-child {
	border: 0;
	box-shadow: none;
	padding-top: 0;
}
#nav li:last-child {
	padding-bottom: 0;
}
#nav li a {
	display: block;
	padding: 0.4em 1em 0.4em 1em;
	text-decoration: none;
	border-radius: 0.4em;
	outline: 0;
  color: #eee;
}
#nav li.current a {
	background-color: rgba(0, 0, 0, 0.15) !important;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 0.25em 0 rgba(0, 0, 0, 0.25);
	font-weight: 700;
	color: #fff;
	/* border-radius: 0.2em 1.2em 1.2em 0.2em; */
  border-radius: 1em;
}
#nav li:hover a {
	background-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.image img {
  display: block;
	width: 100%;
}
.cursor-pointer {
	cursor: pointer;
}
.post-jumper {
	font-size: 24px;
}
.to-top {
  float: unset;
  width: 25px;
  height: 22px;
}
.article-head-main {
  background-color: black;
	/* background-image: url('../img/res/New-Slider-1-Aug-2024-Edited.jpg'); */
	background-image: url('../img/res/New-Slider-2-Aug-2024-1-Edited.jpg');
	/* background-image: url('../img/res/New-Slider-3-Aug-2024-Edited.jpg'); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  display: flex;
  flex-direction: row;
  padding:0;
}
.ghost {
  width: 75%;
  /* background: linear-gradient(90deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%); */
  background: linear-gradient(90deg,rgba(0,0,0,1) 0%, rgba(0,0,0, 0.1) 100%);
  /* background-color: rgba(0,0,0,0.6); */
  color: white;
  padding: 0 20px;
}
.ghost a,
.ghost h2,
.ghost h3 {
  color: white;
}

.lbar {
  border-left: solid 2px lightgray;
  margin-top: 15px;
  padding: 0 0 0 10px;
}
.lbar p {
  margin: 0;
  padding: 0;
}
.article-note {
  font-size: 16px;
  font-style: italic;
}

.post-excerpt {
	border-top: 1px solid black;
}
.sectitle {
	font-size: 1.5em;
	font-weight: bold;
  text-decoration: underline;
}
.toc ul {
  list-style: disc;
  list-style-position: outside;
}
.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: calc(var(--gallery-img-height) + var(--gallery-cap-height));
  /* max-height: 100px; */
  background-color: var(--gallery-color_bg);
  /* border-top: solid 1px red; */
  /* border-bottom: solid 1px red; */
}
.gallery-item {
  margin: 0;
  padding:0;
  background-color: var(--gallery-color_bg);
  flex: 1 0 22%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border: solid 1px #dddddd; */
  /* height: 100%; */
  /* width: 100%; */
}
.gallery img {
  margin: 0;
  padding:0;
  width: 100%;
  height: calc(var(--gallery-img-height) - 4px);
  /* height: calc(var(--gallery-img-height) / 2 - 4px); */
  transition: 400ms;
  object-fit: scale-down;
}
.gallery img.fade {
  opacity: 0;
}
.gallery-cap {
  /* display: flex; */
  font-size: 14px;
  line-height: 1.1em;
  padding: 0 4px 0 4px;
  text-align: center;
}

/* Fix quill use of <ol> for unordered lists. */
ol li[data-list="bullet"] {
  list-style-type: disc;
}


/* Narrower screen - split gallery onto two lines. */
@media screen and (width <= 800px) {
  .gallery {
    height: calc(2 * var(--gallery-img-height) + var(--gallery-cap-height));
  }
  .gallery-item {
    flex: 1 0 44%;
  }
}