diff --git a/core/modules/system/system.base.css b/core/modules/system/system.base.css
index 68a1683..f8a7726 100644
--- a/core/modules/system/system.base.css
+++ b/core/modules/system/system.base.css
@@ -235,6 +235,7 @@ tr .ajax-progress-throbber .throbber {
 .element-invisible {
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
+  left: 0;
 }
 
 /**
diff --git a/core/themes/bartik/bartik.info b/core/themes/bartik/bartik.info
index f0665de..c0c206d 100644
--- a/core/themes/bartik/bartik.info
+++ b/core/themes/bartik/bartik.info
@@ -1,5 +1,5 @@
 name = Bartik
-description = A flexible, recolorable theme with many regions.
+description = A flexible, recolorable theme with many regions and a responsive, mobile-first layout.
 package = Core
 version = VERSION
 core = 8.x
diff --git a/core/themes/bartik/css/layout.css b/core/themes/bartik/css/layout.css
index 7dfddf7..fd69c49 100644
--- a/core/themes/bartik/css/layout.css
+++ b/core/themes/bartik/css/layout.css
@@ -8,7 +8,6 @@ body,
 }
 #page-wrapper {
   min-height: 100%;
-  min-width: 960px;
 }
 #header div.section,
 #featured div.section,
@@ -17,7 +16,8 @@ body,
 #triptych,
 #footer-columns,
 #footer {
-  width: 960px;
+  width: 100%;
+  max-width: 860px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -26,47 +26,13 @@ body,
 }
 .region-header {
   float: right; /* LTR */
-  margin: 0 5px 10px;
-}
-.with-secondary-menu .region-header {
-  margin-top: 3em;
-}
-.without-secondary-menu .region-header {
-  margin-top: 15px;
+  margin: .5em 5px .75em;
+  border: 1px solid #ccc;
 }
 #secondary-menu {
-  position: absolute;
-  right: 0; /* LTR */
-  top: 0;
-  width: 480px;
-}
-#content,
-#sidebar-first,
-#sidebar-second,
-.region-triptych-first,
-.region-triptych-middle,
-.region-triptych-last,
-.region-footer-firstcolumn,
-.region-footer-secondcolumn,
-.region-footer-thirdcolumn,
-.region-footer-fourthcolumn {
-  display: inline;
-  float: left; /* LTR */
-  position: relative;
-}
-.one-sidebar #content {
-  width: 720px;
-}
-.two-sidebars #content {
-  width: 480px;
-}
-.no-sidebars #content {
-  width: 960px;
-  float: none;
-}
-#sidebar-first,
-#sidebar-second {
-  width: 240px;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
 }
 #main-wrapper {
   min-height: 300px;
@@ -78,23 +44,153 @@ body,
 .breadcrumb {
   margin: 0 15px;
 }
+#footer-wrapper {
+  padding: 35px 0 30px;
+}
+#footer-wrapper .section {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 15px;
+}
 .region-triptych-first,
 .region-triptych-middle,
 .region-triptych-last {
-  margin: 20px 20px 30px;
-  width: 280px;
-}
-#footer-wrapper {
-  padding: 35px 5px 30px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 20px 0;
 }
 .region-footer-firstcolumn,
 .region-footer-secondcolumn,
 .region-footer-thirdcolumn,
 .region-footer-fourthcolumn {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
   padding: 0 10px;
-  width: 220px;
 }
-#footer {
-  width: 940px;
-  min-width: 920px;
+
+@media all and (min-width: 560px) and (max-width:850px) {
+
+  #sidebar-first,
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last,
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn,
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    display: inline;
+    float: left; /* LTR */
+    position: relative;
+  }
+  .one-sidebar #sidebar {
+    width: 100%;
+  }
+  #sidebar-first,
+  #sidebar-second {
+    width: 50%;
+  }
+  #sidebar-second {
+    margin-left: 50%;
+  }
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 20px 15px 30px;
+    width: 33%;
+  }
+  .region-triptych-middle {
+    padding: 20px 5px 30px;
+  }
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 10px;
+    width: 50%;
+  }
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 10px;
+    width: 50%;
+  }
+  .region-footer-thirdcolumn {
+    clear: both;
+  }
+}
+
+@media all and (min-width: 851px) {
+
+  #header div.section,
+  #featured div.section,
+  #messages div.section,
+  #main,
+  #triptych,
+  #footer-columns,
+  #footer {
+    max-width: 1290px;
+  }
+  #content,
+  #sidebar-first,
+  #sidebar-second,
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last,
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn,
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    display: inline;
+    float: left; /* LTR */
+    position: relative;
+  }
+  .two-sidebars #content {
+    margin-left: 25%;
+    margin-right: 25%;
+    width: 50%;
+  }
+  .one-sidebar #content {
+    width: 75%;
+  }
+  .sidebar-first #content {
+    margin-left: 25%;
+    margin-right: 0;
+  }
+  .sidebar-second #content {
+    margin-right: 25%;
+    margin-left: 0;
+  }
+  #sidebar-first {
+    width: 25%;
+    margin-left: -100%;
+  }
+  #sidebar-second {
+    width: 25%;
+    margin-left: -25%;
+    clear: none;
+  }
+  .region-triptych-first,
+  .region-triptych-middle,
+  .region-triptych-last {
+    width: 33%;
+  }
+  .region-footer-firstcolumn,
+  .region-footer-secondcolumn,
+  .region-footer-thirdcolumn,
+  .region-footer-fourthcolumn {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0 10px;
+    width: 25%;
+  }
 }
diff --git a/core/themes/bartik/css/maintenance-page.css b/core/themes/bartik/css/maintenance-page.css
index c13c77b..e0c79c6 100644
--- a/core/themes/bartik/css/maintenance-page.css
+++ b/core/themes/bartik/css/maintenance-page.css
@@ -1,4 +1,3 @@
-
 body.maintenance-page {
   background-color: #fff;
   color: #000;
@@ -9,25 +8,19 @@ body.maintenance-page {
   margin-right: auto;
   min-width: 0;
   min-height: 0;
-  width: 800px;
   border: 1px solid #ddd;
   margin-top: 40px;
 }
 .maintenance-page #page {
-  margin: 20px 40px 40px;
+  margin: 10px;
 }
 .maintenance-page #main-wrapper {
   min-height: inherit;
 }
 .maintenance-page #header,
-.maintenance-page #messages,
-.maintenance-page #main {
+.maintenance-page #messages {
   width: auto;
 }
-.maintenance-page #header div.section,
-.maintenance-page #main {
-  width: 700px;
-}
 .maintenance-page #main {
   margin: 0;
 }
@@ -61,7 +54,21 @@ body.maintenance-page {
 .maintenance-page #messages div.messages {
   margin: 0;
 }
-.maintenance-page #messages div.section {
-  padding: 0;
-  width: auto;
+@media all and (min-width: 800px) {
+  .maintenance-page #page-wrapper {
+    width: 800px;
+  }
+  .maintenance-page #header div.section,
+  .maintenance-page #main {
+    width: 700px;
+  }
+  .maintenance-page #messages div.section {
+    padding: 0;
+    width: auto;
+  }
+}
+@media all and (min-width: 600px) { /* @TODO find the proper breakpoint */
+  .maintenance-page #page {
+    margin: 20px 40px 40px;
+  }
 }
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 7773eda..117a2d5 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -169,6 +169,11 @@ a.feed-icon {
   display: inline-block;
   padding: 15px 0 0 0;
 }
+img {
+  max-width: 100%;
+  height: auto;
+  border: 0;
+}
 
 /* ------------------ Table Styles ------------------ */
 
@@ -242,13 +247,33 @@ table ul.links li {
 .item-list .pager {
   font-size: 0.929em;
 }
+.item-list .pager li {
+  padding: 0;
+}
+.item-list .pager a {
+  display: inline-block;
+  padding: 10px 15px;
+}
+.item-list .pager .pager-first a {
+  padding: 10px 10px 10px 0;
+}
+.item-list .pager .pager-previous a {
+  padding: 10px 0;
+}
+.item-list .pager .pager-current {
+  padding: 0 10px;
+}
+.item-list .pager .pager-next a,
+.item-list .pager .pager-last a {
+  padding: 10px 0 10px 10px;
+}
 ul.menu li {
   margin: 0;
 }
 .region-content ul,
 .region-content ol {
   margin: 1em 0;
-  padding: 0 0 0.25em 2.5em; /* LTR */
+  padding: 0 0 0.25em 15px; /* LTR */
 }
 .item-list ul li {
   margin: 0;
@@ -288,15 +313,16 @@ ul.tips {
 }
 #logo {
   float: left; /* LTR */
-  padding: 15px 15px 15px 10px; /* LTR */
+  padding-left: 5px; /* LTR */
 }
+
 #name-and-slogan {
   float: left; /* LTR */
-  padding-top: 34px;
-  margin: 0 0 30px 15px; /* LTR */
+  margin: 0;
+  padding: 5px 10px 8px;
 }
 #site-name {
-  font-size: 1.821em;
+  font-size: 1.6em;
   color: #686868;
   line-height: 1;
 }
@@ -449,35 +475,34 @@ h1#site-name {
 }
 
 /* --------------- Main Menu ------------ */
-
 #main-menu {
   clear: both;
 }
 #main-menu-links {
   font-size: 0.929em;
-  margin: 0;
-  padding: 0 15px;
+  margin: 0 5px;
+  padding: 0;
+  text-align: left;
 }
 #main-menu-links li {
-  float: left; /* LTR */
+  float: none;
   list-style: none;
-  padding: 0 1px;
-  margin: 0 1px;
+  margin: 0;
+  padding: 0;
+  width: 100%;
 }
 #main-menu-links a {
   color: #333;
   background: #ccc;
   background: rgba(255, 255, 255, 0.7);
-  float: left; /* LTR */
-  height: 2.4em;
-  line-height: 2.4em;
-  padding: 0 0.8em;
+  float: none;
+  display: block;
   text-decoration: none;
   text-shadow: 0 1px #eee;
-  -moz-border-radius-topleft: 8px;
-  -moz-border-radius-topright: 8px;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  margin-bottom: 4px;
+  padding: 0.9em 0 0.9em 10px;
 }
 #main-menu-links a:hover,
 #main-menu-links a:focus {
@@ -491,18 +516,21 @@ h1#site-name {
 #main-menu-links li a.active {
   border-bottom: none;
 }
-.featured #main-menu-links li a:active,
-.featured #main-menu-links li a.active {
-  background: #f0f0f0;
-  background: rgba(240, 240, 240, 1.0);
-}
 
 /* --------------- Secondary Menu ------------ */
 
 #secondary-menu-links {
   float: right; /* LTR */
   font-size: 0.929em;
-  margin: 10px 10px 0;
+  margin: 0 10px;
+}
+#secondary-menu-links  li{
+  margin: 0;
+  padding: 0;
+}
+#secondary-menu-links  a {
+  display: inline-block;
+  padding:  0.8em;
 }
 #secondary-menu-links a:hover,
 #secondary-menu-links a:focus {
@@ -520,10 +548,10 @@ h1#site-name {
 
 #featured {
   text-align: center;
-  font-size: 1.643em;
+  font-size: 1.2em;
   font-weight: normal;
   line-height: 1.4;
-  padding: 20px 0 45px;
+  padding: 20px 10px 45px;
   margin: 0;
   background: #f0f0f0;
   background: rgba(30, 50, 10, 0.08);
@@ -531,7 +559,7 @@ h1#site-name {
   text-shadow: 1px 1px #fff;
 }
 #featured h2 {
-  font-size: 1.174em;
+  font-size: 1.2em;
   line-height: 1;
 }
 #featured p {
@@ -770,15 +798,15 @@ ul.links {
 }
 #triptych h2 {
   color: #000;
-  font-size: 1.714em;
-  margin-bottom: 0.8em;
+  font-size: 1.4em;
+  margin-bottom: 0.6em;
   text-shadow: 0 1px 0 #fff;
   text-align: center;
   line-height: 1;
 }
 #triptych .block {
-  margin-bottom: 2em;
-  padding-bottom: 2em;
+  margin-bottom: 1em;
+  padding-bottom: 1em;
   border-bottom: 1px solid #dfdfdf;
   line-height: 1.3;
 }
@@ -1602,3 +1630,106 @@ div.admin-panel .description {
   border-top: 1px solid #d6d6d6;
   margin: 0;
 }
+
+/* ----------- media queries ------------------------------- */
+
+@media all and (min-width: 461px) and (max-width: 900px) {
+ /* ------------ Header and Menus -------------------------- */
+
+ .region-header {
+    margin: .5em 5px .75em;
+  }
+  #logo {
+    padding: 5px 0 0 5px; /* LTR */
+  }
+  #name-and-slogan {
+    padding: 10px 10px 8px;
+  }
+  #main-menu-links {
+    margin: 0 5px;
+    padding: 0;
+    text-align: center;
+  }
+  #main-menu-links li {
+    float: left;
+    margin-right: 5px;
+    padding: 0;
+    display: inline-block;
+    width: 32.75%;
+  }
+  #main-menu-links li:nth-child(3n) {
+    margin-right: -5px;
+  }
+  #main-menu-links a {
+    float: none;
+    display: block;
+    -moz-border-radius: 8px;
+    border-radius: 8px;
+    margin-bottom: 5px;
+    padding: 0.9em 5px;
+  }
+}
+
+@media all and (min-width: 901px) {
+
+  .region-header {
+    margin: 1em 5px 1.5em;
+  }
+  #logo {
+    padding: 15px 15px 15px 10px; /* LTR */
+  }
+  #name-and-slogan {
+    padding: 26px 0 0;
+    margin: 0 0 30px 15px; /* LTR */
+  }
+  #site-name {
+    font-size: 1.821em;
+  }
+  #main-menu-links {
+    font-size: 0.929em;
+    margin: 0;
+    padding: 0 15px;
+  }
+  #main-menu-links li {
+    float: left; /* LTR */
+    list-style: none;
+    padding: 0 1px;
+    margin: 0 1px;
+    width: auto;
+  }
+  #main-menu-links a {
+    float: left; /* LTR */
+    padding: 0.7em 0.8em;
+    margin-bottom: 0;
+    -moz-border-radius-bottomleft: 0;
+    -moz-border-radius-bottomright: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .featured #main-menu-links li a:active,
+  .featured #main-menu-links li a.active {
+  background: #f0f0f0;
+  background: rgba(240, 240, 240, 1.0);
+  }
+}
+
+@media all and (min-width: 520px) {
+
+  /* ----------------- Featured ----------------- */
+  #featured {
+    font-size: 1.643em;
+  }
+  #featured h2 {
+    font-size: 1.174em;
+  }
+
+  /* ------------------ Triptych ----------------- */
+  #triptych h2 {
+    font-size: 1.714em;
+    margin-bottom: 0.9em;
+  }
+  #triptych .block {
+    margin-bottom: 2em;
+    padding-bottom: 2em;
+  }
+}
diff --git a/core/themes/bartik/templates/page.tpl.php b/core/themes/bartik/templates/page.tpl.php
index f753093..1e31c61 100644
--- a/core/themes/bartik/templates/page.tpl.php
+++ b/core/themes/bartik/templates/page.tpl.php
@@ -90,6 +90,23 @@
 <div id="page-wrapper"><div id="page">
 
   <div id="header" class="<?php print $secondary_menu ? 'with-secondary-menu': 'without-secondary-menu'; ?>"><div class="section clearfix">
+    <?php if ($secondary_menu): ?>
+      <div id="secondary-menu" class="navigation">
+        <?php print theme('links__system_secondary_menu', array(
+          'links' => $secondary_menu,
+          'attributes' => array(
+            'id' => 'secondary-menu-links',
+            'class' => array('links', 'inline', 'clearfix'),
+          ),
+          'heading' => array(
+            'text' => t('Secondary menu'),
+            'level' => 'h2',
+            'class' => array('element-invisible'),
+          ),
+        )); ?>
+      </div> <!-- /#secondary-menu -->
+    <?php endif; ?>
+
 
     <?php if ($logo): ?>
       <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
@@ -142,22 +159,7 @@
       </div> <!-- /#main-menu -->
     <?php endif; ?>
 
-    <?php if ($secondary_menu): ?>
-      <div id="secondary-menu" class="navigation">
-        <?php print theme('links__system_secondary_menu', array(
-          'links' => $secondary_menu,
-          'attributes' => array(
-            'id' => 'secondary-menu-links',
-            'class' => array('links', 'inline', 'clearfix'),
-          ),
-          'heading' => array(
-            'text' => t('Secondary menu'),
-            'level' => 'h2',
-            'class' => array('element-invisible'),
-          ),
-        )); ?>
-      </div> <!-- /#secondary-menu -->
-    <?php endif; ?>
+
 
   </div></div> <!-- /.section, /#header -->
 
@@ -177,12 +179,6 @@
 
     <?php print $breadcrumb; ?>
 
-    <?php if ($page['sidebar_first']): ?>
-      <div id="sidebar-first" class="column sidebar"><div class="section">
-        <?php print render($page['sidebar_first']); ?>
-      </div></div> <!-- /.section, /#sidebar-first -->
-    <?php endif; ?>
-
     <div id="content" class="column"><div class="section">
       <?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
       <a id="main-content"></a>
@@ -209,6 +205,12 @@
 
     </div></div> <!-- /.section, /#content -->
 
+    <?php if ($page['sidebar_first']): ?>
+      <div id="sidebar-first" class="column sidebar"><div class="section">
+        <?php print render($page['sidebar_first']); ?>
+      </div></div> <!-- /.section, /#sidebar-first -->
+    <?php endif; ?>
+
     <?php if ($page['sidebar_second']): ?>
       <div id="sidebar-second" class="column sidebar"><div class="section">
         <?php print render($page['sidebar_second']); ?>