html {
  background-color: #f0f0f0;
  font-family: "Noto Sans", sans-serif;
}

.logo {
  text-align: center;
  margin: 0 auto;
}

.logo img {
  max-width: 200px;
  min-width: 150px;
  width: 80px;
}

header {
  background-color: #fff;
}

header nav {
  text-align: center;
}

nav .current {
  color: #000;
}

header nav ul li {
  display: inline;
  padding: 0 1em;
}

header nav li a {
  margin-right: 0;
  text-decoration: none;
  color: #3f57a7;
}

header nav li a:hover {
  border-bottom: 3px solid #d1803c;
}

.banner-container {
  position: relative;
}

.banner-wrapper h1 {
  color: #fff;
  text-shadow: 0 0 8px #000;
}

.banner-wrapper p {
  color: #fff;
  text-shadow: 0 0 8px #000;
}

.btn {
  background-color: #000;
  border: 0;
  color: #fff;
}

.btn:hover {
  background-color: #d1803c;
  color: #fff;
}

article h2 {
  color: #3f57a7;
}

.hover-box-img {
  filter: grayscale(100%);
  transition: all .2s linear;
}

.hover-box:hover .hover-box-img {
  filter: grayscale(0);
  transform: scale(1.1);
}

footer {
  background-color: #3f57a7;
  color: #fff;
}

footer li a {
  text-decoration: none;
  color: #fff;
}

.banner-wrapper a {
  color: #d1803c;
}

.shadow {
  box-shadow: 0 15px 15px rgba(128, 128, 128, .3);
}

.shadowlast {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.dogs h2 {
  color: #3f57a7;
}

.max-width2 {
  max-width: 1200px;
  margin: 0 auto;
}

.banner-wrapper p a {
  text-decoration: none;
  border-bottom: 2px solid #d1803c;
  color: #fff;
}

fieldset {
  border-top: none;
}

fieldset legend {
  color: #3f57a7;
}

@media only screen and (min-width: 60em) {

  header nav {
    text-align: right;
  }

  .dogs {
    margin: 0 auto;
    border-radius: 7px;
    margin-bottom: 2.5em;
    background-color: #e0e0e0;
    width: 45%;
  }

  .shadowlast {
    box-shadow: 0 15px 15px rgba(128, 128, 128, .3);
  }

  fieldset {
    border-top: none;
  }

}