5 files changed, 80 insertions, 57 deletions

diff --git a/assets/css/custom.scss b/assets/css/custom.scss
index 6d9e6577..37ed125a 100644
--- a/assets/css/custom.scss
+++ b/assets/css/custom.scss
@@ -18,12 +18,13 @@
 // Importing modules
 @import 'variables';
 @import 'modules/normalize';
+@import 'modules/typography';
 @import 'modules/no-js';
 @import 'modules/alerts';
 @import 'modules/header';
 @import 'modules/slideshow';
 @import 'modules/secondmenu';
-@import 'modules/typography';
+@import 'modules/hero';
 
 
 // To remove everything above and split in other files
@@ -880,37 +881,6 @@ blockquote {
 
 }
 
-/* typical background images (hero section) like enterprise, security */
-.background {
-  padding-bottom: 0;
-  padding-top: 0;
-  background-repeat: no-repeat;
-  background-size: cover;
-  border-radius: 0 !important;
-  height: 70vh;
-  min-height: 600px;
-  max-height: 800px;
-  position: relative;
-  opacity: 0; }
-  .background h1 {
-    padding-top: 0;
-    color: white; }
-  .background h2 {
-    color: white;
-    font-size: 20px;
-    line-height: 1.6;
-	text-shadow: 0px 0px 10px #333; }
-  .background .topheader {
-    position: absolute;
-    top: 30%;
-    margin: 0;
-    padding: 0;
-    max-width: 600px;
-    opacity: 0; }
-    @media (max-width: 991px) {
-      .background .topheader {
-        padding-left: 5%; } }
-
 .btn-primary {
   background-color: $nextcloud-blue;
   font-size: 18px;
diff --git a/assets/css/modules/header.scss b/assets/css/modules/header.scss
index 7d8f252e..1accdf63 100644
--- a/assets/css/modules/header.scss
+++ b/assets/css/modules/header.scss
@@ -400,6 +400,8 @@ nav a {
                 z-index: 8;
                 display: block;
                 margin-right: 0;
+                border: none;
+                float: right;
 
                 &:hover {
                     transform: scale(1.1);
diff --git a/assets/css/modules/hero.scss b/assets/css/modules/hero.scss
new file mode 100644
index 00000000..b2ca70dc
--- /dev/null
+++ b/assets/css/modules/hero.scss
@@ -0,0 +1,37 @@
+.background {
+  padding-bottom: 0;
+  padding-top: 0;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 0 !important;
+  height: 70vh;
+  min-height: 600px;
+  max-height: 800px;
+  position: relative;
+  opacity: 0;
+
+  h1 {
+    padding-top: 0;
+    color: white;
+    opacity: 0;
+    transform: translateY(50px);
+  }
+
+  h2 {
+    color: white;
+    font-size: 20px;
+    line-height: 1.6;
+    text-shadow: 0px 0px 10px #333;
+    opacity: 0;
+    transform: translateY(50px);
+  }
+
+  .topheader {
+    position: absolute;
+    top: 30%;
+    margin: 0;
+    padding: 0;
+    max-width: 600px;
+    opacity: 0;
+  }
+}
diff --git a/assets/css/pages/features.scss b/assets/css/pages/features.scss
index 02b888ac..cd540604 100644
--- a/assets/css/pages/features.scss
+++ b/assets/css/pages/features.scss
@@ -1,11 +1,11 @@
-@import "../variables.scss";
-@import "../modules/secondmenu";
-@import "../transparent-navbar.scss";
+@import '../variables';
+@import '../modules/secondmenu';
+@import '../modules/transparent-navbar';
 
 .features-background {
-  background: url("../img/headers/yourcloud.jpg") no-repeat;
-  background-position: center;
-  background-size: cover;
+	background: url('../../img/headers/yourcloud.jpg') no-repeat;
+	background-position: center;
+	background-size: cover;
 }
 
 @media (max-width $break-small) {
@@ -14,9 +14,23 @@
 	}
 }
 
+.img-responsive {
+	@media (min-width: $break-big) {
+		margin-bottom: 200px;
+	}
+
+	@media (min-width: $very-wide) {
+		margin-bottom: 100px;
+	}
+}
+
+.image--floated{
+	float: right;
+}
+
 .acess__anywhere {
 	width: 400px;
-    margin: 0 auto;
+	margin: 0 auto;
 }
 
 .section--files {
@@ -43,18 +57,21 @@ section {
 	.container-widest .row {
 		margin-left: 5px;
 		margin-right: 5px;
+	}
+
+	.section--heading-1 {
+		padding-bottom: 60px;
+	}
+
+	i[class*='fa-'] {
+		font-size: 60px;
+		display: block;
+		color: #0082c9;
+		text-align: center;
+		padding-top: 20%;
+	}
 }
-    .section--heading-1 {
-        padding-bottom: 60px;
-    }
-    i[class*='fa-'] {
-    font-size: 60px;
-    display: block;
-    color: #0082c9;
-    text-align: center;
-    padding-top: 20%;
-    }
-}
+
 .calltoaction {
-    padding-bottom: 100px;
+	padding-bottom: 100px;
 }
diff --git a/assets/css/pages/secure.scss b/assets/css/pages/secure.scss
index 630ec144..a36231d6 100644
--- a/assets/css/pages/secure.scss
+++ b/assets/css/pages/secure.scss
@@ -1,12 +1,9 @@
 @import "../variables.scss";
-@import "../transparent-navbar.scss";
+@import "../modules/transparent-navbar.scss";
 
 
-/**
-* Secure Page
-*/
 .security-background {
-    background-image: url("../img/security/security.jpg");
+    background-image: url("../../img/security/security.jpg");
     background-position: bottom 0 right 0;
 
     .topheader {
@@ -448,7 +445,7 @@ section {
         align-items: center;
 
         &__logo {
-            background: url("../img/security/ncc_logo.png") no-repeat center/contain;
+            background: url("../../img/security/ncc_logo.png") no-repeat center/contain;
             width: 46px;
             height: 46px;
         }