/* TODO: somehow there is a 1px margin at the bottom of the SVG; it must die... */

/* --- Overall area styles --- */

body {
  background-color: #000000;/* TODO: remove this after the bottom margin bug is fixed */
}

[data-hg-grid-parent] {
  position: relative;
  overflow: auto;
  z-index: 0;
}

/* --- Tile styles --- */

[data-hg-tile-title] {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  font-style: italic;
  color: #FFFFFF;
  text-shadow: 0 0 3px #000000;
}

/* --- PagePost panel styles --- */

[data-hg-post-container] {
  font-size: 18px;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  color: #DDDDDD;
}

[data-hg-post-outer-wrapper] {
}

[data-hg-post-inner-wrapper] {
  position: relative;
  padding: 26px;
  background-color: #282828;
  /* A small repeating hex pattern */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMBAMAAABcu7ojAAAALVBMVEUmKCkmKConKCknKCooJygoKCcoKSYoKScoKiYoKicoKigpJigpJygqJigqJyiW/QuUAAAAOklEQVQIHWMS1L17gInhPUMBE8O/1ReYGPiArDMLGBiYGPhBYn86gWJ5QNZqA5CYIEiM5wxQ7DxDAgD5Cg+buFLSyQAAAABJRU5ErkJggg==);
}

[data-hg-post-container] img {
  max-width: 100%;
}

/* --- PagePost sub-panels styles --- */

[data-hg-post-inner-wrapper] a[data-hg-post-close] {
  position: absolute;
  right: 0;
  margin-right: 24px;
  top: 179px;
  z-index: 1;
  background-color: rgba(0,0,0,0.4);
  padding: 6px;
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 4px;
}
div[data-hg-post-inner-wrapper] a[data-hg-post-close]:hover,
div[data-hg-post-inner-wrapper] a[data-hg-post-close]:visited:hover {
  color: #AAAAAA;
  text-decoration: none;
}
div[data-hg-post-inner-wrapper] a[data-hg-post-close]:active,
div[data-hg-post-inner-wrapper] a[data-hg-post-close]:visited:active {
  color: #444444;
  text-decoration: none;
}
div[data-hg-post-inner-wrapper] a[data-hg-post-close]:visited {
  color: #FFFFFF;
}

[data-hg-post-close] use {
  fill: #FFFFFF;
  -webkit-transition: fill 0.15s;
  transition: fill 0.15s;
}

[data-hg-post-close]:hover use {
  fill: #AAAAAA;
}

[data-hg-post-close]:active use {
  fill: #444444;
}

div[data-hg-post-logo] {
  float: left;
  width: 45%;
  height: 50px;
  margin-bottom: 18px;
  background-repeat: no-repeat;
  background-size: contain;
}

[data-hg-post-date] {
  color: #999999;
  text-align: right;
}

[data-hg-post-location] {
  color: #999999;
  font-size: 14px;
  font-style: italic;
  text-align: right;
}

[data-hg-post-job-title] {
  color: #999999;
  font-size: 14px;
  font-style: italic;
  text-align: right;
}

[data-hg-post-urls] {
  margin: 16px 0;
  padding: 6px;
  background-color: hsla(0, 0%, 23%, 1.0);
  border-radius: 2px;
}

[data-hg-post-urls] > p {
  margin: 4px;
}

[data-hg-post-categories] {
  margin: 16px 0;
  padding: 4px;
  background-color: hsla(0, 0%, 23%, 1.0);
  border-radius: 2px;
}

[data-hg-post-category-card] {
  margin: 4px;
  padding: 1px 6px;
  font-size: 16px;
  background-color: hsla(0, 0%, 90%, 0.9);
  color: #222222;
  border-radius: 2px;
}

/* --- PagePost link styles --- */

[data-hg-post-container] a {
  color: #1E90FF;
  text-decoration: none;
  -webkit-transition: color 0.15s;
  transition: color 0.15s;
}

[data-hg-post-container] a:visited {
  color: #4B87BA;
}

[data-hg-post-container] a:hover {
  color: #8fc7ff;
  text-decoration: underline;
}

[data-hg-post-container] a:active {
  color: #004a94;
  text-decoration: none;
}

/* --- PagePost header styles --- */

[data-hg-post-title] {
  clear: both;
  font-size: 24px;
  text-align: center;
  color: #FFFFFF;
}

[data-hg-post-content] h1,
[data-hg-post-content] h2,
[data-hg-post-content] h3,
[data-hg-post-content] h4,
[data-hg-post-content] h5 {
  font-family: Georgia, serif;
  font-style: italic;
  color: #FFFFFF;
}

/* --- PagePost code styles --- */

[data-hg-post-container] code {
  color: #999999;
}

[data-hg-post-container] pre {
  padding: 8px 8px 8px 16px;
  overflow: auto;
  background: hsla(0, 0%, 0%, 0.3);
  border-radius: 2px;
}

[data-hg-post-container] pre code {
  color: #EEEEEE;
}

/* --- PagePost block quote styles --- */

[data-hg-post-container] blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 1px 16px 1px 44px;
  font-style: italic;
  background-color: hsla(0, 0%, 90%, 0.08);
  border-radius: 2px;
}

/* --- Carousel styles --- */

[data-hg-carousel-container] {
}

[data-hg-carousel-sliders-container] {
  border-radius: 2px;
}

[data-hg-carousel-main-media] {
}

[data-hg-carousel-thumbnail] {
}

[data-hg-carousel-thumbnail-screen] {
  opacity: 0.7;
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
}

[data-hg-carousel-thumbnail][data-hg-selected] > [data-hg-carousel-thumbnail-screen] {
  opacity: 0;
}

[data-hg-carousel-button] use {
  fill: #888888;
  -webkit-transition: fill 0.15s;
  transition: fill 0.15s;
}

[data-hg-carousel-button]:hover use {
  fill: #dddddd;
}

[data-hg-carousel-button]:active use {
  fill: #333333;
}

[data-hg-captions-panel] {
  margin: 3px 18px 26px;
  padding: 18px;
  font-size: 14px;
  background-color: #333333;
  background-color: hsla(0,0%,5%,0.3);
  border-radius: 2px;
}

[data-hg-captions-panel] > p {
  opacity: 0;
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
}

[data-hg-captions-panel][data-hg-selected] > p {
  opacity: 1;
}

[data-hg-carousel-sliders-container],
[data-hg-carousel-thumbnail-screen]{
  background-color: #111111;
}

/* --------------------------------------------------------------------------------------------- */
/* --- Mobile styles --- */

@media (max-width: 600px) {
}