diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
index e0ad848c4..8136cab6a 100644
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -642,11 +642,6 @@ $footer-color:      #171819;
 $footer-link:       #454A4C;
 $footer-border:     #BFC1C3;
 
-// 03. Forms
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$input-bg:          #F8F8F8;
-
 // 04. Alerts
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
@@ -665,30 +660,3 @@ $color-warning:     #8A6D3B;
 $alert-bg:          #F2DEDE;
 $alert-border:      #EBCCD1;
 $color-alert:       #A94442;
-
-// 05. Levels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$level-1:           #1ABC9C;
-$level-2:           #43AC6A;
-$level-3:           #43AC6A;
-$level-4:           #43AC6A;
-$level-5:           #F08A24;
-
-$author:            #008CCF;
-$association:       #C0392B;
-$deleted:           #E7E7E7;
-
-$comment-author:    rgba(45,144,248,.15);
-$comment-level-5:   rgba(255,241,204,1);
-$comment-admin:     rgba(45,144,248,.15);
-$comment-official:  rgba(70,219,145,.3);
-
-// 06. Responsive
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-$small:             rem-calc(480);
-$small-breakpoint:  rem-calc(640);
-$medium-breakpoint: rem-calc(1024);
-$large-breakpoint:  rem-calc(1440);
-$xlarge-breakpoint: rem-calc(1920);
diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss
index abab720e0..88f17c7cc 100644
--- a/app/assets/stylesheets/datepicker_overrides.scss
+++ b/app/assets/stylesheets/datepicker_overrides.scss
@@ -85,7 +85,7 @@
         background: white;
 
         .ui-state-default {
-          background: $input-bg;
+          background: #F8F8F8;
           color: $text-medium;
         }
       }
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index e490bb0a1..f1618bb60 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -216,13 +216,6 @@ a {
   border: 0;
 }
 
-#drop-help.f-dropdown.content {
-
-  @media (min-width: $small-breakpoint) {
-    max-width: $line-height*15;
-  }
-}
-
 .menu.simple {
   border-bottom: 1px solid $border;
   margin: $line-height 0;
@@ -277,7 +270,7 @@ header {
     float: none;
     height: $line-height*1.5;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       float: left;
       margin-left: $line-height/2;
     }
@@ -288,7 +281,7 @@ header {
     padding: rem-calc(6) 0;
     text-align: center;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       float: right;
     }
   }
@@ -302,7 +295,7 @@ header {
   padding-bottom: 0;
   padding-top: 0;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     padding: 0;
   }
 
@@ -322,7 +315,7 @@ header {
     &.menu > li {
       display: block;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         display: table-cell;
         height: $line-height*3.5;
       }
@@ -331,7 +324,7 @@ header {
         color: white;
         padding-left: 0;
 
-        @media (min-width: $small-breakpoint) {
+        @include breakpoint(small) {
           font-size: $small-font-size;
           padding: rem-calc(11) rem-calc(16);
         }
@@ -339,7 +332,7 @@ header {
         &.button {
           text-align: left;
 
-          @media (min-width: $small-breakpoint) {
+          @include breakpoint(small) {
             background: white;
             color: $brand;
             text-align: center;
@@ -377,7 +370,7 @@ header {
 
 .subnavigation {
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     background: white;
     padding-bottom: 0;
   }
@@ -387,7 +380,7 @@ header {
     margin: 0;
 
     li {
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         display: inline-block;
         margin-right: rem-calc(36);
       }
@@ -400,7 +393,7 @@ header {
         text-align: left;
         width: 100%;
 
-        @media (min-width: $small-breakpoint) {
+        @include breakpoint(small) {
           color: $text;
           display: block;
           font-weight: bold;
@@ -416,7 +409,7 @@ header {
         &.active {
           color: white;
 
-          @media (min-width: $small-breakpoint) {
+          @include breakpoint(small) {
             border-bottom: 2px solid $brand;
             color: $brand;
           }
@@ -428,7 +421,7 @@ header {
   .input-group {
     padding-top: $line-height/4;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       margin-bottom: 0;
     }
   }
@@ -473,7 +466,7 @@ header {
     position: relative;
     text-align: left;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       margin-right: $line-height*1.5;
     }
 
@@ -528,7 +521,6 @@ footer {
   }
 
   h2 a {
-
     border-bottom: 1px solid $footer-border;
     display: block;
     font-size: $h3-font-size;
@@ -604,7 +596,7 @@ h3.sidebar-title {
       line-height: rem-calc(80); // Same as logo image height
       text-align: center;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         display: inline-block;
         text-align: left;
       }
@@ -710,7 +702,7 @@ form {
   }
 
   input[type]:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]) {
-    background: $input-bg;
+    background: #F8F8F8;
     height: $line-height*2;
     margin-bottom: rem-calc(16);
 
@@ -1002,7 +994,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
   float: left;
   margin: $line-height 0;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     float: right;
     margin-bottom: 0;
     margin-top: rem-calc(28);
@@ -1019,8 +1011,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
     height: $line-height*2;
   }
 
-  @media (max-width: $medium-breakpoint) {
-
+  @include breakpoint(medium down) {
     .column {
       padding: 0;
     }
@@ -1035,35 +1026,27 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
 }
 
 .is-author {
-  background: $author;
+  background: #008CCF;
 }
 
 .is-association {
-  background: $association;
+  background: #C0392B;
 }
 
 .is-deleted {
-  background: $deleted;
+  background: #E7E7E7;
 }
 
 .level-1 {
-  background: $level-1;
+  background: #1ABC9C;
 }
 
-.level-2 {
-  background: $level-2;
-}
-
-.level-3 {
-  background: $level-3;
-}
-
-.level-4 {
-  background: $level-4;
+.level-2, .level-3, .level-4 {
+  background: #43AC6A;
 }
 
 .level-5 {
-  background: $level-5;
+  background: #F08A24;
 }
 
 // 12. Tables
@@ -1358,7 +1341,7 @@ table {
         right: 0;
         top: 24px;
 
-        @media (min-width: $small-breakpoint) {
+        @include breakpoint(small) {
           content: 'c';
         }
       }
@@ -1371,7 +1354,7 @@ table {
 
 .verification {
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     .left + .left {
       margin-left: $line-height/2;
     }
@@ -1383,7 +1366,7 @@ table {
       float: left;
       width: 30%;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         width: 25%;
       }
     }
@@ -1392,7 +1375,7 @@ table {
   .progress {
     height: $line-height*3;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       height: $line-height*2;
     }
 
@@ -1409,7 +1392,7 @@ table {
     text-transform: uppercase;
     vertical-align: top;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       line-height: $line-height*2;
       padding: 0;
     }
@@ -1417,7 +1400,7 @@ table {
     .number {
       display: block;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         background-color: white;
         border-radius: rem-calc(30);
         color: #43AC6A;
@@ -1596,42 +1579,32 @@ table {
         padding: $line-height/4 0;
         overflow: hidden;
 
-        @each $n in ("1", "2", "3","4", "5") {
-          &.level-#{$n} {
-            @if $n == "5" {
-              background: $comment-level-5;
-              padding: $line-height/4 $line-height/2;
-            }
-            @elseif $n == "1" {
-              background: none;
-              padding: $line-height/4 $line-height/2;
-            }
-            @else {
-              background: $comment-official;
-              padding: $line-height/4 $line-height/2;
-            }
-          }
-        }
-
-        &.is-author {
-          background: $comment-author;
+        &.level-1, &.level-2, &.level-3, &.level-4, &.level-5,
+        &.is-author, &.is-admin, &.is-moderator {
+          background: rgba(70,219,145,.3);
           padding: $line-height/4 $line-height/2;
         }
 
-        &.is-admin, &.is-moderator {
-          background: $comment-admin;
-          padding: $line-height/4 $line-height/2;
+        &.level-1 {
+          background: none;
         }
 
         &.level-5 {
-          background: $comment-level-5;
-          padding: $line-height/4 $line-height/2;
+          background: rgba(255,241,204,1);
+        }
+
+        &.is-author {
+          background: rgba(45,144,248,.15);
+        }
+
+        &.is-admin, &.is-moderator {
+          background: rgba(45,144,248,.15);
         }
       }
     }
 
     .is-deleted {
-      background: $deleted;
+      background: #E7E7E7;
       margin-left: rem-calc(42);
       padding: $line-height/4 $line-height/2;
     }
@@ -1669,7 +1642,7 @@ table {
   float: none;
   margin-top: 0;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     float: right;
     margin-top: rem-calc(-24);
   }
@@ -1678,7 +1651,7 @@ table {
     padding-right: $line-height/2;
     float: none;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       float: right;
     }
   }
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 4e99acaab..384185af9 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -18,7 +18,7 @@
   font-size: $h3-font-size;
   font-weight: lighter;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     line-height: $line-height*2;
     margin-top: 0;
   }
@@ -27,7 +27,7 @@
     height: 48px;
     width: 48px;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       height: 80px;
       margin-right: $line-height/2;
       margin-top: 0;
@@ -40,7 +40,7 @@
   font-size: $h2-font-size;
   line-height: $h2-line-height;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     font-size: $h1-font-size;
     line-height: $h1-line-height;
   }
@@ -50,7 +50,7 @@
   font-size: $h3-font-size;
   line-height: $h3-line-height;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     font-size: $h2-font-size;
     line-height: $h2-line-height;
   }
@@ -60,7 +60,7 @@
   font-size: $h4-font-size;
   line-height: $h4-line-height;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     font-size: $h3-font-size;
     line-height: $h3-line-height;
   }
@@ -70,7 +70,7 @@
   font-size: $h5-font-size;
   line-height: $h5-line-height;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     font-size: $h4-font-size;
     line-height: $h4-line-height;
   }
@@ -80,7 +80,7 @@
   font-size: $h6-font-size;
   line-height: $h6-line-height;
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     font-size: $h5-font-size;
     line-height: $h5-line-height;
   }
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 046cc58d2..b8cba9385 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -491,7 +491,7 @@
       padding: rem-calc(24);
     }
 
-    @media (min-width: $small-breakpoint  + rem-calc(1)) and (max-width:$medium-breakpoint) {
+    @include breakpoint(small + rem-calc(1) and medium down) {
       .in-favor, .against {
         text-align: left;
         width: rem-calc(100);
@@ -502,7 +502,7 @@
       display: none;
     }
 
-    @media (min-width: $medium-breakpoint) {
+    @include breakpoint(medium) {
       .divider {
         display: inline-block;
       }
@@ -554,14 +554,14 @@
 
 .debates-list, .proposals-list, .investment-projects-list {
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     margin-bottom: rem-calc(48);
   }
 }
 
 .investment-projects-list {
 
-  @media (min-width: $small-breakpoint) {
+  @include breakpoint(small) {
     min-height: $line-height*15;
   }
 }
@@ -580,7 +580,7 @@
     min-height: rem-calc(192);
     padding: rem-calc(12) rem-calc(12) 0 rem-calc(12);
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       margin-bottom: rem-calc(-1);
       padding-bottom: rem-calc(12);
     }
@@ -715,7 +715,7 @@
     display: none;
   }
 
-  @media (min-width: $medium-breakpoint) {
+  @include breakpoint(medium) {
     .divider {
       display: inline-block;
     }
@@ -729,7 +729,7 @@
     border: 1px solid $votes-border;
     margin: 0 rem-calc(-12);
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       border-top-left-radius: 3px;
       border-bottom-left-radius: 3px;
       margin: 0 rem-calc(-25) 0 rem-calc(12);
@@ -747,7 +747,7 @@
       right: -1px;
       border-width: 13px 13px 0 0;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         content: "";
       }
     }
@@ -759,7 +759,7 @@
       padding-top: rem-calc(12);
       vertical-align: top;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         display: block;
         float: none;
         line-height: $line-height*2;
@@ -768,7 +768,7 @@
       }
     }
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       .like, .unlike {
 
         span.percentage {
@@ -787,7 +787,7 @@
     border: 1px solid $proposals-border;
     margin: 0 rem-calc(-12);
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       border-top-left-radius: 3px;
       border-bottom-left-radius: 3px;
       margin: 0 rem-calc(-25) 0 rem-calc(12);
@@ -805,7 +805,7 @@
       right: -1px;
       border-width: 13px 13px 0 0;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         content: "";
       }
     }
@@ -816,7 +816,7 @@
       padding-top: rem-calc(12);
       vertical-align: top;
 
-      @media (min-width: $small-breakpoint) {
+      @include breakpoint(small) {
         display: block;
         float: none;
         margin-left: 0;
@@ -837,7 +837,7 @@
     min-height: rem-calc(180);
     padding-top: 0;
 
-    @media (min-width: $small-breakpoint) {
+    @include breakpoint(small) {
       padding-top: $line-height*1.5;
     }
 
@@ -929,7 +929,7 @@
 .featured-debates, .featured-proposals {
   padding: $line-height/2 0;
 
-  @media (min-width: $medium-breakpoint) {
+  @include breakpoint(medium) {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }