From 8b91a903f3ce41f9a0de6000081f6ffcdb047f7d Mon Sep 17 00:00:00 2001
From: Jason Costello <hello.costello@gmail.com>
Date: Fri, 7 Oct 2016 12:06:42 -0700
Subject: [PATCH] skew sections

---
 website/source/assets/stylesheets/_home.scss | 50 +++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss
index 39cdb0562..4d7ebe3bd 100755
--- a/website/source/assets/stylesheets/_home.scss
+++ b/website/source/assets/stylesheets/_home.scss
@@ -51,19 +51,19 @@ body.page-home {
 		color: $white;
 
 		>.container {
-			z-index: 21;
+			z-index: 91;
 		}
 
 		p {
 			display: inline-block;
 			float: left;
 			margin-right: 6%;
-			padding-top: 20px;
+			padding-top: 30px;
 		}
 
 		#customer-logos-bg{
 			@include skewY(-3deg);
-			z-index: 20;
+			z-index: 30;
 			background: $black;
 			background-size: 100%;
 		}
@@ -156,8 +156,10 @@ body.page-home {
 	}
 
 	#feature-overview{
+		position: relative;
 		padding: 120px 0;
 		border-bottom: 2px solid #E6E7E8;
+		z-index: 80;
 	}
 
 	.feature-card {
@@ -202,16 +204,18 @@ body.page-home {
 		padding: 180px 0 200px;
 		margin-top: -80px;
 
+
 		>.container {
-			z-index: 21;
+			z-index: 71;
 		}
 
 		#feature-write-bg{
 			border-top: 2px solid white;
 			border-bottom: 2px solid $purple;
-			background: image-url("feature-write-bg.svg") 85% 100% no-repeat;
+			background: $white image-url("feature-write-bg.svg") 85% bottom no-repeat;
 			background-size: 570px;
-			z-index: 20;
+			z-index: 70;
+			@include skewY(3deg);
 		}
 	}
 
@@ -220,11 +224,11 @@ body.page-home {
 		color: $white;
 		background-size: 80%;
 		position: relative;
-		padding: 180px 0 180px;
+		padding: 220px 0 180px;
 		margin-top: -80px;
 
 		>.container {
-			z-index: 21;
+			z-index: 61;
 			background: image-url("feature-plan-bg.svg") 0% 45% no-repeat;
 			background-size: 100%;
 		}
@@ -237,20 +241,20 @@ body.page-home {
 			background: $purple;
 			border-top: 2px solid white;
 			border-bottom: 2px solid $purple;
-			z-index: 20;
-			@include skewY(3deg);
+			z-index: 60;
+			@include skewY(-3deg);
 		}
 	}
 
 	#feature-create{
 		position: relative;
 		margin-top: -80px;
-		padding: 240px 0 300px;
+		padding: 240px 0 180px;
 
 		>.container{
 			background: image-url("feature-create-bg.svg") 95% 20% no-repeat;
 			background-size: 40%;
-			z-index: 21;
+			z-index: 51;
 		}
 
 		p.lead {
@@ -259,24 +263,24 @@ body.page-home {
 
 		#feature-create-bg{
 			@include skewY(3deg);
-			z-index: 20;
+			z-index: 50;
 		}
 
 	}
 
 	#demos{
 		position: relative;
-		padding: 180px 0 60px;
+		padding: 120px 0 60px;
 		margin-top: -80px;
 
 		>.container{
-			z-index: 31;
+			z-index: 41;
 		}
 
 		#demo-bg{
 			background-color: #E6E7E8;
-			@include skewY(-3deg);
-			z-index: 30;
+			@include skewY(3deg);
+			z-index: 40;
 		}
 
 		h2{
@@ -420,30 +424,30 @@ body.page-home {
 	#latest-announcement{
 		position: relative;
 		margin-top: -80px;
-		padding: 240px 0;
+		padding: 240px 0 160px;
 		color: $white;
 		text-align: center;
 
 		>.container {
-			z-index: 21;
+			z-index: 51;
 		}
 	}
 
 	#latest-announcement-bg{
-		@include skewY(3deg);
-		z-index: 20;
+		@include skewY(-3deg);
+		z-index: 30;
 		background: $purple image-url("latest-announce-bg.svg") bottom left no-repeat;
 		background-size: 100%;
 	}
 
 	#enterprise-intro {
 		position: relative;
-		padding: 180px 0;
+		padding: 220px 0 180px;
 		margin-top: -80px;
 		color: #fff;
 
 		>.container {
-			z-index: 21;
+			z-index: 31;
 		}
 
 		h2 {