* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* Body */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  margin: 0; }

/* header */
header {
  padding: .5rem 2%;
  display: grid;
  grid-template-columns: 100px auto;
  align-items: flex-end; }

header h1 {
  margin: 0;
  font-size: 55px; }

header h2 {
  margin: 0;
  font-size: 25px; }

/* Navigation */
nav {
  background-color: #c6c6c6; }

nav ul {
  margin: 0;
  padding: 0; }

nav li {
  list-style-type: none; }

nav a {
  display: block;
  padding: .5rem;
  text-decoration: none;
  text-align: right;
  color: black; }

ul li.active a {
  background-color: #c0bdbd; }

nav a:hover {
  background-color: #aaaaaa; }

/* Div */
div.FruitGallery {
  display: flex;
  flex-wrap: wrap; }

div.FruitGallery figure {
  flex-basis: 46%;
  margin: .5rem 2%; }

div.FruitGallery figure img {
  width: 100%; }

/* Footer */
footer {
  background-color: #dbdbdb;
  text-align: center;
  padding: .1rem;
  font-size: 14px;
  margin: 0 auto; }

@media only screen and (min-width: 560px) {
  /* Navigation */
  nav ul {
    display: flex;
    justify-content: right; }

  nav a {
    border-left: solid 1px rgba(0, 0, 0, 0.5); }

  /* Div */
  div.FruitGallery figure {
    flex-basis: 29%; } }
@media only screen and (min-width: 1028px) {
  /* Div */
  div.FruitGallery figure {
    flex-basis: 21%; } }