clean up typography, whitespace, shorten header

Signed-off-by: Jos Poortvliet <jospoortvliet@gmail.com>

1 files changed, 190 insertions, 382 deletions

diff --git a/assets/css/custom.css b/assets/css/custom.css
index daa6a8a4..4671892a 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -3385,52 +3385,75 @@ tbody.collapse.in {
     .container-widest .container-widest {
       width: 1770px; } }
 
+section {
+  padding-top: 100px;
+  padding-bottom: 100px; }
+
+p {
+  margin-top: 5px; }
+
+ul {
+  margin-top: 15px;
+  padding-left: 20px;
+  list-style-type: none; }
+
+li {
+  margin-top: 15px; }
+
 .jumbotron--heading-1 {
   padding-top: 0;
   color: white !important;
   font-size: 3.796875em !important;
   line-height: 120%;
-  font-weight: 500; }
+  font-weight: 500;
+  margin-bottom: 15px; }
   @media (max-width: 768px) {
     .jumbotron--heading-1 {
       font-size: 34px !important;
       line-height: 1 !important;
-      margin-top: 0; } }
+      margin-top: 0;
+      margin-bottom: 10px; } }
 .jumbotron--lead {
   font-size: 1.125em;
   color: white;
   line-height: 1.6;
-  font-weight: 500; }
+  font-weight: 500;
+  margin-bottom: 10px; }
   @media (max-width: 768px) {
     .jumbotron--lead {
-      font-size: 16px; } }
+      font-size: 16px;
+      margin-bottom: 10px; } }
+
+/* To easily color text */
+.red {
+  color: red; }
+
+.green {
+  color: green; }
+
+.blue {
+  color: #0082c9; }
+
+.gray {
+  color: #555; }
+
+.text-center {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center; }
 
 .section--text--center {
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
   text-align: center; }
-.section--heading-1 {
-  font-size: 3.796875em;
-  font-weight: 300;
-  line-height: 1.2;
-  margin: 0;
-  color: #333333; }
-  @media (max-width: 768px) {
-    .section--heading-1 {
-      font-size: 2.53125em;
-      line-height: 1;
-      margin-top: 0; } }
-.section--heading-2 {
-  font-size: 2.53125em;
-  font-weight: 300;
-  color: #333333; }
-  @media (max-width: 768px) {
-    .section--heading-2 {
-      font-size: 2.53125em;
-      line-height: 1.2;
-      margin-top: 0; } }
 .section--intro {
+  /*  Introduction on top of page, just under the fold */
+  padding-top: 80px;
   font-size: 22px;
   font-weight: 300; }
+  .section--intro blockquote {
+    font-size: 20px;
+    font-weight: 400; }
 .section--paragraph__tittle, .section--paragraph__title {
   font-size: 22px;
   line-height: 30px;
@@ -3454,24 +3477,52 @@ tbody.collapse.in {
     color: #2a2a36; }
 
 h1 {
-  margin-bottom: 10px;
   font-size: 60px;
   line-height: 120%;
   color: #555;
-  font-weight: 500; }
+  font-weight: 500;
+  margin-bottom: 50px; }
+  h1.text-center, h1 .section--text--center {
+    margin: 0px auto 50px auto; }
+  @media (max-width: 768px) {
+    h1 {
+      font-size: 40px;
+      line-height: 1.2;
+      margin-bottom: 30px; }
+      h1.text-center, h1 .section--text--center {
+        margin: 0px auto 30px auto; } }
 
 h2 {
   font-size: 60px;
   font-weight: 300;
   color: #555;
   line-height: 1.5;
-  margin-bottom: 12px; }
+  margin-bottom: 40px; }
+  h2.text-center, h2 .section--text--center {
+    margin: 0px auto 40px auto; }
+  @media (max-width: 768px) {
+    h2 {
+      font-size: 40px;
+      line-height: 1.2;
+      margin-bottom: 25px; }
+      h2.text-center, h2 .section--text--center {
+        margin: 0px auto 25px auto; } }
 
 h3 {
   font-size: 22px;
   font-weight: 300;
   line-height: 1.5;
-  color: #555; }
+  color: #555;
+  margin-bottom: 30px; }
+  h3.text-center, h3 .section--text--center {
+    margin: 0px auto 30px auto; }
+  @media (max-width: 768px) {
+    h3 {
+      font-size: 20px;
+      line-height: 1.2;
+      margin-bottom: 20px; }
+      h3.text-center, h3 .section--text--center {
+        margin: 0px auto 20px auto; } }
 
 h4 {
   font-size: 18px;
@@ -3479,16 +3530,17 @@ h4 {
   line-height: 1.36;
   color: #555;
   margin-bottom: 20px; }
+  h4.text-center, h4 .section--text--center {
+    margin: 0px auto 20px auto; }
 
 h5 {
   font-size: 17px;
   font-weight: bold;
   line-height: 1.5;
-  color: #555; }
-
-.text-center {
-  margin: 0 auto;
-  text-align: center; }
+  color: #555;
+  margin-bottom: 20px; }
+  h5.text-center, h5 .section--text--center {
+    margin: 0px auto 20px auto; }
 
 /*Colors*/
 /*Shadows*/
@@ -3963,52 +4015,75 @@ template, [hidden] {
     .container-widest .container-widest {
       width: 1770px; } }
 
+section {
+  padding-top: 100px;
+  padding-bottom: 100px; }
+
+p {
+  margin-top: 5px; }
+
+ul {
+  margin-top: 15px;
+  padding-left: 20px;
+  list-style-type: none; }
+
+li {
+  margin-top: 15px; }
+
 .jumbotron--heading-1 {
   padding-top: 0;
   color: white !important;
   font-size: 3.796875em !important;
   line-height: 120%;
-  font-weight: 500; }
+  font-weight: 500;
+  margin-bottom: 15px; }
   @media (max-width: 768px) {
     .jumbotron--heading-1 {
       font-size: 34px !important;
       line-height: 1 !important;
-      margin-top: 0; } }
+      margin-top: 0;
+      margin-bottom: 10px; } }
 .jumbotron--lead {
   font-size: 1.125em;
   color: white;
   line-height: 1.6;
-  font-weight: 500; }
+  font-weight: 500;
+  margin-bottom: 10px; }
   @media (max-width: 768px) {
     .jumbotron--lead {
-      font-size: 16px; } }
+      font-size: 16px;
+      margin-bottom: 10px; } }
+
+/* To easily color text */
+.red {
+  color: red; }
+
+.green {
+  color: green; }
+
+.blue {
+  color: #0082c9; }
+
+.gray {
+  color: #555; }
+
+.text-center {
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center; }
 
 .section--text--center {
-  margin: 0 auto;
+  margin-left: auto;
+  margin-right: auto;
   text-align: center; }
-.section--heading-1 {
-  font-size: 3.796875em;
-  font-weight: 300;
-  line-height: 1.2;
-  margin: 0;
-  color: #333333; }
-  @media (max-width: 768px) {
-    .section--heading-1 {
-      font-size: 2.53125em;
-      line-height: 1;
-      margin-top: 0; } }
-.section--heading-2 {
-  font-size: 2.53125em;
-  font-weight: 300;
-  color: #333333; }
-  @media (max-width: 768px) {
-    .section--heading-2 {
-      font-size: 2.53125em;
-      line-height: 1.2;
-      margin-top: 0; } }
 .section--intro {
+  /*  Introduction on top of page, just under the fold */
+  padding-top: 80px;
   font-size: 22px;
   font-weight: 300; }
+  .section--intro blockquote {
+    font-size: 20px;
+    font-weight: 400; }
 .section--paragraph__tittle, .section--paragraph__title {
   font-size: 22px;
   line-height: 30px;
@@ -4032,24 +4107,52 @@ template, [hidden] {
     color: #2a2a36; }
 
 h1 {
-  margin-bottom: 10px;
   font-size: 60px;
   line-height: 120%;
   color: #555;
-  font-weight: 500; }
+  font-weight: 500;
+  margin-bottom: 50px; }
+  h1.text-center, h1 .section--text--center {
+    margin: 0px auto 50px auto; }
+  @media (max-width: 768px) {
+    h1 {
+      font-size: 40px;
+      line-height: 1.2;
+      margin-bottom: 30px; }
+      h1.text-center, h1 .section--text--center {
+        margin: 0px auto 30px auto; } }
 
 h2 {
   font-size: 60px;
   font-weight: 300;
   color: #555;
   line-height: 1.5;
-  margin-bottom: 12px; }
+  margin-bottom: 40px; }
+  h2.text-center, h2 .section--text--center {
+    margin: 0px auto 40px auto; }
+  @media (max-width: 768px) {
+    h2 {
+      font-size: 40px;
+      line-height: 1.2;
+      margin-bottom: 25px; }
+      h2.text-center, h2 .section--text--center {
+        margin: 0px auto 25px auto; } }
 
 h3 {
   font-size: 22px;
   font-weight: 300;
   line-height: 1.5;
-  color: #555; }
+  color: #555;
+  margin-bottom: 30px; }
+  h3.text-center, h3 .section--text--center {
+    margin: 0px auto 30px auto; }
+  @media (max-width: 768px) {
+    h3 {
+      font-size: 20px;
+      line-height: 1.2;
+      margin-bottom: 20px; }
+      h3.text-center, h3 .section--text--center {
+        margin: 0px auto 20px auto; } }
 
 h4 {
   font-size: 18px;
@@ -4057,16 +4160,17 @@ h4 {
   line-height: 1.36;
   color: #555;
   margin-bottom: 20px; }
+  h4.text-center, h4 .section--text--center {
+    margin: 0px auto 20px auto; }
 
 h5 {
   font-size: 17px;
   font-weight: bold;
   line-height: 1.5;
-  color: #555; }
-
-.text-center {
-  margin: 0 auto;
-  text-align: center; }
+  color: #555;
+  margin-bottom: 20px; }
+  h5.text-center, h5 .section--text--center {
+    margin: 0px auto 20px auto; }
 
 .no-js body nav .container .brand .logo:not(.scrolled):not(.menu-open) {
   background: url(../img/logo/logo_white_sprite.png) 0 0 no-repeat;
@@ -5424,7 +5528,7 @@ footer.page-footer {
       width: 1770px; } }
 
 .second-menu {
-  margin-bottom: 150px !important; }
+  /*         margin-bottom: 150px !important; */ }
   .second-menu .menu {
     background: #fbfbfb;
     border-top: solid 1px #e4e4e4;
@@ -5460,13 +5564,14 @@ footer.page-footer {
         transition: all 0.3s ease;
         letter-spacing: 1px; }
         .second-menu .menu .buttons a:focus {
-          text-decoration: none; }
+          text-decoration: none;
+          color: black; }
         .second-menu .menu .buttons a.active {
           text-decoration: none;
-          color: white; }
+          color: #0082c9; }
         .second-menu .menu .buttons a:hover {
           text-decoration: none;
-          color: white; }
+          color: #0082c9; }
       .second-menu .menu .buttons .btn-primary {
         float: right;
         font-size: 14px;
@@ -5510,8 +5615,8 @@ footer.page-footer {
   background-size: cover;
   border-radius: 0 !important;
   height: 70vh;
-  min-height: 600px;
-  max-height: 800px;
+  min-height: 400px;
+  max-height: 600px;
   position: relative; }
   .background h1 {
     padding-top: 0;
@@ -9687,56 +9792,20 @@ footer.page-footer {
   clip: auto; }
 
 /*# sourceMappingURL=fork-awesome.min.css.map */
-.jumbotron--heading-1 {
-  padding-top: 0;
-  color: white !important;
-  font-size: 3.79688em !important;
-  line-height: 120%;
-  font-weight: 500; }
-
-@media (max-width: 768px) {
-  .jumbotron--heading-1 {
-    font-size: 34px !important;
-    line-height: 1 !important;
-    margin-top: 0; } }
-.jumbotron--lead {
-  font-size: 1.125em;
-  color: white;
-  line-height: 1.6;
-  font-weight: 500; }
-
-@media (max-width: 768px) {
-  .jumbotron--lead {
-    font-size: 16px; } }
-/* To easily color text */
-.red {
-  color: red; }
-
-.green {
-  color: green; }
-
-.blue {
-  color: #0082c9; }
+html {
+  margin-top: 0 !important; }
 
-.gray {
+body {
+  font-family: "Open Sans", Frutiger, Calibri, "Myriad Pro", Myriad, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 16px;
+  line-height: 1.7;
   color: #555; }
 
-section {
-  padding-top: 80px;
-  padding-bottom: 40px; }
-
-.section--intro {
-  /*  Introduction on top of page, just under the fold */
-  padding-top: 80px;
-  font-size: 22px;
-  font-weight: 300; }
-  .section--intro blockquote {
-    font-size: 20px;
-    font-weight: 400; }
-
-.section--text--center, .text-center {
-  margin: 0 auto;
-  text-align: center; }
+/* Avoid wrapping */
+span.avoidwrap {
+  display: inline-block; }
 
 .screen-reader-text {
   display: none; }
@@ -9755,64 +9824,6 @@ section {
     color: #2a2a36;
     border-bottom: solid 1px; }
 
-h1 {
-  margin-bottom: 10px;
-  font-size: 60px;
-  line-height: 120%;
-  color: #555;
-  font-weight: 500; }
-
-h2 {
-  font-size: 60px;
-  font-weight: 300;
-  color: #555;
-  line-height: 1.5;
-  margin-bottom: 12px; }
-
-h3 {
-  font-size: 22px;
-  font-weight: 300;
-  line-height: 1.5;
-  color: #555; }
-
-h4 {
-  font-size: 18px;
-  font-weight: bold;
-  line-height: 1.36;
-  color: #555;
-  margin-bottom: 20px; }
-
-h5 {
-  font-size: 17px;
-  font-weight: bold;
-  line-height: 1.5;
-  color: #555; }
-
-/* I don't know why we have these special classes below, to be honest... */
-.section--heading-1 {
-  /* Headings. Should be h1 */
-  font-size: 3.79688em;
-  font-weight: 300;
-  line-height: 1.3;
-  margin: 0;
-  color: #333333; }
-  @media (max-width: 768px) {
-    .section--heading-1 {
-      font-size: 2.53125em;
-      line-height: 1.2;
-      margin-top: 0; } }
-
-.section--heading-2 {
-  /* Headings. Should be h2 */
-  font-size: 2.53125em;
-  font-weight: 300;
-  color: #333333; }
-  @media (max-width: 768px) {
-    .section--heading-2 {
-      font-size: 2.53125em;
-      line-height: 1.2;
-      margin-top: 0; } }
-
 .benefits {
   /* benefits section with big image on the right & check list left */ }
   .benefits .banner {
@@ -9869,9 +9880,6 @@ h5 {
       .benefits .banner .big-img, .benefits .banner .big-img-invert {
         display: none; } }
 
-.image--feature {
-  /* 	margin-top: 52px; */ }
-
 @media (min-width: 768px) {
   .image--floated {
     float: right; } }
@@ -9948,9 +9956,6 @@ h5 {
       .container-widest .image--feature.new-img img.featureimg {
         padding: 0 8.8% 0 9%; } }
 
-/*Colors*/
-/*Shadows*/
-/*Breakpoints*/
 .slideshow {
   background-color: transparent;
   overflow: hidden;
@@ -10239,192 +10244,6 @@ h5 {
 .slideshow-mobile html, .slideshow-mobile body, .slideshow-mobile .carousel, .slideshow-mobile .carousel-inner, .slideshow-mobile .carousel-inner .item {
   height: 100%; }
 
-/*Colors*/
-/*Shadows*/
-/*Breakpoints*/
-.second-menu .menu {
-  background: #fbfbfb;
-  border-top: solid 1px #e4e4e4;
-  text-transform: capitalize;
-  vertical-align: middle;
-  z-index: 2;
-  transform: translateZ(0);
-  will-change: transform;
-  transition: transform 500ms ease;
-  transform: translate3d(0px, 0px, 0px);
-  opacity: 0; }
-
-.second-menu .menu.hidedPrincipalNavigation {
-  transform: translate3d(0px, -100px, 0px); }
-
-.second-menu .menu .buttons {
-  text-transform: uppercase;
-  font-size: 14px;
-  font-weight: 600;
-  padding: 40px 0 30px 0;
-  border-bottom: solid 1px #e4e4e4; }
-
-@media (max-width: 991px) {
-  .second-menu .menu {
-    display: none; }
-
-  .second-menu .menu .buttons {
-    padding: 30px 0 25px 0; } }
-@media (max-width: 991px) {
-  .second-menu .menu .buttons a:not(.btn) {
-    display: none; } }
-.second-menu .menu .buttons a {
-  padding-right: 10px;
-  color: #333333;
-  transition: all 0.3s ease;
-  letter-spacing: 1px; }
-
-.second-menu .menu .buttons a:focus {
-  text-decoration: none;
-  color: black; }
-
-.second-menu .menu .buttons a.active {
-  text-decoration: none;
-  color: #0082c9; }
-
-.second-menu .menu .buttons a:hover {
-  text-decoration: none;
-  color: #0082c9; }
-
-.second-menu .menu .buttons .btn-primary {
-  float: right;
-  font-size: 14px;
-  padding: 8px 20px;
-  margin-left: 20px;
-  margin-top: -5px;
-  color: white; }
-  @media (max-width: 768px) {
-    .second-menu .menu .buttons .btn-primary {
-      margin-top: 10px; } }
-
-.second-menu .menu .buttons .btn-primary:hover {
-  text-decoration: none;
-  color: white; }
-
-.second-menu .menu .buttons .btn-primary:before {
-  background: none; }
-
-/*Colors*/
-/*Shadows*/
-/*Breakpoints*/
-/**
- * Footer
- */
-footer.page-footer {
-  /* 	margin-top: 50px; */
-  background-color: #2a2a36; }
-
-footer.page-footer h1 {
-  margin-top: 70px;
-  font-size: 19px;
-  font-weight: bold;
-  line-height: 1.8;
-  letter-spacing: -0.9px;
-  color: #8e8e8e; }
-
-footer.page-footer ul {
-  list-style-type: none;
-  padding-left: 0; }
-
-footer.page-footer li {
-  font-size: 15px;
-  line-height: 1.8;
-  color: #ffffff;
-  width: 140px;
-  margin-top: 0; }
-
-footer.page-footer li a {
-  color: #ffffff;
-  position: relative; }
-
-footer.page-footer li a:before {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  bottom: 0;
-  left: 0;
-  background-color: white;
-  visibility: hidden;
-  -webkit-transform: scaleX(0);
-  transform: scaleX(0);
-  -webkit-transition: all 0.2s ease-in-out 0s;
-  transition: all 0.2s ease-in-out 0s; }
-
-footer.page-footer li a:hover {
-  color: #ffffff;
-  text-decoration: none; }
-
-footer.page-footer li a:hover:before {
-  visibility: visible;
-  -webkit-transform: scaleX(1);
-  transform: scaleX(1); }
-
-footer.page-footer p {
-  padding-top: 50px;
-  padding-bottom: 30px;
-  font-size: 15px;
-  line-height: 1.8;
-  color: #ffffff; }
-
-@media (max-width: 768px) {
-  footer.page-footer p {
-    float: left;
-    padding-left: 15px; } }
-footer.page-footer p a {
-  color: #ffffff; }
-
-footer.page-footer p a:hover {
-  color: #ffffff; }
-
-@media (min-width: 768px) and (max-width: 1600px) {
-  footer.page-footer .container {
-    width: 90%;
-    max-width: 900px; } }
-@media (max-width: 768px) {
-  footer.page-footer {
-    height: 100%;
-    padding-top: 40px;
-    padding-bottom: 40px; }
-
-  footer.page-footer h1 {
-    margin-top: 30px;
-    font-size: 19px;
-    font-weight: bold;
-    line-height: 1.8;
-    letter-spacing: -0.9px;
-    color: #8e8e8e; }
-
-  footer.page-footer ul {
-    list-style-type: none;
-    padding-left: 0; }
-
-  footer.page-footer li {
-    font-size: 15px;
-    line-height: 1.8;
-    color: #ffffff;
-    width: 140px;
-    margin-top: 0; } }
-html {
-  margin-top: 0 !important; }
-
-body {
-  font-family: "Open Sans", Frutiger, Calibri, "Myriad Pro", Myriad, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 16px;
-  line-height: 1.7;
-  color: #555; }
-
-/* Avoid wrapping */
-span.avoidwrap {
-  display: inline-block; }
-
 i[class*='fa-'] {
   font-style: normal;
   color: #555;
@@ -10439,17 +10258,6 @@ i[class*='fa-'] {
   float: none;
   margin: 0 auto; }
 
-p {
-  margin-top: 5px; }
-
-ul {
-  margin-top: 15px;
-  padding-left: 20px;
-  list-style-type: none; }
-
-li {
-  margin-top: 15px; }
-
 body.changelog .content ul li {
   margin-top: 0;
   list-style: circle; }