/* CSS Document */
@font-face {
  font-family: 'Basteleur Moonlight';
  src: url("uniefont/basteleur/Basteleur-Moonlight.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; }
/* 2. Bold importeren */
@font-face {
  font-family: 'Basteleur Bold';
  src: url("uniefont/basteleur/Basteleur-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap; }
body {
  background-color: lightyellow;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
  color: darkgreen; }

.unie-logo-animated .navbar-brand {
  position: relative; }
  .unie-logo-animated .navbar-brand img {
    width: 100%;
    max-width: 400px; }
  .unie-logo-animated .navbar-brand:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 95%;
    left: 0px;
    top: 5px;
    background-image: url("../unie/unh-logo-tekst.png");
    background-size: cover;
    -webkit-animation: spin 8s linear infinite;
    -moz-animation: spin 8s linear infinite;
    animation: spin 8s linear infinite; }

h1, h2, h3, h4, h5 {
  font-family: 'Basteleur Bold'; }

.energiecontainer {
  width: 50%;
  float: left; }

.images-steun img {
  max-width: 200px; }

#Laag_culd {
  width: 40px;
  margin-top: -6px; }

main {
  width: calc(100% - 380px);
  float: left; }

.overzichtitem-container {
  border-top: 1px dashed darkgreen;
  padding: 2rem; }

side {
  display: block;
  width: 350px;
  min-height: 300px;
  top: 0;
  position: sticky;
  float: right;
  color: #d54124;
  border-bottom: 1px dashed darkgreen;
  padding-bottom: 1rem; }
  side h3 {
    color: darkgreen;
    font-size: 1rem;
    padding-top: 2rem;
    border-top: 1px dashed darkgreen; }
  side span {
    clear: both;
    display: block;
    margin-bottom: 1rem; }
  side .icoon-side {
    width: 50px; }

.icoon-small {
  width: 50px;
  margin: 5px; }

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg); } }
@keyframes spin {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }