diff --git a/website/public/css/global-modules.styl b/website/public/css/global-modules.styl
index 4e3866c31a..ba1a87344e 100644
--- a/website/public/css/global-modules.styl
+++ b/website/public/css/global-modules.styl
@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 // Clearfix (http://css-tricks.com/snippets/css/clear-fix/)
 $clearfix
   &:after
@@ -50,7 +52,7 @@ hrpg-button-color-mixin($hrpg-button-color, highlight=false)
     else
       border-left: 1px solid darken($hrpg-button-color, 3.82%) !important
   > div
-    @media screen and (min-width:768px)
+    @media screen and (min-width: $sm-min-screen-width)
       border:1px solid darken($hrpg-button-color, 16.18%)
     h4
       color: darken($hrpg-button-color, 61.8%)
@@ -85,7 +87,7 @@ hrpg-anchor-button-color-mixin($hrpg-button-color)
   background-color: $hrpg-button-color !important
   &:active
     background-color: darken($hrpg-button-color, 61.18%) !important
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     &:hover
       background-color: darken($hrpg-button-color, 2.36%) !important
 $hrpg-button-master
@@ -221,7 +223,7 @@ $hrpg-modal-dropdown
     min-width:110px
     border-radius:4px
     background-color:#fff
-    @media screen and (max-width:767px)
+    @media screen and (max-width: $xs-max-screen-width)
       position:fixed
       z-index: 1000
       top: 2%
@@ -249,12 +251,12 @@ $hrpg-modal-dropdown
       overflow: auto
       border-top-width: 1px
       border-top-style: solid
-      @media screen and (min-width:768px)
+      @media screen and (min-width: $sm-min-screen-width)
         max-height: 320px
         max-height: 62.8vh
       li
         width: 100%
-        @media screen and (max-width:767px)
+        @media screen and (max-width: $xs-max-screen-width)
           width: auto
       a
         display: inline-block
@@ -277,14 +279,14 @@ $hrpg-modal-dropdown
       transform: rotate(45deg)
 $hrpg-modal-dropdown-left
   @extend $hrpg-modal-dropdown
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     div
       right: 0px
       > ul:first-child:before, > div:first-child:before, h4:before
         right: .5em
 $hrpg-modal-dropdown-right
   @extend $hrpg-modal-dropdown
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     div
       left: 0px
       > ul:first-child:before, > div:first-child:before, h4:before
@@ -297,17 +299,17 @@ $hrpg-modal-controls
     margin-right: 0.618em
     margin-bottom: 0.382em
     display: inline-block
-  @media screen and (max-width:767px)
+  @media screen and (max-width: $xs-max-screen-width)
     width: 96%
     position: fixed
     bottom:2%
     right: 2%
     border: none
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     display: none
 // Submenus
 $hrpg-submenu
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     padding: 1em 1em 0em 1em
   margin-bottom: 1.618em
   li
@@ -327,7 +329,7 @@ hrpg-tag-color-mixin($hrpg-tag-color)
       background-color: darken($hrpg-tag-color,32.8%)
       &:before
         border-right-color: darken($hrpg-tag-color,32.8%)
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     &:hover, &:hover > a, &:hover > a span
       background-color: darken($hrpg-tag-color,16.8%)
     &:hover > a:before
diff --git a/website/public/css/header.styl b/website/public/css/header.styl
index 6dcf488caf..e85a43aae6 100644
--- a/website/public/css/header.styl
+++ b/website/public/css/header.styl
@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 /* header wrapper
 -------------------- */
 .header-wrap
@@ -10,7 +12,7 @@
   overflow-y: hidden
   overflow-x: auto
   // position relative
-  @media screen and (max-width:767px)  // remove padding-top when toolbar is static
+  @media screen and (max-width: $xs-max-screen-width)  // remove padding-top when toolbar is static
     padding: 0
 .toolbar.active ~ .header-wrap
   padding: 0 // remove padding when toolbar is hidden
@@ -107,7 +109,7 @@
   vertical-align: middle
   min-width:175px
   width: 75%
-  @media screen and (max-width:767px)
+  @media screen and (max-width: $xs-max-screen-width)
     padding: 1.1em 0.618em 0
   .meter-label
     float: left
diff --git a/website/public/css/helpers.styl b/website/public/css/helpers.styl
index 473c82a13f..f043af599b 100644
--- a/website/public/css/helpers.styl
+++ b/website/public/css/helpers.styl
@@ -41,21 +41,21 @@
 // .pull-right & .pull-left for specific screen sizes
 // Follows conventions for col-x-SIZE classes
 
-@media (min-width: 768px)
+@media (min-width: $sm-min-screen-width)
   .pull-left-sm
     float: left
 
   .pull-right-sm
     float: right
 
-@media (min-width: 992px)
+@media (min-width: $md-min-screen-width)
   .pull-left-md
     float: left
 
   .pull-right-md
     float: right
 
-@media (min-width: 1200px)
+@media (min-width: $lg-min-screen-width)
   .pull-left-lg
     float: left
 
diff --git a/website/public/css/menu.styl b/website/public/css/menu.styl
index 183c0efe8f..add73e6416 100644
--- a/website/public/css/menu.styl
+++ b/website/public/css/menu.styl
@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 // Top level navigation bar – toolbar – menu – nav
 .toolbar
   top:0
@@ -8,7 +10,7 @@
   border-bottom: 1px solid darken($color-herobox, 12%)
 .toolbar.active
   width: auto
-@media screen and (min-width:768px)
+@media screen and (min-width: $sm-min-screen-width)
   .toolbar
     position:fixed
 // Button to toggle toolbar visibility
@@ -66,7 +68,7 @@
   display: inline-block
   padding-left: 0.618em
   padding-right: 0.618em
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     display: none
 .toolbar-mobile
   @extend $hrpg-button
@@ -77,7 +79,7 @@
   white-space: nowrap
   float:left;
   padding: 0.618em
-  @media screen and (max-width:767px)
+  @media screen and (max-width: $xs-max-screen-width)
     display: none
   > li
     margin-right: 0.618em
@@ -98,7 +100,7 @@
 .toolbar-bailey, .toolbar-wallet, .toolbar-options, .toolbar-subscribe
   float:right
   padding: 0.618em 0.618em 0.618em 0
-  @media screen and (max-width:767px)
+  @media screen and (max-width: $xs-max-screen-width)
     float: none
     display: inline-block
     padding: 0.618em 0.382em 0.618em 0
@@ -121,7 +123,7 @@
 .toolbar-options, .toolbar-wallet
   > li
     margin-left: 0.618em
-@media screen and (max-width:767px)
+@media screen and (max-width: $xs-max-screen-width)
   .toolbar-options
     > li
       padding-left:0em
@@ -140,7 +142,7 @@
   div
     padding-bottom: 1em
     width: 300px
-    @media screen and (max-width:767px)
+    @media screen and (max-width: $xs-max-screen-width)
       width: 96%
     .toolbar-notifs-notifs
       padding-bottom:1em
@@ -167,7 +169,7 @@
     hrpg-button-color-mixin(lighten($color-toolbar,32.8%))
 .toolbar-subscribe-button, .toolbar-controls .toolbar-subscribe-button
   @extend $hrpg-button
-@media screen and (max-width:767px)
+@media screen and (max-width: $xs-max-screen-width)
   .toolbar-toggle
     display: none
   .toolbar-mobile, .toolbar-settings, .toolbar-audio
diff --git a/website/public/css/npcs.styl b/website/public/css/npcs.styl
index b33e5e65f7..5a172ff581 100644
--- a/website/public/css/npcs.styl
+++ b/website/public/css/npcs.styl
@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 .npc_alex_container
   margin-bottom: 20px
 
@@ -8,7 +10,7 @@
   width:55px
   margin-right:0.618em
   position:relative
-  @media screen and (max-width:767px)
+  @media screen and (max-width: $xs-max-screen-width)
     margin-right:0px
 .npc_bailey
   float:left
diff --git a/website/public/css/options.styl b/website/public/css/options.styl
index 2cb964d09b..3206dc7659 100644
--- a/website/public/css/options.styl
+++ b/website/public/css/options.styl
@@ -1,13 +1,15 @@
+@require "./variables/screen-size.styl"
+
 #main > div > div > div > .tab-content
   margin: 1.618em 0em
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     border: 1px solid darken($color-options-menu, 12%)
     padding-bottom: 1.618em
 .options-menu, .options-submenu
   @extend $hrpg-submenu
   border-bottom: 1px solid darken($color-options-menu, 12%)
 .options-menu
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     background-color: $color-options-menu
 
   li
@@ -27,7 +29,7 @@
   border-bottom: 1px solid darken($color-options-menu, 12%)
   padding: .5em
 
-  @media screen and (max-width:767px)
+  @media screen and (max-width: $xs-max-screen-width)
     padding: 1em 0.618em 0 0.618em
     border: 1px solid darken($color-options-menu, 12%)
     border-top: none
diff --git a/website/public/css/shared.styl b/website/public/css/shared.styl
index a4ba105d98..6b339556f1 100644
--- a/website/public/css/shared.styl
+++ b/website/public/css/shared.styl
@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 .subscription-features
   tr
     td
@@ -53,7 +55,7 @@ li.spaced
     color: white;
     margin-right: 5px;
 
-@media (max-width:767px)
+@media (max-width: $xs-max-screen-width)
   .container-fluid
     padding-right: 5px
     padding-left: 5px
diff --git a/website/public/css/tasks.styl b/website/public/css/tasks.styl
index 854125dcb0..07d0206b3d 100644
--- a/website/public/css/tasks.styl
+++ b/website/public/css/tasks.styl
@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 // 1. Set up color classes
 // ========================
 
@@ -155,7 +157,7 @@ for $stage in $stages
     cursor: auto
 
 // 50% width columns with scrollbars for tablets
-@media (min-width: 768px) and (max-width: 970px)
+@media (min-width: $sm-min-screen-width) and (max-width: 970px)
   .task-column
     max-height: 18.6em
     overflow-y: scroll
diff --git a/website/public/css/variables/screen-size.styl b/website/public/css/variables/screen-size.styl
new file mode 100644
index 0000000000..d9444ac657
--- /dev/null
+++ b/website/public/css/variables/screen-size.styl
@@ -0,0 +1,8 @@
+// Bootstrap screen width thresholds.
+// Used for switching to different screen layout (mostly for smaller devices).
+
+$xs-max-screen-width = 767px
+$sm-min-screen-width = 768px
+$md-min-screen-width = 992px
+$lg-min-screen-width = 1200px
+