Merge branch 'calculator' into tmp_2020calc

- Fix some missing alt attributes & {% trans %} tags

assets/js/calculator/carbon-calculator.js

@@ -0,0 +1,202 @@
+let arr = {
+	'btc': {
+		'kWh': 487.368757765725,
+		'tons': 0.41034833,
+		'gas': 38.7744
+	},
+	'eth': {
+		'kWh': 42.8633,
+		'tons': 0.02734399,
+		'gas': 2.38677
+	},
+	'pap': {
+		'kWh': 0.044,
+		'tons': 0.0000000000232,
+		'gas': 0.00350
+	},
+	'xrp': {
+		'kWh': 0.0079,
+		'tons': 0.000000000003688,
+		'gas': 0.00063
+	},
+	'vsa': {
+		'kWh': 0.0008,
+		'tons': 0.0000000000005,
+		'gas': 0.00006
+	},
+	'mst': {
+		'kWh': 0.0006,
+		'tons': 0.0000000000005,
+		'gas': 0.00005
+	},
+}
+
+function commarize() {
+  // Alter numbers larger than 1k
+  if (this >= 1e6) {
+    var units = ["Thousand", "Million", "Billion", "Trillion"];
+    
+    // Divide to get SI Unit engineering style numbers (1e3,1e6,1e9, etc)
+    let unit = Math.floor(((this).toFixed(0).length - 1) / 3) * 3
+    // Calculate the remainder
+    var num = (this / ('1e'+unit)).toFixed(2)
+    var unitname = units[Math.floor(unit / 3) - 1]
+    
+    // output number remainder + unitname
+    return num + ' ' + unitname
+  }
+  
+  // return formatted original number
+  return this.toLocaleString()
+}
+
+// Add method to prototype. this allows you to use this function on numbers and strings directly
+Number.prototype.commarize = commarize
+String.prototype.commarize = commarize
+
+let slider = document.getElementById( 'myRange' ),
+	txns = document.querySelectorAll( '.slider-amt' ),
+	dataTypes = document.querySelectorAll( '.d-output' ),
+	dataViz = document.querySelectorAll( '.viz-output' );
+
+
+// Update the current slider value (each time you drag the slider handle)
+
+function doCalculations( val ){
+
+	[].slice.call( dataTypes ).forEach( function( dataType ){
+
+		if ( dataType.classList.contains( 'active' ) ){
+
+			let data_type = dataType.getAttribute( 'data-type' ),
+				data_comp = dataType.getAttribute( 'data-comp' ),
+				total =  val * 1000000 * arr[ data_type ][ data_comp ],
+				num = document.getElementById( data_comp + '-' + data_type ),
+				// comp = the number of kWh Portugal used in 2019
+				kwhComp = ( total / 50340000000 ).toFixed( 2 );
+
+			if ( data_comp === 'tons' ) {
+				total = total * 1000000;
+			}
+
+			num.innerHTML = total.commarize();
+			num.style.transition = "all .2s ease-in-out";
+
+			if ( data_comp === 'kWh' && kwhComp > .02 ){
+				let dot = document.getElementById( data_comp + '-' + data_type + '-dot' );
+				dot.style.transition = "all .2s ease-in-out";
+				dot.style.transform = "scale(" + kwhComp * 100 + ")";
+				dot.style.webkitTransform = "scale(" + kwhComp * 100 + ")";
+    		dot.style.msTransform = "scale(" + kwhComp * 100 + ")";
+			}
+			
+		}
+	})
+}
+
+
+function cryptoSelected(){
+	gasCryptoAnimation( );
+	co2CryptoAnimation();
+}
+
+function cashSelected(){
+	gasCashAnimation();
+	co2CashAnimation();
+}
+
+function creditSelected(){
+	gasCreditAnimation();
+	co2CreditAnimation();
+}
+
+function changeDataType( type ){
+	
+
+	[].slice.call( dataTypes ).forEach( function( dataType ){
+		if ( dataType.classList.contains( type ) ){
+			let dType = type.substring(2);
+			dataType.classList.add( 'active' );
+			document.getElementById('gasAnimation').innerHTML = '';
+			document.getElementById('co2Animation').innerHTML = '';
+			
+			if ( dType === 'cash' ){
+				cashSelected();
+			} else if ( dType === 'credit' ){
+				creditSelected()
+			} else {
+				cryptoSelected();
+			}
+		} else {
+			dataType.classList.remove( 'active' );
+		}
+	});
+
+	doCalculations( slider.value );
+
+}
+
+$('.tab-link').on('click', function(e){
+	$( '#data-selector li' ).removeClass( 'active' );
+	$( this ).parent( 'li' ).addClass( 'active' );
+	
+	let type = $( this ).attr( 'href' ).slice(1);
+
+	changeDataType( type );
+})
+
+$( document ).ready( function(){
+ 	[].slice.call( txns ).forEach( function( txn ){
+		txn.innerHTML = slider.value;
+	})
+
+	slider.oninput = function() {
+		var val = this.value;	
+		[].slice.call( txns ).forEach( function( txn ){
+			txn.innerHTML = val;
+		})
+		doCalculations( val );
+	}
+
+	doCalculations( slider.value );
+	cryptoSelected();
+
+	$(window).on('load resize scroll', function() {
+		if ( $(window).width() < 993 ) {
+			let distance = $('#calculator-outputs').offset().top,
+	    	$window = $(window).scrollTop(),
+	    	data_toggle = $('#calculator-mobile-toggle'),
+	    	inputs = $('#calculator-inputs'),
+	    	inputs_offset = $( '#calculator-inputs-offset');
+
+			if ( distance < $window ){
+				data_toggle.addClass( 'show' ).removeClass( 'hide' );
+			} else {
+				inputs.removeClass( 'sticky' );
+				data_toggle.addClass( 'hide' ).removeClass( 'show' );
+				inputs_offset.removeClass( 'offset' );
+				$('#data-toggle').text('Change Inputs')
+			}
+		}
+	});
+
+	$('#calculator-mobile-toggle').on( 'click', function(e){
+		e.preventDefault();
+		console.log( "working");
+
+		let inputs = $('#calculator-inputs'),
+			inputs_offset = $( '#calculator-inputs-offset');
+
+		$( '#calculator-inputs' ).toggleClass( 'show' );
+
+		if ( inputs.hasClass( 'sticky' ) ) {
+			inputs.removeClass( 'sticky' );
+			inputs_offset.removeClass( 'offset' );
+			$( this ).text('Change Inputs');
+		} else {
+			inputs.addClass( 'sticky show' );
+			inputs_offset.addClass( 'offset' );
+			$( this ).text('Hide Inputs');
+		}
+	})
+});

dactyl-config.yml

@@ -166,7 +166,6 @@ pages:
 
 # "Learn" funnel ---------------------------------------------------------------
     -   name: Learn
-        # "Overview" page
         funnel: Learn
         template: template-landing-children.html
         html: learn.html
@@ -197,7 +196,7 @@ pages:
     -   name: History
         funnel: Learn
         category: History
-        template: template-learn-history.html # TODO: change as needed
+        template: template-learn-history.html
         html: history.html
         sidebar: disabled
         targets:
@@ -217,7 +216,7 @@ pages:
     -   name: Carbon Calculator
         funnel: Learn
         category: Carbon Calculator
-        template: template-calculator.html # TODO: change as needed
+        template: template-calculator.html
         html: carbon-calculator.html
         sidebar: disabled
         targets:

styles/_buttons.scss

@@ -130,3 +130,36 @@ a.button {
   content: "";
   padding: 0;
 }
+
+
+// NEW STYLING FROM REDESIGN
+.btn {
+  padding: 16px 24px;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.25;
+}
+.btn-clear {
+  color: $white;
+  border: 1px solid $white;
+}
+.btn-clear:hover {
+  background: transparent;
+  color: $primary;
+  border: 1px solid $primary;
+}
+.btn-black {
+  background: $black;
+  color: $white;
+  &:hover {
+    background: $black;
+  }
+}
+.btn-green-border {
+  color: $primary;
+  border: 1px solid $primary;
+}
+.btn-green-border:hover {
+  color: $primary;
+  border: 1px solid $primary;
+}

styles/_content.scss

@@ -23,7 +23,6 @@ h3 a:hover,
   text-decoration: underline;
 }
 
-
 .content h1 {
   margin-top: 32px;
   line-height: 1.2;
@@ -138,5 +137,25 @@ td:nth-child(1) {
   display: block;
   padding-top: 100%;
 }
-
+.card-wrapper {
+  width: 100%;
+}
+.card-b {
+  padding: 2rem;
+  background: rgba(34, 37, 43, 0.5);
+  backdrop-filter: blur(3px);
+  @media (max-width: 768px) { 
+    margin-left: 15px;
+    margin-right: 15px;
+  }
+}
+.section-marker {
+  position: absolute;
+  font-size: 0.875rem;
+  transform: rotate(90deg);
+  font-weight: normal;
+  top: calc(50% - 64px);
+  margin-left: -32px;
+  transform-origin: top left;
+}
 

styles/_font.scss

@@ -1,10 +1,10 @@
+$base-size: 1rem;
 // Font Settings ===============================================================
-
 body {
   // font-feature-settings: "liga", "kern";
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  font-size: 1rem;
+  font-size: $base-size;
   background: #000;
   background-color: #000;
   line-height: 1.5;
@@ -19,7 +19,6 @@ pre, code {
   font-variant-ligatures: none;
 }
 
-
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-weight: bold;
@@ -40,8 +39,9 @@ p {
 a:hover {
   text-decoration: none;
 }
+
 .fs-base {
-  font-size: 1rem;
+  font-size: $base-size;
 }
 .fs-5 {
   font-size: 1.25rem;
@@ -58,13 +58,38 @@ a:hover {
 .bold {
   font-weight: bold;
 }
+
+
+.text-largest {
+  font-size: 1.5rem;
+  font-weight: normal;
+}
 .text-large {
   font-size: 1.125rem;
 }
+.text-small {
+  font-size: 0.875rem;
+}
+.text-smaller {
+  font-size: 0.75rem;
+}
 .text-smallest {
   font-size: 0.625rem;
 }
 
+/* STYLIZED LINKS */
+.arrow-link:after {
+  content: url(../img/icon-green-arrow.svg);
+  width: 28px;
+  padding-left: 7px;
+  transition: all .2s ease-in-out;
+  display: inline-block;
+  text-decoration: none;
+}
+.arrow-link:hover:after {
+  padding-left: 14px;
+}
+
 /* Japanese language font override ------------------------------------------ */
 
 .lang-ja {

styles/_helpers.scss

@@ -20,6 +20,13 @@
 .w48 {
 	width: 48px;
 }
+.min-vh100 {
+	min-height: 100vh;
+}
+.vw100 {
+	width: 100vw;
+	min-width: 100%;
+}
 
 /* SPACING HELPERS */
 /* To create new margin classes, multiply by 4px */
@@ -118,9 +125,35 @@
 	padding-bottom: 12.5rem;
 	padding-top: 12.5rem;
 }
+.top-10 {
+	top: 2.5rem;
+}
+
+/*  TEXT HELPERS */
+.va-middle {
+	vertical-align: middle;
+}
 .ls-none {
 	list-style: none;
 }
 .no-wrap {
 	white-space: nowrap;
-}
+}
+.align-items-stretch {
+	align-items: stretch;
+}
+
+@media only screen and (max-width: 576px) {
+	.overflow-xs {
+		overflow: scroll;
+	}
+}
+
+/* COLOR ELEMENTS */
+.border-green {
+	border: 1px solid $primary;
+}
+.grey-400 {
+	color: $gray-400
+}
+

styles/_layout.scss

@@ -248,3 +248,91 @@ section {
     white-space: normal;
   }
 }
+
+
+/* TIMELINE */
+.timeline-wrapper {
+    z-index: 999;
+    position: relative;
+}
+.timeline:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 18px;
+    height: 102.5%;
+    width: 4px;
+    background: linear-gradient(180deg, rgba(254, 255, 1, 1) 0%, rgba(255, 45, 154, 1) 33%, rgba(163, 8, 143, 1) 66%, rgba(44, 4, 128, 0.85) 100%);
+ }
+
+.timeline-dot {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #000;
+  box-sizing: border-box;
+}
+
+.timeline-block:first-child .timeline-dot {
+  border: 3px solid #FAFF1A;
+}
+
+.timeline-block:nth-child(2) .timeline-dot {
+  border: 3px solid #FF884B;
+}
+.timeline-block:nth-child(3) .timeline-dot {
+  border: 3px solid #C000E6;
+}
+.timeline-block {
+    display: flex;
+    position: relative;
+    z-index: 1;
+}
+
+.timeline-content {
+  flex-grow: 1;
+  position: relative;
+  margin-left: 1.25em;
+}
+
+.timeline h4 {
+  margin-top: -4px;
+}
+
+@media (min-width: 767px) {
+  .timeline:before {
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
+  .timeline-dot {
+    -ms-flex-order: 1;
+    order: 1;
+    margin-left: calc(5% - 9px);
+    will-change: transform;
+  }
+  .timeline-block:nth-child(even) {
+    -ms-flex-direction: row-reverse;
+    flex-direction: row-reverse;
+  }
+  .timeline-dot {
+    margin-right: calc(5% - 9px);
+  }
+  .timeline-content {
+     width: 45%;
+    -ms-flex-positive: 0;
+    flex-grow: 0;
+    will-change: transform;
+    margin: 0;
+    --line-height-multiplier: 1.2;
+  }
+}

styles/_marketing.scss

@@ -9,100 +9,6 @@
 	}
 }
 
-.va-middle {
-	vertical-align: middle;
-}
-
-.arrow-link:after {
-	content: url(../img/icon-green-arrow.svg);
-	width: 28px;
-  padding-left: 7px;
-  transition: all .2s ease-in-out;
-  display: inline-block;
-  text-decoration: none;
-}
-.arrow-link:hover:after {
-	padding-left: 14px;
-}
-.text-largest {
-	font-size: 1.5rem;
-	font-weight: normal;
-}
-.top-10 {
-	top: 2.5rem;
-}
-.vh100 {
-	height: 100vh;
-	min-height: 100%;
-}
-.vw100 {
-	width: 100vw;
-	min-width: 100%;
-}
-.align-items-stretch {
-	align-items: stretch;
-}
-
-#hero-impact {
-	width: 100vw;
-	// margin-left: -32px;
-}
-@media only screen and (min-width: 768px) {
-  #hero-impact {
-		margin-top: -120px;
-	}
-}
-
-
-/* COMPONENTS */
-.border-green {
-	border: 1px solid $primary;
-}
-.btn {
-	padding: 16px 24px;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 1.25;
-}
-.btn-clear {
-	color: $white;
-	border: 1px solid $white;
-}
-.btn-clear:hover {
-	background: transparent;
-	color: $primary;
-	border: 1px solid $primary;
-}
-.card-wrapper {
-	width: 100%;
-}
-.card-b {
-	padding: 2rem;
-	background: rgba(34, 37, 43, 0.5);
-	backdrop-filter: blur(3px);
-}
-
-// change this to be less generic
-// .card {
-// 	margin: 0 0.75rem;
-// 	background: black;
-// 	padding: 3rem 2rem;
-// 	color: $white;
-// }
-// .card h5 {
-// 	height: 38px;
-// 	padding-bottom: 5rem;
-// }
-
-.section-marker {
-	position: absolute;
-	font-size: 0.875rem;
-	transform: rotate(90deg);
-	font-weight: normal;
-	top: calc(50% - 64px);
-	margin-left: -32px;
-	transform-origin: top left;
-}
 
 
 /* HOME STYLINGS */
@@ -130,10 +36,13 @@
 .hc {
 	background: black;
 	padding: 2.25rem 2rem 7.75rem;
-	color: var(--white);
+	color: $white;
 	background-position: bottom;
 	background-repeat: no-repeat;
 	background-size: 100% 70px;
+	@media (max-width: 991px) {
+	     padding-left: 2rem !important; 
+	}
 }
 .hc h5 {
 	height: 38px;
@@ -157,106 +66,23 @@
   100% { padding-left: 7px; }
 }
 
-//  TIMELINE 
+
-.timeline-wrapper {
+
-    z-index: 999;
+
-    position: relative;
+#hero-impact {
+	width: 100vw;
 }
-
+@media only screen and (min-width: 768px) {
-
+  #hero-impact {
-.timeline:before {
+		margin-top: -120px;
-    content: '';
+	}
-    position: absolute;
-    top: 0;
-    left: 18px;
-    height: 102.5%;
-    width: 4px;
-    background: linear-gradient(180deg, rgba(254, 255, 1, 1) 0%, rgba(255, 45, 154, 1) 33%, rgba(163, 8, 143, 1) 66%, rgba(44, 4, 128, 0.85) 100%);
- }
-
-.timeline-dot {
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: #000;
-  box-sizing: border-box;
 }
-
-.timeline-block:first-child .timeline-dot {
-	border: 3px solid #FAFF1A;
-}
-
-.timeline-block:nth-child(2) .timeline-dot {
-	border: 3px solid #FF884B;
-}
-.timeline-block:nth-child(3) .timeline-dot {
-	border: 3px solid #C000E6;
-}
-
-
-.timeline-block {
-    display: flex;
-    position: relative;
-    z-index: 1;
-    margin-bottom: 8px;
-}
-
-.timeline-content {
-  flex-grow: 1;
-  position: relative;
-  margin-left: 1.25em;
-}
-
-.timeline h4 {
-  margin-top: -4px;
-}
-
-@media (min-width: 767px) {
-	.timeline:before {
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-  }
-  .timeline-dot {
-  	-ms-flex-order: 1;
-    order: 1;
-    margin-left: calc(5% - 9px);
-    will-change: transform;
-  }
-  .timeline-block:nth-child(even) {
-  	-ms-flex-direction: row-reverse;
-    flex-direction: row-reverse;
-  }
-  .timeline-dot {
-    margin-right: calc(5% - 9px);
-  }
-  .timeline-content {
-  	 width: 45%;
-    -ms-flex-positive: 0;
-    flex-grow: 0;
-    will-change: transform;
-    margin: 0;
-    --line-height-multiplier: 1.2;
-  }
-}
-
-
 #page-impact-bg {
 	background-image: url(../../img/backgrounds/bg-impact-top.png);
 	background-repeat: no-repeat;
   background-position: center 250px;
   background-size: contain;
 }
-
 #page-business-bg {
 	background-image: url(../../img/backgrounds/bg-business-mid.png);
 	background-repeat: no-repeat;
@@ -272,7 +98,6 @@
 	margin-top: -505px;
   z-index: -1;
 }
-
 #page-exchanges-bg {
 	background-image: url(../../img/backgrounds/bg-exchanges-top.png);
 	background-repeat: no-repeat;
@@ -284,8 +109,6 @@
 	margin-top: -446px;
   z-index: -1;
 }
-
-
 #page-wallets-bg {
 	background-image: url(../../img/backgrounds/bg-wallets-top.png);
 	background-repeat: no-repeat;
@@ -297,14 +120,12 @@
 	margin-top: -778px;
   z-index: -1;
 }
-
 #page-contribute-bot {
 	position: absolute;
 	right: 0;
 	margin-top: -199px;
   z-index: -1;
 }
-
 #page-overview-bg {
 	background-image: url(../../img/backgrounds/bg-overview-top.png);
 	background-repeat: no-repeat;
@@ -322,13 +143,289 @@
 	left: 0;
 	top: 302px;
 }
-
-#page-uses-top {
-
-}
-
 #table-overview {
 	td:nth-child(1){
 		width: 40%;
 	}
-}
+}
+
+
+
+
+/* TABLE STYLING */
+.ta-right {
+	text-align: right;
+}
+.dblue {
+	color: #656E81;
+}
+#calculator-table {
+	width: 100%;
+	thead {
+		border-bottom: 3px solid $white;
+	}
+	td {
+		padding: 0.25rem 0.5rem;
+		line-height: 1;
+		@media only screen and (max-width: 768px) {
+			font-size: $base-size;
+		}
+	}
+	tbody td {
+		padding: 2rem 0.5rem;
+	}
+	tbody tr {
+		border-bottom: 1px solid $white;
+	}
+	td:first-child{
+		width: 40%;
+	}
+	.ratio {
+		font-size: .075rem;
+		color: #656E81;
+	}
+	@media only screen and (max-width: 992px) {
+		.ratio {
+			display: block;
+		}
+		table {
+			font-size: 0.875rem;
+		}
+		table .fs-5-5 {
+			font-size: 1rem !important;
+		}
+		table .fs-6 {
+			font-size: 1.125rem;
+		}
+		table td:first-child {
+			width: auto;
+		}
+	}
+}
+
+
+
+
+/* CALCULATOR STYLING */
+#data-selector li a {
+	background: #22252B;
+	padding: 0.5rem 1.3rem;
+	color: $white;
+	white-space: nowrap;
+	font-weight: normal;
+}
+#data-selector li:nth-child(2) {
+	margin-left: -7px;
+	margin-right: -7px;
+}
+#data-selector li.active a {
+	background: $primary;
+	color: #000;
+}
+.tab-content div {
+	display: none;
+}
+.d-output {
+	display: none;
+	margin: 0 12px;
+	max-width: 188px;
+	width: 33%;
+	@media only screen and (max-width: 992px) {
+		width: auto;
+	}
+}
+.d-output.active {
+	display: block;
+	animation-fill-mode: forwards;
+	animation: fadeIn 1s ease-in-out;
+	@media only screen and (max-width: 992px) {
+		display: inline-block;
+	}
+}
+
+@media only screen and (min-width: 576px) and (max-width: 1200px){
+	#data-selector li:nth-child(2) {
+		margin-left: 0;
+		margin-right: 0;
+		border-top: 1px solid #000;
+		border-bottom: 1px solid #000;
+	}
+} 
+@media only screen and (max-width: 576px) {
+	.d-output {
+		display: none;
+		width: auto;
+		max-width: 100%;
+	}
+	.viz-wrapper {
+		margin-bottom: 2.5rem;
+		margin-right: 1rem;
+	}
+	.d-output[data-comp="kWh"].active {
+		display: inline-flex;
+	}
+	#data-selector li:nth-child(2) {
+		margin-left: 0;
+		margin-right: 0;
+		border-top: 1px solid #000;
+		border-bottom: 1px solid #000;
+	}
+}
+@media only screen and (max-width: 992px) {
+	#calculator-inputs-offset.offset {
+		height: 248px;
+		width: 100%;
+	}
+	#calculator-inputs-offset {
+		height: 0;
+		width: 100%;
+	}
+	.d-output {
+		margin: 16px;
+	}
+	#calculator-mobile-toggle.show {
+		position: fixed;
+		top: 15px;
+		right: 15px;
+		z-index: 9999999;
+	}
+	#calculator-mobile-toggle.hide {
+		display: none;
+	}
+	#calculator-inputs.sticky {
+		position: fixed;
+		top: 72px;
+		width: calc(100% - 30px);
+		left: 15px;
+		right: 15px;
+		background: #000;
+		display: none;
+	}
+	#calculator-inputs.sticky.show .calc-inputs-wrapper {
+		display: block;
+		margin-bottom: 1.5rem;
+	}
+	#calculator-inputs.sticky.show {
+		display: block;
+	}
+}
+.viz-wrapper {
+	position: relative;
+	height: 204px;
+	width: 184px;
+	overflow: hidden;
+	border-radius: 10px;
+}
+.viz-wrapper img {
+	margin-left: -1px;
+	margin-right: -1px;
+}
+@keyframes fadeIn {
+  0% { opacity: 0 }
+  100% { opacity: 1 }
+}
+.dot {
+	height: 2px;
+	width: 2px;
+	border-radius: 50%;
+	background-color: red;
+	position: absolute;
+	z-index: -1;
+	top: 98px;
+	left: 68px;
+	transform-origin: center center;
+}
+#kWh-btc-dot {
+	background-color: #FF671A;
+}
+#kWh-eth-dot {
+	background-color: #4F5664;
+}
+#kWh-xrp-dot {
+	background-color: $primary;
+}
+#kWh-pap-dot {
+}
+
+.dash:before {
+	content: url(../../img/icons/dash-line.png);
+	position: absolute;
+	top: -12px;
+	margin-left: 13px;
+}
+
+input[type=range] {
+  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+  width: 100%; /* Specific width is required for Firefox. */
+  background: transparent; /* Otherwise white in Chrome */
+  z-index: 2;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+}
+
+input[type=range]:focus {
+  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
+}
+
+input[type=range]::-ms-track {
+  width: 100%;
+  cursor: pointer;
+
+  /* Hides the slider so custom styles can be added */
+  background: transparent; 
+  border-color: transparent;
+  color: transparent;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  box-sizing: content-box;
+  border-radius: 50px;
+  -webkit-border-radius: 50px;
+  -moz-border-radius: 50px; 
+  width: 1px; /* Set a specific slider handle width */
+  height: 1px; /* Slider handle height */
+  background: $primary;
+  padding: 0.125rem;
+  border: 8px solid #000;
+  box-shadow: 0 0 0 2px $primary;
+  cursor: pointer; /* Cursor on hover */
+}
+
+.slider::-moz-range-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance: none;
+  box-sizing: content-box;
+  border-radius: 50px;
+  -webkit-border-radius: 50px;
+  -moz-border-radius: 50px; 
+  width: 1px; /* Set a specific slider handle width */
+  height: 1px; /* Slider handle height */
+  background: $primary;
+  padding: 0.125rem;
+  border: 8px solid #000;
+  box-shadow: 0 0 0 2px $primary;
+  cursor: pointer; /* Cursor on hover */
+}
+input[type="range"] {
+	background: $primary;
+	height: 3px;
+}
+
+/** FF*/
+input[type="range"]::-moz-range-progress {
+  background-color: #43e5f7; 
+}
+input[type="range"]::-moz-range-track {  
+  background-color: #9a905d;
+}
+/* IE*/
+input[type="range"]::-ms-fill-lower {
+  background-color: #43e5f7; 
+}
+input[type="range"]::-ms-fill-upper {  
+  background-color: #9a905d;
+}

tool/template-calculator.html

@@ -16,217 +16,384 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
+<div class="calculator-wrapper">
   <div class="container my-20 mb-49">
-        <section class="row mb-49">
+    <section class="row mb-49">
-          <h6 class="section-marker">Sustainability</h6>
+      <h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
-          <div class="col-sm-4">
+      <div class="col-sm-4 d-none d-sm-none">
-            <img src="./img/green-graphic.png" class="mw-100">
+        <img src="./img/green/green-graphic.png" class="mw-100">
-          </div>
-          <div class="col-sm-8">
-            <h3 class="h1 mb-4 mt-12">How Green Is Your Currency?</h3>
-            <a href="" class="arrow-link text-primary bold">Explore the Interactive Tool</a>
-            <h4 class="text-largest mt-16">Energy Consumption for Cash, Credit Cards and Crypto</h4>
-            <div class="d-sm-flex mt-10">
-              <p class="pr-1">Moving money carries cost—and not just the fee on your transaction or the value of your payment.<br/><br/>Whether it’s in cash, on a credit card or with crypto, every transaction you make consumes energy, and therefore, emits pollutants into the environment. </p>
-              <p class="pl-1">The impact of this is startling when you look at the total transactions across an entire year—for any one form of currency.<br/><br/>
-              Find out more about the environmental cost of some of the world’s most popular and innovative currencies, and start making more educated choices about how you transact.</p>
-            </div>
-          </div>
-        </section>
       </div>
+      <div class="col-sm-8">
+        <h3 class="h1 mb-4 mt-12">{% trans %}How Green Is Your Currency?{% endtrans %}</h3>
+        <a href="#calculator" class="arrow-link text-green bold">{% trans %}Explore the Interactive Tool{% endtrans %}</a>
+        <h2 class="text-largest mt-16 h4">{% trans %}Energy Consumption for Cash, Credit Cards and Crypto{% endtrans %}</h2>
+        <div class="d-sm-flex mt-10">
+          <div class="pr-1">
+            <p>{% trans %}Moving money carries cost—and not just the fee on your transaction or the value of your payment.{% endtrans %}</p>
+            <p>{% trans %}Whether it’s in cash, on a credit card or with crypto, every transaction you make consumes energy, and therefore, emits pollutants into the environment.{% endtrans %}</p>
+          </div>
+          <div class="pl-1">
+            <p>{% trans %}The impact of this is startling when you look at the total transactions across an entire year—for any one form of currency.{% endtrans %}</p>
+            <p>{% trans %}Find out more about the environmental cost of some of the world’s most popular and innovative currencies, and start making more educated choices about how you transact.{% endtrans %}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
 
-      <div class="container">
+  <div class="container" id="calculator">
-        <div class="col-sm-8 my-20 offset-sm-4">
+    <div class="col-sm-8 mt-20 mb-30 offset-sm-4">
-          <h3>How Does XRP Compare to Other Currencies?</h3>
+      <h3>{% trans %}How Does XRP Compare to Other Currencies?{% endtrans %}</h3>
-          <a href="#" class="text-primary arrow-link bold">Learn more about the methodology</a>
+      <a href="#" class="text-green arrow-link bold">{% trans %}Learn more about the methodology{% endtrans %}</a>
+    </div>
+  </div>
+
+  <div class="container my-20">
+    <section class="row mb-50">
+      <a href="#" class="btn btn-green-border btn-black d-lg-none" id="calculator-mobile-toggle">{% trans %}Change Inputs{% endtrans %}</a>
+      <div id="calculator-inputs-offset"></div>
+      <div class="col-lg-4" >
+        <div class="rounded sticky-top top-10 mb-3 mb-lg-0" id="calculator-inputs">
+          <div class="border-green p-3 calc-inputs">
+            <h4>{% trans %}Comparing Transaction Data{% endtrans %}</h4>
+              <ul class="p-0 mt-10 ls-none d-sm-flex d-lg-block d-xl-flex flex-wrap justify-content-around" id="data-selector">
+                <li class="d-block d-xl-inline-flex text-center active"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#d-crypto">{% trans %}Crypto{% endtrans %}</a></li>
+                <li class="d-block d-xl-inline-flex text-center"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#d-credit">{% trans %}Credit Cards{% endtrans %}</a></li>
+                <li class="d-block d-xl-inline-flex text-center"><a class="tab-link d-block d-xl-flex fs-base va-middle" href="#d-cash">{% trans %}Cash{% endtrans %}</a></li>
+              </ul>
+              <div class="slidecontainer">
+                <input type="range" min="20" max="100" value="60" class="slider w-100" id="myRange" step="20">
+                <ul class="d-flex p-0 ls-none justify-content-between position-relative mr-neg-8 ml-neg-8 mt-1" style="z-index: -1;">
+                  <li class="dash text-center text-smaller grey-50">20M</li>
+                  <li class="dash text-center text-smaller grey-50">40M</li>
+                  <li class="dash text-center text-smaller grey-50">60M</li>
+                  <li class="dash text-center text-smaller grey-50">80M</li>
+                  <li class="dash text-center text-smaller grey-50">100M</li>
+                </ul>
+              </div>
+          </div>
+          <a href="#" class="text-white arrow-link bold mt-4 d-block">{% trans %}Learn more about the methodology{% endtrans %}</a>
         </div>
       </div>
 
-      <div class="container my-20">
+      <div class="col-lg-7 offset-lg-1 scroll-container h-100" id="calculator-outputs">
-        <section class="row mb-49">
+        <section class="min-vh100 mb-40 section1 clearfix">
-          <div class="col-sm-4">
+          <h4>{% trans %}Energy Consumption of Portugal{% endtrans %}</h4>
-            <div class="rounded sticky-top top-10 border-green p-3 calc-inputs">
+
-              <h4>Comparing Transaction Data<h4>
+          <p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>
-                <ul class="d-flex align-items-stretch p-0 mt-10">
+
-                  <li class="ls-none w-100 active"><a class="tab-link fs-base va-middle" href="#d-crypto">Crypto</a></li>
+          <p>{% trans %}The country of Portugal consumes ~50twh (1 billion) Kilowatt hours (KWH) of energy annually. Explore how much energy today’s various currencies consume in relation to Portugal.{% endtrans %}</p>
-                  <li class="ls-none w-100"><a class="tab-link fs-base va-middle" href="#d-credit">Credit Cards</a></li>
+
-                  <li class="ls-none w-100"><a class="tab-link fs-base va-middle" href="#d-cash">Cash</a></li>
+          <div class="d-viz d-viz-1 mt-10">
-                </ul>
+            <ul class="d-sm-flex  p-0">
-                <div class="slidecontainer">
+              <li class="d-output d-crypto active" data-comp="kWh" data-type="btc">
-                  <input type="range" min="20" max="100" value="60" class="slider w-100" id="myRange" step="20">
+                <div class="viz-wrapper">
-                  <p id="demo"></p>
+                  <img src="./img/green/Portugal.png" alt="{% trans %}Portugal{% endtrans %}" class="mw-100">
+                  <div class="dot" id="kWh-btc-dot"></div>
                 </div>
-            </div>
+                <div class="num-wrapper">
-          </div>
+                  <img src="./img/icons/bw-bitcoin.png" class="mw-100 mt-3">
-          <div class="col-sm-7 offset-sm-1 scroll-container h-100" id="main">
+                  <p class="h6 mt-2 mb-1">{% trans %}Bitcoin{% endtrans %}</p>
-            <section class="vh100 section1">
+                  <h5 class="h4 normal mb-0" id="kWh-btc"></h5>
-              <h4>Energy Consumption of Portugal</h4>
+                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
+                </div>
+              </li>
+              <li class="d-output d-crypto active" data-comp="kWh" data-type="eth">
+                <div class="viz-wrapper">
+                  <img src="./img/green/Portugal.png" class="mw-100">
+                  <div class="dot" id="kWh-eth-dot"></div>
+                </div>
+                <div class="num-wrapper">
+                  <img src="./img/icons/bw-ethereum.png" class="mw-100 mt-3">
+                  <p class="h6 mt-2 mb-1">{% trans %}Ethereum{% endtrans %}</p>
+                  <h5 class="h4 normal mb-0" id="kWh-eth"></h5>
+                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
+                </div>
+              </li>
+              <li class="d-output d-cash" data-comp="kWh" data-type="pap">
+                <div class="viz-wrapper">
+                  <img src="./img/green/Portugal.png" class="mw-100">
+                  <div class="dot" id="kWh-pap-dot"></div>
+                </div>
+                <div class="num-wrapper">
+                  <img src="./img/icons/bw-cash.png" class="mw-100 mt-3">
+                  <p class="h6 mt-2 mb-1">{% trans %}Cash{% endtrans %}</p>
+                  <h5 class="h4 normal mb-0" id="kWh-pap"></h5>
+                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
+                </div>
+              </li>
+              <li class="d-output d-crypto d-credit d-cash active" data-comp="kWh" data-type="xrp">
+                <div class="viz-wrapper">
+                  <img src="./img/green/Portugal.png" class="mw-100">
+                  <div class="dot" id="kWh-xrp-dot"></div>
+                </div>
+                <div class="num-wrapper">
+                  <img src="./img/icons/xrp.png" class="mw-100 mt-3">
+                  <p class="h6 mt-2 mb-1">XRP</p>
+                  <h5 class="h4 normal mb-0" id="kWh-xrp"></h5>
+                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
+                </div>
+              </li>
+              <li class="d-output d-credit" data-comp="kWh" data-type="vsa">
+                <div class="viz-wrapper">
+                  <img src="./img/green/Portugal.png" alt="{% trans %}Portugal{% endtrans %}" class="mw-100">
+                  <div class="dot" id="kWh-vsa-dot"></div>
+                </div>
+                <div class="num-wrapper">
+                  <img src="./img/icons/bw-visa.png" alt="{% trans %}Visa{% endtrans %}" class="mw-100 mt-3">
+                  <p class="h6 mt-2 mb-1">Visa</p>
+                  <h5 class="h4 normal mb-0" id="kWh-vsa"></h5>
+                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
+                </div>
+              </li>
+              <li class="d-output d-credit" data-comp="kWh" data-type="mst">
+                <div class="viz-wrapper">
+                  <img src="./img/green/Portugal.png" alt="{% trans %}Portugal{% endtrans %}" class="mw-100">
+                  <div class="dot" id="kWh-mst-dot"></div>
+                </div>
+                <div class="num-wrapper">
+                  <img src="./img/icons/bw-mastercard.png" alt="{% trans %}Mastercard{% endtrans %}" class="mw-100 mt-3">
+                  <p class="h6 mt-2 mb-1">{% trans %}Mastercard{% endtrans %}</p>
+                  <h5 class="h4 normal mb-0" id="kWh-mst"></h5>
+                  <p class="text-small black-90">{% trans %}KWh{% endtrans %}</p>
+                </div>
+              </li>
 
-              <p>Comparing <span class="slider-amt"></span> Million Transactions in 2019
+            </ul>
-
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
-
-              <div class="d-viz d-viz-1">
-                <ul class="d-sm-flex justify-content-between p-0">
-                  <li class="d-output d-crypto active" data-comp="kWh" data-type="btc">
-                    <img src="./img/Portugal.png" class="mw-100">
-                    <div class="dot"></div>
-                    <p>Bitcoin</p>
-                    <h5 id="kWh-btc"></h5>
-                    <p>kWh</p>
-                  </li>
-                  <li class="d-output d-crypto active" data-comp="kWh" data-type="eth">
-                    <img src="./img/Portugal.png" class="mw-100">
-                    <p>Ethereum</p>
-                    <h5 id="kWh-eth"></h5>
-                    <p>kWh</p>
-                  </li>
-                  <li class="d-output d-cash" data-comp="kWh" data-type="pap">
-                    <img src="./img/Portugal.png" class="mw-100">
-                    <p>Cash</p>
-                    <h5 id="kWh-pap"></h5>
-                    <p>kWh</p>
-                  </li>
-                  <li class="d-output d-crypto d-credit d-cash active" data-comp="kWh" data-type="xrp">
-                    <img src="./img/Portugal.png" class="mw-100">
-                    <p>XRP</p>
-                    <h5 id="kWh-xrp"></h5>
-                    <p>kWh</p>
-                  </li>
-                  <li class="d-output d-credit" data-comp="kWh" data-type="vsa">
-                    <img src="./img/Portugal.png" class="mw-100">
-                    <p>Visa</p>
-                    <h5 id="kWh-vsa"></h5>
-                    <p>kWh</p>
-                  </li>
-                  <li class="d-output d-credit" data-comp="kWh" data-type="mst">
-                    <img src="./img/Portugal.png" class="mw-100">
-                    <p>Mastercard</p>
-                    <h5 id="kWh-mst"></h5>
-                    <p>kWh</p>
-                  </li>
-                  
-                </ul>
-              </div>
-            </section>
-            <section class="vh100 section2">
-              <h4>C02 Emissions from Airline Flights</h4>
-
-              <p>Comparing <span class="slider-amt"></span> Million Transactions in 2019
-
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
-
-              <div class="d-viz d-viz-1">
-                <ul class="d-sm-flex justify-content-between">
-                  <li class="d-output d-crypto active" data-comp="miles" data-type="btc">
-                    <p>Bitcoin</p>
-                    <h5 id="miles-btc"></h5>
-                    <p>miles</p>
-                  </li>
-                  <li class="d-output d-crypto active" data-comp="miles" data-type="eth">
-                    <p>Ethereum</p>
-                    <h5 id="miles-eth"></h5>
-                    <p>miles</p>
-                  </li>
-                  <li class="d-output d-cash" data-comp="miles" data-type="pap">
-                    <p>Cash</p>
-                    <h5 id="miles-pap"></h5>
-                    <p>miles</p>
-                  </li>
-                  <li class="d-output d-crypto d-credit d-cash active" data-comp="miles" data-type="xrp">
-                    <p>XRP</p>
-                    <h5 id="miles-xrp"></h5>
-                    <p>miles</p>
-                  </li>
-                  <li class="d-output d-credit" data-comp="miles" data-type="vsa">
-                    <p>Visa</p>
-                    <h5 id="miles-vsa"></h5>
-                    <p>miles</p>
-                  </li>
-                  <li class="d-output d-credit" data-comp="miles" data-type="mst">
-                    <p>Mastercard</p>
-                    <h5 id="miles-mst"></h5>
-                    <p>miles</p>
-                  </li>
-                  
-                </ul>
-              </div>
-            </section>
-            <section class="vh100 section3">
-              <h4>Gas Consumption by the Gallon</h4>
-
-              <p>Comparing <span class="slider-amt"></span> Million Transactions in 2019
-
-              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
-            </section>
-          </div> 
-        </section>
-      </div>
-
-      <div class="container my-20">
-        <section class="row mb-49">
-          <div class="col-sm-7 col-sm-offset-5">
-            <h4>Breaking Down Individual Transactions</h4>
-            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
-          </div>
-          <div class="col-sm-12 mt-14">
-            <table>
-              <thead>
-                <tr>
-                  <td></td>
-                  <td class="bold ta-right">Kilowatt Hour</td>
-                  <td class="bold ta-right">Gallons of Gas</td>
-                  <td class="bold ta-right">CO2 Emissions</td>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/Bitcoin@2x.png"></div>Bitcoin</td>
-                  <td class="fs-6 ta-right">700<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">700<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">700<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
-                </tr>
-                <tr>
-                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/Ethereum@2x.png"></div>Ethereum</td>
-                  <td class="fs-6 ta-right">30<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">30<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">30<span class="dblue">.0000</span><span class="ratio"> KWh/tx</span></td>
-                </tr>
-                <tr>
-                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/XRP-Mark@2x.png"></div>XRP</td>
-                  <td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
-                </tr>
-                <tr>
-                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/Visa@2x.png"></div>Visa</td>
-                  <td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
-                </tr>
-                <tr>
-                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/MasterCard@2x.png"></div>Mastercard</td>
-                  <td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
-                </tr>
-                <tr>
-                  <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/paper-money@2x.png"></div>Paper</td>
-                  <td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
-                  <td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
-                </tr>
-              </tbody>
-            </table>
           </div>
         </section>
+        <section class="min-vh100 mb-40 section2 clearfix">
+          <h4>{% trans %}C02 Emissions from Airline Flights{% endtrans %}</h4>
+
+          <p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>
+
+          <p>{% trans %}A 12-hour flight from London to Hong Kong releases 3 tons of Carbon dioxide (C02). Discover how much C02 different forms of currency release in comparison to emissions from airline flights.{% endtrans %}</p>
+
+          <div class="mt-10" id="co2Animation"></div>
+
+          <ul class="d-sm-flex  p-0">
+            <li class="d-output d-crypto active" data-comp="tons" data-type="btc">
+              <p class="h6 mt-3 mb-1">Bitcoin</p>
+              <h5 class="h4 normal mb-0" id="tons-btc"></h5>
+              <p class="text-small black-90">{% trans %}metric tons of CO2{% endtrans %}</p>
+            </li>
+            <li class="d-output d-crypto active" data-comp="tons" data-type="eth">
+              <p class="h6 mt-3 mb-1">Ethereum</p>
+              <h5 class="h4 normal mb-0" id="tons-eth"></h5>
+              <p class="text-small black-90">{% trans %}metric tons of CO2{% endtrans %}</p>
+            </li>
+            <li class="d-output d-cash" data-comp="tons" data-type="pap">
+              <p class="h6 mt-3 mb-1">Cash</p>
+              <h5 class="h4 normal mb-0" id="tons-pap"></h5>
+              <p class="text-small black-90">{% trans %}metric tons of CO2{% endtrans %}</p>
+            </li>
+            <li class="d-output d-crypto d-credit d-cash active" data-comp="tons" data-type="xrp">
+              <p class="h6 mt-3 mb-1">XRP</p>
+              <h5 class="h4 normal mb-0" id="tons-xrp"></h5>
+              <p class="text-small black-90">{% trans %}metric tons of CO2{% endtrans %}</p>
+            </li>
+            <li class="d-output d-credit" data-comp="tons" data-type="vsa">
+              <p class="h6 mt-3 mb-1">Visa</p>
+              <h5 class="h4 normal mb-0" id="tons-vsa"></h5>
+              <p class="text-small black-90">{% trans %}metric tons of CO2{% endtrans %}</p>
+            </li>
+            <li class="d-output d-credit" data-comp="tons" data-type="mst">
+              <p class="h6 mt-3 mb-1">Mastercard</p>
+              <h5 class="h4 normal mb-0" id="tons-mst"></h5>
+              <p class="text-small black-90">{% trans %}metric tons of CO2{% endtrans %}</p>
+            </li>
+
+          </ul>
+        </section>
+        <section class="min-vh100 mb-40 section3 clearfix">
+          <h4>{% trans %}Gas Consumption by the Gallon{% endtrans %}</h4>
+
+          <p class="grey-400 text-small my-4">{% trans %}Comparing <span class="slider-amt"></span> Million Transactions in 2019{% endtrans %}</p>
+
+          <p>{% trans %}An Ultra Large Crude Carrier (ULCC) carries approximately 120 million gallons of gas. Measure the environmental impact between currencies in relation to the amount of gas they would consume in the real-world.{% endtrans %}</p>
+
+          <div class="mt-10" id="gasAnimation"></div>
+
+          <ul class="d-sm-flex  p-0">
+            <li class="d-output d-crypto active" data-comp="gas" data-type="btc">
+              <p class="h6 mt-3 mb-1">Bitcoin</p>
+              <h5 class="h4 normal mb-0" id="gas-btc"></h5>
+              <p class="text-small black-90">{% trans %}Gallons of Gas{% endtrans %}</p>
+            </li>
+            <li class="d-output d-crypto active" data-comp="gas" data-type="eth">
+              <p class="h6 mt-3 mb-1">Ethereum</p>
+              <h5 class="h4 normal mb-0" id="gas-eth"></h5>
+              <p class="text-small black-90">{% trans %}Gallons of Gas{% endtrans %}</p>
+            </li>
+            <li class="d-output d-cash" data-comp="gas" data-type="pap">
+              <p class="h6 mt-3 mb-1">Cash</p>
+              <h5 class="h4 normal mb-0" id="gas-pap"></h5>
+              <p class="text-small black-90">{% trans %}Gallons of Gas{% endtrans %}</p>
+            </li>
+            <li class="d-output d-crypto d-credit d-cash active" data-comp="gas" data-type="xrp">
+              <p class="h6 mt-3 mb-1">XRP</p>
+              <h5 class="h4 normal mb-0" id="gas-xrp"></h5>
+              <p class="text-small black-90">{% trans %}Gallons of Gas{% endtrans %}</p>
+            </li>
+            <li class="d-output d-credit" data-comp="gas" data-type="vsa">
+              <p class="h6 mt-3 mb-1">Visa</p>
+              <h5 class="h4 normal mb-0" id="gas-vsa"></h5>
+              <p class="text-small black-90">{% trans %}Gallons of Gas{% endtrans %}</p>
+            </li>
+            <li class="d-output d-credit" data-comp="gas" data-type="mst">
+              <p class="h6 mt-3 mb-1">Mastercard</p>
+              <h5 class="h4 normal mb-0" id="gas-mst"></h5>
+              <p class="text-small black-90">{% trans %}Gallons of Gas{% endtrans %}</p>
+            </li>
+
+          </ul>
+        </section>
       </div>
+    </section>
+  </div>
+
+  <div class="container my-20">
+    <section class="row mb-49">
+      <div class="col-sm-7 col-sm-offset-5">
+        <h4>{% trans %}Breaking Down Individual Transactions{% endtrans %}</h4>
+        <p>{% trans %}Looking at individual transactions below, compare how a single transaction across each form of currency equates to KWh, gallons of gas and C02 emissions.{% endtrans %}</p>
+      </div>
+      <div class="col-sm-12 mt-14 overflow-xs">
+        <table id="calculator-table">
+          <thead>
+            <tr>
+              <td></td>
+              <td class="bold ta-right">{% trans %}Kilowatt Hour{% endtrans %}</td>
+              <td class="bold ta-right">{% trans %}Gallons of Gas{% endtrans %}</td>
+              <td class="bold ta-right">{% trans %}CO2 Emissions*{% endtrans %}</td>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/icons/bitcoin@2x.png"></div>Bitcoin</td>
+              <td class="fs-6 ta-right">487.3688<span class="ratio"> KWh/tx</span></td>
+              <td class="fs-6 ta-right">38.7744<span class="ratio"> gal/tx</span></td>
+              <td class="fs-6 ta-right">0.4103<span class="ratio"> Mt/tx</span></td>
+            </tr>
+            <tr>
+              <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/icons/ethereum@2x.png"></div>Ethereum</td>
+              <td class="fs-6 ta-right">42.8633<span class="ratio"> KWh/tx</span></td>
+              <td class="fs-6 ta-right">1.1311<span class="ratio"> gal/tx</span></td>
+              <td class="fs-6 ta-right">0.0273<span class="ratio"> Mt/tx</span></td>
+            </tr>
+            <tr>
+              <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="h36" src="./img/icons/xrp@2x.png"></div>XRP</td>
+              <td class="fs-6 ta-right">0.0079<span class="ratio"> KWh/tx</span></td>
+              <td class="fs-6 ta-right">0.0006<span class="dblue">0</span><span class="ratio"> gal/tx</span></td>
+              <td class="fs-6 ta-right">3.7<sup>-12</sup><span class="ratio"> Mt/tx</span></td>
+            </tr>
+            <tr>
+              <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/icons/visa@2x.png"></div>Visa</td>
+              <td class="fs-6 ta-right">0.0008<span class="ratio"> KWh/tx</span></td>
+              <td class="fs-6 ta-right">0.00006<span class="ratio"> gal/tx</span></td>
+              <td class="fs-6 ta-right">5.0<sup>-13</sup><span class="ratio"> Mt/tx</span></td>
+            </tr>
+            <tr>
+              <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/icons/mastercard@2x.png"></div>Mastercard</td>
+              <td class="fs-6 ta-right">0.0006<span class="ratio"> KWh/tx</span></td>
+              <td class="fs-6 ta-right">0.00005<span class="ratio"> gal/tx</span></td>
+              <td class="fs-6 ta-right">5.0<sup>-13</sup><span class="ratio"> Mt/tx</span></td>
+            </tr>
+            <tr>
+              <td class="fs-5-5 bold"><div class="w48 mr-3 text-center d-inline-block"><img class="w40" src="./img/icons/paper-money@2x.png"></div>Paper</td>
+              <td class="fs-6 ta-right">0.044<span class="dblue">0</span><span class="ratio"> KWh/tx</span></td>
+              <td class="fs-6 ta-right">0.0035<span class="dblue">0</span><span class="ratio"> gal/tx</span></td>
+              <td class="fs-6 ta-right">2.32<sup>-11</sup><span class="ratio"> Mt/tx</span></td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="text-smallest mt-10">*Calculations in million tonne (Mt)</p>
+      </div>
+    </section>
+  </div>
+</div>
 {% endblock %}
 
 
 {% block endbody %}
-<script src="https://www.google.com/recaptcha/api.js"></script>
+<script type="text/javascript" src="/assets/js/bodymovin.min.js"></script>
+<script type="text/javascript" src="/assets/js/calculator/co2-crypto.json"></script>
+<script type="text/javascript" src="/assets/js/calculator/co2-cash.json"></script>
+<script type="text/javascript" src="/assets/js/calculator/co2-credit.json"></script>
+<script type="text/javascript" src="/assets/js/calculator/gas-crypto.json"></script>
+<script type="text/javascript" src="/assets/js/calculator/gas-cash.json"></script>
+<script type="text/javascript" src="/assets/js/calculator/gas-credit.json"></script>
+<script type="text/javascript" src="/assets/js/calculator/carbon-calculator.js"></script>
+
+<script type="text/javascript">
+  function co2CashAnimation(){
+    bodymovin.loadAnimation({
+      container: document.getElementById('co2Animation'),
+      renderer: 'svg',
+      loop: false,
+      autoplay: true,
+      animationData: coCash
+    });
+  };
+
+  function co2CreditAnimation() {
+    bodymovin.loadAnimation({
+      container: document.getElementById('co2Animation'),
+      renderer: 'svg',
+      loop: false,
+      autoplay: true,
+      animationData: coCredit
+    });
+  };
+
+  function co2CryptoAnimation() {
+    bodymovin.loadAnimation({
+      container: document.getElementById('co2Animation'),
+      renderer: 'svg',
+      loop: false,
+      autoplay: true,
+      animationData: coCrypto
+    });
+  };
+
+  function gasCryptoAnimation() {
+    bodymovin.loadAnimation({
+      container: document.getElementById('gasAnimation'),
+      renderer: 'svg',
+      loop: false,
+      autoplay: true,
+      animationData: gasCrypto
+    });
+  };
+
+  function gasCashAnimation() {
+    bodymovin.loadAnimation({
+      container: document.getElementById('gasAnimation'),
+      renderer: 'svg',
+      loop: false,
+      autoplay: true,
+      animationData: gasCash
+    });
+  };
+
+  function gasCreditAnimation() {
+    bodymovin.loadAnimation({
+      container: document.getElementById('gasAnimation'),
+      renderer: 'svg',
+      loop: false,
+      autoplay: true,
+      animationData: gasCredit
+    });
+  };
+
+
+</script>
+
+
 <script type="application/javascript">
   gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
 </script>
+
+
+
 {% endblock %}

tool/template-explore-exchanges.html

@@ -19,11 +19,11 @@
 <div id="page-exchanges-bg">
   <div class="container my-40 marketing-wrapper">
     <section class="row mt-40 mb-40">
-      <div class="col-sm-4 mb-10 d-flex flex-column-reverse justify-content-end">
+      <div class="col-lg-4 d-flex flex-column-reverse justify-content-end mb-10">
-        <h1 class="mb-18">{% trans %}XRP Is Traded on More Than 100 Markets and Exchanges Worldwide{% endtrans %}</h1>
+        <h1>{% trans %}XRP Is Traded on More Than 100 Markets and Exchanges Worldwide{% endtrans %}</h1>
         <h3 class="text-primary mb-4 h6">{% trans %}XRP Exchanges{% endtrans %}</h3>
       </div>
-      <div class="col-sm-6 offset-sm-1">
+      <div class="col-lg-6 offset-lg-1">
         <h2 class="mt-12 mb-10">{% trans %}Exchanges are where people trade currencies.{% endtrans %}</h2>
         <p>{% trans %}There are different types of exchanges that vary depending on the type of market (spot, futures, options, swaps), and the type of security model (custodial, non-custodial).{% endtrans %}</p>
         <p>{% trans %}Spot exchanges allow people to buy and sell cryptocurrencies at current (spot) market rates. Futures, options and swap exchanges allow people to buy and sell standardized contracts of cryptocurrency market rates in the future.{% endtrans %}</p>

tool/template-explore-wallets.html

@@ -20,11 +20,11 @@
   <div class="container my-40 marketing-wrapper">
 
     <section class="row mt-40 mb-40">
-      <div class="col-sm-3 mb-10 d-flex flex-column-reverse justify-content-end">
+      <div class="col-lg-3 d-flex flex-column-reverse justify-content-end mb-10">
-        <h1 class="mb-18">{% trans %}Options for Storing XRP{% endtrans %}</h1>
+        <h1>{% trans %}Options for Storing XRP{% endtrans %}</h1>
         <h3 class="text-primary mb-4 h6">{% trans %}XRP Wallets{% endtrans %}</h3>
       </div>
-      <div class="col-sm-7 offset-sm-1">
+      <div class="col-lg-7 offset-lg-1">
         <h2 class="mt-12 mb-10">{% trans %}Digital wallets are pieces of software that allow people to send, receive and store cryptocurrencies, including XRP. There are two types of digital wallets: custodial and non-custodial.{% endtrans %}</h2>
         <p>{% trans %}Custodial wallets manage a user's private key, which allows the wallet to withdraw cryptocurrency on a user's behalf. Non-custodial wallets do not manage a user's private key, which is up to the user to manage, and therefore cannot send cryptocurrency on the user's behalf.{% endtrans %}</p>
       </div>

tool/template-home.html

@@ -107,7 +107,7 @@
 
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Sustainability{% endtrans %}</h6>
-      <div class="col-sm-4 offset-sm-1">
+      <div class="col-sm-4 offset-sm-1 text-center">
         <img class="mw-100" src="./img/green/green-graphic.png">
       </div>
       <div class="col-sm-5 offset-sm-1">
@@ -117,9 +117,9 @@
         <a href="carbon-calculator.html" class="btn btn-clear">{% trans %}Go Green{% endtrans %}</a>
         <h4 class="mt-20 mb-10">{% trans %}Partners in Sustainability{% endtrans %}</h4>
         <div class="d-flex align-items-center flex-wrap justify-content-between">
-          <img class="mw-100 mb-2 mr-2" src="./img/green/energy-web.png">
+          <img class="mw-100 mb-4 mr-2" src="./img/green/energy-web.png">
-          <img class="mw-100 mb-2 mr-2" src="./img/green/rocky-mountain-inst.png">
+          <img class="mw-100 mb-4 mr-2 ml-2" src="./img/green/rocky-mountain-inst.png">
-          <img class="mw-100 mb-2 mr-2" src="./img/green/reba.png">
+          <img class="mw-100 mb-4 mr-2" src="./img/green/reba.png">
         </div>
       </div>
     </section>

tool/template-learn-history.html

@@ -36,7 +36,7 @@
         <h2 class="h1 text-center mx-auto mb-20">{% trans %}Timeline of XRP Evolution{% endtrans %}</h2>
         <div class="col-lg-10 offset-lg-1">
           <div class="timeline">
-            <div class="timeline-block">
+            <div class="timeline-block mb-10">
               <div class="timeline-dot"></div>
               <div class="timeline-content">
                 <h4 class="mb-10">{% trans %}2011 XRP Ledger Development{% endtrans %}</h4>
@@ -44,7 +44,7 @@
                 <p>{% trans %}Their initial observations about the high energy consumption and scalability issues that would plague Bitcoin proved prescient. (In 2019, estimates suggest Bitcoin mining used more energy than the entire country of Portugal!) Moreover, their initial read indicated that significant problems could arise if any miner obtained (or miners colluded to obtain) greater than 50% of the mining power—that risk persists with Bitcoin (and Ethereum) today as mining power has consolidated in China.{% endtrans %}</p>
               </div>
             </div>
-            <div class="timeline-block">
+            <div class="timeline-block mb-10">
               <div class="timeline-dot"></div>
               <div class="timeline-content">
                 <h4 class="mb-10">{% trans %}2012 XRP Launched{% endtrans %}</h4>
@@ -59,7 +59,7 @@
                 <p>{% trans %}Chris Larsen was the CEO of OpenCoin, and at the company's founding, Jed was co-founder and CTO, David Schwartz was the Chief Cryptography Officer, and Arthur Britto an advisor.{% endtrans %}</p>
               </div>
             </div>
-            <div class="timeline-block">
+            <div class="timeline-block mb-10">
               <div class="timeline-dot"></div>
               <div class="timeline-content">
                 <h4 class="mb-10">{% trans %}2013 OpenCoin Rebranded to Ripple Labs{% endtrans %}</h4>
@@ -74,7 +74,7 @@
 
       <section class="row mt-30 mb-40">
         <h6 class="section-marker" id="section-marker-podcast">{% trans %}Podcast{% endtrans %}</h6>
-        <div class="col-sm-5 order-1 order-sm-2 mb-10">
+        <div class="col-sm-5 order-1 order-sm-2 mb-10 text-center">
           <img class="mw-100" src="./img/graphics/chris-larsen.png">
         </div>
         <div class="col-sm-5 offset-sm-1 order-2 order-sm-1 mt-20">

tool/template-learn-impact.html

@@ -37,7 +37,7 @@
     <div class="container mb-20">
       <section class="row mb-50">
         <h6 class="section-marker">{% trans %}Creating Economic Opportunity{% endtrans %}</h6>
-        <div class="col-md-4 offset-md-1 mb-10">
+        <div class="col-md-4 offset-md-1 mb-10 text-center">
           <img class="mw-100" src="./img/impact/impact-democratizing-payments@2x.png">
         </div>
         <div class="col-md-6 offset-md-1">
@@ -56,7 +56,7 @@
 
       <section class="row mb-50">
         <h6 class="section-marker">{% trans %}Future of Finance{% endtrans %}</h6>
-        <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
+        <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
           <img class="mw-100" src="./img/impact/impact-building-future@2x.png">
         </div>
         <div class="col-md-6 offset-md-1 order-2 order-md-1">
@@ -72,7 +72,7 @@
 
       <section class="row mb-50">
         <h6 class="section-marker">{% trans %}Are All Digital Assets Alike?{% endtrans %}</h6>
-          <div class="col-md-4 offset-md-1 mb-10">
+          <div class="col-md-4 offset-md-1 mb-10 text-center">
             <img class="mw-100" src="./img/impact/impact-crypto-strengths@2x.png">
           </div>
           <div class="col-md-6 offset-md-1">
@@ -91,7 +91,7 @@
 
       <section class="row mb-20">
         <h6 class="section-marker">{% trans %}What Makes XRP and the XRP Ledger Green?{% endtrans %}</h6>
-        <div class="col-md-4 mb-10">
+        <div class="col-md-4 mb-10 text-center">
           <img class="mw-100 mt-20" src="./img/green/green-graphic@2x.png">
         </div>
         <div class="col-md-8">

tool/template-learn-overview.html

@@ -27,16 +27,16 @@
         <div class="col-md-8">
           <h2 class="mb-8">{% trans %}What is XRP?{% endtrans %}</h2>
           <div class="row">
-            <p class="col">{% trans %}XRP is a digital asset that’s native to the XRP Ledger, an open-source, permissionless and decentralized blockchain technology.{% endtrans %}</p>
+            <p class="col-sm">{% trans %}XRP is a digital asset that’s native to the XRP Ledger, an open-source, permissionless and decentralized blockchain technology.{% endtrans %}</p>
-            <p class="col">{% trans %}Created in 2012 specifically for payments, XRP can settle transactions on the ledger in 3-5 seconds. It was built to be a better Bitcoin—faster, cheaper and greener than any other digital asset.  {% endtrans %}</p>
+            <p class="col-sm">{% trans %}Created in 2012 specifically for payments, XRP can settle transactions on the ledger in 3-5 seconds. It was built to be a better Bitcoin—faster, cheaper and greener than any other digital asset.  {% endtrans %}</p>
           </div>
         </div>
       </section>
 
       <section class="row mb-50">
         <h6 class="section-marker">{% trans %}Benefits{% endtrans %}</h6>
-        <div class="col-sm-12 col-lg-10 mt-14">
+        <div class="col-sm-12 col-lg-10 mt-14 overflow-xs">
-            <table id="table-overview">
+            <table id="table-overview" class="mw-100">
               <thead>
                 <tr>
                   <td class="bold h4">{% trans %}Benefits{% endtrans %}</td>
@@ -84,7 +84,7 @@
 
       <section class="row mb-50">
         <h6 class="section-marker">{% trans %}XRP Validators{% endtrans %}</h6>
-        <div class="col-md-4">
+        <div class="col-md-4 mb-10">
           <h2>{% trans %}How Does the XRP Ledger Work?{% endtrans %}</h2>
         </div>
         <div class="col-md-4">
@@ -112,12 +112,12 @@
           <h5 class="mb-10 normal h4">{% trans %}XRP is fast, low-cost, sustainable and scalable. It is the key to fueling growth and realizing the true potential of our global economy—the Internet of Value.{% endtrans %}</h5>
         </div>
         <div class="w-100 mt-20"></div>
-        <div class="col-md-4">
+        <div class="col-md-4 mb-20">
           <h4>{% trans %}Businesses{% endtrans %}</h4>
           <p class="my-10">{% trans %}Many businesses are building on the XRP Ledger, pursuing powerful use cases in decentralized finance micropayments, gaming, web monetization and more. Additionally, Ripple, the technology company, is focused on building a network and infrastructure that leverages XRP to power faster, more affordable cross-border payments around the world.{% endtrans %}</p>
           <a href="businesses.html" class="text-white bold arrow-link">{% trans %}More About Businesses{% endtrans %}</a>
         </div>
-        <div class="col-md-4">
+        <div class="col-md-4 mb-20">
           <h4>{% trans %}Individuals{% endtrans %}</h4>
           <p class="my-10">{% trans %}Individual consumers can use XRP to move different currencies around the world. For example, through wallets and exchanges that use PayID, anyone can use XRP—or any currency, be it fiat or digital assets—to easily make purchases across any payments network.{% endtrans %}</p>
           <a href="uses.html" class="text-white bold arrow-link">{% trans %}More About Uses{% endtrans %}</a>
@@ -132,7 +132,7 @@
       <section class="mb-50">
         <h6 class="section-marker">{% trans %}Internet of Value{% endtrans %}</h6>
         <div class="row mb-40">
-          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
+          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center">
             <img class="mw-100" src="./img/overview/fast.png">
           </div>
           <div class="col-md-4 offset-md-1 order-2 order-md-1">
@@ -141,7 +141,7 @@
           </div>
         </div>
         <div class="row mb-30">
-          <div class="col-md-4 offset-md-1 mb-10">
+          <div class="col-md-4 offset-md-1 mb-10 text-center">
             <img class="mw-100" src="./img/overview/low-cost.png">
           </div>
           <div class="col-md-4 offset-md-2">
@@ -150,7 +150,7 @@
           </div>
         </div>
         <div class="row mb-30">
-          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
+          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center">
             <img class="mw-100" src="./img/overview/scalable.png">
           </div>
           <div class="col-md-4 offset-md-1  order-2 order-md-1">
@@ -159,7 +159,7 @@
           </div>
         </div>
         <div class="row mb-30">
-          <div class="col-md-4 offset-md-1 mb-10">
+          <div class="col-md-4 offset-md-1 mb-10 text-center">
             <img class="mw-100" src="./img/overview/sustainable.png">
           </div>
           <div class="col-md-4 offset-md-2">
@@ -168,7 +168,7 @@
           </div>
         </div>
         <div class="row mb-20">
-          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10">
+          <div class="col-md-4 offset-md-2 order-1 order-md-2 mb-10 text-center">
             <img class="mw-100" src="./img/overview/real.png">
           </div>
           <div class="col-md-4 offset-md-1 order-2 order-md-1">
@@ -213,7 +213,7 @@
       <section class="mb-50">
         <h6 class="section-marker">{% trans %}Ripple vs. XRP{% endtrans %}</h6>
         <div class="row">
-          <div class="col-md-4 offset-md-1 mb-10">
+          <div class="col-md-4 offset-md-1 mb-10 text-center">
             <img class="mw-100 mt-10" src="./img/overview/xrp-text-logo.png">
           </div>
           <div class="col-md-5 offset-md-1">
@@ -227,7 +227,7 @@
       <section class="mb-50">
         <h6 class="section-marker">{% trans %}XRP Community{% endtrans %}</h6>
         <div class="row">
-          <div class="col-md-6 offset-md-1 order-1 order-md-2 mb-10">
+          <div class="col-md-6 offset-md-1 order-1 order-md-2 mb-10 text-center">
             <img class="mw-100" src="./img/overview/xrp-community.png">
           </div>
           <div class="col-md-5 order-2 order-md-1">

tool/template-learn-uses.html

@@ -35,7 +35,7 @@
     <div class="container mb-20">
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Cross-Border payments{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
+      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
         <img class="mw-100" src="./img/uses/xb-payment.png">
       </div>
       <div class="col-md-6 offset-md-1 order-2 order-md-1">
@@ -47,7 +47,7 @@
 
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Micropayments{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 mb-10">
+      <div class="col-md-4 offset-md-1 mb-10 text-center">
         <img class="mw-100" src="./img/uses/micropayments.png">
       </div>
       <div class="col-md-6 offset-md-1">
@@ -59,7 +59,7 @@
 
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Digital Cryptocurrency{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
+      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
         <img class="mw-100" src="./img/uses/digital-wallets.png">
       </div>
       <div class="col-md-6 offset-md-1 order-2 order-md-1">
@@ -71,7 +71,7 @@
 
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Exchanges{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 mb-10">
+      <div class="col-md-4 offset-md-1 mb-10 text-center">
         <img class="mw-100" src="./img/uses/exchanges.png">
       </div>
       <div class="col-md-4 offset-md-1">
@@ -83,7 +83,7 @@
 
     <section class="row mb-50">
       <h6 class="section-marker">{% trans %}Trading{% endtrans %}</h6>
-      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10">
+      <div class="col-md-4 offset-md-1 order-1 order-md-2 mb-10 text-center">
         <img class="mw-100" src="./img/uses/inst-trading.png">
       </div>
       <div class="col-md-6 offset-md-1 order-2 order-md-1">