diff --git a/components/03_Organisms/footer/_footer.scss b/components/03_Organisms/footer/_footer.scss
index e160eeb..687d6e3 100644
--- a/components/03_Organisms/footer/_footer.scss
+++ b/components/03_Organisms/footer/_footer.scss
@@ -1,31 +1,219 @@
-.LP-Footer{
- margin-top: 75px;
- width: 100%;
- background-color: $-grey;
- padding: 25px;
+// Define easily accessible color-defalts for the footer.
+$primary-link-color: $-beige;
+$primary-line-color: $-almost-white;
- .LP-LinkList__List{
- display: flex;
- align-items: center;
- justify-content: center;
+* {
+ box-sizing: border-box
+}
- .LP-LinkList__Item{
- border: none;
- padding: 5px;
- width: auto;
+html, body {
+ height: 100%
+}
- .LP-Text{
- color: $-almost-white;
- font-size: 17px;
- }
+body {
+ font-family: $-primary-sans-serif-font;
+ font-size: 0.75em;
+ margin: auto;
+ display: flex;
+ flex-flow: column nowrap;
+ // This justify-content is essentially unnecessary in Firefox and Chrome due to the flex: 1 1 auto on the main. However, it's needed to push the footer down on IE11
+ justify-content: space-between
+}
- .LP-Link{
- display: inline;
+ul {
+ list-style: none
+}
- &:hover{
- background-color: inherit;
- }
- }
- }
+a {
+ text-decoration: none
+}
+
+.generic-anchor {
+ color: $primary-link-color;
+ &:hover {
+ color: $primary-line-color
}
-}
\ No newline at end of file
+}
+
+.flex-rw {
+ display: flex;
+ flex-flow: row wrap;
+}
+
+footer {
+ background: $-grey;
+ margin-top: auto;
+ width: 100%
+}
+
+.footer-list-top {
+ width: 33.333%
+}
+
+.footer-list-top > li {
+ text-align: center;
+ padding-bottom: 10px
+}
+
+.footer-list-header {
+ padding: 10px 0 5px 0;
+ color: $-almost-white;
+ font-size: 2.3vw;
+}
+
+.footer-list-anchor {
+ font-size: 1.3em;
+}
+
+.footer-social-section {
+ width: 100%;
+ align-items: center;
+ justify-content: space-around;
+ position: relative;
+ margin-top: 5px;
+}
+
+.footer-social-section::after {
+ content: "";
+ position: absolute;
+ z-index: 1;
+ top: 50%;
+ left: 10px;
+ border-top: 1px solid $primary-line-color;
+ width: calc(100% - 20px)
+}
+
+.footer-social-overlap {
+ position: relative;
+ z-index: 2;
+ background: $-grey;
+ padding: 0 20px;
+}
+
+.footer-social-explore {
+ display: flex;
+ align-items: center;
+ font-size: 3.5em;
+ color: $-almost-white
+}
+
+.footer-social-small {
+ font-size: 0.6em;
+ padding: 0px 20px
+}
+
+.footer-social-overlap > a {
+ font-size: 3em
+}
+
+.footer-social-overlap > a:not(:first-child) {
+ margin-left: 0.38em
+}
+
+.footer-bottom-section {
+ width: 100%;
+ padding: 10px;
+ border-top: 1px solid $primary-line-color;
+ margin-top: 10px
+}
+
+.footer-bottom-section > div:first-child {
+ margin-right: auto
+}
+
+.footer-bottom-wrapper {
+ font-size: 1.5em;
+ color: $-almost-white
+}
+
+@media only screen and (max-width: 768px) {
+ .footer-list-header {
+ font-size: 2em
+ }
+ .footer-list-anchor {
+ font-size: 1.1em
+ }
+ .footer-social-connect {
+ font-size: 2.5em
+ }
+ .footer-social-overlap > a {
+ font-size: 2.24em
+ }
+ .footer-bottom-wrapper {
+ font-size: 1.3em
+ }
+}
+
+@media only screen and (max-width: 568px) {
+ main {
+ font-size: 5em
+ }
+ .footer-list-top {
+ width: 100%
+ }
+ .footer-list-header {
+ font-size: 3em;
+ }
+ .footer-list-anchor {
+ font-size: 1.5em
+ }
+ .footer-social-section {
+ justify-content: center
+ }
+ .footer-social-section::after {
+ top: 25%
+ }
+ .footer-social-connect {
+ margin-bottom: 10px;
+ padding: 0 10px
+ }
+ .footer-social-overlap {
+ display: flex;
+ justify-content: center;
+ }
+ .footer-social-icons-wrapper {
+ width: 100%;
+ padding: 0
+ }
+ .footer-social-overlap > a:not(:first-child) {
+ margin-left: 20px;
+ }
+ .footer-bottom-section {
+ padding: 0 5px 10px 5px
+ }
+ .footer-bottom-wrapper {
+ text-align: center;
+ width: 100%;
+ margin-top: 10px
+ }
+}
+
+@media only screen and (max-width: 480px) {
+ .footer-social-overlap > a {
+ margin: auto
+ }
+ .footer-social-overlap > a:not(:first-child) {
+ margin-left: 0;
+ }
+ .footer-bottom-rights {
+ display: block
+ }
+}
+
+@media only screen and (max-width: 320px) {
+ .footer-list-header {
+ font-size: 2.2em
+ }
+ .footer-list-anchor {
+ font-size: 1.2em
+ }
+ .footer-social-connect {
+ font-size: 2.4em
+ }
+ .footer-social-overlap > a {
+ font-size: 2.24em
+ }
+ .footer-bottom-wrapper {
+ font-size: 1.3em
+ }
+}
diff --git a/components/03_Organisms/footer/footer.hbs b/components/03_Organisms/footer/footer.hbs
index 34e97f8..7dc78ca 100644
--- a/components/03_Organisms/footer/footer.hbs
+++ b/components/03_Organisms/footer/footer.hbs
@@ -1,7 +1,47 @@
-
\ No newline at end of file
+