From 794847d48b919aa0ef09f9221138b23b4f71d50f Mon Sep 17 00:00:00 2001
From: hendr-ik <hello@niefeld.com>
Date: Mon, 26 Aug 2019 21:05:13 +0200
Subject: [PATCH] reset index and style css

---
 homepage/theme/static/css/style.css | 586 ++++++++++++++++++
 homepage/theme/templates/base.html  |   4 +-
 styles/index.css                    | 905 ++++++++++++----------------
 3 files changed, 960 insertions(+), 535 deletions(-)

diff --git a/homepage/theme/static/css/style.css b/homepage/theme/static/css/style.css
index e69de29..58460e0 100644
--- a/homepage/theme/static/css/style.css
+++ b/homepage/theme/static/css/style.css
@@ -0,0 +1,586 @@
+
+
+/* ---------------------------------------------------
+ROOTS
+----------------------------------------------------*/
+:root {
+--yellow-mid: #F7BF08;
+--yellow-bright: #fde28c;
+--black-mid: #39352A;
+--grey-mid: #898989;
+--grey-bright: #D5D5D5;
+--turquoise-bright: #BBD9D3;
+--white: #FFF;
+}
+
+
+/* ---------------------------------------------------
+BASICS
+----------------------------------------------------*/
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+
+/* ---------------------------------------------------
+LAYOUT
+----------------------------------------------------*/
+.menu {
+  width: 100%;
+  height: 70px;
+  position: fixed;
+  top: 0;
+  right: 0;
+  background-color: var(--yellow-mid);
+}
+.intro {
+  width: 100%;
+  margin: 70px 0 0 0;
+  background-color: var(--yellow-mid);
+}
+.feature {
+  width: 100%;
+  background-color: var(--turquoise-bright);
+}
+.cta-top {
+  width: 100%;
+  color: var(--yellow-mid);
+  background-color: var(--black-mid);
+}
+.content {
+  width: 100%;
+  margin: 70px 0 0 0;
+  background-color: var(--white);
+}
+.content-index {
+  width: 100%;
+  background-color: var(--white);
+}
+.cta-bottom,
+.outro {
+  width: 100%;
+  background-color: var(--yellow-mid);
+}
+.footer {
+  width: 100%;
+  min-height: 300px;
+  color: var(--grey-mid);
+  background-color: var(--black-mid);
+}
+/* Desktop Styles */
+@media only screen and (min-width: 961px) {
+  .container-reader {
+    width: 600px;
+    margin: 0 auto;
+    padding: 60px 20px 120px 20px;
+  }
+  .container-full {
+    padding: 60px 80px 120px 80px;
+  }
+  .footer {
+    padding: 40px 40px 0 40px;
+  }
+}
+/* Mobile Styles */
+@media only screen and (min-width: 600px) and (max-width: 960px) {
+  .container-reader,
+  .container-full {
+    width: 600px;
+    margin: 0 auto;
+    padding: 60px 20px 120px 20px;
+  }
+}
+@media only screen and (max-width: 960px) {
+  .container-reader,
+  .container-full,
+  .footer {
+    padding: 60px 20px 120px 20px;
+  }
+}
+/* Mobile Styles*/
+@media only screen and (max-width: 480px) {
+  .menu {
+    position: static;
+  }
+  .intro {
+    margin: 0;
+  }
+  .content {
+    margin: 0;
+  }
+}
+
+/* ---------------------------------------------------
+CARDS
+----------------------------------------------------*/
+.card-deck,
+.card,
+.footer-card-deck {
+  display: flex;
+}
+.card {
+  max-width: 400px;
+  color: var(--black-mid);
+}
+.cta-top .card {
+  color: var(--yellow-mid);
+}
+.card h2,
+.card p  {
+  text-align: center;
+}
+.footer-card p {
+  margin: 0 0 2px 0;
+}
+.footer-card:nth-child(1),
+.footer-card:nth-child(2) {
+  margin: 0 0 20px 0;
+}
+/* Mobile Styles */
+@media only screen and (max-width: 960px) {
+  .card-deck,
+  .card,
+  .footer-card-deck {
+    flex-direction: column;
+  }
+  .card {
+    align-self: center;
+  }
+  .card:nth-child(2) {
+    margin: 80px 0 80px 0;
+  }
+  .footer-card {
+    text-align: center;
+  }
+}
+/* Desktop Styles */
+@media only screen and (min-width: 961px) {
+  .card-deck,
+  .footer-card-deck,
+  .cta-top .card,
+  .outro .card {
+    flex-direction: row;
+  }
+  .card {
+    flex-direction: column;
+  }
+  .card-deck {
+    justify-content: space-evenly;
+  }
+  .card:nth-child(2) {
+    margin: 0 40px 0 40px;
+  }
+  .footer-card-deck {
+    justify-content: space-between;
+  }
+  .footer-card:nth-child(1),
+  .footer-card:nth-child(2) {
+    flex-grow: 1;
+  }
+  .footer-card:nth-child(3) {
+    text-align: right;
+    flex-grow: 10;
+  }
+}
+
+
+/* ---------------------------------------------------
+TYPO
+----------------------------------------------------*/
+body {
+  background-color: var(--white);
+  font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 400;
+  word-wrap: break-word;
+  color: var(--grey-mid);
+}
+h1,
+h2 {
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--black-mid);
+}
+h3,
+h4 {
+  font-weight: 400;
+  color: var(--black-mid);
+}
+h3 {
+  margin: 0 0 20px 0;
+}
+p + h3 {
+  margin: 60px 0 20px 0;
+}
+h4 {
+  color: var(--grey-mid);
+}
+/* Desktop Styles */
+@media only screen and (min-width: 481px) {
+  h1,
+  h2{
+    font-size: 30px;
+  }
+  h1 {
+    margin: 20px 0 10px 0;
+  }
+  h3,
+  h4 {
+    font-size: 14px;
+  }
+}
+/* Mobile Styles */
+@media only screen and (max-width: 480px) {
+  h1,
+  h2 {
+    font-size: 22px;
+  }
+}
+/* ---------------------------------------------------
+LINKS
+----------------------------------------------------*/
+a,
+a:hover,
+a:focus {
+  color: var(--grey-mid);
+  text-decoration: none;
+}
+p a,
+p a:hover,
+p a:focus {
+  font-weight: 700;
+}
+ol li p a,
+ol li p a:hover,
+ol li p a:focus {
+color: var(--grey-bright);
+}
+.footer a,
+.footer a:hover,
+.footer a:focus {
+  font-weight: 400;
+}
+
+/* ---------------------------------------------------
+TYPO ELEMENTS
+----------------------------------------------------*/
+p {
+  margin: 0 0 20px 0;
+}
+h1 + p {
+  color: var(--black-mid);
+}
+hr {
+  height: 0;
+  margin: 80px 0 20px 0;
+  border-top: 1px solid var(--grey-bright);
+}
+blockquote {
+  margin: 0;
+  padding: 0 0 0 20px;
+  font-style: italic;
+  border-left: 1px solid var(--grey-bright);
+}
+strong,
+h1 + p strong,
+.bg strong {
+  font-weight: 700;
+}
+.footer-card h3 strong {
+  font-weight: 700;
+  color: var(--yellow-mid);
+}
+strong,
+h3 strong {
+  text-decoration: none;
+  font-weight: 400;
+  color: var(--black-mid);
+}
+.footer h3,
+.footer h4 {
+  color: var(--yellow-mid);
+  margin: 0 0 2px 0;
+}
+em {
+  background: linear-gradient(transparent 66%, var(--yellow-bright) 66%);
+  font-style: normal;
+}
+.intro em {
+  background: linear-gradient(transparent 66%, var(--turquoise-bright) 66%);
+  font-style: normal;
+}
+.footnote {
+  color: var(--grey-bright);
+}
+ol {
+  padding-inline-start: 20px;
+}
+
+
+/* ---------------------------------------------------
+BUTTONS
+----------------------------------------------------*/
+.btn-wrapper {
+  margin: 40px 0 0 0;
+}
+.btn {
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0px;
+  padding: 8px 30px;
+  text-align: center;
+  text-decoration: none;
+}
+.btn-color-yellow,
+.btn-color-yellow:visited,
+.btn-color-yellow:link,
+.btn-color-yellow:hover,
+.btn-color-yellow:active {
+  font-weight: 700;
+  color: var(--yellow-mid);
+  border: solid var(--yellow-mid) 5px;
+}
+.btn-color-black,
+.btn-color-black:visited,
+.btn-color-black:link,
+.btn-color-black:hover,
+.btn-color-black:active {
+  font-weight: 700;
+  color: var(--black-mid);
+  border: solid var(--black-mid) 5px;
+}
+.btn-color-white,
+.btn-color-white:visited,
+.btn-color-white:link,
+.btn-color-white:hover,
+.btn-color-white:active {
+  font-weight: 700;
+  color: var(--white);
+  border: solid var(--white) 5px;
+}
+
+/* ---------------------------------------------------
+MENU
+----------------------------------------------------*/
+.nav-list {
+  margin: 0 0 40px 0;
+}
+.nav-bar {
+  height: 70px;
+}
+.brand,
+.brand-index {
+  position: absolute;
+  padding: 12px 0 0 20px;
+  float: left;
+  line-height: 70px;
+}
+.brand-index {
+  opacity: 0;
+}
+.nav-container {
+  margin: 0 auto;
+}
+nav {
+  float: right;
+}
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+nav ul li {
+  float: left;
+  position: relative;
+}
+nav ul li a,
+nav ul li a:visited {
+  display: block;
+  padding: 0 20px;
+  line-height: 70px;
+  background: var(--yellow-mid);
+  color: var(--black-mid);
+  text-decoration: none;
+}
+nav ul li a:hover,
+nav ul li a:visited:hover {
+  color: var(--black-mid);
+}
+nav ul li a:not(:only-child):after,
+nav ul li a:visited:not(:only-child):after {
+  padding-left: 4px;
+  content: ' ▾';
+}
+nav ul li ul li {
+  min-width: 150px;
+}
+nav ul li ul li a {
+  padding: 15px;
+  line-height: 20px;
+}
+.nav-dropdown {
+  position: absolute;
+  display: none;
+  z-index: 1;
+}
+.nav-mobile {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: var(--yellow-mid);
+  height: 70px;
+  width: 70px;
+}
+/* Mobile Styles */
+@media only screen and (max-width: 960px) {
+  .nav-mobile {
+    display: block;
+  }
+  nav {
+    width: 100%;
+    padding: 70px 0 15px;
+  }
+  nav ul {
+    display: none;
+  }
+  nav ul li {
+    float: none;
+  }
+  nav ul li a {
+    padding: 15px;
+    line-height: 20px;
+	  padding-left: 25%;
+  }
+  nav ul li ul li a {
+    padding-left: 30%;
+  }
+  nav ul li:last-child a {
+    padding-bottom: 60px;
+  }
+  nav ul li:last-child a {
+    box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
+  }
+
+  .nav-dropdown {
+    position: static;
+  }
+}
+/* Desktop Styles */
+@media screen and (min-width: 961px) {
+  .nav-list {
+    display: block !important;
+  }
+}
+#nav-toggle {
+  position: absolute;
+  left: 18px;
+  top: 22px;
+  cursor: pointer;
+  padding: 12px 35px 16px 0px;
+}
+#nav-toggle span,
+#nav-toggle span:before,
+#nav-toggle span:after {
+  cursor: pointer;
+  border-radius: 1px;
+  height: 2px;
+  width: 35px;
+  background: var(--black-mid);
+  position: absolute;
+  display: block;
+  content: '';
+  /*
+  transition: all 300ms ease-in-out;
+  */
+}
+#nav-toggle span:before {
+  top: -10px;
+}
+#nav-toggle span:after {
+  bottom: -10px;
+}
+#nav-toggle.active span {
+  background-color: transparent;
+}
+#nav-toggle.active span:before, #nav-toggle.active span:after {
+  top: 0;
+}
+#nav-toggle.active span:before {
+  transform: rotate(45deg);
+}
+#nav-toggle.active span:after {
+  transform: rotate(-45deg);
+}
+
+
+/* ---------------------------------------------------
+GRAPHICS
+----------------------------------------------------*/
+.bg h2 {
+  margin: 0 0 10px 0;
+}
+#bg-intro {
+  width: 75%;
+  background: url(/theme/images/gfx-intro.svg) no-repeat center;
+  background-size: cover;
+}
+/*-------------------------*/
+#bg-feature-a,
+#bg-feature-b,
+#bg-feature-c {
+  background: url(/theme/images/gfx-feature-a.svg) no-repeat center;
+  background-size: cover;
+}
+/*-------------------------*/
+#bg-cta-top {
+  width: 75%;
+}
+#bg-cta-top h2,
+#bg-cta-top p {
+  color: var(--white);
+}
+#bg-cta-top h2,
+#bg-cta-top p,
+#bg-cta-top .btn-wrapper {
+  text-align: right;
+}
+#bg-cta-top {
+  background: url(/theme/images/gfx-cta-top.svg) no-repeat center;
+  background-size: cover;
+}
+/*-------------------------*/
+#bg-outro {
+  width: 75%;
+}
+#bg-outro h2,
+#bg-outro p,
+#bg-outro .btn-wrapper {
+  text-align: right;
+}
+#bg-outro {
+  background: url(/theme/images/gfx-outro.svg) no-repeat center;
+  background-size: cover;
+}
+/*-------------------------*/
+#bg-cta-bottom {
+  width: 75%;
+}
+#bg-cta-bottom h2,
+#bg-cta-bottom p,
+#bg-cta-bottom .btn-wrapper {
+  text-align: right;
+}
+#bg-cta-bottom {
+  background: url(/theme/images/gfx-outro.svg) no-repeat center;
+  background-size: cover;
+}
+@media only screen and (max-width: 480px) {
+  #bg-intro {
+    width: 100%;
+    background-size: 440px;
+  }
+}
diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html
index c68d93d..7c40f42 100644
--- a/homepage/theme/templates/base.html
+++ b/homepage/theme/templates/base.html
@@ -19,10 +19,10 @@
   <link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
   <link rel="stylesheet" type="text/css" href="/theme/css/normalize.css">
   <link rel="stylesheet" type="text/css" href="/theme/css/fonts.css">
-  <link rel="stylesheet" type="text/css" href="/theme/styles/index.css">
   <!--
-  <link rel="stylesheet" type="text/css" href="/theme/css/style.css">
+  <link rel="stylesheet" type="text/css" href="/theme/styles/index.css">
   -->
+  <link rel="stylesheet" type="text/css" href="/theme/css/style.css">
   {% if OFFEN_ACCOUNT_ID %}
     <script async src="https://script-alpha.offen.dev/script.js" data-account-id="{{ OFFEN_ACCOUNT_ID }}"></script>
   {% endif %}
diff --git a/styles/index.css b/styles/index.css
index 58460e0..44ceb40 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -1,586 +1,425 @@
-
-
-/* ---------------------------------------------------
-ROOTS
-----------------------------------------------------*/
-:root {
---yellow-mid: #F7BF08;
---yellow-bright: #fde28c;
---black-mid: #39352A;
---grey-mid: #898989;
---grey-bright: #D5D5D5;
---turquoise-bright: #BBD9D3;
---white: #FFF;
-}
-
-
-/* ---------------------------------------------------
-BASICS
-----------------------------------------------------*/
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-
-/* ---------------------------------------------------
-LAYOUT
-----------------------------------------------------*/
-.menu {
-  width: 100%;
-  height: 70px;
-  position: fixed;
-  top: 0;
-  right: 0;
-  background-color: var(--yellow-mid);
-}
-.intro {
-  width: 100%;
-  margin: 70px 0 0 0;
-  background-color: var(--yellow-mid);
-}
-.feature {
-  width: 100%;
-  background-color: var(--turquoise-bright);
-}
-.cta-top {
-  width: 100%;
-  color: var(--yellow-mid);
-  background-color: var(--black-mid);
-}
-.content {
-  width: 100%;
-  margin: 70px 0 0 0;
-  background-color: var(--white);
-}
-.content-index {
-  width: 100%;
-  background-color: var(--white);
-}
-.cta-bottom,
-.outro {
-  width: 100%;
-  background-color: var(--yellow-mid);
-}
-.footer {
-  width: 100%;
-  min-height: 300px;
-  color: var(--grey-mid);
-  background-color: var(--black-mid);
-}
-/* Desktop Styles */
-@media only screen and (min-width: 961px) {
-  .container-reader {
-    width: 600px;
-    margin: 0 auto;
-    padding: 60px 20px 120px 20px;
-  }
-  .container-full {
-    padding: 60px 80px 120px 80px;
-  }
-  .footer {
-    padding: 40px 40px 0 40px;
-  }
-}
-/* Mobile Styles */
-@media only screen and (min-width: 600px) and (max-width: 960px) {
-  .container-reader,
-  .container-full {
-    width: 600px;
-    margin: 0 auto;
-    padding: 60px 20px 120px 20px;
-  }
-}
-@media only screen and (max-width: 960px) {
-  .container-reader,
-  .container-full,
-  .footer {
-    padding: 60px 20px 120px 20px;
-  }
-}
-/* Mobile Styles*/
-@media only screen and (max-width: 480px) {
-  .menu {
-    position: static;
-  }
-  .intro {
-    margin: 0;
-  }
-  .content {
-    margin: 0;
-  }
-}
-
-/* ---------------------------------------------------
-CARDS
-----------------------------------------------------*/
-.card-deck,
-.card,
-.footer-card-deck {
-  display: flex;
-}
-.card {
-  max-width: 400px;
-  color: var(--black-mid);
-}
-.cta-top .card {
-  color: var(--yellow-mid);
-}
-.card h2,
-.card p  {
-  text-align: center;
-}
-.footer-card p {
-  margin: 0 0 2px 0;
-}
-.footer-card:nth-child(1),
-.footer-card:nth-child(2) {
-  margin: 0 0 20px 0;
-}
-/* Mobile Styles */
-@media only screen and (max-width: 960px) {
-  .card-deck,
-  .card,
-  .footer-card-deck {
-    flex-direction: column;
-  }
-  .card {
-    align-self: center;
-  }
-  .card:nth-child(2) {
-    margin: 80px 0 80px 0;
-  }
-  .footer-card {
-    text-align: center;
-  }
-}
-/* Desktop Styles */
-@media only screen and (min-width: 961px) {
-  .card-deck,
-  .footer-card-deck,
-  .cta-top .card,
-  .outro .card {
-    flex-direction: row;
-  }
-  .card {
-    flex-direction: column;
-  }
-  .card-deck {
-    justify-content: space-evenly;
-  }
-  .card:nth-child(2) {
-    margin: 0 40px 0 40px;
-  }
-  .footer-card-deck {
-    justify-content: space-between;
-  }
-  .footer-card:nth-child(1),
-  .footer-card:nth-child(2) {
-    flex-grow: 1;
-  }
-  .footer-card:nth-child(3) {
-    text-align: right;
-    flex-grow: 10;
-  }
-}
-
-
-/* ---------------------------------------------------
-TYPO
-----------------------------------------------------*/
+/* Typo
+------------------------------------------------------------- */
 body {
-  background-color: var(--white);
-  font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  font-weight: 400;
-  word-wrap: break-word;
-  color: var(--grey-mid);
+padding: 50px;
+background-color: #fff;
+color: #898989;
+font: 18px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+font-size: 18px;
+line-height: 1.5;
+font-weight: 400;
 }
+
 h1,
-h2 {
-  font-weight: 700;
-  line-height: 1.3;
-  color: var(--black-mid);
-}
+h2,
 h3,
 h4 {
-  font-weight: 400;
-  color: var(--black-mid);
-}
-h3 {
-  margin: 0 0 20px 0;
-}
-p + h3 {
-  margin: 60px 0 20px 0;
+color: #404040;
+font-size: 28px;
+line-height: 1.4;
+font-weight: 400;
+margin: 0 0 40px 0;
 }
+
+h3,
 h4 {
-  color: var(--grey-mid);
+font-size: 18px;
+margin: 30px 0 20px 0;
 }
-/* Desktop Styles */
-@media only screen and (min-width: 481px) {
-  h1,
-  h2{
-    font-size: 30px;
-  }
-  h1 {
-    margin: 20px 0 10px 0;
-  }
-  h3,
-  h4 {
-    font-size: 14px;
-  }
+
+.section-auditorium h3 {
+margin: 0 0 10px 0;
 }
-/* Mobile Styles */
-@media only screen and (max-width: 480px) {
-  h1,
-  h2 {
-    font-size: 22px;
-  }
+
+h4 {
+color: #898989;
+margin: 30px 0 6px 0;
 }
-/* ---------------------------------------------------
-LINKS
-----------------------------------------------------*/
+
+.section-auditorium h4 {
+margin: 30px 0 20px 0;
+}
+
+
+/* Links
+------------------------------------------------------------- */
 a,
 a:hover,
 a:focus {
-  color: var(--grey-mid);
-  text-decoration: none;
+color: #898989;
+text-decoration: none;
+font-weight: 700;
 }
-p a,
-p a:hover,
-p a:focus {
-  font-weight: 700;
+
+button {
+cursor: pointer;
+font: inherit;
+font-size: inherit;
+font-weight: 700;
 }
+
+h1 a,
+h1 a:hover,
+h1 a:focus {
+color: #f7bf08;
+text-decoration: none;
+font-weight: 400;
+}
+
+small a,
+small a:hover,
+small a:focus {
+color: #898989;
+text-decoration: none;
+font-weight: 700;
+}
+
+sup {
+line-height: 1;
+}
+
+sup a,
+sup a:hover,
+sup a:focus {
+color: #cfcfcf;
+}
+
+ol {
+padding-inline-start: 20px;
+}
+
 ol li p a,
 ol li p a:hover,
 ol li p a:focus {
-color: var(--grey-bright);
-}
-.footer a,
-.footer a:hover,
-.footer a:focus {
-  font-weight: 400;
+color: #cfcfcf;
 }
 
-/* ---------------------------------------------------
-TYPO ELEMENTS
-----------------------------------------------------*/
-p {
-  margin: 0 0 20px 0;
-}
-h1 + p {
-  color: var(--black-mid);
-}
-hr {
-  height: 0;
-  margin: 80px 0 20px 0;
-  border-top: 1px solid var(--grey-bright);
+
+
+
+/* Typo Elements
+------------------------------------------------------------- */
+.logo {
+margin: -20px 0 0 0;
 }
+
 blockquote {
-  margin: 0;
-  padding: 0 0 0 20px;
-  font-style: italic;
-  border-left: 1px solid var(--grey-bright);
-}
-strong,
-h1 + p strong,
-.bg strong {
-  font-weight: 700;
-}
-.footer-card h3 strong {
-  font-weight: 700;
-  color: var(--yellow-mid);
+border-left: 1px solid #e5e5e5;
+margin: 0;
+padding: 0 0 0 20px;
+font-style: italic
 }
+
+hr {
+border-top: 1px solid #d5d5d5;
+height: 0;
+margin: 80px 0 0 0;
+}
+
+.footnote hr {
+border: 0;
+height: 0;
+margin: 0;
+}
+
+blockquote {
+border-left: 1px solid #d5d5d5;
+margin: 40px 0 40px 0;
+}
+
+strong {
+font-weight: 700
+}
+
 strong,
+h1 strong,
+h2 strong,
 h3 strong {
-  text-decoration: none;
-  font-weight: 400;
-  color: var(--black-mid);
+color: #404040;
+text-decoration: none;
+font-weight: 400;
 }
-.footer h3,
-.footer h4 {
-  color: var(--yellow-mid);
-  margin: 0 0 2px 0;
+
+h1 strong,
+h2 strong,
+h3 strong {
+color: #898989;
 }
-em {
-  background: linear-gradient(transparent 66%, var(--yellow-bright) 66%);
-  font-style: normal;
+
+tbody,
+h4 strong {
+color: #404040;
+text-decoration: none;
+font-weight: 700;
 }
-.intro em {
-  background: linear-gradient(transparent 66%, var(--turquoise-bright) 66%);
-  font-style: normal;
-}
-.footnote {
-  color: var(--grey-bright);
-}
-ol {
-  padding-inline-start: 20px;
+
+h4 strong {
+font-size: 36px;
 }
 
 
-/* ---------------------------------------------------
-BUTTONS
-----------------------------------------------------*/
-.btn-wrapper {
-  margin: 40px 0 0 0;
+/* Buttons
+------------------------------------------------------------- */
+.btn {
+-webkit-border-radius: 0;
+-moz-border-radius: 0;
+border-radius: 0px;
+padding: 6px;
+text-align: center;
+text-decoration: none;
+}
+
+.btn-color-grey,
+.btn-color-grey:visited,
+.btn-color-grey:link {
+background: #fff;
+color: #898989;
+border: solid #898989 5px;
+}
+
+.btn-color-orange,
+.btn-color-orange:visited,
+.btn-color-orange:link {
+background: #fff;
+color: #F7BF08;
+border: solid #F7BF08 5px;
+}
+
+.btn-color-grey:hover,
+.btn-color-grey:active {
+background: #898989;
+color: #fff;
+text-decoration: none;
+}
+
+.btn-color-orange:hover,
+.btn-color-orange:active {
+background: #F7BF08;
+color: #fff;
+text-decoration: none;
+}
+
+.btn {
+margin: 0 0 15px 0;
+}
+
+.button-wrapper {
+display: flex;
+flex-flow: column wrap;
+justify-content: space-around;
+}
+
+.navigation-wrapper {
+margin: 60px 0 0 0;
+}
+
+@media (min-width: 480px) {
+.button-wrapper {
+align-items: center;
+flex-flow: row wrap;
+-ms-flex-flow: row wrap;
+-webkit-flex-flow: row wrap;
 }
 .btn {
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0px;
-  padding: 8px 30px;
-  text-align: center;
-  text-decoration: none;
+flex-grow: 1;
 }
-.btn-color-yellow,
-.btn-color-yellow:visited,
-.btn-color-yellow:link,
-.btn-color-yellow:hover,
-.btn-color-yellow:active {
-  font-weight: 700;
-  color: var(--yellow-mid);
-  border: solid var(--yellow-mid) 5px;
+.btn {
+margin: 0 15px 15px 0;
 }
-.btn-color-black,
-.btn-color-black:visited,
-.btn-color-black:link,
-.btn-color-black:hover,
-.btn-color-black:active {
-  font-weight: 700;
-  color: var(--black-mid);
-  border: solid var(--black-mid) 5px;
+.btn:last-of-type {
+margin: 0 0 15px 0;
 }
-.btn-color-white,
-.btn-color-white:visited,
-.btn-color-white:link,
-.btn-color-white:hover,
-.btn-color-white:active {
-  font-weight: 700;
-  color: var(--white);
-  border: solid var(--white) 5px;
-}
-
-/* ---------------------------------------------------
-MENU
-----------------------------------------------------*/
-.nav-list {
-  margin: 0 0 40px 0;
-}
-.nav-bar {
-  height: 70px;
-}
-.brand,
-.brand-index {
-  position: absolute;
-  padding: 12px 0 0 20px;
-  float: left;
-  line-height: 70px;
-}
-.brand-index {
-  opacity: 0;
-}
-.nav-container {
-  margin: 0 auto;
-}
-nav {
-  float: right;
-}
-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-nav ul li {
-  float: left;
-  position: relative;
-}
-nav ul li a,
-nav ul li a:visited {
-  display: block;
-  padding: 0 20px;
-  line-height: 70px;
-  background: var(--yellow-mid);
-  color: var(--black-mid);
-  text-decoration: none;
-}
-nav ul li a:hover,
-nav ul li a:visited:hover {
-  color: var(--black-mid);
-}
-nav ul li a:not(:only-child):after,
-nav ul li a:visited:not(:only-child):after {
-  padding-left: 4px;
-  content: ' ▾';
-}
-nav ul li ul li {
-  min-width: 150px;
-}
-nav ul li ul li a {
-  padding: 15px;
-  line-height: 20px;
-}
-.nav-dropdown {
-  position: absolute;
-  display: none;
-  z-index: 1;
-}
-.nav-mobile {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
-  background: var(--yellow-mid);
-  height: 70px;
-  width: 70px;
-}
-/* Mobile Styles */
-@media only screen and (max-width: 960px) {
-  .nav-mobile {
-    display: block;
-  }
-  nav {
-    width: 100%;
-    padding: 70px 0 15px;
-  }
-  nav ul {
-    display: none;
-  }
-  nav ul li {
-    float: none;
-  }
-  nav ul li a {
-    padding: 15px;
-    line-height: 20px;
-	  padding-left: 25%;
-  }
-  nav ul li ul li a {
-    padding-left: 30%;
-  }
-  nav ul li:last-child a {
-    padding-bottom: 60px;
-  }
-  nav ul li:last-child a {
-    box-shadow: 0px 7px 15px -6px rgba(57,53,42,0.2);
-  }
-
-  .nav-dropdown {
-    position: static;
-  }
-}
-/* Desktop Styles */
-@media screen and (min-width: 961px) {
-  .nav-list {
-    display: block !important;
-  }
-}
-#nav-toggle {
-  position: absolute;
-  left: 18px;
-  top: 22px;
-  cursor: pointer;
-  padding: 12px 35px 16px 0px;
-}
-#nav-toggle span,
-#nav-toggle span:before,
-#nav-toggle span:after {
-  cursor: pointer;
-  border-radius: 1px;
-  height: 2px;
-  width: 35px;
-  background: var(--black-mid);
-  position: absolute;
-  display: block;
-  content: '';
-  /*
-  transition: all 300ms ease-in-out;
-  */
-}
-#nav-toggle span:before {
-  top: -10px;
-}
-#nav-toggle span:after {
-  bottom: -10px;
-}
-#nav-toggle.active span {
-  background-color: transparent;
-}
-#nav-toggle.active span:before, #nav-toggle.active span:after {
-  top: 0;
-}
-#nav-toggle.active span:before {
-  transform: rotate(45deg);
-}
-#nav-toggle.active span:after {
-  transform: rotate(-45deg);
 }
 
 
-/* ---------------------------------------------------
-GRAPHICS
-----------------------------------------------------*/
-.bg h2 {
-  margin: 0 0 10px 0;
+
+
+/* Custom Underline
+------------------------------------------------------------- */
+em {
+color: #898989;
+background: linear-gradient(transparent 66%, #fde28c 66%);
+font-style: normal;
 }
-#bg-intro {
-  width: 75%;
-  background: url(/theme/images/gfx-intro.svg) no-repeat center;
-  background-size: cover;
+
+
+
+
+/* Layout
+------------------------------------------------------------- */
+.wrapper {
+width: 860px;
+margin: 0 auto
 }
-/*-------------------------*/
-#bg-feature-a,
-#bg-feature-b,
-#bg-feature-c {
-  background: url(/theme/images/gfx-feature-a.svg) no-repeat center;
-  background-size: cover;
+
+header {
+width: 270px;
+float: left;
+position: fixed;
+-webkit-font-smoothing: subpixel-antialiased
 }
-/*-------------------------*/
-#bg-cta-top {
-  width: 75%;
+
+section,
+section-auditorium {
+float: right;
+width: 600px;
+padding: 0 0 40px 0;
 }
-#bg-cta-top h2,
-#bg-cta-top p {
-  color: var(--white);
+
+section > p,
+section-auditorium > p {
+margin: 0 0 20px 0;
 }
-#bg-cta-top h2,
-#bg-cta-top p,
-#bg-cta-top .btn-wrapper {
-  text-align: right;
+
+section > p:last-child,
+section-auditorium > p:last-child {
+margin: 0 0 60px 0;
 }
-#bg-cta-top {
-  background: url(/theme/images/gfx-cta-top.svg) no-repeat center;
-  background-size: cover;
+
+.row {
+display: flex;
+justify-content: flex-start;
 }
-/*-------------------------*/
-#bg-outro {
-  width: 75%;
+
+.row h4 {
+margin-right: 30px;
 }
-#bg-outro h2,
-#bg-outro p,
-#bg-outro .btn-wrapper {
-  text-align: right;
+
+.row h4:last-child {
+margin-right: 0;
 }
-#bg-outro {
-  background: url(/theme/images/gfx-outro.svg) no-repeat center;
-  background-size: cover;
+
+
+
+
+/* Tables
+------------------------------------------------------------- */
+.table-full-width {
+box-sizing: border-box
 }
-/*-------------------------*/
-#bg-cta-bottom {
-  width: 75%;
+
+td {
+padding-right: 30px;
 }
-#bg-cta-bottom h2,
-#bg-cta-bottom p,
-#bg-cta-bottom .btn-wrapper {
-  text-align: right;
+
+
+
+
+/* Footer
+------------------------------------------------------------- */
+footer {
+width: 270px;
+float: left;
+position: fixed;
+bottom: 100px;
+-webkit-font-smoothing: subpixel-antialiased
 }
-#bg-cta-bottom {
-  background: url(/theme/images/gfx-outro.svg) no-repeat center;
-  background-size: cover;
+
+.footnote {
+color: #d5d5d5;
+font-size: 14px;
+margin: 20px 0 0 0;
+}
+
+.footnote ol {
+margin-bottom: 0;
+}
+
+.footer-list {
+list-style-type: none;
+padding: 0;
+margin: 0;
+}
+
+.footer-list li {
+display: inline-block;
+font-size: 14px;
+margin-right: 0.14em;
+}
+
+
+
+
+/* Media Queries
+------------------------------------------------------------- */
+@media screen and (max-width: 960px) {
+div.wrapper {
+width: auto;
+margin: 0
+}
+header,
+section,
+section-auditorium,
+footer {
+float: none;
+position: static;
+width: auto
+}
+header {
+padding-right: 320px
+}
+section,
+section-auditorium {
+border: none;
+width: auto;
+padding: 0 0 0 0;
+margin: 40px 0 40px 0;
+}
+section > p:first-child,
+section > p:last-child,
+section-auditorium > p:first-child,
+section-auditorium > p:last-child {
+margin: 0 0 40px 0;
+}
+}
+
+
+
+
+@media screen and (max-width: 480px) {
+body {
+font-size: 14px;
+line-height: 1.3;
+padding: 15px;
+word-wrap: break-word;
+}
+h1,
+h2 {
+font-size: 20px;
+line-height: 1.3;
+margin: 0 0 20px 0;
+}
+h3,
+h4 {
+font-size: 14px;
+line-height: 1.3;
+margin: 30px 0 15px 0;
+}
+h4 strong {
+font-size: 28px;
+}
+header {
+padding: 0
+}
+.logo {
+margin: 0;
+}
+hr {
+margin: 60px 0 0 0;
+}
+blockquote {
+margin: 15px 0 15px 0;
+}
+.row {
+justify-content: space-between;
+}
+.row h4:first-child {
+margin-right: 0;
+}
+.table-full-width {
+width: 100%;
+}
+td {
+padding-right: 0;
 }
-@media only screen and (max-width: 480px) {
-  #bg-intro {
-    width: 100%;
-    background-size: 440px;
-  }
 }