diff --git a/wger/core/templates/navigation.html b/wger/core/templates/navigation.html
index ab874d2..5081620 100644
--- a/wger/core/templates/navigation.html
+++ b/wger/core/templates/navigation.html
@@ -1,7 +1,7 @@
 {% load i18n cache wger_extras %}
 <nav id="nav">
     <div>
-        <div class="navbar {% if flavour == 'full' %}navbar-inverse{% else %}navbar-default{% endif %}">
+        <div class="navbar {% if flavour == 'full' %}navbar-inverse{% else %}navbar-default{% endif %}" style="margin-bottom:0px;">
             <div class="container">
                 <div class="navbar-header" >
                     <a class="navbar-toggle hidden-xs" data-toggle="collapse" data-target="#main-navbar-navigation">
diff --git a/wger/software/static/css/agency.css b/wger/software/static/css/agency.css
index 3811173..374b4f5 100644
--- a/wger/software/static/css/agency.css
+++ b/wger/software/static/css/agency.css
@@ -3,107 +3,217 @@
  * Copyright 2013-2016 Start Bootstrap
  * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
  */
+
+@font-face {
+    font-family: "Open Sans Light";
+    src: url("/static/fonts/OpenSans-Light.eot?") format("eot"), url("/static/fonts/OpenSans-Light.woff") format("woff"), url("/static/fonts/OpenSans-Light.ttf") format("truetype"), url("/static/fonts/OpenSans-Light.svg#OpenSans-Light") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
 @font-face {
-    font-family:"Open Sans Light";
-        src:url("/static/fonts/OpenSans-Light.eot?") format("eot"),
-            url("/static/fonts/OpenSans-Light.woff") format("woff"),
-            url("/static/fonts/OpenSans-Light.ttf") format("truetype"),
-            url("/static/fonts/OpenSans-Light.svg#OpenSans-Light") format("svg");
-    font-weight:normal;
-    font-style:normal;
+    font-family: "Open Sans Bold";
+    src: url("/static/fonts/OpenSans-Bold.eot?") format("eot"), url("/static/fonts/OpenSans-Bold.woff") format("woff"), url("/static/fonts/OpenSans-Bold.ttf") format("truetype"), url("/static/fonts/OpenSans-Bold.svg#OpenSans-Bold") format("svg");
+    font-weight: normal;
+    font-style: normal;
 }
 
+/* hebrew */
+
+@font-face {
+    font-family: 'Varela Round';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v8/APH4jr0uSos5wiut5cpjrvZjSN9jRjHSPidsMdAc5jQ.woff2) format('woff2');
+    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
+}
+
+/* vietnamese */
+
+@font-face {
+    font-family: 'Varela Round';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v8/APH4jr0uSos5wiut5cpjrvgrLsWo7Jk1KvZser0olKY.woff2) format('woff2');
+    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+
+/* latin-ext */
+
+@font-face {
+    font-family: 'Varela Round';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v8/APH4jr0uSos5wiut5cpjrojoYw3YTyktCCer_ilOlhE.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+
+@font-face {
+    font-family: 'Varela Round';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v8/APH4jr0uSos5wiut5cpjrhampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+/* latin */
+
+@font-face {
+    font-family: 'Faster One';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Faster One'), local('FasterOne-Regular'), url(https://fonts.gstatic.com/s/fasterone/v6/R45a6_a3GGq28ugU8uxGWQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+/* latin */
+
 @font-face {
-    font-family:"Open Sans Bold";
-        src:url("/static/fonts/OpenSans-Bold.eot?") format("eot"),
-            url("/static/fonts/OpenSans-Bold.woff") format("woff"),
-            url("/static/fonts/OpenSans-Bold.ttf") format("truetype"),
-            url("/static/fonts/OpenSans-Bold.svg#OpenSans-Bold") format("svg");
-    font-weight:normal;
-    font-style:normal;
+    font-family: 'Monoton';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Monoton'), local('Monoton-Regular'), url(https://fonts.gstatic.com/s/monoton/v6/au96iQ3WM1J9H5fMga5i0QLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 }
 
+/* latin-ext */
+
+@font-face {
+    font-family: 'Josefin Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Josefin Sans'), local('JosefinSans'), url(https://fonts.gstatic.com/s/josefinsans/v9/xgzbb53t8j-Mo-vYa23n5ojoYw3YTyktCCer_ilOlhE.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+
+@font-face {
+    font-family: 'Josefin Sans';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Josefin Sans'), local('JosefinSans'), url(https://fonts.gstatic.com/s/josefinsans/v9/xgzbb53t8j-Mo-vYa23n5hampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+/* latin-ext */
+
+@font-face {
+    font-family: 'Josefin Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z0qWMeizceScn2Xpn1ZpsKI.woff2) format('woff2');
+    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+
+@font-face {
+    font-family: 'Josefin Sans';
+    font-style: normal;
+    font-weight: 700;
+    src: local('Josefin Sans Bold'), local('JosefinSans-Bold'), url(https://fonts.gstatic.com/s/josefinsans/v9/C6HYlRF50SGJq1XyXj04z8hHwsiXhsDb0smKjAA7Bek.woff2) format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
 
 body {
-  overflow-x: hidden;
-  /*font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
-  font-family: font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    overflow-x: hidden;
+    /*font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
 }
+
 .text-muted {
-  color: #777777;
+    color: #777777;
 }
+
 .text-light {
-  color: white;
+    color: white;
 }
+
 .text-primary {
-  color: #204a87;
+    color: #204a87;
 }
+
 p {
-  font-size: 14px;
-  line-height: 1.75;
+    font-size: 14px;
+    line-height: 1.75;
 }
+
 p.large {
-  font-size: 16px;
+    font-size: 16px;
 }
+
 a,
 a:hover,
 a:focus,
 a:active,
 a.active {
-  outline: none;
+    outline: none;
 }
+
 a {
-  color: #204a87;
+    color: #204a87;
 }
+
 a:hover,
 a:focus,
 a:active,
 a.active {
-  color: #1a3c6e;
+    color: #1a3c6e;
 }
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  /*font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
-  font-family: "Open Sans Bold", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 700;
+    /*font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
+    font-family: "Open Sans Bold", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    font-weight: 700;
 }
+
 .img-centered {
-  margin: 0 auto;
+    margin: 0 auto;
 }
+
 .bg-light-gray {
-  background-color: #eeeeee;
+    background-color: #eeeeee;
 }
+
 .bg-darkest-gray {
-  background-color: #222222;
+    background-color: #222222;
 }
+
 .btn-primary {
-  color: white;
-  background-color: #204a87;
-  border-color: #204a87;
-  /*font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 700;
+    color: white;
+    background-color: #204a87;
+    border-color: #204a87;
+    /*font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    font-weight: 700;
 }
+
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active,
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
-  color: white;
-  background-color: #1a3c6e;
-  border-color: #1a3c6e;
+    color: white;
+    background-color: #1a3c6e;
+    border-color: #1a3c6e;
 }
+
 .btn-primary:active,
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
-  background-image: none;
+    background-image: none;
 }
+
 .btn-primary.disabled,
 .btn-primary[disabled],
 fieldset[disabled] .btn-primary,
@@ -119,38 +229,43 @@ fieldset[disabled] .btn-primary:active,
 .btn-primary.disabled.active,
 .btn-primary[disabled].active,
 fieldset[disabled] .btn-primary.active {
-  background-color: #204a87;
-  border-color: #204a87;
+    background-color: #204a87;
+    border-color: #204a87;
 }
+
 .btn-primary .badge {
-  color: #204a87;
-  background-color: white;
+    color: #204a87;
+    background-color: white;
 }
+
 .btn-xl {
-  color: white;
-  background-color: #204a87;
-  border-color: #204a87;
-  font-family: "Open Sans Bold", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 700;
-  border-radius: 3px;
-  font-size: 18px;
-  padding: 20px 40px;
+    color: white;
+    background-color: #204a87;
+    border-color: #204a87;
+    font-family: "Open Sans Bold", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    font-weight: 700;
+    border-radius: 3px;
+    font-size: 18px;
+    padding: 20px 40px;
 }
+
 .btn-xl:hover,
 .btn-xl:focus,
 .btn-xl:active,
 .btn-xl.active,
 .open .dropdown-toggle.btn-xl {
-  color: white;
-  background-color: #1a3c6e;
-  border-color: #1a3c6e;
+    color: white;
+    background-color: #1a3c6e;
+    border-color: #1a3c6e;
 }
+
 .btn-xl:active,
 .btn-xl.active,
 .open .dropdown-toggle.btn-xl {
-  background-image: none;
+    background-image: none;
 }
+
 .btn-xl.disabled,
 .btn-xl[disabled],
 fieldset[disabled] .btn-xl,
@@ -166,609 +281,1210 @@ fieldset[disabled] .btn-xl:active,
 .btn-xl.disabled.active,
 .btn-xl[disabled].active,
 fieldset[disabled] .btn-xl.active {
-  background-color: #204a87;
-  border-color: #204a87;
+    background-color: #204a87;
+    border-color: #204a87;
 }
+
 .btn-xl .badge {
-  color: #204a87;
-  background-color: white;
+    color: #204a87;
+    background-color: white;
 }
+
 .navbar-custom {
-  background-color: #222222;
-  border-color: transparent;
+    background-color: #222222;
+    border-color: transparent;
 }
+
 .navbar-custom .navbar-brand {
-  color: #204a87;
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    color: #204a87;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
 }
+
 .navbar-custom .navbar-brand:hover,
 .navbar-custom .navbar-brand:focus,
 .navbar-custom .navbar-brand:active,
 .navbar-custom .navbar-brand.active {
-  color: #1a3c6e;
+    color: #1a3c6e;
 }
+
 .navbar-custom .navbar-collapse {
-  border-color: rgba(255, 255, 255, 0.02);
+    border-color: rgba(255, 255, 255, 0.02);
 }
+
 .navbar-custom .navbar-toggle {
-  background-color: #204a87;
-  border-color: #204a87;
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  color: white;
-  font-size: 12px;
+    background-color: #204a87;
+    border-color: #204a87;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    color: white;
+    font-size: 12px;
 }
+
 .navbar-custom .navbar-toggle:hover,
 .navbar-custom .navbar-toggle:focus {
-  background-color: #204a87;
+    background-color: #204a87;
 }
+
 .navbar-custom .nav li a {
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 400;
-  letter-spacing: 1px;
-  color: white;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    font-weight: 400;
+    letter-spacing: 1px;
+    color: white;
 }
+
 .navbar-custom .nav li a:hover,
 .navbar-custom .nav li a:focus {
-  color: #204a87;
-  outline: none;
+    color: #204a87;
+    outline: none;
 }
-.navbar-custom .navbar-nav > .active > a {
-  border-radius: 0;
-  color: white;
-  background-color: #204a87;
+
+.navbar-custom .navbar-nav>.active>a {
+    border-radius: 0;
+    color: white;
+    background-color: #204a87;
 }
-.navbar-custom .navbar-nav > .active > a:hover,
-.navbar-custom .navbar-nav > .active > a:focus {
-  color: white;
-  background-color: #1a3c6e;
+
+.navbar-custom .navbar-nav>.active>a:hover,
+.navbar-custom .navbar-nav>.active>a:focus {
+    color: white;
+    background-color: #1a3c6e;
 }
+
 @media (min-width: 768px) {
-  .navbar-custom {
-    background-color: transparent;
-    padding: 25px 0;
-    -webkit-transition: padding 0.3s;
-    -moz-transition: padding 0.3s;
-    transition: padding 0.3s;
-    border: none;
-  }
-  .navbar-custom .navbar-brand {
-    font-size: 2em;
-    -webkit-transition: all 0.3s;
-    -moz-transition: all 0.3s;
-    transition: all 0.3s;
-  }
-  .navbar-custom .navbar-nav > .active > a {
-    border-radius: 3px;
-  }
+    .navbar-custom {
+        background-color: transparent;
+        padding: 25px 0;
+        -webkit-transition: padding 0.3s;
+        -moz-transition: padding 0.3s;
+        transition: padding 0.3s;
+        border: none;
+    }
+    .navbar-custom .navbar-brand {
+        font-size: 2em;
+        -webkit-transition: all 0.3s;
+        -moz-transition: all 0.3s;
+        transition: all 0.3s;
+    }
+    .navbar-custom .navbar-nav>.active>a {
+        border-radius: 3px;
+    }
 }
+
 @media (min-width: 768px) {
-  .navbar-custom.affix {
-    background-color: #222222;
-    padding: 10px 0;
-  }
-  .navbar-custom.affix .navbar-brand {
-    font-size: 1.5em;
-  }
+    .navbar-custom.affix {
+        background-color: #222222;
+        padding: 10px 0;
+    }
+    .navbar-custom.affix .navbar-brand {
+        font-size: 1.5em;
+    }
 }
+
 header {
-  background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('../images/main.jpg');
-  background-repeat: no-repeat;
-  background-attachment: scroll;
-  background-position: center center;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  background-size: cover;
-  -o-background-size: cover;
-  text-align: center;
-  color: white;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center center;
+    text-align: center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    height: 100%;
+    color: white;
 }
+
 header .intro-text {
-  padding-top: 100px;
-  padding-bottom: 50px;
+    padding-top: 8%;
+    padding-bottom: 50px;
+    font-family: 'Varela Round', sans-serif;
 }
+
 header .intro-text .intro-lead-in {
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  font-style: italic;
-  font-size: 22px;
-  line-height: 22px;
-  margin-bottom: 25px;
-}
-header .intro-text .intro-heading {
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: 50px;
-  line-height: 50px;
-  margin-bottom: 25px;
-}
-@media (min-width: 768px) {
-  header .intro-text {
-    padding-top: 300px;
-    padding-bottom: 200px;
-  }
-  header .intro-text .intro-lead-in {
     font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
     font-style: italic;
-    font-size: 40px;
-    line-height: 40px;
+    font-size: 22px;
+    line-height: 22px;
     margin-bottom: 25px;
-  }
-  header .intro-text .intro-heading {
-    font-family: "Open Sans Bold", Arial, Helvetica, sans-serif;
+}
+
+header .intro-text .intro-heading {
+    font-family: 'Varela Round', sans-serif;
     text-transform: uppercase;
     font-weight: 700;
-    font-size: 75px;
-    line-height: 75px;
-    margin-bottom: 50px;
-  }
+    font-size: 50px;
+    line-height: 50px;
+    margin-bottom: 25px;
+}
+
+@media (min-width: 768px) {
+    header .intro-text {
+        padding-top: 8%;
+        padding-bottom: 200px;
+    }
+    header .intro-text .intro-lead-in {
+        font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+        font-style: italic;
+        font-size: 40px;
+        line-height: 40px;
+        margin-bottom: 25px;
+    }
+    header .intro-text .intro-heading {
+        font-family: 'Varela Round', sans-serif;
+        text-transform: uppercase;
+        font-weight: 700;
+        font-size: 75px;
+        line-height: 75px;
+        margin-bottom: 70px;
+    }
 }
+
 section {
-  padding: 100px 0;
+    padding: 100px 0;
 }
+
 section h2.section-heading {
-  font-size: 40px;
-  margin-top: 0;
-  margin-bottom: 15px;
+    font-size: 40px;
+    margin-top: 0;
+    margin-bottom: 15px;
 }
+
 section h3.section-subheading {
-  font-size: 16px;
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: none;
-  font-style: italic;
-  font-weight: 400;
-  margin-bottom: 75px;
+    font-size: 16px;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: none;
+    font-style: italic;
+    font-weight: 400;
+    margin-bottom: 75px;
 }
+
 @media (min-width: 768px) {
-  section {
-    padding: 150px 0;
-  }
+    section {
+        padding: 150px 0;
+    }
 }
+
 .service-heading {
-  margin: 15px 0;
-  text-transform: none;
+    margin: 15px 0;
+    text-transform: none;
 }
+
 #portfolio .portfolio-item {
-  margin: 0 0 15px;
-  right: 0;
+    margin: 0 0 15px;
+    right: 0;
 }
+
 #portfolio .portfolio-item .portfolio-link {
-  display: block;
-  position: relative;
-  max-width: 400px;
-  margin: 0 auto;
+    display: block;
+    position: relative;
+    max-width: 400px;
+    margin: 0 auto;
 }
+
 #portfolio .portfolio-item .portfolio-link .portfolio-hover {
-  background: rgba(254, 209, 54, 0.9);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  transition: all ease 0.5s;
-  -webkit-transition: all ease 0.5s;
-  -moz-transition: all ease 0.5s;
+    background: rgba(254, 209, 54, 0.9);
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: all ease 0.5s;
+    -webkit-transition: all ease 0.5s;
+    -moz-transition: all ease 0.5s;
 }
+
 #portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
-  opacity: 1;
+    opacity: 1;
 }
+
 #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
-  position: absolute;
-  width: 100%;
-  height: 20px;
-  font-size: 20px;
-  text-align: center;
-  top: 50%;
-  margin-top: -12px;
-  color: white;
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    font-size: 20px;
+    text-align: center;
+    top: 50%;
+    margin-top: -12px;
+    color: white;
 }
+
 #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
-  margin-top: -12px;
+    margin-top: -12px;
 }
+
 #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
 #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
-  margin: 0;
+    margin: 0;
 }
+
 #portfolio .portfolio-item .portfolio-caption {
-  max-width: 400px;
-  margin: 0 auto;
-  background-color: white;
-  text-align: center;
-  padding: 25px;
+    max-width: 400px;
+    margin: 0 auto;
+    background-color: white;
+    text-align: center;
+    padding: 25px;
 }
+
 #portfolio .portfolio-item .portfolio-caption h4 {
-  text-transform: none;
-  margin: 0;
+    text-transform: none;
+    margin: 0;
 }
+
 #portfolio .portfolio-item .portfolio-caption p {
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  font-style: italic;
-  font-size: 16px;
-  margin: 0;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    font-style: italic;
+    font-size: 16px;
+    margin: 0;
 }
+
 #portfolio * {
-  z-index: 2;
+    z-index: 2;
 }
+
 @media (min-width: 767px) {
-  #portfolio .portfolio-item {
-    margin: 0 0 30px;
-  }
+    #portfolio .portfolio-item {
+        margin: 0 0 30px;
+    }
 }
+
 .timeline {
-  list-style: none;
-  padding: 0;
-  position: relative;
+    list-style: none;
+    padding: 0;
+    position: relative;
 }
+
 .timeline:before {
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  content: "";
-  width: 2px;
-  background-color: #d3d7cf;
-  left: 40px;
-  margin-left: -1.5px;
-}
-.timeline > li {
-  margin-bottom: 50px;
-  position: relative;
-  min-height: 50px;
-}
-.timeline > li:before,
-.timeline > li:after {
-  content: " ";
-  display: table;
-}
-.timeline > li:after {
-  clear: both;
-}
-.timeline > li .timeline-panel {
-  width: 100%;
-  float: right;
-  padding: 0 20px 0 100px;
-  position: relative;
-  text-align: left;
-}
-.timeline > li .timeline-panel:before {
-  border-left-width: 0;
-  border-right-width: 15px;
-  left: -15px;
-  right: auto;
-}
-.timeline > li .timeline-panel:after {
-  border-left-width: 0;
-  border-right-width: 14px;
-  left: -14px;
-  right: auto;
-}
-.timeline > li .timeline-image {
-  left: 0;
-  margin-left: 0;
-  width: 80px;
-  height: 80px;
-  position: absolute;
-  z-index: 100;
-  background-color: #204a87;
-  color: white;
-  border-radius: 100%;
-  border: 7px solid #d3d7cf;
-  text-align: center;
-}
-.timeline > li .timeline-image h4 {
-  font-size: 10px;
-  margin-top: 12px;
-  line-height: 14px;
-}
-.timeline > li.timeline-inverted > .timeline-panel {
-  float: right;
-  text-align: left;
-  padding: 0 20px 0 100px;
-}
-.timeline > li.timeline-inverted > .timeline-panel:before {
-  border-left-width: 0;
-  border-right-width: 15px;
-  left: -15px;
-  right: auto;
-}
-.timeline > li.timeline-inverted > .timeline-panel:after {
-  border-left-width: 0;
-  border-right-width: 14px;
-  left: -14px;
-  right: auto;
-}
-.timeline > li:last-child {
-  margin-bottom: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    content: "";
+    width: 2px;
+    background-color: #d3d7cf;
+    left: 40px;
+    margin-left: -1.5px;
 }
+
+.timeline>li {
+    margin-bottom: 50px;
+    position: relative;
+    min-height: 50px;
+}
+
+.timeline>li:before,
+.timeline>li:after {
+    content: " ";
+    display: table;
+}
+
+.timeline>li:after {
+    clear: both;
+}
+
+.timeline>li .timeline-panel {
+    width: 100%;
+    float: right;
+    padding: 0 20px 0 100px;
+    position: relative;
+    text-align: left;
+}
+
+.timeline>li .timeline-panel:before {
+    border-left-width: 0;
+    border-right-width: 15px;
+    left: -15px;
+    right: auto;
+}
+
+.timeline>li .timeline-panel:after {
+    border-left-width: 0;
+    border-right-width: 14px;
+    left: -14px;
+    right: auto;
+}
+
+.timeline>li .timeline-image {
+    left: 0;
+    margin-left: 0;
+    width: 80px;
+    height: 80px;
+    position: absolute;
+    z-index: 100;
+    background-color: #204a87;
+    color: white;
+    border-radius: 100%;
+    border: 7px solid #d3d7cf;
+    text-align: center;
+}
+
+.timeline>li .timeline-image h4 {
+    font-size: 10px;
+    margin-top: 12px;
+    line-height: 14px;
+}
+
+.timeline>li.timeline-inverted>.timeline-panel {
+    float: right;
+    text-align: left;
+    padding: 0 20px 0 100px;
+}
+
+.timeline>li.timeline-inverted>.timeline-panel:before {
+    border-left-width: 0;
+    border-right-width: 15px;
+    left: -15px;
+    right: auto;
+}
+
+.timeline>li.timeline-inverted>.timeline-panel:after {
+    border-left-width: 0;
+    border-right-width: 14px;
+    left: -14px;
+    right: auto;
+}
+
+.timeline>li:last-child {
+    margin-bottom: 0;
+}
+
 .timeline .timeline-heading h4 {
-  margin-top: 0;
-  color: inherit;
+    margin-top: 0;
+    color: inherit;
 }
+
 .timeline .timeline-heading h4.subheading {
-  text-transform: none;
+    text-transform: none;
 }
-.timeline .timeline-body > p,
-.timeline .timeline-body > ul {
-  margin-bottom: 0;
+
+.timeline .timeline-body>p,
+.timeline .timeline-body>ul {
+    margin-bottom: 0;
 }
+
 @media (min-width: 768px) {
-  .timeline:before {
-    left: 50%;
-  }
-  .timeline > li {
-    margin-bottom: 100px;
-    min-height: 100px;
-  }
-  .timeline > li .timeline-panel {
-    width: 41%;
-    float: left;
-    padding: 0 20px 20px 30px;
-    text-align: right;
-  }
-  .timeline > li .timeline-image {
-    width: 100px;
-    height: 100px;
-    left: 50%;
-    margin-left: -50px;
-  }
-  .timeline > li .timeline-image h4 {
-    font-size: 13px;
-    margin-top: 16px;
-    line-height: 18px;
-  }
-  .timeline > li.timeline-inverted > .timeline-panel {
-    float: right;
-    text-align: left;
-    padding: 0 30px 20px 20px;
-  }
+    .timeline:before {
+        left: 50%;
+    }
+    .timeline>li {
+        margin-bottom: 100px;
+        min-height: 100px;
+    }
+    .timeline>li .timeline-panel {
+        width: 41%;
+        float: left;
+        padding: 0 20px 20px 30px;
+        text-align: right;
+    }
+    .timeline>li .timeline-image {
+        width: 100px;
+        height: 100px;
+        left: 50%;
+        margin-left: -50px;
+    }
+    .timeline>li .timeline-image h4 {
+        font-size: 13px;
+        margin-top: 16px;
+        line-height: 18px;
+    }
+    .timeline>li.timeline-inverted>.timeline-panel {
+        float: right;
+        text-align: left;
+        padding: 0 30px 20px 20px;
+    }
 }
+
 @media (min-width: 992px) {
-  .timeline > li {
-    min-height: 150px;
-  }
-  .timeline > li .timeline-panel {
-    padding: 0 20px 20px;
-  }
-  .timeline > li .timeline-image {
-    width: 150px;
-    height: 150px;
-    margin-left: -75px;
-  }
-  .timeline > li .timeline-image h4 {
-    font-size: 18px;
-    margin-top: 30px;
-    line-height: 26px;
-  }
-  .timeline > li.timeline-inverted > .timeline-panel {
-    padding: 0 20px 20px;
-  }
+    .timeline>li {
+        min-height: 150px;
+    }
+    .timeline>li .timeline-panel {
+        padding: 0 20px 20px;
+    }
+    .timeline>li .timeline-image {
+        width: 150px;
+        height: 150px;
+        margin-left: -75px;
+    }
+    .timeline>li .timeline-image h4 {
+        font-size: 18px;
+        margin-top: 30px;
+        line-height: 26px;
+    }
+    .timeline>li.timeline-inverted>.timeline-panel {
+        padding: 0 20px 20px;
+    }
 }
+
 @media (min-width: 1200px) {
-  .timeline > li {
-    min-height: 170px;
-  }
-  .timeline > li .timeline-panel {
-    padding: 0 20px 20px 100px;
-  }
-  .timeline > li .timeline-image {
-    width: 170px;
-    height: 170px;
-    margin-left: -85px;
-  }
-  .timeline > li .timeline-image h4 {
-    margin-top: 40px;
-  }
-  .timeline > li.timeline-inverted > .timeline-panel {
-    padding: 0 100px 20px 20px;
-  }
+    .timeline>li {
+        min-height: 170px;
+    }
+    .timeline>li .timeline-panel {
+        padding: 0 20px 20px 100px;
+    }
+    .timeline>li .timeline-image {
+        width: 170px;
+        height: 170px;
+        margin-left: -85px;
+    }
+    .timeline>li .timeline-image h4 {
+        margin-top: 40px;
+    }
+    .timeline>li.timeline-inverted>.timeline-panel {
+        padding: 0 100px 20px 20px;
+    }
 }
+
 .team-member {
-  text-align: center;
-  margin-bottom: 50px;
+    text-align: center;
+    margin-bottom: 50px;
 }
+
 .team-member img {
-  margin: 0 auto;
-  border: 7px solid white;
+    margin: 0 auto;
+    border: 7px solid white;
 }
+
 .team-member h4 {
-  margin-top: 25px;
-  margin-bottom: 0;
-  text-transform: none;
+    margin-top: 25px;
+    margin-bottom: 0;
+    text-transform: none;
 }
+
 .team-member p {
-  margin-top: 0;
+    margin-top: 0;
 }
+
 aside.clients img {
-  margin: 50px auto;
+    margin: 50px auto;
 }
+
 section#contact {
-  background-color: #222222;
-  background-image: url('../img/map-image.png');
-  background-position: center;
-  background-repeat: no-repeat;
+    background-color: #222222;
+    background-image: url('../img/map-image.png');
+    background-position: center;
+    background-repeat: no-repeat;
 }
+
 section#contact .section-heading {
-  color: white;
+    color: white;
 }
+
 section#contact .form-group {
-  margin-bottom: 25px;
+    margin-bottom: 25px;
 }
+
 section#contact .form-group input,
 section#contact .form-group textarea {
-  padding: 20px;
+    padding: 20px;
 }
+
 section#contact .form-group input.form-control {
-  height: auto;
+    height: auto;
 }
+
 section#contact .form-group textarea.form-control {
-  height: 236px;
+    height: 236px;
 }
+
 section#contact .form-control:focus {
-  border-color: #204a87;
-  box-shadow: none;
+    border-color: #204a87;
+    box-shadow: none;
 }
+
 section#contact ::-webkit-input-placeholder {
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 700;
-  color: #eeeeee;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: #eeeeee;
 }
+
 section#contact :-moz-placeholder {
-  /* Firefox 18- */
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 700;
-  color: #eeeeee;
+    /* Firefox 18- */
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: #eeeeee;
 }
+
 section#contact ::-moz-placeholder {
-  /* Firefox 19+ */
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 700;
-  color: #eeeeee;
+    /* Firefox 19+ */
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: #eeeeee;
 }
+
 section#contact :-ms-input-placeholder {
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 700;
-  color: #eeeeee;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    font-weight: 700;
+    color: #eeeeee;
 }
+
 section#contact .text-danger {
-  color: #e74c3c;
+    color: #e74c3c;
 }
+
 footer {
-  padding: 25px 0;
-  text-align: center;
+    padding: 25px 0;
+    text-align: center;
 }
+
 footer span.copyright {
-  line-height: 40px;
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  text-transform: none;
+    line-height: 40px;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    text-transform: none;
 }
+
 footer ul.quicklinks {
-  margin-bottom: 0;
-  line-height: 40px;
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  text-transform: uppercase;
-  text-transform: none;
+    margin-bottom: 0;
+    line-height: 40px;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    text-transform: uppercase;
+    text-transform: none;
 }
-footer ul.quicklinks a { color: white; }
+
+footer ul.quicklinks a {
+    color: white;
+}
+
 ul.social-buttons {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
+
 ul.social-buttons li a {
-  display: block;
-  background-color: #222222;
-  height: 40px;
-  width: 40px;
-  border-radius: 100%;
-  font-size: 20px;
-  line-height: 40px;
-  color: white;
-  outline: none;
-  -webkit-transition: all 0.3s;
-  -moz-transition: all 0.3s;
-  transition: all 0.3s;
+    display: block;
+    background-color: #222222;
+    height: 40px;
+    width: 40px;
+    border-radius: 100%;
+    font-size: 20px;
+    line-height: 40px;
+    color: white;
+    outline: none;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
 }
+
 ul.social-buttons li a:hover,
 ul.social-buttons li a:focus,
 ul.social-buttons li a:active {
-  background-color: #204a87;
+    background-color: #204a87;
 }
+
 .btn:focus,
 .btn:active,
 .btn.active,
 .btn:active:focus {
-  outline: none;
+    outline: none;
 }
+
 .portfolio-modal .modal-dialog {
-  margin: 0;
-  height: 100%;
-  width: auto;
+    margin: 0;
+    height: 100%;
+    width: auto;
 }
+
 .portfolio-modal .modal-content {
-  border-radius: 0;
-  background-clip: border-box;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border: none;
-  min-height: 100%;
-  padding: 100px 0;
-  text-align: center;
+    border-radius: 0;
+    background-clip: border-box;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    border: none;
+    min-height: 100%;
+    padding: 100px 0;
+    text-align: center;
 }
+
 .portfolio-modal .modal-content h2 {
-  margin-bottom: 15px;
-  font-size: 3em;
+    margin-bottom: 15px;
+    font-size: 3em;
 }
+
 .portfolio-modal .modal-content p {
-  margin-bottom: 30px;
+    margin-bottom: 30px;
 }
+
 .portfolio-modal .modal-content p.item-intro {
-  margin: 20px 0 30px;
-  font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
-  font-style: italic;
-  font-size: 16px;
+    margin: 20px 0 30px;
+    font-family: "Open Sans Light", Arial, Helvetica, sans-serif;
+    font-style: italic;
+    font-size: 16px;
 }
+
 .portfolio-modal .modal-content ul.list-inline {
-  margin-bottom: 30px;
-  margin-top: 0;
+    margin-bottom: 30px;
+    margin-top: 0;
 }
+
 .portfolio-modal .modal-content img {
-  margin-bottom: 30px;
+    margin-bottom: 30px;
 }
+
 .portfolio-modal .close-modal {
-  position: absolute;
-  width: 75px;
-  height: 75px;
-  background-color: transparent;
-  top: 25px;
-  right: 25px;
-  cursor: pointer;
+    position: absolute;
+    width: 75px;
+    height: 75px;
+    background-color: transparent;
+    top: 25px;
+    right: 25px;
+    cursor: pointer;
 }
+
 .portfolio-modal .close-modal:hover {
-  opacity: 0.3;
+    opacity: 0.3;
 }
+
 .portfolio-modal .close-modal .lr {
-  height: 75px;
-  width: 1px;
-  margin-left: 35px;
-  background-color: #222222;
-  transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  /* IE 9 */
-  -webkit-transform: rotate(45deg);
-  /* Safari and Chrome */
-  z-index: 1051;
+    height: 75px;
+    width: 1px;
+    margin-left: 35px;
+    background-color: #222222;
+    transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    /* IE 9 */
+    -webkit-transform: rotate(45deg);
+    /* Safari and Chrome */
+    z-index: 1051;
 }
+
 .portfolio-modal .close-modal .lr .rl {
-  height: 75px;
-  width: 1px;
-  background-color: #222222;
-  transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  /* IE 9 */
-  -webkit-transform: rotate(90deg);
-  /* Safari and Chrome */
-  z-index: 1052;
+    height: 75px;
+    width: 1px;
+    background-color: #222222;
+    transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    /* IE 9 */
+    -webkit-transform: rotate(90deg);
+    /* Safari and Chrome */
+    z-index: 1052;
 }
+
 .portfolio-modal .modal-backdrop {
-  opacity: 0;
-  display: none;
+    opacity: 0;
+    display: none;
 }
+
 ::-moz-selection {
-  text-shadow: none;
-  background: #204a87;
+    text-shadow: none;
+    background: #204a87;
 }
+
 ::selection {
-  text-shadow: none;
-  background: #204a87;
+    text-shadow: none;
+    background: #204a87;
 }
+
 img::selection {
-  background: transparent;
+    background: transparent;
 }
+
 img::-moz-selection {
-  background: transparent;
+    background: transparent;
+}
+
+body {
+    webkit-tap-highlight-color: #204a87;
+}
+
+body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    -webkit-font-smoothing: subpixel-antialiased;
+    position: relative;
+    overflow: auto;
+}
+
+#divs {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    font-family: 'Open Sans', sans-serif;
+    color: #ffffff;
+    text-align: center;
+}
+
+#divs2 {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+    font-family: 'Open Sans', sans-serif;
+    color: #ffffff;
+    text-align: center;
+}
+
+.div1 {
+    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url('../images/kettlebell-2052775.jpg') no-repeat center center fixed;
+}
+
+.div2 {
+    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/girl2.jpg') no-repeat center center fixed;
+    /*background: #17161e*/
+}
+
+/**********************/
+
+/*
+ IE Solution.
+ Ya! IE can do Cover Background
+*/
+
+/**********************/
+
+.div1 {
+    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/kettlebell-2052775.jpg', sizingMethod='scale');
+    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/kettlebell-2052775.jpg', sizingMethod='scale')";
+}
+
+.div2 {
+    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/girl2.jpg', sizingMethod='scale');
+    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/girl2.jpg', sizingMethod='scale')";
+}
+
+/*header*/
+
+.mouse {
+    /*transform: translate(50%, 0%);*/
+    display: block;
+    margin: 0 auto;
+    width: 26px;
+    height: 46px;
+    border-radius: 13px;
+    border: 2px solid #e8f380;
+    bottom: 5%;
+    position: absolute;
+    left: 51%;
+    margin-left: -26px;
+}
+
+.mouse span {
+    display: block;
+    margin: 7px auto;
+    width: 3px;
+    height: 3px;
+    border-radius: 5px;
+    background: #e8f380;
+    border: 2px solid transparent;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-name: scroll;
+    animation-name: scroll;
+}
+
+@-webkit-keyframes scroll {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateY(20px);
+        transform: translateY(20px);
+    }
+}
+
+@keyframes scroll {
+    0% {
+        opacity: 1;
+        -webkit-transform: translateY(0);
+        -ms-transform: translateY(0);
+        transform: translateY(0);
+    }
+    100% {
+        opacity: 0;
+        -webkit-transform: translateY(20px);
+        -ms-transform: translateY(20px);
+        transform: translateY(20px);
+    }
 }
+
+/*buttons*/
+
+.button-login,
+.button-register,
+.button-try {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    font-family: 'Varela Round', sans-serif;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 22px;
+    letter-spacing: 0.1em;
+    color: #e8e8e8;
+    outline: none;
+    background: linear-gradient(45deg, #d350db, teal, #d350db);
+    animation: gradient 10s ease infinite;
+    background-size: 400% 400%;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border-radius: 50px;
+    padding: 16px 36px;
+    text-align: center;
+}
+
+@keyframes gradient {
+    50% {
+        background-position: 100% 0;
+    }
+}
+
+.button-register {
+    display: block;
+    margin: 0 auto;
+    width: 20%;
+    bottom: 12%;
+    position: absolute;
+    left: 12%;
+    margin-left: -26px;
+}
+
+.button-login {
+    display: block;
+    margin: 0 auto;
+    width: 20%;
+    bottom: 12%;
+    position: absolute;
+    right: 11%;
+    margin-left: -26px;
+}
+
+.button-try {
+    display: block;
+    margin: 0 auto;
+    width: 20%;
+    bottom: 12%;
+    position: absolute;
+    left: 42%;
+    margin-left: -26px;
+}
+
+/*
+features
+*/
+
+.background-1 {
+    background: #282537;
+    background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
+    background-image: -moz-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
+    background-image: -o-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
+    background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
+}
+
+.background-2 {
+    background: #092756;
+    background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -moz-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
+    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -webkit-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);
+    background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -o-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -o-linear-gradient(-45deg, #670d10 0%, #092756 100%);
+    background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), -ms-linear-gradient(top, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), -ms-linear-gradient(-45deg, #670d10 0%, #092756 100%);
+    background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, .4) 10%, rgba(138, 114, 76, 0) 40%), linear-gradient(to bottom, rgba(57, 173, 219, .25) 0%, rgba(42, 60, 87, .4) 100%), linear-gradient(135deg, #670d10 0%, #092756 100%);
+}
+
+body:before {
+    width: 100%;
+    height: 100%;
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    background-size: auto;
+    text-rendering: optimizeLegibility;
+}
+
+h1 {
+    color: #fff;
+    font-family: 'Varela Round', sans-serif;
+    font-size: 70px;
+    text-shadow: 2px 2px 10px #1D2671, 4px 4px 15px #C33764, ;
+}
+
+.full-screen {
+    height: 100vw;
+    position: relative;
+}
+
+.title {
+    text-align: center;
+    font-weight: 100;
+}
+
+.divider {
+    border-bottom: 1px solid #17161e;
+}
+
+.cards {
+    background: ghostwhite;
+    border-radius: 3px;
+    cursor: pointer;
+    height: 17em;
+    padding: 1.5em;
+    position: relative;
+    transition: height 0.4s, box-shadow 0.5s;
+}
+
+.cards:hover {
+    box-shadow: 0 0 2em #999;
+    height: 40em;
+    transition: height 0.3s ease, box-shadow 0.5s ease;
+}
+
+.cards:hover .divider {
+    opacity: 0.5;
+}
+
+.cards:hover .info {
+    transition: top 0.5s ease, opacity 1s ease;
+    visibility: visible;
+    top: 1%;
+    opacity: 1;
+}
+
+.cards .info {
+    position: relative;
+    visibility: hidden;
+    top: -50%;
+    opacity: 0;
+}
+
+.cards .icon {
+    color: #febbbb;
+    font-size: 4em;
+    text-align: center;
+    padding: 0em;
+    position: relative;
+    left: 0%;
+    top: 0em;
+    transition: font-size .3s ease, left .3s ease;
+}
+
+.cards .title {
+    font-family: 'Varela Round', sans-serif;
+    color: #17161e;
+    text-align: center;
+    font-weight: 700;
+}
+
+.cards .lead {
+    color: #17161e;
+    font-weight: 100;
+    font-size: 22px;
+    text-align: center;
+    hyphens: auto;
+}
+
+.ftcolor {
+    color: ghostwhite;
+}
+
+.cards .btn:hover {
+    background: #00c5a7;
+    color: #fff;
+    transition: background 0.5s ease;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+html,
 body {
-  webkit-tap-highlight-color: #204a87;
+    height: 100%;
+}
+
+.slider_text_color {
+    color: #449;
+    font-family: 'Varela Round', sans-serif;
+    line-height: 1.5;
+}
+
+.slider__inner {
+    top: 0;
+    left: 0;
+    width: 600%;
+    height: 100%;
+    transition: all 1s ease-out;
+    display: flex;
+    flex-flow: row nowrap;
+}
+
+.slider__contents {
+    height: 100%;
+    padding: 2rem;
+    text-align: center;
+    display: flex;
+    flex: 1;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: center;
+    -webkit-animation-name: slider__contents;
+    -moz-animation-name: slider__contents;
+    -o-animation-name: slider__contents;
+    animation-name: slider__contents;
+    -webkit-animation-duration: 1.8s;
+    -moz-animation-duration: 1.8s;
+    -o-animation-duration: 1.8s;
+    animation-duration: 1.8s;
+    transform-origin: bottom left;
+}
+
+.slider__image {
+    font-size: 2.7rem;
+}
+
+.slider__caption {
+    font-weight: 700;
+    margin: 2rem 0 1rem;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    text-transform: uppercase;
+}
+
+.slider__txt {
+    color: white;
+    font-size: 22px;
+    margin-bottom: 0rem;
+    max-width: 400px;
+}
+
+@keyframes check {
+    50% {
+        outline-color: #333;
+        box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
+    }
+    100% {
+        outline-color: #333;
+        box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
+    }
+}
+
+/*
+
+	Animations
+
+*/
+
+@-webkit-keyframes slider__contents {
+    0% {
+        opacity: 0
+    }
+    40% {
+        -webkit-transform: rotate(-18deg) scale(0.8) translateX(20px) translateY(60px);
+        opacity: 0
+    }
+    100% {
+        -webkit-transform: scale(1) translateX(0) translateY(0);
+        opacity: 1
+    }
+}
+
+@-moz-keyframes slider__contents {
+    0% {
+        opacity: 0
+    }
+    40% {
+        -moz-transform: rotate(-18deg) scale(0.8) translateX(20px) translateY(60px);
+        opacity: 0
+    }
+    100% {
+        -moz-transform: scale(1) translateX(0) translateY(0);
+        opacity: 1
+    }
+}
+
+@-o-keyframes slider__contents {
+    0% {
+        opacity: 0
+    }
+    40% {
+        transform: rotate(-18deg) scale(0.8) translateX(20px) translateY(60px);
+        opacity: 0
+    }
+    100% {
+        transform: scale(1) translateX(0) translateY(0);
+        opacity: 1
+    }
+}
+
+@keyframes slider__contents {
+    0% {
+        opacity: 0
+    }
+    40% {
+        transform: rotate(-18deg) scale(0.8) translateX(20px) translateY(60px);
+        opacity: 0
+    }
+    100% {
+        transform: scale(1) translateX(0) translateY(0);
+        opacity: 1
+    }
+}
+
+/*yet another slider*/
+
+#quote-carousel {
+    padding: 0px 10px 30px 10px;
+    margin-top: 0px;
+}
+
+#quote-carousel .carousel-control {
+    background: none;
+    color: ghostwhite;
+    font-size: 2.3em;
+    text-shadow: none;
+    margin-top: 12%;
+}
+
+#quote-carousel .carousel-indicators {
+    position: relative;
+    right: 50%;
+    top: 50%;
+    left: 50%;
+    bottom: 0px;
+    margin-top: 20px;
+    margin-right: -19px;
+}
+
+#quote-carousel .carousel-indicators li {
+    cursor: pointer;
+    border: 1px solid #449;
+    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
+    border-radius: 50%;
+    opacity: 1;
+    overflow: hidden;
+    transition: all .4s ease-in;
+    vertical-align: middle;
+}
+
+#quote-carousel .carousel-indicators .active {
+    opacity: 5;
+    transition: all .2s;
+}
+
+.item blockquote {
+    border-left: none;
+    margin: 0;
+}
+
+.item blockquote p:before {
+    content: "\f10d";
+    font-family: 'Josefin Sans', sans-serif;
+    float: left;
+    margin-right: 10px;
 }
diff --git a/wger/software/static/images/girl2.jpg b/wger/software/static/images/girl2.jpg
new file mode 100644
index 0000000..f49ff0a
Binary files /dev/null and b/wger/software/static/images/girl2.jpg differ
diff --git a/wger/software/static/images/kettlebell-2052775.jpg b/wger/software/static/images/kettlebell-2052775.jpg
new file mode 100644
index 0000000..788ce8f
Binary files /dev/null and b/wger/software/static/images/kettlebell-2052775.jpg differ
diff --git a/wger/software/static/images/main.jpg b/wger/software/static/images/main.jpg
deleted file mode 100644
index bea0799..0000000
Binary files a/wger/software/static/images/main.jpg and /dev/null differ
diff --git a/wger/software/templates/features.html b/wger/software/templates/features.html
index 7b7ca05..0274503 100644
--- a/wger/software/templates/features.html
+++ b/wger/software/templates/features.html
@@ -18,221 +18,206 @@
 {# Content #}
 {#         #}
 {% block content %}
-    <header>
-        <div class="container">
+<header>
+        <div id= "divs" class="container div1">
             <div class="intro-text">
                 <div class="intro-heading">{% trans "Welcome to wger" %}</div>
-                <div class="intro-lead-in">{% trans "Your body." %}</div>
-                <div class="intro-lead-in">{% trans "Your workouts." %}</div>
-                <div class="intro-lead-in">{% trans "Your data." %}</div>
-                <div class="intro-lead-in">{% trans "Your progress." %}</div>
+                    <div class="container">
+                            <div class="row">
+                                <div class="col-md-12">
+                                    <div class="carousel slide" data-ride="carousel" id="quote-carousel">
+                                        <!-- Carousel Slides / Quotes -->
+                                        <div class="carousel-inner text-center">
+                                            <!-- Quote 1 -->
+                                            <div class="item active row col-sm-8 col-sm-offset-2">
+                                                <div class="slider__contents slider_text_color"><i class="slider__image fa fa-line-chart"></i>
+                                                    <h2 class="slider__caption slider_text_color">{% trans "WEIGHT TRACKER" %}</h2>
+                                                    <p class="slider__txt slider_text_color">
+                                                        {% blocktrans trimmed %}
+                                                            Keep track of your progress with the body weight chart. This makes
+                                                            it easy to see if you are reaching your goals or need to adjust
+                                                            something.
+                                                        {% endblocktrans %}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <!-- Quote 2 -->
+                                            <div class="item row col-sm-8 col-sm-offset-2">
+                                                <div class="slider__contents slider_text_color"><i class="slider__image fa fa-calendar"></i>
+                                                    <h2 class="slider__caption slider_text_color">{% trans "CALENDAR" %}</h2>
+                                                    <p class="slider__txt slider_text_color">
+                                                {% blocktrans trimmed %}
+                                                    Get an overview of how and when you trained as well as how you
+                                                    personally felt you performed. Access all your individual diary
+                                                    entries with one click.
+                                                {% endblocktrans %}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <!-- Quote 3 -->
+                                            <div class="item row col-sm-8 col-sm-offset-2">
+                                                <div class="slider__contents slider_text_color"><i class="slider__image fa fa-database"></i>
+                                                    <h2 class="slider__caption slider_text_color">{% trans "EXERCISE DATABASE" %}</h2>
+                                                    <p class="slider__txt slider_text_color">
+                                                        {% blocktrans trimmed %}
+                                                        The exercise database contains more than hundred exercises from
+                                                        which you can choose when creating a workout. You can view them by
+                                                        category and equipment used or muscles trained.
+                                                        {% endblocktrans %}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <!-- Quote 4 -->
+                                            <div class="item row col-sm-8 col-sm-offset-2">
+                                                <div class="slider__contents slider_text_color"><i class="slider__image fa fa-address-book"></i>
+                                                    <h2 class="slider__caption slider_text_color">{% trans "GYM MANAGEMENT" %}</h2>
+                                                    <p class="slider__txt">
+                                                        {% blocktrans trimmed %}
+                                                            Use the application for your gym to manage its members, their
+                                                            workouts and attendance. You can manage the members' contracts,
+                                                            keep notes and upload any files you might need.
+                                                        {% endblocktrans %}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <!-- Quote 5 -->
+                                            <div class="item row col-sm-8 col-sm-offset-2">
+                                                <div class="slider__contents slider_text_color"><i class="slider__image fa fa-file-code-o"></i>
+                                                    <h2 class="slider__caption slider_text_color">{% trans "REST API" %}</h2>
+                                                    <p class="slider__txt">
+                                                        {% blocktrans trimmed %}
+                                                            wger provides a REST API with full read and write access to all
+                                                            data so you can integrate your own application and tools.
+                                                        {% endblocktrans %}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                            <!-- Quote 6 -->
+                                            <div class="item row col-sm-8 col-sm-offset-2">
+                                                <div class="slider__contents slider_text_color"><i class="slider__image fa fa-code-fork"></i>
+                                                    <h2 class="slider__caption slider_text_color">{% trans "100% FREE AND OPEN SOURCE" %}</h2>
+                                                    <p class="slider__txt">
+                                                        {% blocktrans trimmed %}100% Free
+                                                        <br>and
+                                                        <br>Open Source{% endblocktrans %}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <!-- Bottom Carousel Indicators -->
+                                        <ol class="carousel-indicators">
+                                            <li data-target="#quote-carousel" data-slide-to="0" class="active">
+                                            </li>
+                                            <li data-target="#quote-carousel" data-slide-to="1">
+                                            <li data-target="#quote-carousel" data-slide-to="2">
+                                            <li data-target="#quote-carousel" data-slide-to="3">
+                                            <li data-target="#quote-carousel" data-slide-to="4">
+                                            <li data-target="#quote-carousel" data-slide-to="5">
+                                            </li>
+                                        </ol>
+
+                                        <!-- Carousel Buttons Next/Prev -->
+                                        <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
+                                        <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 {% if allow_guest_users and not user.is_authenticated %}
-                    <a href="{% url 'core:user:demo-entries' %}" class="page-scroll btn btn-xl" rel="nofollow" style="margin-top: 1em;">
+                    <a href="{% url 'core:user:demo-entries' %}" class="page-scroll button-try" rel="nofollow" style="margin-top: 1em;">
                         {% trans "Try it now" %}
                     </a>
                 {% endif %}
 
                 {% if not user.is_authenticated or user.userprofile.is_temporary %}
                     {% if allow_registration %}
-                        <a href="{% url 'core:user:registration' %}" class="page-scroll btn btn-xl" style="margin-top: 1em;">
+                        <a href="{% url 'core:user:registration' %}" class="page-scroll button-register" style="margin-top: 1em;">
                             {% trans "Register" %}
                         </a>
                     {% endif %}
 
-                    <a href="{% url 'core:user:login' %}" class="page-scroll btn btn-xl" style="margin-top: 1em;">
+                    <a href="{% url 'core:user:login' %}" class="page-scroll button-login" style="margin-top: 1em;">
                         {% trans "Login" %}
                     </a>
                 {% endif %}
+            <div class="mouse">
+                <span></span>
             </div>
         </div>
     </header>
 
-    <!-- Services Section -->
-    <section id="services" class="bg-darkest-gray">
-        <div class="container">
-            <div class="row">
-                <div class="col-lg-12 text-center">
-                    <h2 class="section-heading text-light">{% trans "Your advantages" %}</h2>
-                    <h3 class="section-subheading text-muted">
-                        {% blocktrans trimmed %}
-                            wger Workout Manager is a free, open source web application that manages
-                            your exercises, workouts and nutrition. It started as a pet project of
-                            mine to replace my growing collection of different spreadsheets, but it
-                            has become something other people could also find useful.
-                        {% endblocktrans %}
-                    </h3>
-                </div>
-            </div>
-            <div class="row text-center">
-                <div class="col-md-4">
-                    <span class="fa-stack fa-4x">
-                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
-                        <i class="fa fa-user fa-stack-1x fa-inverse"></i>
-                    </span>
-                    <h4 class="service-heading text-light">{% trans "Workouts" %}</h4>
-                    <p class="text-muted">
-                        {% blocktrans trimmed %}
-                            You can create and manage flexible workout routines for any goals you
-                            have. Select exactly which exercises you'll do and how many repetitions,
-                            time or distance you want to do them. You can also combine different
-                            workouts into a schedule.
-                        {% endblocktrans %}
-                    </p>
-                </div>
-                <div class="col-md-4">
-                    <span class="fa-stack fa-4x">
-                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
-                        <i class="fa fa-cutlery fa-stack-1x fa-inverse"></i>
-                    </span>
-                    <h4 class="service-heading text-light">{% trans "Nutrition" %}</h4>
-                    <p class="text-muted">
-                        {% blocktrans trimmed %}
-                            Create your personal diet plan by creating as many meals with as many
-                            different ingredients as you need. The application will calculate the
-                            nutritional values (total energy, protein, carbohydrates, and so on)
-                            about the whole plan as well as the indivual meals.
-                        {% endblocktrans %}
-                    </p>
-                </div>
-                <div class="col-md-4">
-                    <span class="fa-stack fa-4x">
-                        <i class="fa fa-circle fa-stack-2x text-primary"></i>
-                        <i class="fa fa-line-chart fa-stack-1x fa-inverse"></i>
-                    </span>
-                    <h4 class="service-heading text-light">{% trans 'Diary' %}</h4>
-                    <p class="text-muted">
-                        {% blocktrans trimmed %}
-                            Enter the weights and repetitions you did for each exercise to generate
-                            diagrams that let you see at a glance how well you are doing. The raw
-                            numbers are of course still accessible.
-                        {% endblocktrans %}
-                        {% trans "You can also enter notes and a general impression (great, neutral, etc.)" %}
-                    </p>
-                </div>
-            </div>
-        </div>
-    </section>
 
-    <section id="about" class="bg-light-gray">
-        <div class="container">
+<header>
+<div id= "divs2" class="container div2">
+<section id="services">
+    <div class="container">
             <div class="row">
-                <div class="col-lg-12 text-center">
-                    <h2 class="section-heading">{% trans "Features" %}</h2>
-                    <h3 class="section-subheading text-muted">{% trans "Among many others" %}</h3>
+                <h1 class="title">Your  advantages</h1>
+                <hr>
+                <div class="col-xs-8 col-xs-offset-2 ftcolor">
+                    <p class="lead text-center">
+                        wger Workout Manager is a free,
+                        open source web application that manages your exercises,
+                        workouts and nutrition.</p>
+                    <hr>
                 </div>
             </div>
             <div class="row">
-                <div class="col-lg-12">
-                    <ul class="timeline">
-                        <li>
-                            <div class="timeline-image">
-                                <img class="img-circle img-responsive" src="{% static 'images/weight-chart.png' %}" alt="">
-                            </div>
-                            <div class="timeline-panel">
-                                <div class="timeline-heading">
-                                    <h4>{% trans "Weight tracker" %}</h4>
-                                </div>
-                                <div class="timeline-body">
-                                    <p class="text-muted">
-                                        {% blocktrans trimmed %}
-                                            Keep track of your progress with the body weight chart. This makes
-                                            it easy to see if you are reaching your goals or need to adjust
-                                            something.
-                                        {% endblocktrans %}
-                                    </p>
-                                </div>
-                            </div>
-                        </li>
-                        <li class="timeline-inverted">
-                            <div class="timeline-image">
-                                <img class="img-circle img-responsive" src="{% static 'images/calendar.png' %}" alt="">
-                            </div>
-                            <div class="timeline-panel">
-                                <div class="timeline-heading">
-                                    <h4>{% trans 'Calendar' %}</h4>
-                                </div>
-                                <div class="timeline-body">
-                                    <p class="text-muted">
-                                        {% blocktrans trimmed %}
-                                            Get an overview of how and when you trained as well as how you
-                                            personally felt you performed. Access all your individual diary
-                                            entries with one click.
-                                        {% endblocktrans %}
-                                    </p>
-                                </div>
-                            </div>
-                        </li>
-                        <li class="timeline">
-                            <div class="timeline-image">
-                                <img class="img-circle img-responsive" src="{% static 'images/muscle-overview.png' %}" alt="">
-                            </div>
-                            <div class="timeline-panel">
-                                <div class="timeline-heading">
-                                    <h4>{% trans 'Exercise database' %}</h4>
-                                </div>
-                                <div class="timeline-body">
-                                    <p class="text-muted">
-                                        {% blocktrans trimmed %}
-                                            The exercise database contains more than hundred exercises from
-                                            which you can choose when creating a workout. You can view them by
-                                            category and equipment used or muscles trained.
-                                        {% endblocktrans %}
-                                    </p>
-                                </div>
-                            </div>
-                        </li>
-                        <li class="timeline-inverted">
-                            <div class="timeline-image">
-                                <img class="img-circle img-responsive" src="{% static 'images/gym-management.png' %}" alt="">
-                            </div>
-                            <div class="timeline-panel">
-                                <div class="timeline-heading">
-                                    <h4>{% trans 'Gym management' %}</h4>
-                                </div>
-                                <div class="timeline-body">
-                                    <p class="text-muted">
-                                        {% blocktrans trimmed %}
-                                            Use the application for your gym to manage its members, their
-                                            workouts and attendance. You can manage the members' contracts,
-                                            keep notes and upload any files you might need.
-                                        {% endblocktrans %}
-                                    </p>
-                                </div>
-                            </div>
-                        </li>
-                        <li class="timeline">
-                            <div class="timeline-image">
-                                <img class="img-circle img-responsive" src="{% static 'images/rest-api.png' %}" alt="">
-                            </div>
-                            <div class="timeline-panel">
-                                <div class="timeline-heading">
-                                    <h4>{% trans "REST API" %}</h4>
-                                </div>
-                                <div class="timeline-body">
-                                    <p class="text-muted">
-                                        {% blocktrans trimmed %}
-                                            wger provides a REST API with full read and write access to all
-                                            data so you can integrate your own application and tools.
-                                        {% endblocktrans %}
-                                    </p>
-                                </div>
-                            </div>
-                        </li>
-                        <li class="timeline">
-                            <div class="timeline-image">
-                                <h4>{% blocktrans trimmed %}100% Free
-                                    <br>and
-                                    <br>Open Source{% endblocktrans %}
-                                </h4>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
+                <article class="col-xs-4">
+                    <div class="cards"><span class="glyphicon glyphicon-user icon"></span>
+                        <hr class="divider">
+                        <h2 class="title ">Workouts</h2>
+                        <div class="info">
+                            <hr class="divider">
+                            <p class="lead">
+                                {% blocktrans trimmed %}
+                                    You can create and manage flexible workout routines for any goals you
+                                    have. Select exactly which exercises you'll do and how many repetitions,
+                                    time or distance you want to do them. You can also combine different
+                                    workouts into a schedule.
+                                {% endblocktrans %}
+                            </p>
+                        </div>
+                    </div>
+                </article>
+                <article class="col-xs-4">
+                    <div class="cards"><span class="glyphicon glyphicon-cutlery icon"></span>
+                        <hr class="divider">
+                        <h2 class="title">Nutrition</h2>
+                        <div class="info">
+                            <hr class="divider">
+                            <p class="lead">
+                                {% blocktrans trimmed %}
+                                    Create your personal diet plan by creating as many meals with as many
+                                    different ingredients as you need. The application will calculate the
+                                    nutritional values (total energy, protein, carbohydrates, and so on)
+                                    about the whole plan as well as the indivual meals.
+                                {% endblocktrans %}
+                            </p>
+                        </div>
+                    </div>
+                </article>
+                <article class="col-xs-4">
+                    <div class="cards"><span class="glyphicon glyphicon-book icon"></span>
+                        <hr class="divider">
+                        <h2 class="title">Diary</h2>
+                        <div class="info">
+                            <hr class="divider">
+                            <p class="lead">
+                                {% blocktrans trimmed %}
+                                Enter the weights and repetitions you did for each exercise to generate
+                                diagrams that let you see at a glance how well you are doing. The raw
+                                numbers are of course still accessible.
+                                {% endblocktrans %}
+                                {% trans "You can also enter notes and a general impression (great, neutral, etc.)" %}
+                            </p>
+                        </div>
+                    </div>
+                </article>
             </div>
-        </div>
-    </section>
-
-
-
-
+    </div>
+</section>
+</div>
+</header>
 {% endblock %}