diff --git a/themes/lumbung-theme/static/css/main.css b/themes/lumbung-theme/static/css/main.css
index 2b9874a..019dee4 100644
--- a/themes/lumbung-theme/static/css/main.css
+++ b/themes/lumbung-theme/static/css/main.css
@@ -3,87 +3,97 @@
     font-style: normal;
     font-weight: 400;
     src: url(fonts/gudea.woff2) format("woff2");
-}
-
-@font-face {
+  }
+  
+  @font-face {
     font-family: Gudea;
     font-style: italic;
     font-weight: 400;
     src: url(fonts/gudea-italic.woff2) format("woff2");
-}
-
-@font-face {
+  }
+  
+  @font-face {
     font-family: Gudea;
     font-style: normal;
     font-weight: 700;
     src: url(fonts/gudea-bold.woff2) format("woff2");
-}
-
-:root {
+  }
+  
+  :root {
     --border-color: tomato;
-
+  
     --tv-dark: #237D0F;
     --tv-light: #E2FAD7;
-
+  
     --pen-dark: #C5021E;
     --pen-light: #FFEBD9;
-
+  
     --social-light: #C2E4F2;
     --social-dark: #0163A4;
-
+  
     --gallery-light: #FCF4B9;
     --gallery-dark: #846A00;
-
+  
     --kios-light: #F6D1BC;
     --kios-dark: #E05732;
-
+  
     --shouts-dark: #CB001D;
     --shouts-light: #FFD9DD;
-
+  
     --calendar-light: #B6EDFF;
     --calendar-dark: #0E64C8;
-
+  
     --sounds-light: #ECC5EC;
     --sounds-dark: #CA14D4;
-
+  
     --books-dark: #954d43;
     --books-light: #edd7c4;
-}
-
-
-/*Main Stuff*/
-
-body {
+  }
+  
+  
+  /*Main Stuff*/
+  
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  
+  body {
     font-size: 21px;
     font-family: Gudea, sans-serif;
     margin: 0;
-
+  
     /* pushes footer to bottom */
     display: grid;
     grid-template-rows: auto auto 1fr auto;
     min-height: 100vh;
-}
-
-/* pushes banner to bottom */
-body > iframe {
+  }
+  
+  /* pushes banner to bottom */
+  body > iframe {
     margin: auto 0 0;
-}
-
-* {
+  }
+  
+  * {
     box-sizing: border-box;
-}
-
-.container {
+  }
+  
+  a {
+    color: #000;
+  }
+  
+  .container {
     margin: 2em auto;
     max-width: 80%;
+    width: 100%;
     margin-bottom: 0;
-}
-
-.container .single {
+  }
+  
+  .container .single {
     max-width: 65ch;
-}
-
-.card {
+  }
+  
+  .card {
     border: 2px solid var(--border-color);
     background-color: #fff09d;
     max-width: 600px;
@@ -91,13 +101,13 @@ body > iframe {
     flex: auto;
     margin: 0 3em 3em 0;
     align-self: start;
-}
-
-.card {
+  }
+  
+  .card {
     background-color: peachpuff;
-}
-
-.date-marker{
+  }
+  
+  .date-marker{
     background-color: #333333;
     color: white;
     font-style: bold;
@@ -108,306 +118,389 @@ body > iframe {
     font-family: Gudea;
     font-weight: 700;
     text-align: center;
-}
-.date-marker:nth-child(odd){
+  }
+  .date-marker:nth-child(odd){
     transform: rotate(3deg);
-}
-.date-marker:nth-child(even){
+  }
+  .date-marker:nth-child(even){
     transform: rotate(-2deg);
-}
-
-
-.side-bar {
+  }
+  
+  
+  .side-bar {
     border: 2px solid var(--border-color);
     max-width: 400px;
-}
-
-.card:nth-child(even) {
+  }
+  
+  .post:nth-child(even) {
     transform: rotate(-1deg);
-}
-
-.card:nth-child(odd) {
+  }
+  
+  .post:nth-child(odd) {
     transform: rotate(1deg);
-}
-
-.card:nth-child(5) {
+  }
+  
+  .post:nth-child(5) {
     transform: rotate(2deg);
-}
-
-.video.box {
+  }
+  
+  .video.box {
     margin-top: 3em;
-}
-
-.bar {
+  }
+  
+  .bar {
     border: 2px solid var(--border-color);
     box-shadow: 0.6em 0.6em 0 #d2d1c8;
     margin-bottom: 2em;
     margin-top: 3em;
     display: inline-block;
     background-color: #fff09d;
-}
-
-.h-feed {
+  }
+  
+  .h-feed {
     display: flex;
     flex-flow: row wrap;
     width: 100%;
-}
-
-.p-name {
+  }
+  
+  .p-name {
     padding-right: 1em;
-}
-
-/* base header & menu */
-
-#top-menu {
-    padding: 1.5rem 1rem 0;
-    display: grid;
-    grid-template-columns: 300px 1fr auto;
-    align-items: flex-start;
-}
-
-.home-link {
-    text-decoration: none;
-}
-
-.logo {
-    width: 283px;
-    margin-top: 2rem;
-}
-
-#top-menu a {
+  }
+  
+  /* base header & menu */
+  
+  .header-row {
+    margin: 1.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .home-link {
+    display: block;
+    max-width: 700px;
+    width: 70%;
+    padding: 0;
+    margin: auto;
+  }
+  
+  .logo {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+  
+  #top-menu .login-link {
+    background: #009d9b;
+    padding: 5px 30px;
+    color: #fff;
+    font-weight: 900; 
+    position: absolute;
+    right: 1.5rem;
+  }
+  
+  .menu-row {
+    margin: 0 auto;
+    max-width: 80%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: sticky;
+    top: 15px;
+    z-index: 99;
+    max-width: fit-content;
+  }
+  
+  .menu-row .menu .filter-link {
+    background: #333;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1.5rem;
+    color: #fff;
+    cursor: pointer;
+  }
+  
+  .filter-icon {
+    height: 14px;
+    width: auto;
+    display: block;
+    margin-right: 10px;
+  }
+  
+  .filter-icon path {
+    fill:#fff;
+  }
+  
+  .menu-button {
+    width: 30px;
+    height: 16px;
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+    color: pointer;
+  }
+  
+  .menu-button--line {
+    width: 100%;
+    height: 2px;
+    background: #333;
+  }
+  
+  .menu {
+    border: 2px solid #333;
+    padding: 0 1rem;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    position: relative;
+  }
+  
+  .menu-dot {
+    width: 10px;
+    height: 10px;
+    margin-right: 3rem;
+  }
+  
+  .menu ul {
+    list-style-type: none;
+    margin: 0 auto;
+    padding-left: 0;
+    display: flex;
+    justify-content: space-between;
+    text-transform: lowercase;
+  }
+  
+  .menu ul li {
+    margin-right: 1.5rem;
+    padding: 0.5rem 0;
+  }
+  
+  .menu ul li:last-child {
+    margin-right: 0;
+  }
+  
+  .menu-nav-item {
+    border-right: 2px solid var(--border-color);
+    padding: 0.5em;
+  }
+  
+  .menu a {
     text-decoration: none;
     color: #333;
-}
-
-#top-menu a:hover,
-#top-menu a:focus {
+  }
+  
+  .menu a:hover,
+  .menu a:focus {
     color: black;
-}
-
-#top-menu #login {
-    font-weight: bold;
-    margin-top: 8px;    
-}
-
-#top-menu div {
+  }
+  
+  #top-menu div {
     display: flex;
-}
-
-#top-menu div.mobile-menu,
-.drawer {
+  }
+  
+  #top-menu div.mobile-menu,
+  .drawer {
     display: none;
-}
-
-#top-menu input {
+  }
+  
+  .menu input {
     border: none;
     border-bottom: 1px solid #333;
     margin-right: 2rem;
     font-size: 13px;
     margin-left: 5px;
-}
-
-#top-menu input:focus,
-#top-menu input:hover {
+  }
+  
+  .menu input:focus,
+  .menu input:hover {
     outline: none;
     border-bottom: 1px solid #333;
-}
-
-.menu-dropdown summary {
+  }
+  
+  .menu-dropdown summary {
     list-style: none;
     cursor: pointer;
-}
-
-.dropdown-menu summary::-webkit-details-marker {
+  }
+  
+  .dropdown-menu summary::-webkit-details-marker {
     display: none;
-}
-
-.menu {
-    margin-top: 8px;
-}
-
-.menu ul {
-    list-style-type: none;
-    margin: 0 auto;
-    padding-left: 3rem;
+  }
+  
+  .login-menu {
+    display: none;
+  }
+  
+  .menu-row .login {
+    height: 100%;
     display: flex;
-    justify-content: space-between;
-    text-transform: lowercase;
-    max-width: 1100px;
-}
-
-.menu-nav-item {
-    border-right: 2px solid var(--border-color);
-    padding: 0.5em;
-}
-
-/* styles for "tools" dropdown menu */
-#top-menu ul.submenu {
+    align-items: center;
+    border: 2px solid #333;
+    padding: 0 1.5rem;
+    background: #fff;
+  }
+  
+  .login a {
+    text-decoration: none;
+  }
+  
+  /* styles for "tools" dropdown menu */
+  .menu ul.submenu {
     flex-direction: column;
     margin-left: 0;
     position: absolute;
     background-color: white;
     z-index: 2;
-}
-
-.menu .submenu {
+  }
+  
+  .menu .submenu {
     visibility: hidden;
     transition: all 0.1s ease-in-out;
-}
-
-.menu .submenu li {
+  }
+  
+  .menu .submenu li {
     margin: 2px 0;
-}
-
-.menu .has-submenu {
+    padding: 0;
+  }
+  
+  .menu .has-submenu {
     cursor: pointer;
     color: #333333;
-}
-
-.menu .has-submenu:hover {
+  }
+  
+  .menu .has-submenu:hover {
     color: black;
-}
-
-.menu .has-submenu:hover .submenu {
+  }
+  
+  .menu .has-submenu:hover .submenu {
     visibility: visible;
-}
-
-#top-menu .menu ul.submenu {
-    margin-left: 11px;
-    margin-top: 10px;
-    border: 1px solid ;
+  }
+  
+  .menu ul.submenu {
+    margin-left: -0.5em;
+    margin-top: 8px;
+    border: 2px solid ;
     gap: 0.25em;
     padding: 0.5em;
-}
-
-#top-menu a {
-  padding: 0 5px;
-}
-
-#top-menu .menu .submenu a {
+  }
+  
+  .menu .menu .submenu a {
     margin: 0;
     display: flex;
-}
-
-#top-menu .drawer .submenu {
+  }
+  
+  .menu .drawer .submenu {
     position: initial;
     display: none;
-}
-
-#top-menu .drawer .submenu.opened {
+  }
+  
+  .menu .drawer .submenu.opened {
     display: flex;
-}
-
-#top-menu .drawer .submenu li {
+  }
+  
+  .menu .drawer .submenu li {
    padding: 0;
    padding-top: 1em; 
-}
-
-#top-menu .drawer .opened .submenu {
+  }
+  
+  .menu .drawer .opened .submenu {
     visibility: visible;
-}
-
-.drawer .has-submenu {
-    padding-left: 1em;
-    margin-left: 5px;
-    color: #333;
-    display: flex;
-    flex-direction: column;
-}
-
-
-/*Article Summary Cards*/
-
-.h-entry header {
+  }
+  
+  
+  /*Article Summary Cards*/
+  
+  .h-entry header {
     display: flex;
     justify-content: space-between;
-}
-
-.h-entry header h2 {
+  }
+  
+  .h-entry header h2 {
     padding: 0.2em;
     margin: 0;
     padding-right: 0.3em;
     padding-left: 0.3em;
     flex-grow: 1;
-}
-
-.h-entry header h2:hover {
+  }
+  
+  .h-entry header h2:hover {
     cursor: pointer;
-}
-
-.h-entry header h2 a {
+  }
+  
+  .h-entry header h2 a {
     text-decoration: none;
     color: var(--border-color);
-}
-
-.h-entry header .header-metadata {
+  }
+  
+  .h-entry header .header-metadata {
     margin: 0;
     display: flex;
     flex-flow: column wrap;
     font-size: 0.8rem;
-}
-
-.h-entry img {
+  }
+  
+  .h-entry img {
     max-width: 100%;
     width: 100%;
-}
-
-/* .portrait .h-entry img {
+  }
+  
+  /* .portrait .h-entry img {
     max-width: unset;
     width: unset;
-} */
-
-.header-metadata .dt-published {
+  } */
+  
+  .header-metadata .dt-published {
     padding: 0.5em 1.2em 0.5em 1.2em;
-}
-
-.author.p-author {
+  }
+  
+  .author.p-author {
     border-top: 2px solid var(--border-color);
     padding: 0.5em 1.2em 0.5em 1.2em;
-}
-
-.p-summary.truncated.image {
+  }
+  
+  .p-summary.truncated.image {
     display: flex;
     flex-direction: row-reverse;
-}
-
-.p-summary.truncated {
+  }
+  
+  .p-summary.truncated {
     display: flex;
     flex-direction: column;
-}
-
-.summary-text {
+  }
+  
+  .summary-text {
     flex: 1;
     padding: 1em;
     min-width: 34ch;
     text-overflow: ellipsis;
     overflow: hidden;
-}
-
-.summary-image > a {
+  }
+  
+  .summary-image > a {
     display: flex;
-}
-
-footer.post-footer {
+  }
+  
+  footer.post-footer {
     display: flex;
     flex-flow: row-reverse;
     padding: 0.5em 1em;
-}
-
-.footer-filler {
+  }
+  
+  .footer-filler {
     border-top: 2px solid var(--border-color);
     flex-grow: 1;
-}
-
-.read-more {
+  }
+  
+  .read-more {
     align-content: flex-end;
     font-size: 0.9rem;
-}
-
-
-/* network cards */
-
-.card.network {
+  }
+  
+  
+  /* shout cards */
+  
+  .card.shout {
     border: 2px solid var(--shouts-dark);
     background-color: var(--shouts-light);
     max-width: min-content;
@@ -416,73 +509,73 @@ footer.post-footer {
     margin: 0 3em 3em 0;
     align-self: start;
     color: var(--shouts-dark);
-}
-
-
-.h-entry.network header {
+  }
+  
+  
+  .h-entry.shout header {
     display: flex;
     flex-direction: column;
-}
-
-.h-entry.network header h2 {
+  }
+  
+  .h-entry.shout header h2 {
     padding: 0.2em 0.5em 0.5em 0.5em;
     margin: 0;
     border: none;
-}
-
-.h-entry.network header h2:hover {
+  }
+  
+  .h-entry.shout header h2:hover {
     cursor: pointer;
-}
-
-.h-entry.network header h2 a {
+  }
+  
+  .h-entry.shout header h2 a {
     text-decoration: none;
     color: var(--shouts-dark);
-}
-
-.h-entry.network header time {
+  }
+  
+  .h-entry.shout header time {
     text-align: right;
     padding: 0.6em 0.8em;
     font-size: 1rem;
-}
-
-.network .header-metadata {
+  }
+  
+  .shout .header-metadata {
     align-items: center;
-}
-
-.network .header-metadata .dt-published {
+  }
+  
+  .shout .header-metadata .dt-published {
     border-bottom: 2px solid var(--shouts-dark);
-}
-
-.network .filler {
+  }
+  
+  .shout .filler {
     min-height: 1rem;
-}
-
-.network .author.p-author {
+  }
+  
+  .shout .author.p-author {
     border-color: var(--shouts-dark);
     padding: 0.5em 1.2em 0.5em 1.2em;
-}
-
-.network .p-summary {
+  }
+  
+  .shout .p-summary {
     display: flex;
-}
-
-.network .p-summary.portrait {
+  }
+  
+  .shout .p-summary.portrait {
     /* flex-direction: row; */
-}
-
-.network .p-summary.landscape {
+  }
+  
+  .shout .p-summary.landscape {
     flex-direction: column;
-}
-
-.network .summary-image > img {
+  }
+  
+  .shout .summary-image > img {
     display: inherit;
-}
-
-.network .summary-text {
+  }
+  
+  .shout .summary-text {
     font-size: 18px;
-}
-
-div.network-source {
+  }
+  
+  div.shout-source {
     padding: 1em;
     padding-right: 2em;
     width: fit-content;
@@ -493,55 +586,54 @@ div.network-source {
     color: white;
     position: relative;
     right: 1em;
-}
-
-.network-source::before {
-    content: "";
+  }
+  
+  .shout-source .triangle {
     position: absolute;
-    right: -20px;
+    right: 0px;
     bottom: 0;
-    width: 0;
-    height: 0;
-    border-left: 20px solid var(--shouts-dark);
-    border-top: 23px solid transparent;
-    border-bottom: 23px solid transparent;
-}
-
-.network-source a {
+    width: auto;
+    height: calc(100% + 0.5px);
+    top: -0.5px;
+    transform: translateX(calc(100% - 0.5px));
+    fill: var(--shouts-dark);
+  }
+  
+  .shout-source a {
     font-weight: bold;
     color: white;
-}
-
-.network .footer-filler {
+  }
+  
+  .shout .footer-filler {
     border-left: 2px solid var(--shouts-dark);
     border-top: none;
-}
-
-.network footer.post-footer {
+  }
+  
+  .shout footer.post-footer {
     border-top: 2px solid var(--shouts-dark);
     flex-flow: row;
     font-size: 0.9rem;
     background-color: var(--shouts-light);
     color: var(--shouts-dark);
     padding: 1em;
-}
-
-.network footer svg {
+  }
+  
+  .shout footer svg {
     fill: var(--shouts-dark)
-}
-
-.network .read-more {
+  }
+  
+  .shout .read-more {
     border: none;
     border-left: 2px solid var(--shouts-dark);
     padding: 0.5em 1.2em 0.5em 1.2em;
-}
-
-.network .footer-metadata {
+  }
+  
+  .shout .footer-metadata {
     padding: 0.5em 1.2em 0.5em 1.2em;
-}
-
-/* pen cards */
-.card.pen {
+  }
+  
+  /* pen cards */
+  .card.pen {
     border: 2px solid var(--pen-dark);
     background-color: var(--pen-light);
     max-width: min-content;
@@ -550,77 +642,77 @@ div.network-source {
     margin: 0 3em 3em 0;
     align-self: start;
     color: var(--shouts-dark);
-}
-
-.h-entry.pen header {
+  }
+  
+  .h-entry.pen header {
     display: flex;
     flex-direction: column;
-}
-
-.h-entry.pen header h2 {
+  }
+  
+  .h-entry.pen header h2 {
     padding: 0.2em 0.5em 0.5em 0.5em;
     margin: 0;
     border: none;
-}
-
-.h-entry.pen header h2:hover {
+  }
+  
+  .h-entry.pen header h2:hover {
     cursor: pointer;
-}
-
-.h-entry.pen header h2 a {
+  }
+  
+  .h-entry.pen header h2 a {
     text-decoration: none;
     color: var(--pen-dark);
-}
-
-.h-entry.pen header time {
+  }
+  
+  .h-entry.pen header time {
     text-align: right;
     padding: 0.6em 0.8em;
     padding-top: 0;
     font-size: 1rem;
-}
-
-.pen .header-metadata {
+  }
+  
+  .pen .header-metadata {
     align-items: center;
-}
-
-.pen .header-metadata .dt-published {
+  }
+  
+  .pen .header-metadata .dt-published {
     border-bottom: 2px solid var(--pen-dark);
-}
-
-.pen .filler {
+  }
+  
+  .pen .filler {
     min-height: 1rem;
-}
-
-.pen .author.p-author {
+  }
+  
+  .pen .author.p-author {
     border-color: var(--pen-dark);
     padding: 0.5em 1.2em 0.5em 1.2em;
-}
-
-.pen .p-summary {
+  }
+  
+  .pen .p-summary {
     display: flex;
-}
-
-.pen .p-summary.portrait {
+  }
+  
+  .pen .p-summary.portrait {
     /* flex-direction: row; */
     /* 
      * for some reason images on specific posts aren't appearing with the portrait class
      */
     flex-direction: column;
-}
-
-.pen .p-summary.landscape {
+  }
+  
+  .pen .p-summary.landscape {
     flex-direction: column;
-}
-
-.pen .summary-image > img {
+  }
+  
+  .pen .summary-image > img {
     display: inherit;
-}
-
-.pen .summary-text {
+  }
+  
+  .pen .summary-text {
     font-size: 18px;
-}
-
-div.pen-source {
+  }
+  
+  div.pen-source {
     padding: 1em;
     font-size: 14px;
     display: flex;
@@ -631,45 +723,45 @@ div.pen-source {
     position: relative;
     bottom: 21px;
     transform:  rotate(1deg);
-}
-
-
-.pen-source a {
+  }
+  
+  
+  .pen-source a {
     font-weight: bold;
     color: white;
-}
-
-.pen .footer-filler {
+  }
+  
+  .pen .footer-filler {
     border-left: 2px solid var(--pen-dark);
     border-top: none;
-}
-
-.pen footer.post-footer {
+  }
+  
+  .pen footer.post-footer {
     border-top: 2px solid var(--pen-dark);
     flex-flow: row;
     font-size: 0.9rem;
     background-color: var(--pen-light);
     color: var(--pen-dark);
     padding: 0.25em 0.5em;
-}
-
-.pen footer svg {
+  }
+  
+  .pen footer svg {
     fill: var(--pen-dark)
-}
-
-.pen .read-more {
+  }
+  
+  .pen .read-more {
     border: none;
     border-left: 2px solid var(--pen-dark);
     padding: 0.5em 1.2em 0.5em 1.2em;
-}
-
-.pen .footer-metadata {
+  }
+  
+  .pen .footer-metadata {
     padding: 0.5em 1.2em 0.5em 1.2em;
-}
-
-/* shouts cards */
-
-.card.shout {
+  }
+  
+  /* social / hashtag cards */
+  
+  .card.social {
     border-color: steelblue;
     border: 2px solid;
     background-color: aliceblue;
@@ -679,88 +771,88 @@ div.pen-source {
     margin: 0 3em 3em 0;
     align-self: start;
     color: steelblue;
-}
-
-.card.shout h2 a {
+  }
+  
+  .card.social h2 a {
     color: var(--social-dark);
     cursor: pointer;
     display: block;
     word-wrap: anywhere;
-}
-
-.card .card.shout h2 a:hover {
+  }
+  
+  .card .card.social h2 a:hover {
     border: none;
     text-decoration: none;
-}
-
-.card.shout .post-footer {
+  }
+  
+  .card.social .post-footer {
     background: var(--social-light);
     color: var(--social-dark);
-}
-
-.card.shout .post-footer a{
+  }
+  
+  .card.social .post-footer a{
     background: var(--social-light);
     color: var(--social-dark);
     text-decoration: underline;
-}
-
-
-/* gallery cards */
-.card.shout.lumbung-gallery {
+  }
+  
+  
+  /* gallery cards */
+  .card.social.lumbunggallery, .card.social.lumbunggallery .post-footer a {
     border-color: var(--gallery-dark);
     background-color: var(--gallery-light);
     color: var(--gallery-dark);
-}
-
-.card.shout.lumbung-gallery h2 a {
+  }
+  
+  .card.social.lumbunggallery h2 a {
     color: var(--gallery-dark);
-}
-
-
-.card.shout.lumbung-gallery .post-footer {
+  }
+  
+  
+  .card.social.lumbunggallery .post-footer {
     background: var(--gallery-light);
     color: var(--gallery-dark);
     border-top: 2px solid;
-}
-
-/* kios cards */
-.card.shout.lumbung-kios {
+  }
+  
+  /* kios cards */
+  .card.social.lumbungkios {
     border-color: var(--kios-dark);
     background-color: var(--kios-light);
     color: var(--kios-dark);
-}
-
-.card.shout.lumbung-kios h2 a {
+  }
+  
+  .card.social.lumbungkios h2 a {
     color: var(--kios-dark);
-}
-
-
-.card.shout.lumbung-kios .post-footer {
+  }
+  
+  
+  .card.social.lumbungkios .post-footer {
     background: var(--kios-light);
     color: var(--kios-dark);
     border-top: 2px solid;
-}
-
-.card.shout.lumbung-kios .post-footer a {
+  }
+  
+  .card.social.lumbungkios .post-footer a {
     background: none;
     color: var(--kios-dark);
-}
-
-/* books cards */
-
-.book.card {
+  }
+  
+  /* books cards */
+  
+  .book.card {
     background-color: var(--books-light);
     color: var(--books-dark);
     border-color: var(--books-dark);
-}
-
-.tape-label.book span{
+  }
+  
+  .tape-label.book span{
     background-color: var(--books-dark);
-}
-
-/* calendar cards */
-
-.card.calendar {
+  }
+  
+  /* calendar cards */
+  
+  .card.calendar {
     border: 2px solid var(--calendar-dark);
     background-color: var(--calendar-light);
     max-width: 360px;
@@ -769,99 +861,99 @@ div.pen-source {
     margin: 0 3em 3em 0;
     align-self: start;
     color: var(--calendar-dark);
-}
-
-.calendar .tape-label {
+  }
+  
+  .calendar .tape-label {
     background-color: var(--calendar-light);
-}
-
-.calendar .tape-label span {
+  }
+  
+  .calendar .tape-label span {
     background-color: var(--calendar-dark);
-}
-
-.h-event.calendar header {
+  }
+  
+  .h-event.calendar header {
     display: flex;
     border-bottom: 2px solid cornflowerblue;
-}
-
-.h-event.calendar header h2 {
+  }
+  
+  .h-event.calendar header h2 {
     padding: 0.2em 0.5em 0.2em 0.5em;
     margin: 0;
     border-right: none;
-}
-
-.h-event.calendar header h2:hover {
+  }
+  
+  .h-event.calendar header h2:hover {
     cursor: pointer;
-}
-
-.h-event.calendar header h2 a {
+  }
+  
+  .h-event.calendar header h2 a {
     text-decoration: none;
     color: var(--calendar-dark);
-}
-
-.h-event.calendar .calendar-location a {
+  }
+  
+  .h-event.calendar .calendar-location a {
     color: var(--calendar-dark);
-}
-
-.header-filler {
+  }
+  
+  .header-filler {
     min-width: 10%;
-}
-
-.calendar-location {
+  }
+  
+  .calendar-location {
     font-size: 0.8rem;
     min-width: 20%;
     padding: 0.5em 0.9em 0.5em 0.9em;
     border-left: 2px solid cornflowerblue;
-}
-
-.calendar-duration {
+  }
+  
+  .calendar-duration {
     font-size: 0.8rem;
     border-right: 2px solid cornflowerblue;
     padding: 0.5em 0.9em 0.5em 0.9em;
-}
-
-.start-scroller {
+  }
+  
+  .start-scroller {
     display: flex;
     flex-flow: row-reverse;
     border-bottom: 2px solid cornflowerblue;
-}
-
-.start-scroller marquee {
+  }
+  
+  .start-scroller marquee {
     font-size: 0.8rem;
     padding-top: 0.2em;
     padding-bottom: 0.2em;
-}
-
-.calendar .description {
+  }
+  
+  .calendar .description {
     border-top: 2px solid cornflowerblue;
-}
-
-.calendar-image-holder {
+  }
+  
+  .calendar-image-holder {
     border-bottom: 2px solid cornflowerblue;
-}
-
-.calendar-image-holder a {
+  }
+  
+  .calendar-image-holder a {
     display: inherit;
-}
-
-.calendar-image {
+  }
+  
+  .calendar-image {
     width: 100%;
     max-width: 100%;
     display: inherit;
-}
-
-
-/* Card metadata (video, calendar & books) */
-
-.tape-label {
+  }
+  
+  
+  /* Card metadata (video, calendar & books) */
+  
+  .tape-label {
     display: flex;
     justify-content: center;
     border: none;
     font-size: 1rem;
-}
-
-.tape-label a,
-.tape-label span {
+  }
+  
+  .tape-label a,
+  .tape-label span {
     width: max-content;
     padding: 0.5em;
     position: relative;
@@ -869,127 +961,127 @@ div.pen-source {
     z-index: 1;
     transform: rotate(2deg);
     color: white;
-}
-
-.metadata {
+  }
+  
+  .metadata {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
-}
-
-.description p:first-of-type {
+  }
+  
+  .description p:first-of-type {
     margin: 0;
-}
-
-.description ul:first-of-type {
+  }
+  
+  .description ul:first-of-type {
     margin: 0;
-}
-
-input+label+.calendar-location+.description {
+  }
+  
+  input+label+.calendar-location+.description {
     display: none;
-}
-
-input:checked+label+.calendar-location+.description {
+  }
+  
+  input:checked+label+.calendar-location+.description {
     display: block;
     transition: ease .5s;
-}
-
-.metadata label {
+  }
+  
+  .metadata label {
     vertical-align: sub;
     flex-grow: 1;
     font-weight: normal;
     cursor: pointer;
     padding: 0.4em 0.9em 0.4em 0.9em;
     font-size: 0.9em;
-}
-
-label:hover {
+  }
+  
+  label:hover {
     box-shadow: inset 2px 2px 0px var(--calendar-dark);
-}
-
-.description {
+  }
+  
+  .description {
     padding: 0.5em 0.7em 0.7em 0.5em;
     overflow: hidden;
     flex-basis: 100%;
-}
-
-.descr_button {
+  }
+  
+  .descr_button {
     cursor: pointer;
     flex-grow: 1;
     text-align: center;
-}
-
-
-/* Paginator */
-
-.pagination-container {
+  }
+  
+  
+  /* Paginator */
+  
+  .pagination-container {
     width: 60%;
     margin: auto;
     margin-top: 2em;
     margin-bottom: 2em;
-}
-
-ul.pagination {
+  }
+  
+  ul.pagination {
     display: flex;
     justify-content: space-evenly;
     /* align horizontal */
     align-items: center;
     /* align vertical */
-}
-
-.page-item {
+  }
+  
+  .page-item {
     display: block;
     text-align: center;
     font-size: 38px;
     border-bottom: 2px solid black;
     cursor: pointer;
-}
-
-li.page-item {
+  }
+  
+  li.page-item {
     padding: 0.4em;
     position: relative;
-}
-
-li.page-item a {
+  }
+  
+  li.page-item a {
     color: black;
-}
-
-li.page-item.active a {
+  }
+  
+  li.page-item.active a {
     text-decoration: underline;
-}
-
-li.page-item.disabled {
+  }
+  
+  li.page-item.disabled {
     display: none;
-}
-
-li.page-item:first-child,
-li.page-item:last-child,
-li.page-item:nth-last-child(2),
-.previous-page-link {
+  }
+  
+  li.page-item:first-child,
+  li.page-item:last-child,
+  li.page-item:nth-last-child(2),
+  .previous-page-link {
     border: none;
     text-decoration: none;
-}
-
-li.page-item:first-child::before,
-li.page-item:first-child::after,
-li.page-item:last-child::before,
-li.page-item:last-child::after,
-li.page-item:nth-last-child(2)::before,
-li.page-item:nth-last-child(2)::after,
-.previous-page-link::before,
-.previous-page-link::after {
+  }
+  
+  li.page-item:first-child::before,
+  li.page-item:first-child::after,
+  li.page-item:last-child::before,
+  li.page-item:last-child::after,
+  li.page-item:nth-last-child(2)::before,
+  li.page-item:nth-last-child(2)::after,
+  .previous-page-link::before,
+  .previous-page-link::after {
     display: none;
-}
-
-li.page-item a {
+  }
+  
+  li.page-item a {
     text-decoration: none;
-}
-
-li.page-item:hover a {
+  }
+  
+  li.page-item:hover a {
     text-decoration: underline;
-}
-
-li.page-item:before {
+  }
+  
+  li.page-item:before {
     content: "";
     position: absolute;
     left: 0;
@@ -998,9 +1090,9 @@ li.page-item:before {
     width: 50%;
     border-left: 2px solid black;
     z-index: -100;
-}
-
-li.page-item:after {
+  }
+  
+  li.page-item:after {
     content: "";
     position: absolute;
     right: 0;
@@ -1009,118 +1101,329 @@ li.page-item:after {
     width: 50%;
     border-right: 2px solid black;
     z-index: -100;
-}
-
-/* Landingpage */
-.welcome-text {
+  }
+  
+  
+  
+  /* Landingpage */
+  .welcome-text {
     text-align: center;
     max-width: 1000px;
     margin: 0 auto 50px;
-}
-
-.app-columns {
+  }
+  
+  .app-columns {
     display: flex;
     flex-wrap: wrap;
     max-width: 1200px;
     margin: 0 auto 50px;
-}
-
-.app-column {
+  }
+  
+  .app-column {
     width: 33%;
     text-align: center;
     padding: 3.5%;
-}
-
-.app-column a {
+  }
+  
+  .app-column a {
     text-decoration: none;
-}
-
-.app-icon {
+  }
+  
+  .app-icon {
     display: block;
     max-width: 90px;
     width: 80%;
     margin-left: auto;
     margin-right: auto;
     transition: transform 0.2s ease;
-}
-
-.app-icon:hover {
+  }
+  
+  .app-icon:hover {
     transform: rotate(-15deg);
-}
-
-.app-name {
+  }
+  
+  .app-name {
     font-weight: bold;
     margin-bottom: 0.2em;
     color: #333;
-}
-
-.app-description {
+  }
+  
+  .app-description {
     font-size: 14px;
     display: block;
     margin-left: auto;
     margin-right: auto;
-}
-
-/* ### Timeline ### */
-
-/* Timeline Tags */
-.timeline-tags {
+  }
+  
+  
+  /* FILTER */
+  
+  .filter-item, .card, .video-box {
+    display: none;
+  }
+  
+  .show-item {
+    display: block !important;
+  }
+  
+  .filter-container {
+    display: none;
+    background: #fff;
+    padding: 1.5rem;
+    border: 2px solid #333;
+    border-top: 0;
+    position: absolute;
+    left: 0;
+    z-index: 99;
+    width: 100%;
+    justify-content: space-between;
+  }
+  
+  .filter-information {
+    width: 15%;
+  }
+  
+  #load-more {
+    font-size: 0.8rem;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+  
+  .filter-buttons-container {
+    align-items: center;
+    display: flex;
+    width: calc(85% - 30px);
+  }
+  
+  .filter-buttons-container-header {
+    display: flex;
+    margin-right: 20px;
+  }
+  
+  .filter-link {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    background: #333;
+    color: #fff;
+    padding: calc(0.5rem + 2px) 1rem;
+    cursor: pointer;
+  }
+  
+  .filter-link:hover + .filter-container {
+    display: flex;
+  }
+  
+  .filter-container:hover {
+    display: flex;
+  }
+  
+  .filter-buttons-dropdown {
+    position: absolute;
+    top: 41px;
+    width: calc(100% + 2px);
+    left: -1px;
+    background: #fff;
+    max-height: 35vh;
+    min-height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    border: 1px solid #333;
+    border-top: 0;
+    display: none;
+  }
+  
+  .post.tv {
+    margin: auto;
+  }
+  
+  @media all and (min-width: 980px) {
+    .filter-buttons:hover .filter-buttons-dropdown {
+        display: block;
+    }
+  
+    .filter-buttons:hover {
+        display: block;
+    }
+  }
+  
+  .filter-buttons {
+    width: fit-content;
+    display: flex;
+    white-space: nowrap;
+    flex-direction: column;
+    position: relative;
+    border: 1px solid #333;
+    margin-right: 10px;
+    padding-right: 30px;
+    width: calc(25% - 7.5px);
+  }
+  
+  .filter-buttons:last-child {
+    margin-right: 0px;
+  }
+  
+  .filter-buttons > button {
+    height: 40px;
+  }
+  
+  .filter-by:after {
+    content:"";
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 5px 5px 0 5px;
+    border-color: #333333 transparent transparent transparent;
+    position: absolute;
+    right: 0.5rem;
+  }
+  
+  .filter-buttons button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 0;
+    background: unset;
+    border-radius: 0;
+    width: 100%;
+    padding: 0.6rem;
+    cursor: pointer;
+    white-space: nowrap;
+    text-transform: lowercase;
+  }
+  
+  .filter-buttons-dropdown button {
+    border-bottom: 1px solid;
+  }
+  
+  .filter-buttons .filter-button {
+    padding: 0.6rem 0.6rem 0.6rem 1.6rem;
+  }
+  
+  .filter-button svg {
+    width: 10px;
+    position: absolute;
+    left: 0.6rem;
+  }
+  
+  .filter-button svg path {
+    fill: #3330;
+    stroke: #333;
+    stroke-width: 2px;
+  }
+  
+  .filter-button.active svg path {
+    fill: #333;
+  }
+  
+  .filter-title {
+    width: calc(100% - 20px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
+  }
+  
+  .filter-buttons-dropdown button:last-child {
+    border-bottom: 0;
+  }
+  
+  .filter-buttons .filter-button.active {
+    background: #c2c2ff;
+  }
+  
+  .disable-button {
+    display: none !important;
+  }
+  
+  .page-nav {
+    display: flex;
+    justify-content: center;
+    margin: 20px auto 50px;
+  }
+  
+  .nextpage {
+    padding: 15px;
+    position: relative;
+    color: #333;
+    text-decoration: none;
+    margin: 0px 20px;
+    font-size: 38px;
+  }
+  
+  .nextpage:after {
+    content: "";
+    height: 50%;
+    width: 100%;
+    display: block;
+    border: 2px solid #333;
+    border-top: 0;
+    bottom: 0;
+    position: absolute;
+    left: 0;
+  }
+  
+  
+  /* ### Timeline ### */
+  
+  /* Timeline Tags */
+  .timeline-tags {
     margin-bottom: 50px;
     display: flex;
     align-items: center;
     width: 90vw;
     font-size: 1.4vw;
-}
-
-.timeline-tags-headline {
+  }
+  
+  .timeline-tags-headline {
     margin-right: 10px;
-}
-
-.timeline-tags ul {
+  }
+  
+  .timeline-tags ul {
     list-style: none;
     padding-left: 0;
     white-space: nowrap;
     overflow: scroll;
     -ms-overflow-style: none;
     scrollbar-width: none;
-}
-
-.timeline-tags ul::-webkit-scrollbar {
+  }
+  
+  .timeline-tags ul::-webkit-scrollbar {
     display: none;
-}
-
-.timeline-tags ul li {
+  }
+  
+  .timeline-tags ul li {
     display: inline-block;
     margin-right: 10px;
-}
-
-.timeline-tags ul li.timeline-tag {
+  }
+  
+  .timeline-tags ul li.timeline-tag {
     display: inline-block;
     margin-right: 10px;
     padding: 10px 35px;
     background: #007f76;
     border-radius: 50px;
-}
-
-.timeline-tags ul li a {
+  }
+  
+  .timeline-tags ul li a {
     color: #fff;
     text-decoration: none;
-}
-
-/* Timeline Container and Line */
-.timeline-container {
+  }
+  
+  /* Timeline Container and Line */
+  .timeline-container {
     position: relative;
     display: flex;
     flex-direction: column;
-}
-
-.timeline-start {
+  }
+  
+  .timeline-start {
     font-size: 3vw;
     text-align: center;
     padding: 1.5vw 0 4.5vw;
-}
-
-.timeline-end {
+  }
+  
+  .timeline-end {
     font-size: 3vw;
     text-align: center;
     padding: 10vw 0 10vw;
@@ -1128,9 +1431,9 @@ li.page-item:after {
     background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
     width: 100vw;
     margin-left: -10vw;
-}
-
-.timeline-start span {
+  }
+  
+  .timeline-start span {
     padding: 1.5vw 3vw;
     border: 2px solid;
     background: #fff;
@@ -1139,9 +1442,9 @@ li.page-item:after {
     width: fit-content;
     margin: auto;
     font-weight: 700;
-}
-
-.timeline-line {
+  }
+  
+  .timeline-line {
     position: absolute;
     z-index: -1;
     width: 35vw;
@@ -1151,9 +1454,9 @@ li.page-item:after {
     left: 0;
     right: 0;
     margin: 0 auto;
-}
-
-.timeline-line-head {
+  }
+  
+  .timeline-line-head {
     background-image: url(/img/timeline-head.svg);
     background-repeat: no-repeat;
     background-size: 100%;
@@ -1165,9 +1468,9 @@ li.page-item:after {
     left: 0;
     right: 0;
     margin: 0 auto;
-}
-
-.timeline-line-body {
+  }
+  
+  .timeline-line-body {
     background-image: url(/img/timeline-body.svg);
     background-repeat: repeat-y;
     background-size: 100%;
@@ -1180,15 +1483,15 @@ li.page-item:after {
     left: 0;
     right: 0;
     margin: 0 auto;
-}
-
-/* Timeline Events and Position */
-.timeline-events {
+  }
+  
+  /* Timeline Events and Position */
+  .timeline-events {
     display: flex;
     flex-direction: column;
-}
-
-.timeline-event {
+  }
+  
+  .timeline-event {
     width: 20vw;
     height: 12vw;
     display: flex;
@@ -1196,119 +1499,119 @@ li.page-item:after {
     margin-top: -3.1vw !important;
     opacity: 0;
     transition: opacity 1.4s ease;
-}
-
-.timeline-event.inView {
+  }
+  
+  .timeline-event.inView {
     opacity: 1;
-}
-
-.timeline-url {
+  }
+  
+  .timeline-url {
     font-size: 1.8vw;
     color: #333;
     text-decoration: unset;
-}
-
-a.timeline-url {
+  }
+  
+  a.timeline-url {
     text-decoration: underline;
-}
-
-.link-svg {
+  }
+  
+  .link-svg {
     height: 1.2vw;
     width: 1.2vw;
     margin-left: 0.8vw;
-}
-
-/* Timeline Events - Left Side (sort margin)*/
-.timeline-event:nth-child(36n + 7), .timeline-event:nth-child(36n + 9), .timeline-event:nth-child(36n + 33) {
+  }
+  
+  /* Timeline Events - Left Side (sort margin)*/
+  .timeline-event:nth-child(36n + 7), .timeline-event:nth-child(36n + 9), .timeline-event:nth-child(36n + 33) {
     margin-left: 2vw;
-}
-
-.timeline-event:nth-child(36n + 1) {
+  }
+  
+  .timeline-event:nth-child(36n + 1) {
     margin-left: 8vw;
-}
-
-.timeline-event:nth-child(36n + 25), .timeline-event:nth-child(36n + 35) {
+  }
+  
+  .timeline-event:nth-child(36n + 25), .timeline-event:nth-child(36n + 35) {
     margin-left: 10vw;
-}
-
-.timeline-event:nth-child(1), .timeline-event:nth-child(36n + 11), .timeline-event:nth-child(36n + 17), .timeline-event:nth-child(36n + 23), .timeline-event:nth-child(36n + 27) {
+  }
+  
+  .timeline-event:nth-child(1), .timeline-event:nth-child(36n + 11), .timeline-event:nth-child(36n + 17), .timeline-event:nth-child(36n + 23), .timeline-event:nth-child(36n + 27) {
     margin-left: 12vw;
-}
-
-.timeline-event:nth-child(36n + 3), .timeline-event:nth-child(36n + 15), .timeline-event:nth-child(36n + 21) {
+  }
+  
+  .timeline-event:nth-child(36n + 3), .timeline-event:nth-child(36n + 15), .timeline-event:nth-child(36n + 21) {
     margin-left: 14vw;
-}
-
-.timeline-event:nth-child(3), .timeline-event:nth-child(36n + 5), .timeline-event:nth-child(36n + 13), .timeline-event:nth-child(36n + 19), .timeline-event:nth-child(36n + 29) {
+  }
+  
+  .timeline-event:nth-child(3), .timeline-event:nth-child(36n + 5), .timeline-event:nth-child(36n + 13), .timeline-event:nth-child(36n + 19), .timeline-event:nth-child(36n + 29) {
     margin-left: 16vw;
-}
-
-/* Timeline Events - Right Side */
-.timeline-event:nth-child(2n) {
+  }
+  
+  /* Timeline Events - Right Side */
+  .timeline-event:nth-child(2n) {
     margin-left: auto;
-}
-
-.timeline-event:nth-child(36n + 2), .timeline-event:nth-child(36n + 6), .timeline-event:nth-child(36n + 20), .timeline-event:nth-child(36n + 32) {
+  }
+  
+  .timeline-event:nth-child(36n + 2), .timeline-event:nth-child(36n + 6), .timeline-event:nth-child(36n + 20), .timeline-event:nth-child(36n + 32) {
     margin-right: 4vw;
-}
-
-.timeline-event:nth-child(36n + 34) {
+  }
+  
+  .timeline-event:nth-child(36n + 34) {
     margin-right: 6vw;
-}
-
-.timeline-event:nth-child(36n + 36) {
+  }
+  
+  .timeline-event:nth-child(36n + 36) {
     margin-right: 8vw;
-}
-
-.timeline-event:nth-child(36n + 8), .timeline-event:nth-child(36n + 24) {
+  }
+  
+  .timeline-event:nth-child(36n + 8), .timeline-event:nth-child(36n + 24) {
     margin-right: -3vw;
-}
-
-.timeline-event:nth-child(36n + 14), .timeline-event:nth-child(36n + 16) {
+  }
+  
+  .timeline-event:nth-child(36n + 14), .timeline-event:nth-child(36n + 16) {
     margin-right: -4vw;
-}
-
-.timeline-event:nth-child(36n + 26) {
+  }
+  
+  .timeline-event:nth-child(36n + 26) {
     margin-right: -5vw;
-}
-
-/* Timeline Events - Rotate */
-.timeline-event:nth-child(2n) {
+  }
+  
+  /* Timeline Events - Rotate */
+  .timeline-event:nth-child(2n) {
     transform: rotate(2deg);
-}
-
-.timeline-event:nth-child(5n) {
+  }
+  
+  .timeline-event:nth-child(5n) {
     transform: rotate(3deg);
-}
-
-.timeline-event:nth-child(2n + 1) {
+  }
+  
+  .timeline-event:nth-child(2n + 1) {
     transform: rotate(-1.5deg);
-}
-
-.timeline-event:nth-child(18n + 5), .timeline-event:nth-child(18n + 17) {
+  }
+  
+  .timeline-event:nth-child(18n + 5), .timeline-event:nth-child(18n + 17) {
     transform: rotate(5deg);
-}
-
-.timeline-event:nth-child(18n + 13), .timeline-event:nth-child(18n + 36) {
+  }
+  
+  .timeline-event:nth-child(18n + 13), .timeline-event:nth-child(18n + 36) {
     transform: rotate(-3deg);
-}
-
-.timeline-event:nth-child(18n + 9), .timeline-event:nth-child(18n + 12), .timeline-event:nth-child(18n + 22) {
+  }
+  
+  .timeline-event:nth-child(18n + 9), .timeline-event:nth-child(18n + 12), .timeline-event:nth-child(18n + 22) {
     transform: rotate(-5deg);
-}
-
-/* Event Single */
-.back-button {
+  }
+  
+  /* Event Single */
+  .back-button {
     width: fit-content;
     padding: 10px 20px;
     border: 0;
     background: #007f76;
     color: #fff;
     cursor: pointer;
-}
-
-/* PopUp */
-.popup-container {
+  }
+  
+  /* PopUp */
+  .popup-container {
     position: fixed;
     z-index: 999;
     top: 0;
@@ -1321,15 +1624,15 @@ a.timeline-url {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.6s ease, visibility 0s ease 0.6s;
-}
-
-.popup-container.view {
+  }
+  
+  .popup-container.view {
     opacity: 1;
     visibility: visible;
     transition: opacity 0.6s ease, visibility 0s ease 0s;
-}
-
-.popup {
+  }
+  
+  .popup {
     background: #fff;
     padding: 0 30px 30px;
     border: 2px solid;
@@ -1339,20 +1642,20 @@ a.timeline-url {
     z-index: 2;
     max-height: 80%;
     overflow-y: scroll;
-}
-
-.popup-header {
+  }
+  
+  .popup-header {
     display: flex;
     justify-content: space-between;
     padding-top: 30px;
-}
-
-.popup-header h3 {
+  }
+  
+  .popup-header h3 {
     margin: 0;
     padding-right: 10px;
-}
-
-.popup-close {
+  }
+  
+  .popup-close {
     position: relative;
     height: 30px;
     width: 30px;
@@ -1362,9 +1665,9 @@ a.timeline-url {
     cursor: pointer;
     border: 0;
     background: none;
-}
-
-.popup-close:after, .popup-close:before {
+  }
+  
+  .popup-close:after, .popup-close:before {
     content: "";
     height: 30px;
     width: 2px;
@@ -1372,13 +1675,13 @@ a.timeline-url {
     background: #333;
     position: absolute;
     transform: rotate(45deg);
-}
-
-.popup-close:before {
+  }
+  
+  .popup-close:before {
     transform: rotate(-45deg);
-}
-
-.popup-bg {
+  }
+  
+  .popup-bg {
     position: absolute;
     background: #00000059;
     top: 0;
@@ -1386,144 +1689,259 @@ a.timeline-url {
     left: 0;
     right: 0;
     z-index: -1;
-}
-
-
-/* Page footer */
-
-#footer {
+  }
+  
+  
+  /* EVENT LIST */
+  
+  .event-list {
+    border: 2px solid var(--calendar-dark);
+    background-color: var(--calendar-light);
+    color: var(--calendar-dark);
+    margin: 1rem 0 4rem;
+  }
+  
+  .event-list .tape-label span {
+    background-color: var(--calendar-dark);
+  }
+  
+  .event-list-item {
+    border-top: 1px solid;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  
+  .event-list-item-head {
+    display: flex;
+  }
+  
+  .event-list-item a {
+    color: var(--calendar-dark);
+  }
+  
+  .event-list-item .date-start, .event-list-item .title, .event-list-item .time, .event-list-item .duration, .event-list-item .location {
+    display: flex;
+    align-items: center;
+    border-right: 1px solid var(--calendar-dark);
+    padding: 0.8rem 0;
+    overflow: hidden;
+  }
+  
+  .event-list-item .date-start {
+    font-size: 1.2rem;
+    width: 110px;
+    padding-left: 0.4rem;
+    border-right: 0;
+  }
+  
+  .event-list-item .title {
+    width: calc(45% - 110px);   
+    padding-left: 0.4rem;
+  }
+  
+  .event-list-item .p-name {
+    margin: 0;
+    font-size: 1.2rem;
+    padding: 0;
+    display: block;
+    width: 100%;
+  }
+  
+  .event-list-item .p-name a {
+    color: var(--calendar-dark);
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(100% - 20px);
+    display: block;
+  }
+  
+  .event-list-item .time {
+    width: 20%;
+  }
+  
+  .event-list-item .time .start-scroller {
+    border-bottom: 0px;
+  }
+  
+  .event-list-item .duration {
+    width: 12.5%;
+    font-size: 0.8rem;
+    padding: 0.8rem 0.4rem;
+  }
+  
+  .event-list-item .duration b {
+    margin-left: 3px;
+  }
+  
+  .event-list-item .location {
+    min-width: unset;
+    width: 15%;
+    font-size: 0.8rem;
+    padding: 0.8rem 0.4rem;
+  }
+  
+  .event-list-item .button {
+    width: 7.5%;
+  }
+  
+  .event-list-item .calendar {
+    width: 7.5%;
+    display: flex;
+    align-items: center;
+    padding: 0.8rem 0.4rem;
+    cursor: pointer;
+  }
+  
+  .event-list-item .description {
+    display: none;
+    border-top: 1px solid;
+    font-size: 1.2rem;
+  }
+  
+  input:checked + label + .description {
+    display: block;
+    transition: ease .5s;
+  }
+  
+  /* Page footer */
+  
+  #footer {
     position: relative;
     margin-top: 10px;
     font-size: 18px;
-}
-
-#footer.blue .f-main {
+  }
+  
+  #footer.blue .f-main {
     background: var(--social-light);
-}
-
-#footer.blue .f-credits {
+  }
+  
+  #footer.blue .f-credits {
     background: var(--social-dark);
-}
-
-#footer.orange .f-main {
+  }
+  
+  #footer.orange .f-main {
     background: var(--kios-light);
-}
-
-#footer.orange .f-credits {
+  }
+  
+  #footer.orange .f-credits {
     background: var(--kios-dark);
-}
-
-#footer.green .f-main {
+  }
+  
+  #footer.green .f-main {
     background: var(--tv-light);
-}
-
-#footer.green .f-credits {
+  }
+  
+  #footer.green .f-credits {
     background: var(--tv-dark);
-}
-
-
-.f-main {
+  }
+  
+  
+  .f-main {
     padding: 60px 2rem;
     display: flex;
     justify-content: space-between;
-}
-
-.f-column {
+  }
+  
+  .f-column {
     margin-right: 6vw;
-}
-
-.f-column:first-child {
+  }
+  
+  .f-column:first-child {
     margin-right: 8vw;
-}
-
-.f-column:last-child {
+  }
+  
+  .f-column:last-child {
     margin-right: 0;
-}
-
-.f-main .logo {
+  }
+  
+  .f-main .logo {
+    width: 280px;
+    max-height: unset;
     filter: brightness(0);
     max-width: 20vw;
     margin-top: 0;
     opacity: 0.8;
-}
-
-.f-menu-headline {
+  }
+  
+  .f-menu-headline {
     font-weight: bold;
     margin-bottom: 5px;
-}
-
-.f-main a {
+  }
+  
+  .f-main a {
     color: #000;
     display: block;
     font-size: 18px;
     margin-bottom: 5px;
     text-decoration: none;
     white-space: nowrap;
-}
-
-.f-main .login {
+  }
+  
+  .f-main .login {
     font-weight: bold;
     padding: 8px 28px;
     border: 1.5px solid;
-}
-
-.f-credits {
+  }
+  
+  .f-credits {
     color: #fff;
     font-size: 15px;
     padding: 20px 2rem;
-}
-
-.f-credits a {
+  }
+  
+  .f-credits a {
     color: #fff;
     text-decoration: none;
-}
-
-.f-credits a:hover {
+  }
+  
+  .f-credits a:hover {
     cursor: pointer;
     text-decoration: underline;
-}
-
-/* about styles */
-
-#about-img {
+  }
+  
+  /* about styles */
+  
+  #about-img {
     width: 50%;
     height: auto;
     display:block;
     margin:auto;
-}
-
-
-/* single page styles */
-.single header {
+  }
+  
+  
+  /* single page styles */
+  .single header {
     flex-direction: column;
     margin-bottom: 4rem;
-}
-
-.single .p-name a {
+  }
+  
+  .single .p-name a {
     color: black;
     text-decoration: none;
     font-size: 2.2rem;
-}
-
-.single .p-name a:hover {
+  }
+  
+  .single .p-name a:hover {
     text-decoration: underline;
-}
-
-.single .h-entry img {
+  }
+  
+  .single .h-entry img {
     object-fit: contain;
     height: auto;
-}
-
-.single .h-entry figure{
+  }
+  
+  .single .h-entry figure{
     margin: 0 0 20px;
-}
-
-.single .h-entry figure figure{
+  }
+  
+  .single .h-entry figure figure{
     margin: 0;
-}
-
-/* lumbung radio player widget  */
-.lumbung-radio-player {
+  }
+  
+  /* lumbung radio player widget  */
+  .lumbung-radio-player {
     display: flex;
     color: var(--sounds-dark);
     border: 1px solid var(--sounds-dark);
@@ -1538,44 +1956,241 @@ a.timeline-url {
     bottom: 2rem;
     right: 2rem;
     cursor: pointer;
-}
-
-
-@media all and (min-width: 980px) and (max-width: 1180px) {
-	#top-menu a, .menu .has-submenu {
+  }
+  
+  
+  @media all and (min-width: 980px) and (max-width: 1180px) {
+  #top-menu a, .menu .has-submenu {
         font-size: 1.8vw;
         vertical-align: top;
     }
-}
-
-
-/* tablet styles */
-
-@media (max-width: 980px) {
+  
+    .menu-row {
+        font-size: 1.78vw;
+      }
+  }
+  
+  
+  /* tablet styles */
+  
+  @media (max-width: 980px) {
     body {
         display: initial;
     }
-
+  
     #top-menu {
-        grid-template-columns: 1fr;
+        width: 100%;
     }
-
-    .menu,
-    #login {
+  
+    .logo {
+        max-height: 50px;
+    }
+  
+    /* menu styles */
+  
+    .menu-row, #top-menu {
+        position: fixed !important;
+        z-index: 97;
+    }
+  
+    .menu-row {
+        z-index: 98;
+        width: fit-content;
+        margin-top: 3vw;
+        right: 5%;
+    }
+  
+    .menu {
+        display: none;
+        position: fixed;
+        left: 20px;
+        top: 80px;
+        width: calc(100vw - 40px);
+        overflow: scroll;
+        height: calc(100% - 90px);
+        padding: 0.5rem 1.5rem;
+    }
+  
+    .menu.active {
+        display: block;
+    }
+  
+    .menu ul {
+        margin: 0;
+        display: block;
+    }
+  
+    .menu-row .login {
         display: none;
     }
-
-    /* menu styles */
+  
+    .menu-button {
+        display: flex;
+        position: fixed;
+        left: 20px;
+        top: clamp(25px, 7vw, 35px);
+    }
+    
+    .menu ul.submenu {
+        margin-left: 0;
+        margin-top: 4px;
+        position: unset;
+        border: 0;
+        padding-left: 20px !important;
+        display: none;
+    }
+  
+    .menu .submenu li {
+        margin: 0;
+        padding: 0.5rem 0;
+    }
+  
+    .menu ul.submenu.active {
+        display: block;
+        visibility: visible;
+    }
+  
+    .login-menu {
+        display: block;
+        padding: 0.5rem 2rem;
+        background: #333;
+        transform: rotate(-3deg);
+        width: fit-content;
+        margin: 0.5rem 0 1rem;
+    }
+  
+    .login-menu a {
+        color: #fff !important;
+    }
+  
+    .menu-button--line{
+        transition: all 0.3s ease-in-out;
+    }
+  
+    .menu-button.active {
+        -webkit-transition: all 0.3s ease-in-out;
+        -o-transition: all 0.3s ease-in-out;
+        transition: all 0.3s ease-in-out;
+          transition-delay: 0s;
+        -webkit-transition-delay: 0.6s;
+        -o-transition-delay: 0.6s;
+        transition-delay: 0.6s;
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        -o-transform: rotate(45deg);
+        transform: rotate(45deg);
+    }
+  
+    .menu-button.active .menu-button--line:nth-child(1) {
+        -webkit-transform: translateY(8px);
+        -ms-transform: translateY(8px);
+        -o-transform: translateY(8px);
+        transform: translateY(8px);
+        -webkit-transition-delay: 0.3s;
+        -o-transition-delay: 0.3s;
+        transition-delay: 0.3s;
+    }
+  
+    .menu-button.active .menu-button--line:nth-child(2) {
+        width: 0px;
+    }
+  
+    .menu-button.active .menu-button--line:nth-child(3) {
+        -webkit-transform: translateY(-6px) rotate(90deg);
+        -ms-transform: translateY(-6px) rotate(90deg);
+        -o-transform: translateY(-6px) rotate(90deg);
+        transform: translateY(-6px) rotate(90deg);
+        -webkit-transition-delay: 0.3s;
+        -o-transition-delay: 0.3s;
+        transition-delay: 0.3s;
+    }
+  
+    .filter {
+        position: fixed;
+        right: 20px;
+        top: clamp(25px, 7vw, 35px);
+    }
+  
+    .filter-container {
+        flex-wrap: wrap;
+        border-top: 2px solid #333;
+        left: 20px;
+        width: calc(100vw - 40px);
+        position: fixed;
+        margin-top: 30px;
+        display: none !important;
+    }
+  
+    #filter.active .filter-container {
+        display: block !important;
+    }
+  
+    .filter-information {
+        width: 100%;
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+  
+    .filter-buttons-container {
+        display: block;
+        width: 100%;
+    }
+  
+    .filter-buttons-container.open {
+        display: block !important;
+    }
+  
+    .filter-buttons-dropdown {
+        z-index: 99;
+    }
+  
+    .filter-buttons {
+        margin-right: 0px;
+        margin-bottom: 10px;
+        width: 100%;
+    }
+  
+    .container {
+        padding-top: 60px;
+    }
+  
+    .filter-link {
+        background: unset;
+        padding: 0;
+    }
+  
+    .filter-link span {
+        display: none;
+    }
+  
+    .filter-icon {
+        height: 20px;
+        margin-right: 0;
+    }
+  
+    .filter-icon path {
+        fill: #333;
+    }
+  
+    .filter-buttons-dropdown.active {
+        display: block;
+    }
+  
+    .filter-by.active:after {
+        transform: rotate(180deg);
+    }
+  
     #top-menu div.mobile-menu {
         display: flex;
         justify-content: space-between;
     }
-
-    .mobile-menu #login {
-        display: inline-flex;
-        margin: 0 0 0 auto;
+  
+    #top-menu .login-link {
+        display: none;
     }
-
+  
     .hamburger {
         border: none;
         background: none;
@@ -1583,12 +2198,12 @@ a.timeline-url {
         z-index: 3;
         cursor: pointer;
     }
-
+  
     .hamburger.opened {
         position: fixed;
         margin-top: 3px;
     }
-
+  
     .drawer {
         display: block;
         position: fixed;
@@ -1604,12 +2219,12 @@ a.timeline-url {
         overflow-x: hidden;
         overflow-y: scroll;
     }
-
+  
     .drawer * {
         display: none;
         opacity: 0;
     }
-
+  
     #top-menu .drawer ul {
         display: flex;
         flex-direction: column;
@@ -1618,47 +2233,47 @@ a.timeline-url {
         margin: 0;
         padding: 0;
     }
-
+  
     #top-menu ul.submenu {
         position: initial;
     }
-
+  
     .drawer ul li {
         padding: 1em 0;
         /* border-bottom: 1px solid #333; */
     }
-
+  
     .drawer ul > li:last-child {
         padding-bottom: 2em;
     }
-
+  
     .drawer ul li a {
         color: white;
         text-decoration: none;
         text-transform: lowercase;
         margin-left: 1em;
     }
-
+  
     .drawer.opened {
         width: 80%;
     }
-
+  
     .drawer.opened * {
         display: block;
         opacity: 1;
     }
-
+  
     /* Landingpage */
     .app-column {
         width: 33%;
         padding: 2.5%;
     }
-
+  
     /* Landingpage */
     .f-main {
         flex-wrap: wrap;
     }
-
+  
     .f-column {
         margin-right: 0vw;
         
@@ -1667,234 +2282,156 @@ a.timeline-url {
     .f-column:nth-child(1), .f-column:nth-child(2){
         margin-bottom: 45px;
     }
-
+  
     .f-main .logo {
         max-width: unset;
     }
-}
-
-/* mobile styles */
-
-@media (max-width: 768px) {
-
+  
+    /* EVENT LIST */
+  
+    .event-list .event-list-item:nth-child(2n) {
+        background: #c8efff;
+    }
+  
+    .event-list-item .date-start {
+        border-bottom: 1px solid;
+    }
+  
+    .event-list-item .title {
+        width: calc(100% - 110px);
+        border-bottom: 1px solid;
+        border-right: 0;
+    }
+  
+    .event-list-item .time {
+        width: 100%;
+        border-bottom: 1px solid;
+        border-right: 0;
+        padding: 0;
+    }
+  
+    .event-list-item .duration, .event-list-item .location {
+        width: 42%;
+    }
+  
+    .event-list-item .calendar {
+        width: 16%;
+    }
+  
+  }
+  
+  /* mobile styles */
+  
+  @media (max-width: 768px) {
+  
     /* card styles */
     .card,
     .card.network {
         max-width: 83vw;
     }
-
+  
     .card .summary-text {
         font-size: 17px;
         min-width: 30ch;
     }
-
+  
     .card h2 a {
         font-size: 26px;
     }
-
+  
     /* Landingpage */
     .app-column {
         width: 50%;
         padding: 2.5%;
     }
-
+  
     /* Timeline Tags */
     .timeline-tags {
         font-size: 3vw;
     }
-
+  
     /* Timeline Container and Line */
     .timeline-start {
         font-size: 5vw;
         padding: 1.5vw 0 9vw;
     }
-
+  
     .timeline-line {
         height: calc(100% - 18vw);
         top: 18vw;
         width: 25vw;
     }
-
+  
     .timeline-line-head {
         height: 18.5vw;
     }
-
+  
     .timeline-line-body {
         height: calc(100% - 18.2vw);
         top: 18.2vw;
     }
-
+  
     /* Timeline Events and Position */
     .timeline-events {
         padding-top: 15vw;
     }
-
+  
     .timeline-event {
         width: 30vw;
         height: 35vw;
         margin-top: -12vw !important;
     }
-
+  
     .timeline-url {
         font-size: 3.4vw;
     }
-
+  
     .link-svg {
         height: 2.4vw;
         width: 2.4vw;
         margin-left: 1.6vw;
     }
-
+  
     /* Timeline Events - Left Side (sort margin)*/
     .timeline-event:nth-child(36n + 7), .timeline-event:nth-child(36n + 9), .timeline-event:nth-child(36n + 33) {
         margin-left: 1vw;
     }
-
+  
     .timeline-event:nth-child(36n + 1), .timeline-event:nth-child(36n + 3), .timeline-event:nth-child(36n + 15), .timeline-event:nth-child(36n + 21), .timeline-event:nth-child(36n + 11), .timeline-event:nth-child(36n + 17), .timeline-event:nth-child(36n + 23), .timeline-event:nth-child(36n + 27) {
         margin-left: 2vw;
     }
-
+  
     .timeline-event:nth-child(3), .timeline-event:nth-child(36n + 5), .timeline-event:nth-child(36n + 13), .timeline-event:nth-child(36n + 19), .timeline-event:nth-child(36n + 29), .timeline-event:nth-child(36n + 25), .timeline-event:nth-child(36n + 35) {
         margin-left: -3vw;
     }
-
+  
     /* Timeline Events - Right Side */
     .timeline-event:nth-child(2n) {
         margin-right: -5vw;
-}
-
+    }
+  
     .timeline-event:nth-child(36n + 8), .timeline-event:nth-child(36n + 24) {
         margin-right: -6vw;
     }
-
+  
     .timeline-event:nth-child(36n + 26) {
         margin-right: -8vw;
     }
-}
-
-@media (max-width: 480px) {
+  }
+  
+  @media (max-width: 480px) {
     .pagination-container {
         width: 71vw;
         margin: 2em 0;
     }
-
+  
     .pagination .page-item {
         font-size: 26px;
     }
-}
-
-@media (max-width:  960px) {
+  }
+  
+  @media (max-width:  960px) {
     .menu ul:first-child {
         padding: 0;
     }
-}
-
-
-/*===============================================
-Styles for publishers page 
-================================================= */
-
-.publishers-page .map {
-    margin-block: 2rem 4rem;
-    border: 1px solid;
-}
-
-.card.publishers {
-    border: 2px solid var(--social-dark);
-    background-color: var(--social-light);
-    max-width: min-content;
-    margin-bottom: 2em;
-    flex: auto;
-    margin: 0 3em 3em 0;
-    align-self: start;
-    color: var(--social-dark);
-    transition: transform 0.1s ease-in-out;
-}
-
-.card.publishers .link-wrapper {
-    text-decoration: none;
-    color: inherit;
-}
-
-.card.publishers:hover {
-    transform: rotate(5deg);
-}
-
-.h-entry.publishers header {
-    display: flex;
-    flex-direction: column;
-}
-
-.h-entry.publishers header h2 {
-    padding: 0.5em 0.5em 0.2em 0.5em;
-    margin: 0;
-    border: none;
-}
-
-.h-entry.publishers header h2:hover {
-    cursor: pointer;
-}
-
-.h-entry.publishers header h2 a {
-    text-decoration: none;
-    color: var(--social-dark);
-}
-
-.h-entry.publishers header time {
-    text-align: right;
-    padding: 0.6em 0.8em;
-    font-size: 1rem;
-}
-
-.card.publishers .header-metadata {
-    align-items: center;
-}
-
-.card.publishers .header-metadata .dt-published {
-    border-bottom: 2px solid var(--social-dark);
-}
-
-.card.publishers .filler {
-    min-height: 1rem;
-}
-
-.card.publishers .author.p-author {
-    border-color: var(--social-dark);
-    padding: 0.5em 1.2em 0.5em 1.2em;
-}
-
-.card.publishers .p-summary {
-    display: flex;
-}
-
-.card.publishers .p-summary.landscape {
-    flex-direction: column;
-}
-
-.card.publishers .summary-image > img {
-    display: inherit;
-}
-
-.card.publishers .summary-text {
-    font-size: 18px;
-}
-
-.card.publishers .footer-filler {
-    border-left: 2px solid var(--social-dark);
-    border-top: none;
-}
-
-.card.publishers .post-footer {
-    border-top: 2px solid var(--social-dark);
-    flex-flow: row;
-    font-size: 0.9rem;
-    background-color: var(--social-light);
-    color: var(--social-dark);
-    padding: 1em;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.card.publishers .post-footer svg {
-    fill: var(--social-dark)
-}
\ No newline at end of file
+  }
\ No newline at end of file