fixes

private/scss/_config.scss

@@ -10,6 +10,8 @@ $black: #000000;
 
 $green: #98C53A;
 
+$facebook_blue: #29487d;
+
 $violet: rgba(149, 72, 200, 0.66);
 $red: rgba(200, 0, 0, 0.66);
 $blue: rgba(65, 93, 200, 0.66);

private/scss/modules/_header.scss

@@ -232,6 +232,9 @@
   .search_open &, .navigation_open & {
     transform: translateY(em(-50px));
   }
+  &.active {
+    color: $green;
+  }
   @media screen and (max-width: $small_breakpoint) {
     padding: 0 em(54px) 0 em(12px);
     &.header__button--reverse {

private/scss/modules/_navigation.scss

@@ -305,6 +305,9 @@
   width: 100%;
   margin-top: em(20px);
   li {
+    &.selected {
+      color: $green;
+    }
     a {
       font-size: em(28px);
       text-decoration: none;

private/scss/modules/_pages.scss

@@ -10,6 +10,7 @@
   text-decoration: none;
   padding-left: 50%;
   position: relative;
+  background: $white;
   transition: border-color 0.2s ease-in-out;
   &:hover {
     border-color: $green;

private/scss/modules/plugins/_form.scss

@@ -86,6 +86,16 @@
   font-size: em(14px);
 }
 
+.button--white {
+  background: $white;
+  color: $green;
+  .button__icon {
+    svg {
+      fill: $green;
+    }
+  }
+}
+
 .button--ghost {
   background: none;
   color: $green;

private/scss/modules/plugins/_social_media.scss

@@ -33,7 +33,7 @@
     margin: em(50px) 0;
   }
   .social_media__item {
-    background: $green;
+    background: $facebook_blue;
     color: $white;
   }
 }

private/scss/modules/plugins/_timetable.scss

@@ -151,7 +151,7 @@ $timetable_count: 15;
   }
 }
 
-.timetable__clock__digital__intro {
+.timetable__clock__digital__intro, .timetable__clock__digital__outro {
   position: absolute;
   bottom: 100%;
   left: 20%;
@@ -169,6 +169,11 @@ $timetable_count: 15;
   }
 }
 
+.timetable__clock__digital__outro {
+  top: 100%;
+  bottom: auto;
+}
+
 #timetable__clock__digital__time span {
   display: inline-block;
   position: relative;
@@ -235,23 +240,6 @@ $timetable_count: 15;
   transform: translateX(100%);
 }
 
-@keyframes point {
-  0% {
-    transform: translate(0, 0);
-    opacity: 0;
-  }
-  20% {
-    opacity: 1;
-  }
-  80% {
-    opacity: 1;
-  }
-  100% {
-    transform: translate(0, em(20px));
-    opacity: 0;
-  }
-}
-
 .timetable__next {
   position: fixed;
   bottom: 0;
@@ -260,49 +248,17 @@ $timetable_count: 15;
   text-decoration: none;
   color: $green;
   text-align: center;
-  height: em(60px);
+  height: em(100px);
   z-index: 10;
   opacity: 0;
   -webkit-tap-highlight-color: transparent;
   transition: opacity 2s $reveal_timing_function, color 0s 1s !important;
-  span {
-    display: block;
-    position: absolute;
-    left: 50%;
-    bottom: em(40px);
-    margin-left: em(-15px);
-    width: em(30px);
-    height: em(50px);
-    border: em(2.5px) solid $green;
-    border-radius: em(50px);
-    transition: border 0s 1s;
-    &:before {
-      content: '';
-      position: absolute;
-      top: em(10px);
-      left: 50%;
-      width: em(6px);
-      height: em(6px);
-      margin-left: em(-3px);
-      background: $green;
-      border-radius: 50%;
-      display: block;
-      animation: point 2s infinite;
-      transition: background 0s 1s;
-    }
-    #timetable[data-active="0"] & {
-      border-color: $white;
-      &:before {
-        background: $white;
-      }
-    }
-  }
   &.hidden {
     opacity: 0;
     pointer-events: none;
   }
   #timetable[data-active="0"] & {
-    color: $black;
+    color: $white;
     opacity: 1;
     &:before {
       opacity: 1;
@@ -313,6 +269,46 @@ $timetable_count: 15;
   }
 }
 
+@keyframes opacity {
+  0% {
+    opacity: 0.2;
+  }
+  30% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.timetable__next__icon {
+  display: block;
+  margin: em(15px) auto;
+  width: em(25px);
+  span {
+    display: block;
+    width: em(25px);
+    height: em(25px);
+    margin-top: em(-12px);
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg);
+    animation: opacity 1.2s infinite ease-in-out;
+    &.data_id_1 {
+      animation-delay: 0.2s;
+    }
+    &.data_id_2 {
+      animation-delay: 0.4s;
+    }
+  }
+  #timetable[data-active="0"] & {
+    color: $white;
+  }
+}
+
 .timetable__intro__placeholder {
   width: 100%;
   height: 50%;