[Update] Globe: Integrate into home page

_sass/_participate.scss

@@ -1,8 +0,0 @@
-.globecontainer {
-	position: absolute;
-	z-index: -1;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}

index.html

@@ -262,24 +262,37 @@ description: pages.home.description
 	<!--
 		FASTEST GROWING NETWORK
 	-->
-	<section>
+	<section class="section--masternode">
 		<div class="content">
 			<div class="row">
-				<div class="col-sm-6">
+				<div class="col-sm-6 globe-text-container">
 					<h2>{% t pages.home.network-growth-heading %}</h2>
 
 					{% tmd pages.home.network-growth-text %}
 
 					<a href="{{ basenav }}/currency" class="btn-blue">{% t pages.home.network-growth-btn %}</a>
 				</div>
-				<!--div class="col-sm-6 home-network-graphic">
-					<img src="/assets/img/home/graph.png" alt="{% t pages.home.network-growth-heading %}">
-				</div-->
-				<div class="col-sm-6 home-network-graphic-live">
-					<img src="http://178.254.23.111/~pub/masternode_count.png" alt="{% t pages.home.network-growth-heading %}">
-				</div>
 			</div>
 		</div>
+		<div class="globecontainer" data-js-masternode-globe></div>
+		<script type="text/javascript" src="/assets/js/dash-masternode-globe.min.js"></script>
+		<script type="text/javascript">
+			document.addEventListener("DOMContentLoaded", function() {
+				if (!DashGlobe.Detector.webgl) {
+					var el = document.querySelectorAll('[data-js-masternode-globe]')[0];
+					el.className = el.className + ' no-webgl';
+				} else {
+					window.globe = new DashGlobe({
+						container: document.querySelectorAll('[data-js-masternode-globe]')[0],
+						imgDir: '/assets/img/',
+						url: '/assets/mn_locations.tsv',
+						cameraOffset: { x: 0, y: 170, z: 0 },
+						initialZoom: 450,
+						barColor: 0xddddddff
+					});
+				}
+			});
+		</script>
 	</section>
 
 	<!--

src/scss/_buttons.scss

@@ -54,6 +54,14 @@
 	&:hover {
 	}
 }
+.btn-blue-dark {
+	@extend .btn;
+	background-color: $color-blue-dark;
+	color: $color-white !important;
+	text-decoration: none;
+	&:hover {
+	}
+}
 
 .btn-blue-solid {
 	@extend .btn;

src/scss/_masternode-globe.scss

@@ -0,0 +1,17 @@
+.globecontainer {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	canvas {
+		position: absolute;
+		top: 0;
+		left: 0;
+		@include mq($from: 1300px) {
+			left: 30%;
+			opacity: 1;
+		}
+	}
+}

src/scss/_section.scss

@@ -7,7 +7,7 @@ $m: 'section';
 	&__content {
 		width: 100%;
 		max-width: $content-max-width;
-    	padding: 0 20px;
+		padding: 0 20px;
 		margin: 0 auto;
 	}
 
@@ -62,14 +62,26 @@ $m: 'section';
 		}
 	}
 
+	&--cta {
+		text-align: center;
+	}
+
 	&--gray-light-bg {
 		padding-top: 50px;
 		margin-bottom: 50px;
 		background: $color-gray-light;
 	}
 
-	&--cta {
+	&--masternode {
-		text-align: center;
+		background-color: #000 !important; // DEV:
+		color: #fff;
+		padding: 130px 0 !important; // DEV
+		.globe-text-container {
+			background: rgba(0,0,0,0.4);
+			padding: 20px;
+			border-radius: 2px;
+			box-shadow: 1px 1px 65px rgba(0,0,0,0.7);
+		}
 	}
 
 	&--home-cta {

src/scss/main.scss

@@ -37,6 +37,7 @@
 
 //styles for specific pages
 @import "pages/home";
+@import "masternode-globe";
 @import "interior";
 @import "post";
 @import "member";