/*
:root {
  --col-deepblue: #4478e3;
  --header-black: rgb(26, 24, 24);
  --navbar-hover: rgb(203, 173, 52);
  --navbar-active: rgba(0, 128, 0);
  --homepage-cards: rgba(0, 128, 0, 0.65);
}
*/
html {
  min-height: 0 !important;
}

body {
  margin: 0;
  background: var(--page-background) !important;
  min-height: 0 !important;
  line-height: 1.6;
  font: Tahoma, Geneva, sans-serif;
  /*cssfontstack.com*/
  font-size: 15px;
  color: var(--page-font-color) !important;
  font-weight: 100;
}
a {
  color: var(--link-font-color);
}
a:hover {
  color: var(--link-hover-color);
}

main {
  margin: 20px;
  padding: 10px 0px 0px 0px;
  margin-bottom: 0px;
  z-index: 2;
}

@media screen and (max-width: 600px) {
  main {
    margin: 5px;
    padding: 5px 0px 0px 0px;
    margin-bottom: 0px;
  }
}

#footer {
  width: 100%;
  bottom: 0px;
  margin-bottom: 0;
  display: none;
  z-index: 0;
}

svg {
  width: 100%;
  overflow: visible;
}

.wave {
  animation: wave 8s linear;
  animation-iteration-count: infinite;
  fill: var(--footer-wave-color);
}

#wave2 {
  animation-duration: 5s;
  animation-direction: reverse;
  opacity: .6
}

#wave3 {
  animation-duration: 7s;
  opacity: .3;
}

@keyframes drop {
  0% {
    transform: translateY(25px);
  }

  30% {
    transform: translateY(-10px) scale(.1);
  }

  30.001% {
    transform: translateY(25px) scale(1);
  }

  70% {
    transform: translateY(25px);
  }

  100% {
    transform: translateY(-10px) scale(.1);
  }
}

@keyframes wave {
  to {
    transform: translateX(-100%);
  }
}

.demo-card-event.mdl-card {
  width: 256px;
  height: auto;
  background: var(--homepage-card-background);
  float: left;
  margin-right: 30px;
  margin-bottom: 15px;
}

.demo-card-event>.mdl-card__actions {
  border-color: rgba(255, 255, 255, 0.2);
}

.demo-card-event>.mdl-card__title {
  align-items: flex-start;
}

.demo-card-event>.mdl-card__title>h4 {
  margin-top: 0;
}

.demo-card-event>.mdl-card__actions {
  display: flex;
  box-sizing: border-box;
  align-items: center;
}

.demo-card-event>.mdl-card__actions>.material-icons {
  padding-right: 10px;
}

.demo-card-event>.mdl-card__title,
.demo-card-event>.mdl-card__actions,
.demo-card-event>.mdl-card__actions>.mdl-button {
  color: var(--homepage-card-font-color);
}

.hpMessage {
position: absolute;
transition: opacity 1.75s;
}
.hpMessageRelative {
  position: relative;
}