diff --git a/css/styles.css b/css/styles.css
index 78f22df..93b2946 100755
--- a/css/styles.css
+++ b/css/styles.css
@@ -2,522 +2,592 @@
 /* CSS Document */
 
 :root {
-    --brand-color: orange;
-    --text-brand-color: #2b2b2b;
-    /* default dark background color */
-    --bg-dark: #252831;
-    /* default light background color */
-    --bg-light: #eee;
-    /* default dark text color */
-    --text-dark: #333;
-    /* default light text color */
-    --text-light: #fff;
-    /* default link text color */
-    --link-color: #3397db;
-    /* default link text color over dark background */
-    --link-color-on-dark: #81c0ea;
-    /* default darker link text color */
-    --link-color-darker: #01447e;
-    /* default link text color on hover */
-    --link-color-hover: var(--text-dark);
-    /* default link text color on hover when background is dark */
-    --link-color-hover-on-dark: var(--brand-color);
-    /* top layer z-index value */
-    --top-layer: 100;
-    /* define below other layers! */
-    --modal-layer: 90;
-    /* end of layer definitions */
-    /* default font size */
-    --fs-default: 1em;
-    /* default line height */
-    --lh-default: 1em;
-    /* default top and bottom margin */
-    --default-y-mg: 8px;
-    /* default left and righ margin */
-    --default-x-mg: 8px;
-    /* default padding all around */
-    --default-pad: 16px;
-    /* COMPONENTS VAR */
-    /* default light background color for a component */
-    --c-bg-light: #f3f3f3;
-    /* default light background color for a row component */
-    --c-bg-row-default: #fff;
-    /* default border color for a row component */
-    --c-bd-color-row-default: #949494;
-    /* default button width */
-    --c-btn-default-width: 144px;
-    /* default button width */
-    --c-btn-small-width: calc(var(--c-btn-default-width) / 3);
-    /* default button height */
-    --c-btn-min-height: 48px;
-    /* default font size for a button component */
-    --c-btn-fs-default: 1.2em;
-    /* default line height for a button component */
-    --c-btn-lh-default: 48px;
-    /* default row height */
-    --c-row-min-height: 64px;
-}
-html, body {
-    height: 100%;
+  --brand-color: orange;
+  --text-brand-color: #2b2b2b;
+  /* default dark background color */
+  --bg-dark: #252831;
+  /* default light background color */
+  --bg-light: #eee;
+  /* default dark text color */
+  --text-dark: #333;
+  /* default light text color */
+  --text-light: #fff;
+  /* default link text color */
+  --link-color: #3397db;
+  /* default link text color over dark background */
+  --link-color-on-dark: #81c0ea;
+  /* default darker link text color */
+  --link-color-darker: #01447e;
+  /* default link text color on hover */
+  --link-color-hover: var(--text-dark);
+  /* default link text color on hover when background is dark */
+  --link-color-hover-on-dark: var(--brand-color);
+  /* top layer z-index value */
+  --top-layer: 100;
+  /* define below other layers! */
+  --modal-layer: 90;
+  /* end of layer definitions */
+  /* default font size */
+  --fs-default: 1em;
+  /* default line height */
+  --lh-default: 1em;
+  /* default top and bottom margin */
+  --default-y-mg: 8px;
+  /* default left and righ margin */
+  --default-x-mg: 8px;
+  /* default padding all around */
+  --default-pad: 16px;
+  /* COMPONENTS VAR */
+  /* default light background color for a component */
+  --c-bg-light: #f3f3f3;
+  /* default light background color for a row component */
+  --c-bg-row-default: #fff;
+  /* default border color for a row component */
+  --c-bd-color-row-default: #949494;
+  /* default button width */
+  --c-btn-default-width: 144px;
+  /* default button width */
+  --c-btn-small-width: calc(var(--c-btn-default-width) / 3);
+  /* default button height */
+  --c-btn-min-height: 48px;
+  /* default font size for a button component */
+  --c-btn-fs-default: 1.2em;
+  /* default line height for a button component */
+  --c-btn-lh-default: 48px;
+  /* default row height */
+  --c-row-min-height: 64px;
+}
+html,
+body {
+  height: 100vh;
 }
-body, td, th, p {
-    font-family: Arial, Helvetica, sans-serif;
-    font-size: var(--fs-default);
-    color: var(--text-dark);
+body,
+td,
+th,
+p {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: var(--fs-default);
+  color: var(--text-dark);
 }
 p {
-    /* decrese default margin from webkit */
-    -webkit-margin-before: 0.25rem;
-    -webkit-margin-after: 0.25rem;
+  /* decrese default margin from webkit */
+  -webkit-margin-before: 0.25rem;
+  -webkit-margin-after: 0.25rem;
 }
 body {
-    background-color: var(--bg-light);
-    margin: 0;
-    position: relative;
-}
-ul, li {
-    font-family: Arial, Helvetica, sans-serif;
-    color: var(--text-dark);
-    list-style: none;
-    -webkit-margin-before: 0;
-    -webkit-margin-after: 0;
-    -webkit-margin-start: 0;
-    -webkit-margin-end: 0;
-    -webkit-padding-start: 0;
+  background-color: var(--bg-light);
+  margin: 0;
+  position: relative;
+}
+ul,
+li {
+  font-family: Arial, Helvetica, sans-serif;
+  color: var(--text-dark);
+  list-style: none;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-start: 0;
 }
 a {
-    color: var(--brand-color);
-    text-decoration: none;
+  color: var(--brand-color);
+  text-decoration: none;
 }
-a:hover, a:focus {
-    color: var(--link-color);
-    text-decoration: none;
+a:hover,
+a:focus {
+  color: var(--link-color);
+  text-decoration: none;
 }
 a img {
-    border: none 0 #fff;
-}
-h1, h2, h3, h4, h5, h6 {
-    font-family: Arial, Helvetica, sans-serif;
-    line-height: calc(var(--lh-default) * 1.5);
-    /*  RESET USER AGENT STYLES on hX elements */
-    -webkit-margin-before: 0;
-    -webkit-margin-after: 0;
-}
-article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-    display: block;
-    max-width: 100%;
+  border: none 0 #fff;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: Arial, Helvetica, sans-serif;
+  line-height: calc(var(--lh-default) * 1.5);
+  /*  RESET USER AGENT STYLES on hX elements */
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+}
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+  max-width: 100%;
 }
 button {
-    background-color: transparent;
-    border: none;
-    margin: 0;
-    padding: 0;
+  background-color: transparent;
+  border: none;
+  margin: 0;
+  padding: 0;
 }
-#maincontent {
-    background-color: var(--bg-light);
+
+main {
+  background-color: var(--bg-light);
 }
-#footer {
-    background-color: var(--bg-dark);
-    color: var(--text-light);
-    letter-spacing: 1px;
-    padding: 25px;
-    text-align: center;
-    text-transform: uppercase;
+footer {
+  background-color: var(--bg-dark);
+  color: var(--text-light);
+  text-align: center;
+  text-transform: uppercase;
+  padding: var(--default-pad);
 }
+
 .debug {
-    border: 1px solid red;
+  border: 1px solid red;
 }
 /* ====================== Components ====================== */
 
 .c-btn {
-    background-color: var(--brand-color);
-    color: var(--text-brand-color);
-    border: 0;
-    width: 144px;
-    min-width: var(--c-btn-default-width);
-    max-width: 80%;
-    margin: var(--default-y-mg) 0;
-    margin-right: calc(var(--default-x-mg) * 2);
-    display: inline-block;
-    border-radius: 0.25em;
-    font-size: var(--fs-default);
-    padding: var(--default-pad);
-    cursor: pointer;
-}
-.btn-default:hover, .btn-default a:hover, .btn-default:focus, .btn-default a:focus {
-    background-color: var(--bg-dark);
-    color: var(--text-light);
-    border: 1px solid var(--brand-color);
-    text-decoration: underline;
+  background-color: var(--brand-color);
+  color: var(--text-brand-color);
+  border: 0;
+  width: 144px;
+  min-width: var(--c-btn-default-width);
+  max-width: 80%;
+  margin: var(--default-y-mg) 0;
+  margin-right: calc(var(--default-x-mg) * 2);
+  display: inline-block;
+  border-radius: 0.25em;
+  font-size: var(--fs-default);
+  padding: var(--default-pad);
+  cursor: pointer;
+}
+.btn-default:hover,
+.btn-default a:hover,
+.btn-default:focus,
+.btn-default a:focus {
+  background-color: var(--bg-dark);
+  color: var(--text-light);
+  border: 1px solid var(--brand-color);
+  text-decoration: underline;
 }
 .btn-small {
-    width: 48px;
-    min-width: var(--c-btn-small-width);
-    text-align: center;
+  width: 48px;
+  min-width: var(--c-btn-small-width);
+  text-align: center;
 }
 .row-default {
-    height: var(--c-row-min-height);
-    min-height: var(--c-row-min-height);
-    background-color: var(--c-bg-row-default);
-    padding: var(--default-pad) 0 var(--default-pad) var(--default-pad);
-    border-bottom: 1px solid var(--c-bd-color-row-default);
+  height: var(--c-row-min-height);
+  min-height: var(--c-row-min-height);
+  background-color: var(--c-bg-row-default);
+  padding: var(--default-pad) 0 var(--default-pad) var(--default-pad);
+  border-bottom: 1px solid var(--c-bd-color-row-default);
 }
 @media screen and (min-width: 650px) {
-    .row-default {
-        padding: calc(var(--default-pad)/2) 0 calc(var(--default-pad)/2) calc(var(--default-pad)/2);
-    }
+  .row-default {
+    padding: calc(var(--default-pad) / 2) 0 calc(var(--default-pad) / 2)
+      calc(var(--default-pad) / 2);
+  }
 }
 .row-default:first-child {
-    border-top: 1px solid var(--c-bd-color-row-default);
+  border-top: 1px solid var(--c-bd-color-row-default);
 }
 .c-modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: var(--bg-light);
-    text-align: center;
-    z-index: var(--modal-layer);
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--bg-light);
+  text-align: center;
+  z-index: var(--modal-layer);
 }
 .btn-close-modal {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    background-color: var(--bg-dark);
-    border-top: 1px solid var(--c-bd-color-row-default);
-    width: 100%;
-}
-.c-link-on-dark a:hover, .c-link-on-dark a:focus {
-    color: var(--link-color-hover-on-dark);
-    text-decoration: underline;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: var(--bg-dark);
+  border-top: 1px solid var(--c-bd-color-row-default);
+  width: 100%;
+}
+.c-link-on-dark a:hover,
+.c-link-on-dark a:focus {
+  color: var(--link-color-hover-on-dark);
+  text-decoration: underline;
 }
 .c-skip-link {
-    position: absolute;
-    top: -60px;
-    left: 0;
-    z-index: var(--top-layer);
-    margin: var(--default-y-mg) var(--default-x-mg);
+  position: absolute;
+  top: -60px;
+  left: 0;
+  z-index: var(--top-layer);
+  margin: var(--default-y-mg) var(--default-x-mg);
 }
 .c-skip-link:focus {
-    top: 0;
+  top: 0;
 }
 /* ====================== Header ====================== */
 
 header {
-    background-color: var(--bg-dark);
+  background-color: var(--bg-dark);
 }
 header h1 {
-    line-height: 48px;
-    text-align: center;
-    margin: 0;
+  line-height: initial;
+  text-align: center;
+  margin: 0;
+  padding: var(--default-pad);
+}
+@media screen and (min-width: 650px) {
+  header h1 {
+    padding: calc(var(--default-pad) * 1.25);
+  }
+}
+@media screen and (min-width: 1024px) {
+  header h1 {
+    padding: calc(var(--default-pad) * 1.5);
+  }
 }
 /* ====================== Navigation ====================== */
 
 nav {
-    text-align: center;
+  text-align: center;
 }
 nav h1 {
-    margin: auto;
+  margin: auto;
 }
 nav h1 a {
-    color: var(--text-light);
-    font-weight: 200;
-    letter-spacing: 10px;
-    text-transform: uppercase;
+  color: var(--text-light);
+  font-weight: 200;
+  letter-spacing: 10px;
+  text-transform: uppercase;
 }
 /* ====================== Map ====================== */
 
 #map {
-    height: 40vh;
-    width: 100%;
-    background-color: var(--c-bg-light);
+  height: 40vh;
+  width: 100%;
+  background-color: var(--c-bg-light);
 }
 /* ====================== Restaurant Filtering ====================== */
 
 .filter-options {
-    text-align: center;
-    clear: both;
+  text-align: center;
+  clear: both;
 }
 #filters-modal select {
-    display: block;
-    margin: var(--default-y-mg) auto;
-    padding: calc(var(--default-pad) * 2);
+  display: block;
+  margin: var(--default-y-mg) auto;
+  padding: calc(var(--default-pad));
+}
+select option {
+  background-color: VAR(--BG-DARK);
+  color: VAR(--BRAND-COLOR);
+}
+select option selected,
+select option:checked {
+  background-color: var(--brand-color);
+  color: var(-var(--text-dark));
 }
 /* ====================== Restaurant Listing ====================== */
 
 @media screen and (min-width: 400px) {
-    .view-list {
-        display: none;
-    }
+  .view-list {
+    display: none;
+  }
 }
 .restaurants-container {
-    width: 100%;
-}
-#restaurants-list {
-    /* display: grid; */
-    /* grid-auto-columns: auto auto; */
+  width: 100%;
 }
 .restaurant-container {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 .restaurant-img {
-    max-height: var(--c-row-min-height);
+  max-height: var(--c-row-min-height);
 }
 .descriptions {
-    padding: 0 1rem;
-    width: 100%;
+  padding: 0 1rem;
+  width: 100%;
 }
 .address {
-    display: none;
+  display: none;
 }
 .restaurant-container .more-container {
-    margin-left: auto;
+  margin-left: auto;
 }
 @media screen and (max-width: 399px) {
-    .restaurant-container h1 {
-        font-size: var(--fs-default);
-    }
+  .restaurant-container h2 {
+    font-size: var(--fs-default);
+  }
 }
 @media screen and (min-width: 400px) {
-    .row-default {
-        min-height: calc(var(--c-row-min-height) * 1.2);
-    }
-    .restaurant-img-container {
-        /* height: calc(var(--c-row-min-height) * 1.5); */
-    }
-    .restaurant-container {
-        align-items: center;
-    }
-    .restaurant-img-container {
-        flex: 2;
-        align-self: baseline;
-        height: min-content;
-    }
-    .restaurant-img {
-        height: 100%;
-        max-height: 100%;
-    }
-    .descriptions {
-        flex: 4;
-    }
-    .restaurant-container h1 {
-        font-size: larger;
-    }
-    .more-container {
-        flex: 1;
-    }
-    .more-container a {
-        float: right;
-    }
+  .row-default {
+    min-height: calc(var(--c-row-min-height) * 1.2);
+  }
+  .restaurant-container {
+    align-items: center;
+  }
+  .restaurant-img-container {
+    flex: 2;
+    align-self: baseline;
+    height: 100%;
+  }
+  .restaurant-img {
+    max-height: 100%;
+  }
+  .descriptions {
+    flex: 4;
+  }
+  .restaurant-container h2 {
+    font-size: larger;
+  }
+  .more-container {
+    flex: 1;
+  }
+  .more-container a {
+    float: right;
+  }
 }
 @media screen and (min-width: 650px) {
-    .index-page-container .map-container {
-        height: 50vh
-    }
-    #restaurants-list {
-        display: grid;
-        grid-template-columns: auto auto;
-    }
-    .restaurant-container {
-        border: 1px solid var(--c-bd-color-row-default);
-        border-radius: 4px;
-        margin-bottom: 16px;
-    }
-    .restaurant-container h1 {
-        font-size: initial;
-    }
+  .index-page-container .map-container {
+    height: 50vh;
+  }
+  #restaurants-list {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+  .restaurant-container {
+    border: 1px solid var(--c-bd-color-row-default);
+    border-radius: 4px;
+    margin-bottom: 16px;
+  }
+  .restaurant-container h2 {
+    font-size: initial;
+  }
 }
 @media screen and (min-width: 800px) {
-    .index-page-container {
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-    }
-    .index-page-container .map-container {
-        grid-column: 1 / 10;
-        height: 100vh;
-    }
-    .index-page-container .restaurants-container {
-        grid-column: 11 / 12;
-        max-height: 100vh;
-        overflow: scroll;
-    }
-    #restaurants-list {
-        display: block;
-    }
+  .index-page-container {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+  }
+  .index-page-container .map-container {
+    grid-column: 1 / 7;
+    height: 90vh;
+    margin-right: calc(var(--default-x-mg) * 2);
+  }
+  .index-page-container .restaurants-container {
+    grid-column: 7 / 13;
+    max-height: 90vh;
+    overflow: scroll;
+  }
+  #restaurants-list {
+    display: block;
+  }
 }
 @media screen and (min-width: 1024px) {
-    .index-page-container {
-        display: grid;
-        grid-template-columns: auto auto auto auto;
-    }
-    .address {
-        display: block;
-    }
+  .index-page-container {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+  }
+  .index-page-container .map-container {
+    grid-column: 1 / 10;
+    height: 90vh;
+  }
+  .index-page-container .restaurants-container {
+    grid-column: 10 / 12;
+    max-height: 90vh;
+    overflow: scroll;
+  }
+
+  .address {
+    display: block;
+  }
 }
 /* ====================== Breadcrumb ====================== */
 
 .breadcrumb {
-    padding: 10px 40px 16px;
-    list-style: none;
-    background-color: var(--bg-dark);
-    font-size: var(--fs-default);
-    margin: 0;
+  padding: 10px 40px 16px;
+  list-style: none;
+  background-color: var(--bg-dark);
+  font-size: var(--fs-default);
+  margin: 0;
 }
 /* Display list items side by side */
 
 .breadcrumb li {
-    display: inline;
-    color: var(--text-light);
+  display: inline;
+  color: var(--text-light);
 }
 /* Add a slash symbol (/) before/behind each list item */
 
-.breadcrumb li+li:before {
-    padding: 8px;
-    color: var(--text-light);
-    content: "/\00a0";
+.breadcrumb li + li:before {
+  padding: 8px;
+  color: var(--text-light);
+  content: "/\00a0";
 }
 /* Add a color to all links inside the list */
 
 .breadcrumb li a {
-    color: var(--link-color-on-dark);
-    text-decoration: none;
+  color: var(--link-color-on-dark);
+  text-decoration: none;
 }
 /* Add a color on mouse-over */
 
 .breadcrumb li a:hover {
-    color: var(--link-color-hover-on-dark);
-    text-decoration: underline;
+  color: var(--link-color-hover-on-dark);
+  text-decoration: underline;
 }
 /* ====================== Restaurant Details ====================== */
 
 .resto-page-container #map {
-    height: 20vh;
+  height: 20vh;
 }
-.resto-page-container h1, .resto-page-container p {
-    text-align: center;
+.resto-page-container h2,
+.resto-page-container p {
+  text-align: center;
 }
-.restaurant-details-container, .restaurant-hours-container-modal {
-    text-align: center;
+.restaurant-details-container,
+.restaurant-hours-container-modal {
+  text-align: center;
 }
 .resto-page-container .restaurant-img-container {
-    width: 100%;
-    height: initial;
+  width: 100%;
+  height: initial;
 }
 @media screen and (min-width: 400px) {
-    .resto-page-container .restaurant-img-container {
-        width: 80%;
-        margin: 0 auto;
-    }
-    .resto-page-container .restaurant-img {
-        height: initial;
-    }
-    .restaurant-hours-container-modal table {
-        margin: 0 auto;
-    }
+  .resto-page-container .restaurant-img-container {
+    width: 80%;
+    margin: 0 auto;
+  }
+  .resto-page-container .restaurant-img {
+    height: initial;
+  }
+  .restaurant-hours-container-modal table {
+    margin: 0 auto;
+  }
 }
 @media screen and (min-width: 650px) {
-    .resto-page-container {
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        grid-template-rows: auto auto auto;
-    }
-    .resto-page-container .map-container {
-        grid-row: 1 / -1;
-        grid-column: 6 / -1;
-    }
-    .restaurant-details-container {
-        grid-column: 1 / 6;
-    }
-    .map-container>#map {
-        height: 100%;
-    }
+  .resto-page-container {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: auto auto auto;
+  }
+  .resto-page-container .map-container {
+    grid-row: 1 / -1;
+    grid-column: 6 / -1;
+  }
+  .restaurant-details-container {
+    grid-column: 1 / 6;
+  }
+  .map-container > #map {
+    height: 100%;
+  }
 }
 .resto-page-container .restaurant-img {
-    max-width: 100%;
-    max-height: initial;
+  max-width: 100%;
+  max-height: initial;
 }
-.reviews-container-modal, .restaurant-hours-container-modal {
-    display: none;
-    overflow: hidden;
+.reviews-container-modal,
+.restaurant-hours-container-modal {
+  display: none;
+  overflow: hidden;
 }
 @media screen and (max-width: 500px) {
-    table, thead, tbody, th, td, tr {
-        display: block;
-    }
-    thead tr {
-        position: absolute;
-        top: -9999px;
-        left: -9999px;
-    }
-    td {
-        position: relative;
-        text-align: center;
-    }
-    table>tr {
-        margin: var(--default-y-mg) auto;
-    }
+  table,
+  thead,
+  tbody,
+  th,
+  td,
+  tr {
+    display: block;
+  }
+  thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+  td {
+    position: relative;
+    text-align: center;
+  }
+  table > tr {
+    margin: var(--default-y-mg) auto;
+  }
 }
 .restaurant-hours-container-modal td:nth-child(odd) {
-    font-weight: bold;
+  font-weight: bold;
 }
 .reviews-container-modal {
-    line-height: initial;
-    overflow-y: scroll;
+  line-height: initial;
+  overflow-y: scroll;
+}
+
+.c-focus-helper,
+.c-focus-helper:focus {
+  background-color: var(--text-light);
+  color: var(--text-light);
+  position: relative;
+  top: -16px;
 }
 @media screen and (min-width: 650px) {
-    .reviews-container-modal ul {
-        display: grid;
-        grid-template-columns: auto auto;
-    }
+  .reviews-container-modal ul {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
 }
 @media screen and (min-width: 1024px) {
-    .reviews-container-modal ul {
-        grid-template-columns: auto auto auto;
-    }
+  .reviews-container-modal ul {
+    grid-template-columns: auto auto auto;
+  }
 }
 .reviews-container-modal ul {
-    padding-bottom: calc(var(--c-btn-min-height) * 1.5);
+  padding-bottom: calc(var(--c-btn-min-height) * 1.5);
 }
 .reviews-container-modal {
-    font-size: calc(var(--fs-default) * 1.2);
+  font-size: calc(var(--fs-default) * 1.2);
 }
 .reviews-container-modal li {
-    margin: calc(var(--default-y-mg) * 2) calc(var(--default-x-mg) * 2) 0 calc(var(--default-x-mg) * 3);
-    background-color: var(--c-bg-row-default);
-    border: 1px solid var(--c-bd-color-row-default);
-    padding: calc(var(--default-pad) * 2);
-    border-radius: 4px;
+  margin: calc(var(--default-y-mg) * 2) calc(var(--default-x-mg) * 2) 0
+    calc(var(--default-x-mg) * 3);
+  background-color: var(--c-bg-row-default);
+  border: 1px solid var(--c-bd-color-row-default);
+  padding: calc(var(--default-pad) * 2);
+  border-radius: 4px;
 }
 @media screen and (min-width: 650px) {
-    .reviews-container-modal li {
-        margin-top: calc(var(--default-y-mg) * 4);
-    }
+  .reviews-container-modal li {
+    margin-top: calc(var(--default-y-mg) * 4);
+  }
 }
 .reviews-container-modal .review-date {
-    width: 100%;
-    text-align: right;
-    font-style: italic;
+  width: 100%;
+  text-align: right;
+  font-style: italic;
 }
-.reviews-container-modal .review-author, .reviews-container-modal .review-rating {
-    display: inline-block;
-    width: 50%;
-    font-weight: bold;
+.reviews-container-modal .review-author,
+.reviews-container-modal .review-rating {
+  display: inline-block;
+  width: 50%;
+  font-weight: bold;
 }
 .reviews-container-modal .review-comments {
-    width: 100%;
-    padding: var(--default-pad) 0;
-    text-align: justify;
-    font-size: smaller;
+  width: 100%;
+  padding: var(--default-pad) 0;
+  text-align: justify;
+  font-size: smaller;
 }
 @media screen and (min-width: 400px) {
-    .reviews-container-modal .review-author, .reviews-container-modal .review-rating {
-        padding-top: var(--default-pad);
-    }
-    .reviews-container-modal .review-comments {
-        font-size: inherit;
-        padding: 0;
-    }
-}
\ No newline at end of file
+  .reviews-container-modal .review-author,
+  .reviews-container-modal .review-rating {
+    padding-top: var(--default-pad);
+  }
+  .reviews-container-modal .review-comments {
+    font-size: inherit;
+    padding: 0;
+  }
+}
diff --git a/index.html b/index.html
index 80f7eae..bd4b510 100755
--- a/index.html
+++ b/index.html
@@ -39,6 +39,9 @@ <h1>
                 </div>
                 <ul id="restaurants-list">
                 </ul>
+                <p class="no-restaurant-msg">
+                    No restaurant found for your search.
+                </p>
             </section>
         </main>
         <footer id="footer">
@@ -61,7 +64,10 @@ <h1>
                     All Cuisines
                 </option>
             </select>
-            <button class="c-btn btn-default js-close-modal" href="#" onclick="document.getElementById('filters-modal').style.display='none'" title="Close Search">
+            <button class="c-btn btn-default js-apply-filters" href="#" title="Apply selected filters to display the list of restaurants">
+                Apply selected filters
+            </button>
+            <button class="c-btn btn-default js-close-modal" title="Close search modal">
                 Close Search
             </button>
         </div>
diff --git a/js/dbhelper.js b/js/dbhelper.js
index 2a83314..8522568 100755
--- a/js/dbhelper.js
+++ b/js/dbhelper.js
@@ -150,11 +150,11 @@ class DBHelper {
     /**
      * Restaurant image URL.
      */
-    static imageUrlForRestaurant(restaurant, isIcon = false) {
-        if (isIcon) {
-            return `${appAlias}/img/dist/${restaurant.photograph}`.replace(new RegExp(".jpg", "gm"), "-128w.jpg");
+    static imageUrlForRestaurant(restaurant, imgWidth = null) {
+        if (imgWidth !== null) {
+            return `${appAlias}/img/dist/${restaurant.id}-${imgWidth}w.jpg`;
         }
-        return `${appAlias}/img/${restaurant.photograph}`;
+        return `${appAlias}/img/dist/${restaurant.id}-better-original.jpg`;
     }
     /**
      * Map marker for a restaurant.
diff --git a/js/main.js b/js/main.js
index ba7723f..6750d11 100755
--- a/js/main.js
+++ b/js/main.js
@@ -114,13 +114,22 @@ resetRestaurants = restaurants => {
  */
 fillRestaurantsHTML = (restaurants = self.restaurants) => {
     const ul = document.getElementById("restaurants-list");
+    noResultsElement = document.querySelector(".no-restaurant-msg");
     if (restaurants.length === 0) {
-        alert("No restaurants found for selected filter(s).");
+        noResultsElement.style.display = "block";
+    } else {
+        //Make sure the paragraph is not displayed on a new search
+        //yielding results after an empty search.
+        noResultsElement.style.display = "none";
     }
     restaurants.forEach(restaurant => {
         ul.append(createRestaurantHTML(restaurant));
     });
     addMarkersToMap();
+    const filtersContainer = document.getElementById("filters");
+    console.log("about to focus element id filters...");
+    filtersContainer.focus();
+    console.log("element id filters focused? document.activeElement:", document.activeElement);
 };
 /**
  * Create restaurant HTML.
@@ -134,12 +143,12 @@ createRestaurantHTML = restaurant => {
     image.className = "restaurant-img";
     image.alt = `Restaurant name: ${restaurant.name}`;
     const isIcon = true;
-    image.src = DBHelper.imageUrlForRestaurant(restaurant, isIcon);
+    image.src = DBHelper.imageUrlForRestaurant(restaurant, 128);
     imageContainer.appendChild(image);
     li.append(imageContainer);
     const descriptionItems = document.createElement("div");
     descriptionItems.className = "descriptions";
-    const name = document.createElement("h1");
+    const name = document.createElement("h2");
     name.innerHTML = restaurant.name;
     descriptionItems.append(name);
     const neighborhood = document.createElement("p");
diff --git a/js/restaurant_info.js b/js/restaurant_info.js
index 2516250..7658434 100755
--- a/js/restaurant_info.js
+++ b/js/restaurant_info.js
@@ -55,8 +55,9 @@ fillRestaurantHTML = (restaurant = self.restaurant) => {
     address.innerHTML = restaurant.address;
     const image = document.getElementById("restaurant-img");
     image.className = "restaurant-img";
-    image.alt = `Restaurant name: ${restaurant.name}`;
-    image.src = DBHelper.imageUrlForRestaurant(restaurant);
+    image.alt = `Descriptive sheet of the restaurant: ${restaurant.name}`;
+    image.src = DBHelper.imageUrlForRestaurant(restaurant, 128);
+    image.srcset = buildSrcSet(restaurant);
     const cuisine = document.getElementById("restaurant-cuisine");
     cuisine.innerHTML = restaurant.cuisine_type;
     // fill operating hours
@@ -107,6 +108,12 @@ fillReviewsHTML = (reviews = self.restaurant.reviews) => {
  */
 createReviewHTML = review => {
     const li = document.createElement("li");
+    const focusHelper = document.createElement("a");
+    focusHelper.className = "c-focus-helper";
+    focusHelper.innerHTML = "Go to next review";
+    focusHelper.title = "Go to next review or hit ESC to close";
+    focusHelper.href = `#`;
+    li.appendChild(focusHelper);
     const date = document.createElement("p");
     date.className = "review-date";
     date.innerHTML = `Published: ${review.date}`;
@@ -154,4 +161,15 @@ getParameterByName = (name, url) => {
     if (!results) return null;
     if (!results[2]) return "";
     return decodeURIComponent(results[2].replace(/\+/g, " "));
-};
\ No newline at end of file
+};
+/**
+ * Build the string value of the srcset attribute of an image element.
+ * @param {restaurant} restaurant
+ */
+function buildSrcSet(restaurant) {
+    const img360w = DBHelper.imageUrlForRestaurant(restaurant, 360);
+    const img480w = DBHelper.imageUrlForRestaurant(restaurant, 480);
+    const imgOriginalImproved = DBHelper.imageUrlForRestaurant(restaurant);
+    const srcsetVal = `${img360w} 360w, ${img480w} 480w, ${imgOriginalImproved} 800w`;
+    return srcsetVal;
+}
\ No newline at end of file
diff --git a/js/select.change.handler.js b/js/select.change.handler.js
old mode 100644
new mode 100755
index 0b84f15..e7b9cc3
--- a/js/select.change.handler.js
+++ b/js/select.change.handler.js
@@ -3,17 +3,22 @@ let neighborhoodSelect = document.getElementById("neighborhoods-select");
 let cuisineSelect = document.getElementById("cuisines-select");
 if (neighborhoodSelect != null) {
     dropdownSelected = neighborhoodSelect;
-    dropdownSelected.addEventListener("change", function() {
-        updateRestaurants();
-        resetFocusToFiltersContainer();
-    });
+    dropdownSelected.addEventListener("change", selectOptionTrap);
 }
 if (cuisineSelect != null) {
     dropdownSelected = cuisineSelect;
-    dropdownSelected.addEventListener("change", function() {
-        updateRestaurants();
-        resetFocusToFiltersContainer();
-    });
+    dropdownSelected.addEventListener("change", selectOptionTrap);
+}
+
+function selectOptionTrap(event) {
+    console.log("event", event);
+    const applyFiltersBtn = document.querySelector(".js-apply-filters");
+    applyFiltersBtn.addEventListener("click", applyFilters);
+}
+
+function applyFilters() {
+    updateRestaurants();
+    resetFocusToFiltersContainer();
 }
 
 function resetFocusToFiltersContainer() {
diff --git a/restaurant.html b/restaurant.html
index 30b36fc..db275b8 100755
--- a/restaurant.html
+++ b/restaurant.html
@@ -31,8 +31,8 @@ <h1>
         </ul>
         <main class="resto-page-container" id="maincontent">
             <section class="restaurant-details-container" id="restaurant-container">
-                <h1 id="restaurant-name">
-                </h1>
+                <h2 id="restaurant-name">
+                </h2>
                 <p id="restaurant-cuisine">
                 </p>
                 <p id="restaurant-address">