diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4d883d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+.idea
+/bourbon/*
+/.sass-cache/*
+*.DS_Store
+/nbproject/
diff --git a/config.rb b/config.rb
new file mode 100644
index 0000000..0b22e7d
--- /dev/null
+++ b/config.rb
@@ -0,0 +1,11 @@
+# Require any additional compass plugins here.
+add_import_path "bourbon"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "scss"
+images_dir = "img"
+javascripts_dir = "js"
+
+line_comments = false
\ No newline at end of file
diff --git a/css/demo.css b/css/demo.css
new file mode 100644
index 0000000..fddd609
--- /dev/null
+++ b/css/demo.css
@@ -0,0 +1,72 @@
+/* -------------------------------- 
+
+Primary style
+
+-------------------------------- */
+html * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-size: 100%;
+  font-family: "Droid Serif", serif;
+  color: #7f8c97;
+  background-color: #e9f0f5;
+}
+
+a {
+  color: #acb7c0;
+  text-decoration: none;
+  font-family: "Open Sans", sans-serif;
+}
+
+img {
+  max-width: 100%;
+}
+
+h1, h2 {
+  font-family: "Open Sans", sans-serif;
+  font-weight: bold;
+}
+
+/* --------------------------------
+
+Main components
+
+-------------------------------- */
+header {
+  height: 200px;
+  line-height: 200px;
+  text-align: center;
+  background: #303e49;
+}
+header h1 {
+  color: #ffffff;
+  font-size: 18px;
+  font-size: 1.125rem;
+}
+@media only screen and (min-width: 1170px) {
+  header {
+    height: 300px;
+    line-height: 300px;
+  }
+  header h1 {
+    font-size: 24px;
+    font-size: 1.5rem;
+  }
+}
+
+.cd-timeline-img.cd-picture {
+  background: #75ce66;
+}
+.cd-timeline-img.cd-movie {
+  background: #c03b44;
+}
+.cd-timeline-img.cd-location {
+  background: #f0ca45;
+}
+
+.cd-timeline-content {
+  background: #ffffff;
+}
diff --git a/css/style.css b/css/style.css
index 0527770..655dbf3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,40 +3,13 @@
 Primary style
 
 -------------------------------- */
-html * {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 *, *:after, *:before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
-body {
-  font-size: 100%;
-  font-family: "Droid Serif", serif;
-  color: #7f8c97;
-  background-color: #e9f0f5;
-}
-
-a {
-  color: #acb7c0;
-  text-decoration: none;
-  font-family: "Open Sans", sans-serif;
-}
-
-img {
-  max-width: 100%;
-}
-
-h1, h2 {
-  font-family: "Open Sans", sans-serif;
-  font-weight: bold;
-}
-
-/* -------------------------------- 
+/* --------------------------------
 
 Modules - reusable parts of our design
 
@@ -54,33 +27,11 @@ Modules - reusable parts of our design
   clear: both;
 }
 
-/* -------------------------------- 
+/* --------------------------------
 
-Main components 
+Main components
 
 -------------------------------- */
-header {
-  height: 200px;
-  line-height: 200px;
-  text-align: center;
-  background: #303e49;
-}
-header h1 {
-  color: white;
-  font-size: 18px;
-  font-size: 1.125rem;
-}
-@media only screen and (min-width: 1170px) {
-  header {
-    height: 300px;
-    line-height: 300px;
-  }
-  header h1 {
-    font-size: 24px;
-    font-size: 1.5rem;
-  }
-}
-
 #cd-timeline {
   position: relative;
   padding: 2em 0;
@@ -142,7 +93,8 @@ header h1 {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 4px #ffffff, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
+  background: #a3c0d5;
 }
 .cd-timeline-img img {
   display: block;
@@ -154,15 +106,6 @@ header h1 {
   margin-left: -12px;
   margin-top: -12px;
 }
-.cd-timeline-img.cd-picture {
-  background: #75ce66;
-}
-.cd-timeline-img.cd-movie {
-  background: #c03b44;
-}
-.cd-timeline-img.cd-location {
-  background: #f0ca45;
-}
 @media only screen and (min-width: 1170px) {
   .cd-timeline-img {
     width: 60px;
@@ -189,12 +132,10 @@ header h1 {
     opacity: 0;
     -webkit-transform: scale(0.5);
   }
-
   60% {
     opacity: 1;
     -webkit-transform: scale(1.2);
   }
-
   100% {
     -webkit-transform: scale(1);
   }
@@ -204,12 +145,10 @@ header h1 {
     opacity: 0;
     -moz-transform: scale(0.5);
   }
-
   60% {
     opacity: 1;
     -moz-transform: scale(1.2);
   }
-
   100% {
     -moz-transform: scale(1);
   }
@@ -223,7 +162,6 @@ header h1 {
     -o-transform: scale(0.5);
     transform: scale(0.5);
   }
-
   60% {
     opacity: 1;
     -webkit-transform: scale(1.2);
@@ -232,7 +170,6 @@ header h1 {
     -o-transform: scale(1.2);
     transform: scale(1.2);
   }
-
   100% {
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
@@ -244,7 +181,7 @@ header h1 {
 .cd-timeline-content {
   position: relative;
   margin-left: 60px;
-  background: white;
+  background: #fbfcfd;
   border-radius: 0.25em;
   padding: 1em;
   box-shadow: 0 3px 0 #d7e4ed;
@@ -272,7 +209,7 @@ header h1 {
   float: right;
   padding: .8em 1em;
   background: #acb7c0;
-  color: white;
+  color: #ffffff;
   border-radius: 0.25em;
 }
 .no-touch .cd-timeline-content .cd-read-more:hover {
@@ -291,7 +228,7 @@ header h1 {
   height: 0;
   width: 0;
   border: 7px solid transparent;
-  border-right: 7px solid white;
+  border-right: 7px solid #ffffff;
 }
 @media only screen and (min-width: 768px) {
   .cd-timeline-content h2 {
@@ -317,7 +254,7 @@ header h1 {
     top: 24px;
     left: 100%;
     border-color: transparent;
-    border-left-color: white;
+    border-left-color: #ffffff;
   }
   .cd-timeline-content .cd-read-more {
     float: left;
@@ -338,7 +275,7 @@ header h1 {
     left: auto;
     right: 100%;
     border-color: transparent;
-    border-right-color: white;
+    border-right-color: #ffffff;
   }
   .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
     float: right;
@@ -372,12 +309,10 @@ header h1 {
     opacity: 0;
     -webkit-transform: translateX(-100px);
   }
-
   60% {
     opacity: 1;
     -webkit-transform: translateX(20px);
   }
-
   100% {
     -webkit-transform: translateX(0);
   }
@@ -387,12 +322,10 @@ header h1 {
     opacity: 0;
     -moz-transform: translateX(-100px);
   }
-
   60% {
     opacity: 1;
     -moz-transform: translateX(20px);
   }
-
   100% {
     -moz-transform: translateX(0);
   }
@@ -406,7 +339,6 @@ header h1 {
     -o-transform: translateX(-100px);
     transform: translateX(-100px);
   }
-
   60% {
     opacity: 1;
     -webkit-transform: translateX(20px);
@@ -415,7 +347,6 @@ header h1 {
     -o-transform: translateX(20px);
     transform: translateX(20px);
   }
-
   100% {
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
@@ -429,12 +360,10 @@ header h1 {
     opacity: 0;
     -webkit-transform: translateX(100px);
   }
-
   60% {
     opacity: 1;
     -webkit-transform: translateX(-20px);
   }
-
   100% {
     -webkit-transform: translateX(0);
   }
@@ -444,12 +373,10 @@ header h1 {
     opacity: 0;
     -moz-transform: translateX(100px);
   }
-
   60% {
     opacity: 1;
     -moz-transform: translateX(-20px);
   }
-
   100% {
     -moz-transform: translateX(0);
   }
@@ -463,7 +390,6 @@ header h1 {
     -o-transform: translateX(100px);
     transform: translateX(100px);
   }
-
   60% {
     opacity: 1;
     -webkit-transform: translateX(-20px);
@@ -472,7 +398,6 @@ header h1 {
     -o-transform: translateX(-20px);
     transform: translateX(-20px);
   }
-
   100% {
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
diff --git a/index.html b/index.html
index c8e9fcb..077f71a 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
 
 	<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
 	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
+	<link rel="stylesheet" href="css/demo.css"> <!-- Demo page style -->
 	<script src="js/modernizr.js"></script> <!-- Modernizr -->
   	
 	<title>Responsive Vertical Timeline</title>
diff --git a/scss/demo.scss b/scss/demo.scss
new file mode 100644
index 0000000..a0fe35d
--- /dev/null
+++ b/scss/demo.scss
@@ -0,0 +1,87 @@
+@import 'bourbon'; // http://bourbon.io/
+
+@import '../partials/variables'; // colors, fonts etc...
+
+@import '../partials/mixins'; // custom mixins
+
+@import '../partials/layout'; // responsive grid and media queries
+
+/* -------------------------------- 
+
+Primary style
+
+-------------------------------- */
+
+html * {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	font: {
+		size: 100%;
+		family: $primary-font; // variables inside partials > _variables.scss
+	}
+	color: $main-text;
+	background-color: $background;
+}
+
+a {
+	color: $link;
+	text-decoration: none;
+	font-family: $secondary-font;
+}
+
+img {
+	max-width: 100%;
+}
+
+h1, h2 {
+	font-family: $secondary-font;
+	font-weight: bold;
+}
+
+/* --------------------------------
+
+Main components
+
+-------------------------------- */
+
+header {
+	height: 200px;
+	line-height: 200px;
+	text-align: center;
+	background: $color-1;
+
+	h1 {
+		color: $color-3;
+		@include font-size(18px);
+	}
+
+	@include MQ(L) {
+		height: 300px;
+		line-height: 300px;
+
+		h1 {
+			@include font-size(24px);
+		}
+	}
+}
+
+.cd-timeline-img {
+  &.cd-picture {
+    background: $color-4;
+  }
+
+  &.cd-movie {
+    background: $color-2;
+  }
+
+  &.cd-location {
+    background: $color-5;
+  }
+}
+
+.cd-timeline-content {
+  background: $color-3;
+}
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
index c861e2c..59e0d7a 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -12,40 +12,11 @@ Primary style
 
 -------------------------------- */
 
-html * {
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
 *, *:after, *:before {
 	@include box-sizing(border-box);
 }
 
-body {
-	font: {
-		size: 100%;
-		family: $primary-font; // variables inside partials > _variables.scss
-	}
-	color: $main-text;
-	background-color: $background;
-}
-
-a {
-	color: $link;
-	text-decoration: none;
-	font-family: $secondary-font;
-}
-
-img {
-	max-width: 100%;
-}
-
-h1, h2 {
-	font-family: $secondary-font;
-	font-weight: bold;
-}
-
-/* -------------------------------- 
+/* --------------------------------
 
 Modules - reusable parts of our design
 
@@ -63,33 +34,12 @@ Modules - reusable parts of our design
 	}
 }
 
-/* -------------------------------- 
+/* --------------------------------
 
-Main components 
+Main components
 
 -------------------------------- */
 
-header {
-	height: 200px;
-	line-height: 200px;
-	text-align: center;
-	background: $color-1;
-
-	h1 {
-		color: $color-3;
-		@include font-size(18px);
-	}
-
-	@include MQ(L) {
-		height: 300px;
-		line-height: 300px;
-
-		h1 {
-			@include font-size(24px);
-		}
-	}
-}
-
 #cd-timeline {
 	position: relative;
 	padding: 2em 0;
@@ -155,7 +105,8 @@ header {
 	width: 40px;
 	height: 40px;
 	border-radius: 50%;
-	box-shadow: 0 0 0 4px $color-3, inset 0 2px 0 rgba(#000, .08), 0 3px 0 4px rgba(#000, .05) ;
+	box-shadow: 0 0 0 4px $color-3, inset 0 2px 0 rgba(#000, .08), 0 3px 0 4px rgba(#000, .05);
+    background: darken($background, 20%);
 
 	img {
 		display: block;
@@ -168,18 +119,6 @@ header {
 		margin-top: -12px;
 	}
 
-	&.cd-picture {
-		background: $color-4;
-	}
-
-	&.cd-movie {
-		background: $color-2;
-	}
-
-	&.cd-location {
-		background: $color-5;
-	}
-
 	@include MQ(L) {
 		width: 60px;
 		height: 60px;
@@ -220,7 +159,7 @@ header {
 .cd-timeline-content {
 	position: relative;
 	margin-left: 60px;
-	background: $color-3;
+	background: lighten($background, 5%);
 	@include border-radius;
 	padding: 1em;
 	box-shadow: 0 3px 0 darken($background, 5%);