3 files changed, 21 insertions, 17 deletions
diff --git a/assets/less/docs.less b/assets/less/docs.less
index 8369fce3..7559f420 100644
--- a/assets/less/docs.less
+++ b/assets/less/docs.less
@@ -30,12 +30,12 @@
 
 // Base
 html {
-	font-size: 62.5%;
+	//font-size: 62.5%;
 }
 body {
 	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
 	background: #fff;
-	.font-size(16);
+	//.font-size(16);
 	line-height: 1.5;
 	text-align: center;
 	color: #6D797F;
diff --git a/assets/less/docs/mixins.less b/assets/less/docs/mixins.less
index 02f44d55..b3a1f63b 100644
--- a/assets/less/docs/mixins.less
+++ b/assets/less/docs/mixins.less
@@ -22,10 +22,11 @@
 }
 
 // Use rems for font sizing
+// Leave <body> at 100%/16px
 // ---------------------------------------
 .font-size(@font-size: 16){
-	@rem: (@font-size / 10);
-	font-size: @font-size * 1px;
+	@rem: round((@font-size / 16), 1);
+	font-size: (@font-size * 1px);
 	font-size: ~"@{rem}rem";
 }
 
diff --git a/assets/less/plyr.less b/assets/less/plyr.less
index 659be8b4..9a35a0a3 100644
--- a/assets/less/plyr.less
+++ b/assets/less/plyr.less
@@ -23,11 +23,16 @@
 
 // Range
 @range-track-height: 		6px;
+@range-track-bg: 			@gray;
 @range-thumb-height: 		(@range-track-height * 2);
 @range-thumb-width: 		(@range-track-height * 2);
 @range-thumb-bg: 			@control-color;
 @range-thumb-bg-focus: 		@control-color-active;
 
+// Breakpoints
+@bp-control-split: 			560px; // When controls split into left/right
+@bg-captions-large: 		768px; // When captions jump to the larger font size
+
 // Utility classes & mixins
 // -------------------------------
 // Screen reader only
@@ -67,7 +72,7 @@
 }
 .range-track() {
 	height: @range-track-height;
-	background: @gray;
+	background: @range-track-bg;
 	border: 0;
 	border-radius: (@range-track-height / 2);
 }
@@ -132,7 +137,7 @@
 		text-align: center;
 		.font-smoothing();
 
-		@media (min-width: 560px) {
+		@media (min-width: @bg-captions-large) {
 			font-size: 24px;
 		}
 	}
@@ -155,7 +160,7 @@
 			display: block;
 			margin: @control-spacing auto 0;
 		}
-		@media (min-width: 560px) {
+		@media (min-width: @bp-control-split) {
 			&-playback {
 				float: left;
 			}
@@ -198,17 +203,17 @@
 			background: transparent;
 			overflow: hidden;
 		}
-		button:hover,
-		label:hover {
-			background: @control-color-active;
+		input:focus + label,
+		button:focus {
+			.tab-focus();
 
 			svg {
 				fill: #fff;
 			}
 		}
-		input:focus + label,
-		button:focus {
-			.tab-focus();
+		button:hover,
+		input + label:hover {
+			background: @control-color-active;
 
 			svg {
 				fill: #fff;
@@ -365,15 +370,13 @@
 				top: auto;
 				bottom: 90px;
 
-				@media (min-width: 560px) and (max-width: 767px) {
+				@media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) {
 					bottom: 60px;
 				}
-
-				@media (min-width: 768px) {
+				@media (min-width: @bg-captions-large) {
 					bottom: 80px;
 				}
 			}
-
 		}
 		.player-controls {
 			position: absolute;