:root {
  --header-height: 92px;
  --header-bg: rgba(0,0,0, 0.5);
  --bg-color: pink; }

#header {
  z-index: 20;
  background-color: var(--header-bg); }
  #header a {
    color: white; }

.navbar-brand {
  display: flex;
  align-items: center; }

.PageIssue main#content {
  margin: 0;
  padding: 0; }

.PageIssue .node__content {
  margin-top: 0; }

@media (min-width: 767px) {
  body:not(.scrolled) #header {
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    width: 100%; }
  body:not(.scrolled) #main-wrapper #main {
    margin-top: var(--header-height); }
  body:not(.scrolled) .PageIssue #main-wrapper #main {
    margin-top: 0; }
  body.scrolled #header {
    position: sticky;
    top: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: var(--header-height); }
  body.scrolled .PageIssue #main-wrapper #main {
    margin-top: calc( -1 * var(--header-height)); }
  body.scrolled .region-top-header {
    display: none; } }

.SectionCalloutParallax {
  border: 2px solid cyan;
  padding: 2em;
  margin-bottom: 1em;
  min-height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; }

.SectionHeroVideo {
  max-height: 85vh;
  border: 1px solid yellow;
  margin-bottom: 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-height: 600px; }
  .SectionHeroVideo .content {
    position: relative;
    z-index: 5; }
  .SectionHeroVideo .hero-image {
    z-index: 2;
    width: 100%;
    height: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; }
  .SectionHeroVideo video.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3; }
  .SectionHeroVideo .overlay {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 4; }

/* mobile */
@media (max-width: 767px) {
  .SectionHeroVideo video.hero-video {
    display: none; }
  .SectionHeroVideo .hero-image {
    display: block; } }

/*
 * only make Card, Teaser nice. chips and tags can also be here.
**/
.node--view-mode-card {
  border: 1px solid var(--text-color);
  border-radius: 0.4em;
  padding: 1em;
  margin-right: 1em;
  margin-bottom: 1em; }

.node--view-mode-teaser {
  border: 1px solid var(--text-color);
  border-radius: 0.4em;
  padding: 1em;
  margin-right: 1em;
  margin-bottom: 1em; }
  .node--view-mode-teaser img {
    max-width: 90%; }

.no-navigation .tns-outer > button {
  display: none; }

.no-navigation .tns-outer .tns-nav {
  display: none; }

.no-navigation .tns-outer .tns-controls {
  display: none; }

.my-slider article.node {
  border-radius: 0.5em;
  background: #333;
  overflow: hidden;
  margin: 0 1em 1em 0;
  padding: 1em;
  max-height: 400px;
  height: 400px; }
  .my-slider article.node img {
    max-height: 300px;
    max-width: 300px;
    height: auto; }

.tns-outer > button {
  display: none; }

.tns-outer .tns-controls {
  text-align: right;
  margin-bottom: 0.5em; }
  .tns-outer .tns-controls > button {
    margin-right: 1em;
    border-radius: 10px;
    background: transparent; }

.sf-accordion-toggle {
  display: flex;
  justify-content: flex-end; }

#navbar-main {
  background-color: transparent !important; }

.tabs {
  position: relative;
  z-index: 10; }

.debug {
  border: 1px solid yellow; }

footer.site-footer .block {
  border: 0; }

@media (min-width: 767px) {
  .only-mobile {
    display: none; } }

@media (max-width: 767px) {
  .no-mobile {
    display: none; } }