header { }
  header hgroup { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; padding: calc(3px + 0.5vw); background-color: #00457c; }
    header hgroup h1 { display: inline; flex-grow: 1; padding-left: calc(10px + 0.5vw); font-family: "cantarell"; font-weight: normal; font-size: calc(12px + 0.4vw); color: #fff; }
    header hgroup nav { display: inline; flex-basis: auto; color: #eeeeee; }
  header hgroup.sub { padding: calc(3px + 0.4vw); background-color: #6E6E6E; color: #eaeaea; }
    header hgroup.sub h2 { padding-left: calc(10px + 0.5vw); font-family: "cantarell"; font-size: calc(12px + 0.3vw); }
    header hgroup.sub h3 { font-family: "cantarell"; font-size: calc(12px + 0.3vw); }

#splash h1 { font-size: calc(24px + 5vw); }
.section { text-align: center; }
  .section h2 { margin: calc(10px + 0.8vw); font-size: calc(16px + 2vw); color: #555; }
#splash h3 { margin: calc(10px + 0.8vw); border-radius: calc(8px + 0.5vw); padding: calc(3px + 0.5vw) calc(8px + 0.5vw); font-size: calc(14px + 0.8vw); background-color: #eee; color: #777; }
#splash img { width: 95%; }
  
#course h2 { margin-bottom: calc(25px + 1.5vw); }
#course div { margin: 0 auto; display: flex; justify-content: center; max-width: 85%; }
  #course div > span { display: block; padding-right: calc(25px + 1.5vw); }
    #course div > span > img { width: 100%; }
  #course div ul * { font-family: "cantarell"; font-size: calc(14px + 0.8vw); text-align: left; }
    #course div ul li { padding-bottom: calc(10px + 1vw); color: #666; }

#quote { font-family: "cantarell"; font-size: calc(14px + 0.8vw); color: #666; }
  #quote p { display: block; margin-left: auto; margin-right: auto; max-width: 85%; }
  #quote p:last-child { margin-bottom: 0; }

@media screen and (max-width: 639px) {
  #course div { display: block; }
    #course div > span > img { width: 50%; }
}