update scss files and make sure that homepage works in the same way

40 files changed, 455 insertions, 514 deletions

diff --git a/assets/css/custom.scss b/assets/css/custom.scss
index 0f7df5d4..6d9e6577 100644
--- a/assets/css/custom.scss
+++ b/assets/css/custom.scss
@@ -1,18 +1,32 @@
-@charset "UTF-8";
-@import "variables";
-@import "modules/normalize";
-@import "modules/no-js";
-@import "modules/alerts";
-
-/* Please don't remove, useful for testing. */
-/* * {border:1px solid red} */
-
-/*Colors*/
-/*Shadows*/
-/*Breakpoints*/
-/*Colors*/
-/*Shadows*/
-/*Breakpoints*/
+// Import file
+//
+// This file should be used only for importing common code
+
+@charset 'UTF-8';
+
+// Importing bootstrap modules
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities';
+@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities';
+
+// Importing modules
+@import 'variables';
+@import 'modules/normalize';
+@import 'modules/no-js';
+@import 'modules/alerts';
+@import 'modules/header';
+@import 'modules/slideshow';
+@import 'modules/secondmenu';
+@import 'modules/typography';
+
+
+// To remove everything above and split in other files
 .jumbotron--heading-1 {
   padding-top: 0;
   color: white !important;
@@ -973,52 +987,7 @@ blockquote {
     line-height: 1.5;
 /*     text-align: center; */
     color: #2a2a36; } }
-.highlights {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin: -16px 0 0 -16px;
-  padding: 0;
-  list-style: none; }
-@media (max-width: 1024px) {
-    .highlights {
-        display: block;
-        text-align: center;
-        margin: 0 10px 0 10px; } }
-
-.highlights_align {
-  padding-top: 100px;
-  flex-basis: 33.33333%;
-  max-width: 33.33333%;
-  padding-left: 64px; }
-.highlights_align:first-child {
-    padding-left: 0px; }
-@media (max-width: 1024px) {
-    .highlights_align {
-        flex-basis: auto;
-        max-width: none;
-        padding-left: 0;
-        padding-top: 50px; } }
-.highlights_align svg {
-    margin-left: -10px; }
-@media (max-width: 1200px) {
-    .highlights_align svg {
-        margin-left: 0; } }
-.highlights_align .section--paragraph {
-    font-size: 16px; }
-.highlights_align h4 {
-    text-align: center;
-    margin-top: 20px;
-    margin-left: -20px;
-    margin-bottom: 0; }
-@media (max-width: 1200px) {
-.highlights_align h4 {
-    margin-left: 0; } }
+
 
 /* Youtube dialog */
 .yt-img-overlay {
diff --git a/assets/css/modules/header.scss b/assets/css/modules/header.scss
index 0bb195fe..7d8f252e 100644
--- a/assets/css/modules/header.scss
+++ b/assets/css/modules/header.scss
@@ -1,8 +1,11 @@
-@import "variables.scss";
 @-moz-document url-prefix() {
   .brand { -webkit-transform: scale(0.5); top: -26px !important; }
 }
 
+nav a {
+  text-decoration: none;
+}
+
 .mobile-bg-container{
     position: fixed;
     -webkit-transform: translateZ(0);
diff --git a/assets/css/modules/slideshow.scss b/assets/css/modules/slideshow.scss
index fea63fe1..5b2aa19d 100644
--- a/assets/css/modules/slideshow.scss
+++ b/assets/css/modules/slideshow.scss
@@ -1,224 +1,227 @@
-@import "../variables.scss";
-@import "../helpers.scss";
+@import '../variables';
+@import '../helpers';
 
 .slideshow {
   background-color: transparent;
-  overflow: hidden;
   height: 100%;
-  position: relative;
+  overflow: hidden;
   padding: 130px 0;
+  position: relative;
+
+  @media (max-width: $break-big) {
+    padding: 0;
+  }
+
+  .section--heading-1 {
+    margin: auto 0;
+    position: absolute;
+    text-align: center;
+    width: 100%;
 
     @media (max-width: $break-big) {
-      padding: 0;
+      padding-top: 130px;
+      position: relative;
     }
+  }
 
-    .section--heading-1 {
-      position: absolute;
-      margin: auto 0;
-      text-align: center;
-      width: 100%;
+  .container {
+    .col-md-6 {
+      // width: 45%;
+      // &:first-child {
+      //   width: 49%;
+      // }
+    }
 
-      @media (max-width:$break-big) {
-        position: relative;
-        padding-top: 130px;
+    .container-image-center {
+      padding: calc((100vh - 435px) /2) 0;
+
+      @media (max-width: 1400px) {
+        padding: calc((100vh - 315px) /2) 0;
       }
-    }
 
-    .container {
+      @media (max-width: $break-big) {
+        margin-left: -13px;
+        padding: 50px 0 203px;
+      }
 
-      .container-image-center {
-        padding-top: calc((100vh - 435px) /2);
-        padding-bottom: calc((100vh - 435px) /2);
+      @media (max-width: $break-small) {
+        padding-bottom: 260px;
+      }
 
-        @media (max-width: 1400px) {
-          padding-top: calc((100vh - 315px) /2);
-          padding-bottom: calc((100vh - 315px) /2);
-        }
+      @media (max-width: 600px) {
+        padding-bottom: 180px;
+      }
 
-        @media (max-width: $break-big) {
-          padding-top: 50px;
-          padding-bottom: 203px;
-          margin-left: -13px;
-        }
+      @media (max-width: 340px) {
+        padding-bottom: 130px;
+      }
 
-        @media (max-width: $break-small) {
-          padding-bottom: 260px;
-        }
+      .image-back {
+        height: 440px;
+        position: absolute;
 
-        @media (max-width: 600px) {
-          padding-bottom: 180px;
+        @media (max-width: $navbar-breaksize) {
+          height: auto;
+          width: 100%;
         }
+      }
 
-        @media (max-width: 340px) {
-          padding-bottom: 130px;
-        }
+      .image-top-container {
+        height: 318px;
+        left: 17px;
+        overflow: hidden;
+        position: relative;
+        top: 17px;
+        width: 507px;
+        z-index: 1;
 
-        .image-back {
+        .image-top {
           position: absolute;
-          height: 440px;
+          width: 100%;
+          top: 0;
+          transition: all ease-in 0.3s;
 
-          @media (max-width: $navbar-breaksize) {
-            width: 100%;
-            height: auto;
+          &.image__desktop {
+            left: 0 !important;
+          }
+
+          &.image__mobile {
+            top: 0 !important;
           }
-        }
 
-        .image-top-container {
-          position: relative;
-          overflow: hidden;
-          z-index: 1;
-          width: 507px;
-          height: 318px;
-          top: 17px;
-          left: 17px;
-
-          .image-top {
-            position: absolute;
-            width: 100%;
-            top: 0;
-            transition: all ease-in 0.3s;
-
-            &.image__desktop {
-              left: 0 !important;
-            }
-
-            &.image__mobile {
-              top: 0 !important;
-            }
-
-            @media (max-width: $break-big) {
-                width: auto;
-                height: 100%;
-                max-width: none;
-            }
+          @media (max-width: $break-big) {
+            width: auto;
+            height: 100%;
+            max-width: none;
           }
         }
       }
+    }
 
-      .texts-wrapper {
-        height: 100vh;
+    .texts-wrapper {
+      height: 100vh;
 
-        @media (max-width: $break-big) {
-          height: auto;
-          padding-bottom: 80px;
+      @media (max-width: $break-big) {
+        height: auto;
+        padding-bottom: 80px;
+      }
+
+      .right-text-grey {
+        margin-top: calc((100vh - 266px) /2);
+        padding-bottom: calc((100vh - 236px) /2);
+        opacity: 1;
+        padding-top: 0;
+        transition: all 0.3s ease;
+
+        .textTrigger {
+          font-size: 18px;
+        }
+
+        .section--paragraph {
+          font-size: 16px !important;
+          font-weight: 400 !important;
+          color: $medium-grey;
         }
 
-        .right-text-grey {
-          margin-top: calc((100vh - 266px) /2);
-          padding-bottom: calc((100vh - 236px) /2);
-          opacity: 1;
-          padding-top: 0;
-          transition: all 0.3s ease;
 
-          .textTrigger {
-            font-size: 18px;
+        @media (max-width: $break-big) {
+          margin-top: 0;
+          padding-bottom: 0;
+          text-align: left;
+          display: none;
+          opacity: 0;
+
+          &.active {
+            display: block;
+            opacity: 1;
+            transform: translate3d(0px, 0px, 0px);
           }
 
-          .section--paragraph {
-            font-size: 16px !important;
-            font-weight: 400 !important;
-            color: $medium-grey;
+          &.swiperight {
+            transform: translate3d(-150px, 0px, 0px);
+            opacity: 0;
           }
 
-
-          @media (max-width: $break-big) {
-            margin-top: 0;
-            padding-bottom: 0;
-            text-align: left;
-            display: none;
+          &.swipeleft {
+            transform: translate3d(150px, 0px, 0px);
             opacity: 0;
-
-            &.active {
-              display: block;
-              opacity: 1;
-              transform: translate3d(0px, 0px, 0px);
-            }
-
-            &.swiperight {
-              transform: translate3d(-150px, 0px, 0px);
-              opacity: 0;
-            }
-
-            &.swipeleft {
-              transform: translate3d(150px, 0px, 0px);
-              opacity: 0;
-            }
           }
         }
       }
     }
+  }
 
-    .indicators {
-      -webkit-transition: all .5s;
-      transition: all .5s;
-      opacity: 0;
-      position: fixed;
-      z-index: 2;
-      bottom: 50vh;
+  .indicators {
+    -webkit-transition: all .5s;
+    transition: all .5s;
+    opacity: 0;
+    position: fixed;
+    z-index: 2;
+    bottom: 50vh;
+    right: 0;
+
+    @media (max-width: $break-big) {
+      position: absolute;
+      bottom: 0;
+      margin-left: auto;
+      margin-right: auto;
+      left: 0;
       right: 0;
+      top: 600px;
+      width: 70px;
+    }
+
+    .btn_carousel {
+      margin-top: 10px;
+      width: 14px;
+      height: 14px;
+      color: transparent;
+      border: 1px solid $nextcloud-blue;
+      background-color: $nextcloud-blue;
+      border-radius: 50%;
+      padding: 0;
+      -webkit-transform: scale(.5);
+      -ms-transform: scale(.5);
+      transform: scale(.5);
+      -webkit-transition: all 250ms ease-in-out;
+      transition: all 250ms ease-in-out;
 
       @media (max-width: $break-big) {
-        position: absolute;
-        bottom: 0;
-        margin-left: auto;
-        margin-right: auto;
-        left: 0;
-        right: 0;
-        top: 600px;
-        width: 70px;
+        display: inline-block;
       }
 
-      .btn_carousel {
-        margin-top: 10px;
-        width: 14px;
-        height: 14px;
-        color: transparent;
-        border: 1px solid $nextcloud-blue;
-        background-color: $nextcloud-blue;
-        border-radius: 50%;
-        padding: 0;
-        -webkit-transform: scale(.5);
-        -ms-transform: scale(.5);
-        transform: scale(.5);
-        -webkit-transition: all 250ms ease-in-out;
-        transition: all 250ms ease-in-out;
-
-        @media (max-width: $break-big) {
-          display: inline-block;
-        }
-
-        &:hover {
-          background-color: transparent;
+      &:hover {
+        background-color: transparent;
         -webkit-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);
 
-        }
+      }
 
-        a {
-          text-decoration: none;
-          display: block;
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          top: 0;
-          }
-        }
+      a {
+        text-decoration: none;
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+      }
+    }
 
-      .btn_carousel.active{
+    .btn_carousel.active{
+      background-color: transparent;
+      -webkit-transform: scale(1);
+      -ms-transform: scale(1);
+      transform: scale(1);
+
+      a {
         background-color: transparent;
         -webkit-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);
-
-        a {
-          background-color: transparent;
-          -webkit-transform: scale(1);
-          -ms-transform: scale(1);
-          transform: scale(1);
-          }
-        }
       }
+    }
+  }
 
   .active {
     opacity: 1;
@@ -258,7 +261,7 @@
 
         &.active {
           box-shadow: none;
-           background-color: transparent;
+          background-color: transparent;
           -webkit-transform: scale(1);
           -ms-transform: scale(1);
           transform: scale(1);
@@ -269,7 +272,7 @@
 }
 
 .slideshow-mobile {
-/*  hide on non-mobile */
+  /*  hide on non-mobile */
   @media (min-width: $navbar-breaksize) {
     display:none;
   }
@@ -294,27 +297,27 @@
   .carousel-fade {
     .carousel-inner {
       .item {
-      opacity: 0;
-      -webkit-transition-property: opacity;
-      -moz-transition-property: opacity;
-      -o-transition-property: opacity;
-      transition-property: opacity;
+        opacity: 0;
+        -webkit-transition-property: opacity;
+        -moz-transition-property: opacity;
+        -o-transition-property: opacity;
+        transition-property: opacity;
       }
 
       .active {
-      opacity: 1;
+        opacity: 1;
       }
 
       .active.left,
       .active.right {
-      left: 0;
-      opacity: 0;
-      z-index: 1;
+        left: 0;
+        opacity: 0;
+        z-index: 1;
       }
 
       .next.left,
       .prev.right {
-      opacity: 1;
+        opacity: 1;
       }
     }
 
@@ -336,7 +339,7 @@
       opacity: .5;
       filter: alpha(opacity=50);
       .glyphicon {
-/*        margin-top: -15px; */
+        /*        margin-top: -15px; */
         margin: -15px;
         font-size: 30px;
       }
@@ -350,7 +353,7 @@
   }
 
   html, body, .carousel, .carousel-inner, .carousel-inner .item {
-  height: 100%;
+    height: 100%;
   }
 
   .item:nth-child(1) {
diff --git a/assets/css/modules/typography.scss b/assets/css/modules/typography.scss
index fe3f2b52..23800df9 100644
--- a/assets/css/modules/typography.scss
+++ b/assets/css/modules/typography.scss
@@ -1,9 +1,9 @@
-@import "../variables.scss";
-@import "../helpers.scss";
-@import '../vendor/modular-scale/modular-scale.scss';
+@import '../variables';
+@import '../helpers';
+@import '../vendor/modular-scale/modular-scale';
 
 .jumbotron {
-    @include modifier(heading-1) {
+    &--heading-1 {
         padding-top: 0;
         color: white !important;
         font-size: ms(3) !important;
@@ -17,7 +17,7 @@
         }
     }
 
-    @include modifier(lead) {
+    &--lead {
       font-size: ms(0);
       color: white;
       line-height: 1.6;
@@ -30,12 +30,12 @@
 }
 
 .section {
-    @include modifier(text--center) {
+    &--text--center {
         margin: 0 auto;
         text-align: center;
     }
 
-    @include modifier(heading-1) {
+    &--heading-1 {
         font-size: ms(3);
         font-weight: 300;
         line-height: 1.2;
@@ -49,7 +49,7 @@
         }
     }
 
-    @include modifier(heading-2) {
+    &--heading-2 {
         font-size: ms(2);
         font-weight: 300;
         color: $dark-grey;
@@ -61,19 +61,19 @@
         }
     }
 
-    @include modifier(intro) {
+    &--intro {
         font-size: ms(0, 22px);
         font-weight: 300;
     }
 
-    @include modifier(paragraph__tittle) {
+    &--paragraph__tittle {
         font-size: ms(0, 22px);
         line-height: 30px;
         font-weight: 600;
         color: $dark-blue;
     }
 
-    @include modifier(paragraph) {
+    &--paragraph {
         font-size: ms(0);
         font-weight: 400;
         line-height: 1.5;
@@ -88,7 +88,7 @@
     border-bottom: solid 1px;
     transition: all 0.5s ease;
     text-decoration: none;
-    
+
     &:hover {
         text-decoration: none;
         color: $dark-blue;
@@ -132,3 +132,8 @@ h5 {
   line-height: 1.5;
   color: #555;
 }
+
+.text-center {
+    margin: 0 auto;
+    text-align: center;
+}
diff --git a/assets/css/pages/about.scss b/assets/css/pages/about.scss
index abcd4409..40b5d12a 100644
--- a/assets/css/pages/about.scss
+++ b/assets/css/pages/about.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .about-background {
   background: url("../img/headers/team.jpg") no-repeat;
@@ -29,12 +29,12 @@ footer.page-footer {
 			text-align: left !important;
 		}
 	}
-    
+
     .newsrow {
         margin-top: 70px;
 		margin-bottom: 30px;
     }
-    
+
     .yt-img-overlay {
         margin-bottom: 25px;
     }
diff --git a/assets/css/pages/box.scss b/assets/css/pages/box.scss
index e090b34f..3eac49a4 100644
--- a/assets/css/pages/box.scss
+++ b/assets/css/pages/box.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .section-top-jumbotron {
 	height: 531px;
@@ -51,7 +51,7 @@
 	height: 100%;
 	width: 100%;
 	background-color: white;
-	
+
 	.container {
 		border-top: 1px solid #E8E8E8;
 
@@ -74,7 +74,7 @@
 	height: 100%;
 	width: 100%;
 	background-color: white;
-	
+
 	.container {
 		border-top: 1px solid #E8E8E8;
 
@@ -103,14 +103,14 @@
 			h2 {
 				color: white;
 			}
-			
+
 			p {
 				padding-top: 10px;
 			}
 
 			.btn-primary {
 				margin-top:20px;
-				
+
 				&:before {
 					display: none;
 				}
@@ -135,20 +135,20 @@
 	background-color: white;
 
 	.container {
-		
+
 		.assembly {
 			background: url("../img/box/assembly.png") no-repeat;
 			width: 639px;
 			height: 541px;
 		    margin: 0 auto;
 		}
-		
+
 		.button {
 			text-align: center;
 			margin: 0 auto;
 			margin-top:20px;
 			display: table !important;
-				
+
 			&:before {
 				display: none;
 			}
@@ -185,7 +185,7 @@
 				margin-left: 20px;
 				margin-right: 20px;
 			}
-		
+
 		}
 	}
 }
@@ -210,7 +210,7 @@
 		.wrapper-images {
 			text-align: center;
 			margin-top: 25px;
-		
+
 			.logo-wd {
 			background: url("../img/box/wd-logo.svg") no-repeat;
 			width: 245.8px;
@@ -252,14 +252,14 @@
 				h2 {
 					color: white;
 				}
-				
+
 				p {
 					padding-top: 10px;
 				}
 				.btn-primary {
 					margin-top:20px;
 					padding: 20px 50px 20px 50px;
-					
+
 					&:before {
 						display: none;
 					}
@@ -301,7 +301,7 @@
 	.section-tecnology {
 		padding-top: 60px;
 		padding-bottom:150px;
-	
+
 		.container {
 
 			.box-open {
@@ -337,7 +337,7 @@
 				h2 {
 					color: white;
 				}
-				
+
 				p {
 					padding-top: 10px;
 				}
@@ -345,7 +345,7 @@
 				.btn-primary {
 					margin-top:20px;
 					padding: 20px 50px 20px 50px;
-					
+
 					&:before {
 						display: none;
 					}
@@ -366,13 +366,13 @@
 		padding-top: 50px;
 
 		.container {
-			
+
 			.assembly {
 				width: 319px;
 				height: 270px;
 				background-size: contain;
 			}
-			
+
 			.btn-primary {
 				padding: 20px 50px 20px 50px;
 			}
@@ -406,7 +406,7 @@
 			.wrapper-images {
 				text-align: center;
 				margin-top: 25px;
-			
+
 				.logo-wd {
 					width: 122px;
 					height: 29px;
@@ -419,9 +419,9 @@
 			}
 		}
 	}
-} 
+}
 
-@media (max-width: $break-big) { 
+@media (max-width: $break-big) {
 	.col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-xs-8 {
 		width: 100%;
 	}
@@ -440,11 +440,3 @@
 		}
 	}
 }
-
-
-
-
-
-
-
-
diff --git a/assets/css/pages/buy.scss b/assets/css/pages/buy.scss
index 81e69e23..e2b09414 100644
--- a/assets/css/pages/buy.scss
+++ b/assets/css/pages/buy.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .buy-background {
   background-image: url("../img/enterprise/enterprise.jpg");
diff --git a/assets/css/pages/channels.scss b/assets/css/pages/channels.scss
index 154ab20d..233b6f55 100644
--- a/assets/css/pages/channels.scss
+++ b/assets/css/pages/channels.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .separator{
 	margin: 100px 0 50px 0;
diff --git a/assets/css/pages/clients.scss b/assets/css/pages/clients.scss
index 68e298b7..741f9533 100644
--- a/assets/css/pages/clients.scss
+++ b/assets/css/pages/clients.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .clients-background {
   background: url("../img/headers/clients.jpg") no-repeat;
diff --git a/assets/css/pages/collabora.scss b/assets/css/pages/collabora.scss
index 3325c812..213354bc 100644
--- a/assets/css/pages/collabora.scss
+++ b/assets/css/pages/collabora.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 /* background */
 .collabora-background {
@@ -105,10 +105,9 @@ pre {
     h1 {
             color: white;
 			margin-top: 40px;
-			margin-bottom: 30px; 
+			margin-bottom: 30px;
     }
     a {
             color: white;
     }
 }
-
diff --git a/assets/css/pages/compare-old.scss b/assets/css/pages/compare-old.scss
index 9a807734..83840b9a 100644
--- a/assets/css/pages/compare-old.scss
+++ b/assets/css/pages/compare-old.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .cd-products-comparison-table {
 	/*   overflow-x: auto; */
@@ -193,23 +193,19 @@
   .cd-products-table.top-fixed .cd-products-columns > li {
     padding-top: 160px;
   }
- 
+
   .cd-products-table.top-fixed .cd-top-info {
     height: 160px;
     position: fixed;
     top: 0;
   }
- 
+
   .cd-products-table.top-fixed .cd-top-info h3 {
     transform: translateY(-116px);
   }
-  
+
   .cd-products-table.top-fixed .cd-top-info img {
     transform: translateY(-62px) scale(0.4);
   }
- 
-}
-
-
-
 
+}
diff --git a/assets/css/pages/compare.scss b/assets/css/pages/compare.scss
index 44e8d624..c324b3f4 100644
--- a/assets/css/pages/compare.scss
+++ b/assets/css/pages/compare.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .separator{
   height: 40px;
diff --git a/assets/css/pages/conf.scss b/assets/css/pages/conf.scss
index 3117ea34..e82f2181 100644
--- a/assets/css/pages/conf.scss
+++ b/assets/css/pages/conf.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .conf-background {
   background: url("../img/headers/team.jpg") no-repeat;
@@ -80,20 +80,20 @@
     /*   @media (max-width: $break-small) { */
     /*     background-image: url('../img/home/perfect-for-home-and-business-mobile.jpg'); */
     /*   } */
-    
+
     .btn-primary {
         width: 430px;
     }
-    
+
     @media (min-width: $very-wide) {
         padding-top: 120px;
         padding-bottom: 180px;
     }
-    
+
     @media (max-width: $break-small) {
         .btn-primary {
             width: 300px;
-            
+
             .icon-arrow {
                 background: url(../img/arrow_right.svg) center/contain no-repeat;
                 position: absolute;
@@ -104,17 +104,17 @@
             }
         }
     }
-    
+
     .section--heading-1 {
         width: 469px;
         color: white;
-        
+
         @media (max-width: $break-small) {
             color: white;
             width: 100%;
         }
     }
-    
+
     .section--paragraph {
         color: #ffffff;
         width: 469px;
@@ -138,5 +138,5 @@
     .blog-social-icons a:hover {
         text-decoration: none;
     }
-    
+
 }
diff --git a/assets/css/pages/contribute.scss b/assets/css/pages/contribute.scss
index 7e6c70b3..bfccb76b 100644
--- a/assets/css/pages/contribute.scss
+++ b/assets/css/pages/contribute.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .contribute-background {
   background: url("../img/headers/team.jpg") no-repeat;
@@ -48,4 +48,3 @@ footer.page-footer {
 		color: white;
 	}
 }
-
diff --git a/assets/css/pages/contributors.scss b/assets/css/pages/contributors.scss
index a12d80bf..e9643191 100644
--- a/assets/css/pages/contributors.scss
+++ b/assets/css/pages/contributors.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .contributors-background {
   background: url("../img/headers/contributors.jpg") no-repeat;
@@ -29,7 +29,7 @@ footer.page-footer {
 			text-align: left !important;
 		}
 	}
-	
+
 	blockquote {
 		float: right;
 	}
@@ -42,7 +42,7 @@ footer.page-footer {
 		position: relative;
 	}
 
-	.contribtext { 
+	.contribtext {
 		transition: all .5s;
 		background-color: #0082C9;
 		border-radius: 50%;
diff --git a/assets/css/pages/devices.scss b/assets/css/pages/devices.scss
index 9e8fba44..0d46cca8 100644
--- a/assets/css/pages/devices.scss
+++ b/assets/css/pages/devices.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .sharing-background {
   background: url("../img/headers/devices.jpg") no-repeat;
diff --git a/assets/css/pages/education.scss b/assets/css/pages/education.scss
index 65a0a711..44fb8e8a 100644
--- a/assets/css/pages/education.scss
+++ b/assets/css/pages/education.scss
@@ -1,7 +1,7 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
-@import 'vendor/modular-scale/modular-scale.scss';
-@import "transparent-gradient.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
+@import '../vendor/modular-scale/modular-scale.scss';
+@import "../transparent-gradient.scss";
 
 .separator{
 	margin: 100px 0 50px 0;
diff --git a/assets/css/pages/enterprise.scss b/assets/css/pages/enterprise.scss
index d41ef0d3..88c42b1b 100644
--- a/assets/css/pages/enterprise.scss
+++ b/assets/css/pages/enterprise.scss
@@ -1,7 +1,7 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
-@import 'vendor/modular-scale/modular-scale.scss';
-@import "transparent-gradient.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
+@import '../vendor/modular-scale/modular-scale.scss';
+@import "../transparent-gradient.scss";
 
 .separator{
   height: 40px;
diff --git a/assets/css/pages/events.scss b/assets/css/pages/events.scss
index 7ea68515..1f846419 100644
--- a/assets/css/pages/events.scss
+++ b/assets/css/pages/events.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 /* gradient behind nav */
 
@@ -24,4 +24,3 @@
 footer {
 	margin-top: 70px;
 }
-
diff --git a/assets/css/pages/features.scss b/assets/css/pages/features.scss
index aae18349..02b888ac 100644
--- a/assets/css/pages/features.scss
+++ b/assets/css/pages/features.scss
@@ -1,6 +1,6 @@
-@import "variables.scss";
-@import "modules/secondmenu";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../modules/secondmenu";
+@import "../transparent-navbar.scss";
 
 .features-background {
   background: url("../img/headers/yourcloud.jpg") no-repeat;
diff --git a/assets/css/pages/footer.scss b/assets/css/pages/footer.scss
index 7f21ae4b..910b1245 100644
--- a/assets/css/pages/footer.scss
+++ b/assets/css/pages/footer.scss
@@ -1,4 +1,4 @@
-@import "variables.scss";
+@import "../variables.scss";
 
 /**
  * Footer
diff --git a/assets/css/pages/globalscale.scss b/assets/css/pages/globalscale.scss
index d0e8fadb..468157e4 100644
--- a/assets/css/pages/globalscale.scss
+++ b/assets/css/pages/globalscale.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .separator{
 	margin: 100px 0 50px 0;
diff --git a/assets/css/pages/home.scss b/assets/css/pages/home.scss
index 53cf3fcf..a0f5e890 100644
--- a/assets/css/pages/home.scss
+++ b/assets/css/pages/home.scss
@@ -1,9 +1,6 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../modules/transparent-navbar.scss";
 
-/**
-* Home page jumbotron
-*/
 .jumbotron {
   background: -webkit-gradient(linear, left top, left bottom, from($nextcloud-blue), color-stop(100%, #3e9ed8), to(#d8d8d8));
   background: linear-gradient(to bottom, $nextcloud-blue, #3e9ed8 100%, #d8d8d8);
@@ -62,7 +59,7 @@
   }
 
   .topbanner {
-    background: url(../img/home/top-banner@2x.png) bottom 0 right 0/contain no-repeat;
+    background: url(../../img/home/top-banner@2x.png) bottom 0 right 0/contain no-repeat;
     width: auto;
     height: auto;
     max-width: 55vw;
@@ -78,12 +75,12 @@
             transform: translateY(50px);
 
     @media (max-width: $break-small) {
-      background-image: url("../img/home/top-banner@2x_mobile.png");
+      background-image: url("../../img/home/top-banner@2x_mobile.png");
       padding-top: 100%;
     }
 
     @media (min-width: $break-small) and (max-width: $break-big) {
-      background-image: url("../img/home/top-banner@2x_mobile.png");
+      background-image: url("../../img/home/top-banner@2x_mobile.png");
       padding-top: 55%;
     }
   }
@@ -164,32 +161,95 @@
           line-height: 22px;
           margin: 10px 10px;
         }
+      }
 
-        &:after {
-          position: absolute;
-          display: inline-block;
-          content: ' ';
-          background-image: url('../img/next.svg');
-          background-size: 12px 12px;
-          height: 12px;
-          width: 12px;
-          top: 10px;
-          margin-left: 5px;
-          -webkit-transition: all 0.3s ease;
-          transition: all 0.3s ease;
-
-          @media (max-width: $break-small) {
-            position: relative;
-            top: 2px;
-          }
+      svg {
+        display: inline-block;
+        height: 12px;
+        width: 12px;
+        top: 10px;
+        transform: translateX(-10px);
+        -webkit-transition: all 0.3s ease;
+        transition: all 0.3s ease;
+
+        g {
+          fill: #fff;
         }
 
-        &:hover {
-          &:after {
-            margin-left: 10px;
-          }
+        @media (max-width: $break-small) {
+          position: relative;
+          top: 2px;
         }
       }
+
+      &:hover {
+        svg {
+          transform: translateX(0px);
+        }
+      }
+    }
+  }
+}
+
+#why-nextcloud {
+  .highlights {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+    margin: -16px 0 0 -16px;
+    padding: 0;
+    list-style: none;
+  }
+
+  @media (max-width: 1024px) {
+    .highlights {
+      display: block;
+      text-align: center;
+      margin: 0 10px 0 10px;
+    }
+  }
+
+  .highlights_align {
+    padding-top: 100px;
+    flex-basis: 33.33333%;
+    max-width: 33.33333%;
+    padding-left: 64px;
+    &:first-child {
+      padding-left: 0px;
+    }
+    svg {
+      margin-left: -10px;
+    }
+    .section--paragraph {
+      font-size: 16px;
+    }
+    h4 {
+      text-align: center;
+      margin-top: 20px;
+      margin-left: -20px;
+      margin-bottom: 0;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    .highlights_align {
+      flex-basis: auto;
+      max-width: none;
+      padding-left: 0;
+      padding-top: 50px;
+    }
+  }
+
+  @media (max-width: 1200px) {
+    .highlights_align svg {
+      margin-left: 0;
+    }
+  }
+
+  @media (max-width: 1200px) {
+    .highlights_align h4 {
+      margin-left: 0;
     }
   }
 }
@@ -276,10 +336,10 @@
   padding-bottom: 50px;
   padding-left: 0;
   padding-right: 0;
-  background-image: url('../img/home/perfect-for-home-and-business.jpg');
+  background-image: url('../../img/home/perfect-for-home-and-business.jpg');
   background-size: cover;
   @media (max-width: $break-small) {
-    background-image: url('../img/home/perfect-for-home-and-business-mobile.jpg');
+    background-image: url('../../img/home/perfect-for-home-and-business-mobile.jpg');
   }
 
 
@@ -297,7 +357,7 @@
       width: 300px;
 
       .icon-arrow {
-        background: url(../img/arrow_right.svg) center/contain no-repeat;
+        background: url(../../img/arrow_right.svg) center/contain no-repeat;
         position: absolute;
         width: 20px;
         height: 100%;
@@ -448,7 +508,7 @@
     padding-bottom: 120px;
 
     &:before {
-      background: url(../img/home/pattern.svg) bottom 0 right 0/contain no-repeat;
+      background: url(../../img/home/pattern.svg) bottom 0 right 0/contain no-repeat;
       height: 90vh;
       width: 2000px;
       position: absolute;
diff --git a/assets/css/pages/jobs.scss b/assets/css/pages/jobs.scss
index 7e42d369..26392d2b 100644
--- a/assets/css/pages/jobs.scss
+++ b/assets/css/pages/jobs.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .jobs-background {
   background: url("../img/headers/team.jpg") no-repeat center;
diff --git a/assets/css/pages/migration.scss b/assets/css/pages/migration.scss
index 6c19fe1d..d1173971 100644
--- a/assets/css/pages/migration.scss
+++ b/assets/css/pages/migration.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 
 /**
@@ -11,7 +11,7 @@
   background-size: cover;
 
   @media (max-width: $navbar-breaksize) {
-	min-height: 1050px !important; 
+	min-height: 1050px !important;
 	max-height: 1200px !important;
   }
 	.topheader {
@@ -19,7 +19,7 @@
 		top: 20% !important;
 		}
 	}
-	
+
   .topquote {
     position: absolute;
     top: 55%;
@@ -48,11 +48,11 @@
 		height: 100%;
 		min-height: 300px;
 	}
-	
+
 	.carousel-control.left {
 		background-image: none;
 		background: transparent;
-		
+
 		@media (max-width: $break-small) {
 			display: none;
 		}
@@ -60,7 +60,7 @@
 	.carousel-control.right {
 		background-image: none;
 		background: transparent;
-		
+
 		@media (max-width: $break-small) {
 			display: none;
 		}
diff --git a/assets/css/pages/monitoring.scss b/assets/css/pages/monitoring.scss
index 30cf7a88..123a108d 100644
--- a/assets/css/pages/monitoring.scss
+++ b/assets/css/pages/monitoring.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .monitoring-background {
   background: url("../img/headers/monitoring.jpg") no-repeat;
diff --git a/assets/css/pages/order.scss b/assets/css/pages/order.scss
index 0a115e4a..22dc9d64 100644
--- a/assets/css/pages/order.scss
+++ b/assets/css/pages/order.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .buy-background {
   background-image: url("../img/enterprise/enterprise.jpg");
diff --git a/assets/css/pages/outlook.scss b/assets/css/pages/outlook.scss
index 67d62ce1..84b57b06 100644
--- a/assets/css/pages/outlook.scss
+++ b/assets/css/pages/outlook.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 /* gradient behind nav */
 
@@ -65,6 +65,3 @@
 		color: white;
 	}
 }
-
-
-
diff --git a/assets/css/pages/partners.scss b/assets/css/pages/partners.scss
index 5111ebe8..18557f5a 100644
--- a/assets/css/pages/partners.scss
+++ b/assets/css/pages/partners.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .partners-background {
   background: url("../img/headers/partners.jpg") no-repeat;
@@ -45,7 +45,7 @@ footer.page-footer {
 	.partnertext {
 		text-align: justify;
 	}
-		
+
 }
 /*
 .calltoaction {
@@ -66,4 +66,3 @@ footer.page-footer {
 		color: white;
 	}
 }*/
-
diff --git a/assets/css/pages/pricing.scss b/assets/css/pages/pricing.scss
index 0b6f2383..9935d93b 100644
--- a/assets/css/pages/pricing.scss
+++ b/assets/css/pages/pricing.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 /**
  * Background
@@ -136,7 +136,7 @@
 	font-stretch: normal;
 	line-height: 2.5;
 	color: #b1b1b1;
-	
+
 	a {
 	color: #b1b1b1;
 	text-decoration: none;
@@ -187,7 +187,7 @@
 		text-indent: -20px;
 	}
 
-	
+
 	/* Tooltips */
 
 	/* Tooltip text */
@@ -200,7 +200,7 @@
 		padding: 5px 0;
 		line-height: 1.4;
 	border-radius: 6px;
-	
+
 		/* Position the tooltip text */
 		position: absolute;
 		z-index: 10;
@@ -241,7 +241,7 @@
 .section--options {
 	margin-top: 133px;
 	margin-bottom: 30px;
-	
+
 	.container-widest {
 		.introduction {
 			padding-top: 50px;
@@ -254,11 +254,11 @@
 		margin-left: 5px;
 		margin-right: 5px;
 		}
-		
+
 		.col-md-4 {
 			padding: 20px;
 		}
-		
+
 		.featureblock {
 			margin-top: 50px;
 /* 			margin-bottom: 50px; */
@@ -270,11 +270,11 @@
 				border-radius: 8px;
 				transition: all 0.5s ease;
 			}
-			
+
 			.section--paragraph__tittle {
 				text-align: center;
 			}
-			
+
 			i[class*='fa-'] {
 				font-size: 140px;
 				display: block;
@@ -282,7 +282,7 @@
 				text-align: center;
 				padding-bottom: 50px;
 			}
-			
+
 			.img-responsive {
 				margin-left: auto;
 				margin-right: auto;
@@ -452,7 +452,7 @@
     padding: 15px;
 	border-radius: 6px;
 }
- 
+
     #tooltip:after /* triangle decoration */
     {
         width: 0;
@@ -466,7 +466,7 @@
         bottom: -10px;
         margin-left: -10px;
     }
- 
+
         #tooltip.top:after
         {
             border-top-color: transparent;
@@ -474,13 +474,13 @@
             top: -20px;
             bottom: auto;
         }
- 
+
         #tooltip.left:after
         {
             left: 10px;
             margin: 0;
         }
- 
+
         #tooltip.right:after
         {
             right: 10px;
diff --git a/assets/css/pages/secure.scss b/assets/css/pages/secure.scss
index ab0d68b3..630ec144 100644
--- a/assets/css/pages/secure.scss
+++ b/assets/css/pages/secure.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 
 /**
diff --git a/assets/css/pages/securedrop.scss b/assets/css/pages/securedrop.scss
index fc33f18b..0061f27f 100644
--- a/assets/css/pages/securedrop.scss
+++ b/assets/css/pages/securedrop.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .securedrop-background {
   background: url("../img/headers/securedrop.jpg") no-repeat;
diff --git a/assets/css/pages/sharing.scss b/assets/css/pages/sharing.scss
index 3ddf187b..1b2f166a 100644
--- a/assets/css/pages/sharing.scss
+++ b/assets/css/pages/sharing.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .sharing-background {
   background: url("../img/headers/sharing.jpg") no-repeat;
diff --git a/assets/css/pages/storage.scss b/assets/css/pages/storage.scss
index a922e1f5..becf70aa 100644
--- a/assets/css/pages/storage.scss
+++ b/assets/css/pages/storage.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .storage-background {
   background: url("../img/headers/storage.jpg") no-repeat;
@@ -39,4 +39,3 @@ footer {
 .section--whitepaper {
 
 }
-
diff --git a/assets/css/pages/support.scss b/assets/css/pages/support.scss
index 8e9f88c4..8f265295 100644
--- a/assets/css/pages/support.scss
+++ b/assets/css/pages/support.scss
@@ -1,11 +1,8 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .support-background {
   background: url("../img/headers/support.jpg") no-repeat;
   background-position: center;
   background-size: cover;
 }
-
-
-
diff --git a/assets/css/pages/team.scss b/assets/css/pages/team.scss
index 90b790dd..100d59ee 100644
--- a/assets/css/pages/team.scss
+++ b/assets/css/pages/team.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .team-background {
   background: url("../img/headers/enterprise-team.jpg") no-repeat;
@@ -29,8 +29,8 @@ footer.page-footer {
 			text-align: left !important;
 		}
 	}
-	
-	
+
+
 	.teamgroup {
 		padding-top:100px;
 		width: 95%;
@@ -74,11 +74,11 @@ footer.page-footer {
 	h4 {
 		color: #9c9c9c;
 	}
-	
+
 	.teamexpertise {
 		margin: 2px;
 		font-size: 14px;
-	
+
 	}
 
 	.teamlocation {
@@ -161,4 +161,3 @@ footer.page-footer {
 		color: white;
 	}
 }
-
diff --git a/assets/css/pages/webrtc.scss b/assets/css/pages/webrtc.scss
index 2ae38e06..2101a49c 100644
--- a/assets/css/pages/webrtc.scss
+++ b/assets/css/pages/webrtc.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .storage-background {
   background: url("../img/headers/webrtc.jpg") no-repeat;
diff --git a/assets/css/pages/workflow.scss b/assets/css/pages/workflow.scss
index 044b7463..ebf583e0 100644
--- a/assets/css/pages/workflow.scss
+++ b/assets/css/pages/workflow.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "transparent-navbar.scss";
+@import "../variables.scss";
+@import "../transparent-navbar.scss";
 
 .workflow-background {
   background: url("../img/headers/workflow.jpg") no-repeat;
@@ -39,4 +39,3 @@ section {
 footer {
     margin-top: 50px;
 }
-
diff --git a/assets/img/next.svg b/assets/img/next.svg
index 6fcdf0dc..9a7ba4c9 100644
--- a/assets/img/next.svg
+++ b/assets/img/next.svg
@@ -1,75 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   version="1.1"
-   id="Capa_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 240.823 240.823"
-   style="enable-background:new 0 0 240.823 240.823;"
-   xml:space="preserve"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="next.svg"><metadata
-     id="metadata52"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
-     id="defs50" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="640"
-     inkscape:window-height="480"
-     id="namedview48"
-     showgrid="false"
-     inkscape:zoom="0.97997285"
-     inkscape:cx="120.4115"
-     inkscape:cy="120.4115"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="Capa_1" /><g
-     id="g3"
-     style="fill:#ffffff"><path
-       id="Chevron_Right_1_"
-       d="M183.189,111.816L74.892,3.555c-4.752-4.74-12.451-4.74-17.215,0c-4.752,4.74-4.752,12.439,0,17.179   l99.707,99.671l-99.695,99.671c-4.752,4.74-4.752,12.439,0,17.191c4.752,4.74,12.463,4.74,17.215,0l108.297-108.261   C187.881,124.315,187.881,116.495,183.189,111.816z"
-       style="fill:#ffffff" /><g
-       id="g6"
-       style="fill:#ffffff" /><g
-       id="g8"
-       style="fill:#ffffff" /><g
-       id="g10"
-       style="fill:#ffffff" /><g
-       id="g12"
-       style="fill:#ffffff" /><g
-       id="g14"
-       style="fill:#ffffff" /><g
-       id="g16"
-       style="fill:#ffffff" /></g><g
-     id="g18" /><g
-     id="g20" /><g
-     id="g22" /><g
-     id="g24" /><g
-     id="g26" /><g
-     id="g28" /><g
-     id="g30" /><g
-     id="g32" /><g
-     id="g34" /><g
-     id="g36" /><g
-     id="g38" /><g
-     id="g40" /><g
-     id="g42" /><g
-     id="g44" /><g
-     id="g46" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240.823 240.823"><g><path d="M183.189 111.816L74.892 3.555c-4.752-4.74-12.451-4.74-17.215 0-4.752 4.74-4.752 12.439 0 17.179l99.707 99.671-99.695 99.671c-4.752 4.74-4.752 12.439 0 17.191 4.752 4.74 12.463 4.74 17.215 0l108.297-108.261c4.68-4.691 4.68-12.511-.012-17.19z"/></g></svg>
diff --git a/assets/js/main.js b/assets/js/main.js
index d4c4520a..f2fd9230 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,4 +1,4 @@
-define(['jquery', 'lodash', 'enquire', 'TweenMax'],
+define(['jquery', 'lodash', 'enquire', 'TweenMax', 'velocity'],
 	function ($, _, enquire, TweenMax) {
 		$(document).ready(function() {
 			'use strict';