.intro { 
  background-image: url(blog2-min.jpg);
  /* use background-attachment: scroll if scrolling of background image is too jerky */
  /* background-attachment: scroll; */
}

.top-shadow {
  /* Use tool at https://codepen.io/yaphi1/pen/oNbEqGV to calculate optimal opacity */
  background: linear-gradient(to bottom, rgba(0, 57, 118, 0.521), transparent);
}

.display-table h1,h2 {
  color: white;
  font-size: calc(var(--fontSize) * 1.5);
  margin-top: calc(var(--fontSize) * 1);
  margin-left: calc(var(--fontSize) * 1);
  margin-right: calc(var(--fontSize) * 1);
}

.display-table h3 {
  font-size: calc(var(--fontSize) * 1);
  margin-top: calc(var(--fontSize) * 1);
  margin-left: calc(var(--fontSize) * 1);
  margin-right: calc(var(--fontSize) * 1);
}

.display-table h4 {
  font-size: calc(var(--fontSize) * 0.75);
  margin-top: calc(var(--fontSize) * 1);
  margin-left: calc(var(--fontSize) * 1);
  margin-right: calc(var(--fontSize) * 1);
  color: white;
}

.display-table h5 {
    color: white;
    text-align: center;
    font-size: calc(var(--fontSize) * 0.75);
}

.blog-note {
  margin-left: calc(var(--fontSize) * 2);
  margin-right: calc(var(--fontSize) * 2);
  line-height: calc(var(--fontSize) * 1);
}

.blog-note a {
  color: white;
  font-weight: calc(var(--fontWeight) * 7);
  line-height: calc(var(--fontSize) * 1);
}

.scrollmsg {
  font-weight: calc(var(--fontWeight) * 7);
  text-align: center;
  color: white;
}

.scrollmsg a {
  font-weight: calc(var(--fontWeight) * 7);
  color: white;
}

#total-msg {
  visibility: hidden;
  margin-top: calc(var(--fontSize) * 1);
/*  margin-left: calc(var(--fontSize) * 2);
  margin-right: calc(var(--fontSize) * 2); */
}
/* #total-msg a {
  color: white;
} */

.topics {
    color: white;
    margin-bottom: calc(var(--fontSize) * 2);
}

.fa-file-lines {
    color: var(--brandshadow);
}

.top-heading {
    margin-bottom: calc(var(--fontSize) * 2);
}

.server-note {
  font-size: calc(var(--fontSize) * 0.75);
  margin-top: calc(var(--fontSize) * 1);
  margin-left: calc(var(--fontSize) * 1);
  margin-right: calc(var(--fontSize) * 1);
}

.server-note a {
  font-size: calc(var(--fontSize) * 0.75);
  color: white;
}

.topics-heading {
    font-size: calc(var(--fontSize) * 1.25);
    text-align: center;
    color: var(--brandshadow);
    font-weight: bold;
    margin-bottom: calc(var(--fontSize) * 2);
    margin-top: calc(var(--fontSize) * 1);
}

.topic-list {
    display: none;
}

.posts-heading {
    font-size: calc(var(--fontSize) * 1.25);
    text-align: center;
    color: var(--brandshadow);
    font-weight: bold;
    margin-bottom: var(--fontSize);
}

.tag {
    display: inline-block;
    padding: 4px;
    list-style-type: none;
    margin-bottom: calc(var(--fontSize) * 0.25);
}

.tag-menu {
    text-align: center;
    margin-bottom: calc(var(--fontSize) * 1);
}

.fa-file-lines {
    vertical-align: middle;
}

.postList {
	list-style: none outside none;
}

#divPosts img {
	display: block;
	margin: 0 auto;
}

.loading {
    text-align: center;
}

.postlist {
    text-align: left;
    font-size: calc(var(--fontSize) * 0.75);
    line-height: calc(var(--fontSize) * 1);
    margin-top: calc(var(--fontSize) * 3);
    margin-bottom: calc(var(--fontSize) * 1);
}

.postList li {
	padding-top: calc(var(--fontSize) * 1);
  padding-bottom: calc(var(--fontSize) * 1);
}

.postcount {
    font-size: calc(var(--fontSize) * 0.75);
}

.feedEkList li:last-child {
    border-bottom: none;
}

.sub-title {
    color: var(--brandshadow);
    font-size: calc(var(--fontSize) * 1.25);
}

.sub-title a {
    font-size: calc(var(--fontSize) * 1.25);
}

.rss-note {
    text-align: left;
    font-size: calc(var(--fontSize) * 0.75);
    line-height: calc(var(--fontSize) * 1);
    margin-top: calc(var(--fontSize) * 1);
    margin-bottom: calc(var(--fontSize) * 1);
}

.blog-items {
    margin-bottom: calc(var(--fontSize) * 2);
    /* visibility: hidden; */
    /* display: none; */
}

.blog-items p {
    margin-bottom: calc(var(--fontSize) * 2);
}

#nextmsg {
    text-align: center;
    font-size: calc(var(--fontSize) * 0.75);
}

.postTitle a {
	font-weight: bold;
	color: #4EBAFF !important;
}

.postDate {
	font-size: calc(var(--fontSize) * 0.75);
	color: var(--brandshadow);
}

.left-image {
    float: left;
    margin: 10px 10px 10px 0px;
}

.right-image {
    float: right;
    margin: 10px 0px 10px 10px;
}

.logo-image {
    margin-bottom: calc(var(--fontSize) * 1);
}

.logo a {
    margin-top: calc(var(--fontSize) * 1);
}

.copyright {
    margin-top: calc(var(--fontSize) * 2);
}

.disclaimer {
    margin-top: calc(var(--fontSize) * 1);
    margin-left: calc(var(--fontSize) * 3);
    margin-right: calc(var(--fontSize) * 3);
    font-size: calc(var(--fontSize) * 0.75);
    margin-bottom: calc(var(--fontSize) * 3);
}

.rssSelection {
    margin-top: calc(var(--fontSize) * 3);
    font-size: calc(var(--fontSize) * 1);
}

.rssLink {
    font-size: calc(var(--fontSize) * 1);
}

/* .return {
    font-size: calc(var(--fontSize) * 0.75);
}

a.return, i.return {
    font-size: calc(var(--fontSize) * 0.75);
    vertical-align: middle;
    padding-right: calc(var(--fontSize) * 0.5);
} */

.postError {
    color: red;
    font-size: calc(var(--fontSize) * 2);
    text-align: center;
}

.rssError {
    margin-top: calc(var(--fontSize) * 3);
    font-size: calc(var(--fontSize) * 0.75);
    text-align: center;
}

.apiErrorTags p {
    color: white;
    font-size: calc(var(--fontSize) * 1.5);
    font-weight: calc(var(--fontWeight) * 7);
    text-shadow: 1px 0 0 #003976, 0 -1px 0 #003976, 0 1px 0 #003976, -1px 0 0 #003976;
}

.apiErrorTags a {
    color: white;
    font-size: calc(var(--fontSize) * 1.5);
    font-weight: calc(var(--fontWeight) * 7);
    text-shadow: 1px 0 0 #003976, 0 -1px 0 #003976, 0 1px 0 #003976, -1px 0 0 #003976;
}

/* this technique for using text within a lined heading that is fully responsive */
/* can be found at: http://jsfiddle.net/Puigcerber/vLwDf/1/ */
/* Do not show on small screens, as the lines before and after look distorted when the heading wraps */


h3 {
    overflow: hidden;
    text-align: center;
}



@media screen and (min-width: 40em) {

    h3:before,
    h3:after {
        background-color: #003976;
        content: "";
        display: inline-block;
        height: 2px;
        position: relative;
        vertical-align: middle;
        width: 50%;
    }

    h3:before {
        right: 0.5em;
        margin-left: -50%;
    }

    h3:after {
        left: 0.5em;
        margin-right: -50%;
    }
}

@media print {
  .intro {
    display: none;
  }
  .blog-items {
    page-break-inside: avoid;
  }
  .postList li {
    page-break-inside: avoid;
  }
}