/*Entire page*/
body * {
  display: flex;
  flex-wrap: wrap;
}

body {
  background-color: rgb(213, 224, 230);
  font-family: 'Droid Serif', serif;
}

em {
  display: inline;
}

p {
  display: block;
}

.clearfix:after {
  content: '';
  clear: both;
  display: table;
}

/*Header*/
header {
  display: block;
  margin: 0 10px;
}

.header-title {
  display: block;
}

.header-title img {
  width: 90%;
  /*max-width: 1017px;*/
  max-width: 250px;
  max-height: 237px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.nav-bar {
  list-style-type: none;
  margin: 10px auto 0 auto;
  padding: 8px 0 8px 0;
  width: 100%;
  border-top: 1px solid rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(0,0,0,0.5);
}

.nav-bar li {
  margin: 0 auto;
  width: 100%;
}

.nav-bar li a {
  font: 75%/1 'Droid Serif', serif;
  color: black;
  width: 100%;
  padding: 4px;
  text-decoration-line: none;
  text-transform: uppercase;
  text-align: center;
  display: block;
}

.nav-bar li a:hover {
  color: grey;
  text-decoration-line: underline;
}

.caption {
  word-wrap: break-word;
  font: 70%/1.5 'Droid Serif', serif;
  color: grey;
}

@media screen and (min-width: 600px) {
  header{
    margin: 0 40px;
  }
  
  a.header-title img {
    width: 60%;
    max-width: 600px;
  }
  
  .nav-bar li {
    width: auto;
  }
}

@media screen and (min-width: 1150px) {
  a.header-title img {
    width: 50%;
    max-width: 1017px;
  }
}