diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index f28b7a1da..a43daa363 100644
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -4,3 +4,4 @@ $preprint-title: #D2D2D2;
 $preprint-title-hover: #D5E6ED;
 $gradient-percentage: 15%;
 $nav-bar-height: 25px;
+$carousel-control-width: 10%;
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 595a62816..29d4da7ff 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -1,7 +1,8 @@
+/* Import variables before bootstrap so that boostrap variables can be overridden */
+@import 'variables';
 @import 'bootstrap';
 @import 'ember-power-select';
 @import 'base';
-@import 'variables';
 @import 'authors';
 @import 'validated-input';
 @import 'hint';