html {
  box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit; }

body {
  font-family: sans-serif; }

body {
  display: block !important; }

@keyframes scale-display {
  0% {
    display: none;
    opacity: 0; }
  1% {
    display: initial;
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes scale-display--reversed {
  0% {
    display: initial;
    opacity: 1; }
  80% {
    display: initial;
    opacity: 0; }
  99% {
    display: initial;
    opacity: 0; }
  100% {
    display: none;
    opacity: 0; } }

:root {
  --bg-color-primary: #F2F2F2;
  --bg-color-dark: #375988;
  --text-color-primary: #F2F2F2;
  --text-color-bright: #FFF;
  --text-color-dark: #111;
  --highlight-color: orange; }

.pm-bel-btn {
  border: 2px solid var(--bg-color-dark, grey);
  font-size: 1.25rem;
  font-weight: 300;
  padding: 0.75rem 1.25rem;
  color: var(--text-color-bright, white);
  background-color: var(--bg-color-dark, grey);
  transition: color 0.3s,background-color 0.3s; }
  .pm-bel-btn.pm-bel-btn {
    color: var(--text-color-bright, white); }
  .pm-bel-btn:hover {
    color: var(--bg-color-dark, grey);
    background-color: var(--text-color-bright, white); }

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer; }
  [data-tooltip]:before, [data-tooltip]:after {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 3; }
  [data-tooltip]:before {
    min-width: 16rem;
    display: inline-block;
    position: absolute;
    top: -1rem;
    left: 0;
    transform: translate3d(-50%, -100%, 0);
    padding: 0.5rem;
    border-radius: 3px;
    background-color: #000;
    background-color: rgba(51, 51, 51, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
    transition: opacity 0.5s ease-out,visibility 0.2s; }
  [data-tooltip]:after {
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    width: 0;
    border-top: 1rem solid #000;
    border-top: 1rem solid rgba(51, 51, 51, 0.9);
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0; }
  [data-tooltip]:hover:before, [data-tooltip]:hover:after {
    visibility: visible;
    opacity: 1; }

.pm-bel-sf {
  --card-min-width: 18rem;
  background-color: var(--bg-color-primary, grey); }
  @supports (display: grid) {
    .pm-bel-sf-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width, 16rem), 1fr));
      grid-gap: 1.25rem; } }
  .pm-bel-sf-filter-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem; }
    .pm-bel-sf-filter-bar-button.is-active {
      border-bottom: 3px solid var(--highlight-color, orange); }
  .pm-bel-sf-card {
    position: relative;
    background-color: white;
    padding: 1rem;
    text-align: left;
    animation-name: scale-display;
    animation-duration: .8s;
    animation-fill-mode: forwards; }
    .pm-bel-sf-card > * + * {
      margin-bottom: 1rem; }
    .pm-bel-sf-card-headline {
      font-size: 20px !important;
      line-height: 1.2 !important;
      overflow: hidden;
      max-width: 18ch;
      display: inline-block; }
    .pm-bel-sf-card-body {
      font-size: 16px !important;
      margin-top: 1rem;
      overflow: hidden;
      max-width: 30ch; }
    .pm-bel-sf-card-footer {
      font-size: 12px !important; }
    .pm-bel-sf-card-meta {
      font-size: 12px; }
    .pm-bel-sf-card-date {
      margin-top: 0.6rem;
      font-size: 12px !important; }
    .pm-bel-sf-card.is-hidden {
      display: none;
      /*  animation-name: scale-display--reverse  ;
      animation-duration: .8s;
      animation-fill-mode: backwards;*/ }
    .pm-bel-sf-card-infos {
      position: absolute;
      top: 1rem;
      right: 1.25rem;
      color: var(--bg-color-dark, grey);
      font-size: 0.7rem; }

:root {
      --belsana-font : 'myriad-pro','Source Sans Pro', sans-serif;
      --belsana-font-bold : 'myriad-pro-semi-condensed','Source Sans Pro', sans-serif;
      --belsana-brand-color : #375988;
      --belsana-white-color : #ffffff;
      --belsana-dark-color : #000000;
      --grid-bg-color : #F2F2F2;
    //--grid-bg-color :grey;
      --base-size: 1.5vw;
      --card-padding : 40px;
    }
/*# sourceMappingURL=index.css.map */