5 files changed, 16 insertions, 19 deletions
diff --git a/src/less/components/captions.less b/src/less/components/captions.less
index ad0fc79f..605d7e49 100644
--- a/src/less/components/captions.less
+++ b/src/less/components/captions.less
@@ -39,12 +39,12 @@
         display: none;
     }
 
-    @media (min-width: @plyr-bp-screen-sm) {
+    @media @plyr-mq-sm {
         padding: (@plyr-control-spacing * 2);
         font-size: @plyr-font-size-captions-base;
     }
 
-    @media (min-width: @plyr-bp-screen-md) {
+    @media @plyr-mq-md {
         font-size: @plyr-font-size-captions-medium;
     }
 }
diff --git a/src/less/components/buttons.less b/src/less/components/control.less
index 8c775d73..48b73e0f 100644
--- a/src/less/components/buttons.less
+++ b/src/less/components/control.less
@@ -1,13 +1,15 @@
+// --------------------------------------------------------------
+// Control buttons
+// --------------------------------------------------------------
+
 .plyr__control {
     position: relative;
-    display: inline-block;
     flex-shrink: 0;
     overflow: visible; // IE11
-    vertical-align: middle;
     padding: @plyr-control-padding;
     border: 0;
     background: transparent;
-    border-radius: 3px;
+    border-radius: @plyr-control-radius;
     cursor: pointer;
     transition: all 0.3s ease;
     color: inherit;
@@ -66,7 +68,7 @@
 
     svg {
         position: relative;
-        left: 2px;
+        left: 2px; // Offset to make the play button look right
         width: @plyr-control-icon-size-large;
         height: @plyr-control-icon-size-large;
     }
@@ -78,7 +80,7 @@
 }
 
 .plyr--full-ui.plyr--video .plyr__control--overlaid {
-    display: inline-block;
+    display: block;
 }
 
 .plyr--playing .plyr__control--overlaid {
diff --git a/src/less/components/controls.less b/src/less/components/controls.less
index fe257224..fb66e869 100644
--- a/src/less/components/controls.less
+++ b/src/less/components/controls.less
@@ -30,7 +30,7 @@
         margin-left: (@plyr-control-spacing / 2);
     }
 
-    @media (min-width: @plyr-bp-screen-sm) {
+    @media @plyr-mq-sm {
         > .plyr__control,
         .plyr__progress,
         .plyr__time,
diff --git a/src/less/components/times.less b/src/less/components/times.less
index 29b06aa0..09a55702 100644
--- a/src/less/components/times.less
+++ b/src/less/components/times.less
@@ -3,24 +3,20 @@
 // --------------------------------------------------------------
 
 .plyr__time {
-    display: inline-block;
-    vertical-align: middle;
     font-size: @plyr-font-size-time;
 }
 
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
-    display: none;
-
-    @media (min-width: @plyr-bp-screen-md) {
-        display: inline-block;
-    }
-
     // Add a slash in before
     &::before {
         content: '\2044';
         margin-right: @plyr-control-spacing;
     }
+
+    @media @plyr-mq-sm-max {
+        display: none;
+    }
 }
 
 .plyr--video .plyr__time {
diff --git a/src/less/components/volume.less b/src/less/components/volume.less
index 1c9054b7..bb5a49ba 100644
--- a/src/less/components/volume.less
+++ b/src/less/components/volume.less
@@ -11,12 +11,11 @@
         z-index: 2;
     }
 
-    @media (min-width: @plyr-bp-screen-sm) {
-        display: block;
+    @media @plyr-mq-sm {
         max-width: 50px;
     }
 
-    @media (min-width: @plyr-bp-screen-md) {
+    @media @plyr-mq-md {
         max-width: 80px;
     }
 }