body, html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  line-height: 1.9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.heading-section, .menu-section, .footer-section {
  flex-shrink: 0;
}

.content-section {
  flex-grow: 1;
}

.heading-section, .menu-section, .content-section, .footer-section-top {
  box-sizing: border-box;
  padding-left: 3%;
  padding-right: 3%;
}

.menu-section, .content-section, .footer-section-top {
  margin: 0 auto;
  width: 100%;                 /* fill remaining width up to the page width  */
  max-width: 88em;             /* maximum page width */
}

.heading-section {
  height: 62px;
  background-color: #f80309;
  margin-bottom: 100px;
}

.footer-section-top > div {
  overflow: hidden;
  padding-top: 10%;
  padding-bottom: 10%;
}

.footer-section-bottom {
  font-family: Verdana, sans-serif;
  height: 150px;
  background-color: #e3e3e2;
  text-align: center;
  padding-top: 1.5em;
  color: #f80309;
}

.menu-section {
  display: flex;
  flex-direction: row-reverse;
}
.title-column {
  flex-shrink: 0;
  align-self: center;
  padding-right: 1em;
}
.menu-column {
  flex-grow: 1;
}

.content-section {
  padding-top: 4em;
}

.book-columns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 -1em;
}
.book-columns > div {
  display: inline-block;
  width: 290px;
  margin: 1em 1em;
}
.book-columns img {
  display: block;
  margin: 0 auto;
}

.contact-block {
  font-family: Verdana, sans-serif;
  margin-top: 2em;
  color: #6a0306;
}

#title {
  display: inline-block;
  width: 21.9375em;
  max-width: 100%;
}
#title > div {
  position: relative;
  height: 0;
  padding-bottom: 10.82621%;
}
#title img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

#blue-lily-logo {
  float: left;
  display: inline-block;
  width: 23.625em;
  max-width: 45%;
}
#blue-lily-logo > div {
  position: relative;
  height: 0;
  padding-bottom: 20.6349%;
}
#blue-lily-logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

#red-crocus-logo {
  float: right;
  display: inline-block;
  width: 21.0625em;
  max-width: 45%;
}
#red-crocus-logo > div {
  position: relative;
  height: 0;
  padding-bottom: 18.39763%;
}
#red-crocus-logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

#main-menu {
  line-height: 3em;
  border-color: #E0E0E0;
  font-size: 1.125em;
  font-weight: bold;
}
#main-menu > ul {
  text-transform: uppercase;
}
#main-menu li > *:first-child:hover,
#main-menu *:focus {
  text-decoration: none;
  background-color: #E0E0E0;
}
#main-menu ul ul {
  background-color: #F0F0F0;
  text-transform: none;
}

h1 {
  font: normal 2.25em/normal Verdana, sans-serif;
  color: #f80309;
  border-bottom: 1px solid black;
  padding-bottom: 0.4em;
}

h2 {
  font: bold 1.5em/1.5 Georgia, serif;
  text-transform: uppercase;
  color: black;
  text-align: center;
  margin-top: 1.5em;
}

h3 {
  font: bold 1em/2 Arial, sans-serif;
  text-transform: uppercase;
  color: #5f818a;
}

p:first-child,
h1:first-child,
h2:first-child,
h3:first-child {
  margin-top: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a.see-more {
  font-weight: bold;
  text-transform: uppercase;
  color: #7db4fc;
  white-space: nowrap;
}

a.button:hover {
  background-color: #4f717a;
}

a.read-more {
  padding: 0;
  margin: 1em auto 1em auto;
  width: 8.625em;
}

a.book {
  padding: 0.25em 0;
  margin: 1em auto 1em auto;
  width: 12.6875em;
}

img.center {
  display: block;
  margin: 0 auto;
}

.block {
  margin-top: 2em;
}

/* Single column */
@media screen and (max-width: 50em) {  
  .heading-section { display: none; }
  #main-menu { background-color: #f80309; font-size: 1em; }
  #main-menu > ul { background-color: #F0F0F0; }
  .menu-section { display: block; padding: 0; margin: 0; }
  .menu-column { padding: 0; margin: 0; }
  .title-column { padding: 0; margin: 1em 3% 2em; }
  .content-section { padding: 0 3%; }
  .book-columns img { max-width: 100%; height: auto; }
}

@media screen and (max-width: 479px) {
  h1, h2.h1 { font-size: 1.5em; }
  h2 { font-size: 1.3em; margin-top: 2em; }
}