body {
  margin: 0;
  padding: 0;
  background-image: url(../images/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;
  font-size: 1rem;
  font-family: "Exo 2", sans-serif;
  display: flex;
  flex-direction: column;
  /* Portrait iPad Pro */ }
  @media only screen and (max-width: 767px) {
    body {
      padding-bottom: 30rem;
      background-position: center bottom 20%; } }
  @media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    body {
      background-size: cover; } }
  body a {
    color: #3B6CAA;
    text-decoration: underline; }
    body a:hover {
      text-decoration: none; }
  body p:first-child {
    margin-top: 0; }
  body p:last-child {
    margin-bottom: 0; }
  body header {
    background: #255CA1;
    padding: 1rem;
    text-align: center;
    color: #fff;
    line-height: 1.4;
    display: flex; }
    @media only screen and (max-width: 767px) {
      body header {
        padding: 2rem; } }
    body header a, body header a:active, body header a:visited {
      color: #fff; }
    body header ul {
      list-style-type: none;
      margin: 0 auto;
      padding: 0; }
      @media only screen and (min-width: 1023px) {
        body header ul li {
          display: inline-block; }
          body header ul li + li {
            margin-left: 2.5rem; } }
  body main {
    background-color: #fff; }
    body main .content {
      max-width: 960px;
      margin: auto;
      padding: 3rem 2rem; }
      body main .content .logo {
        width: 100%;
        display: inline-block;
        margin: 0 auto 3rem;
        text-align: center; }
      body main .content .text {
        width: 100%;
        display: inline-block;
        font-size: 1.1rem;
        font-style: italic;
        font-weight: 300;
        line-height: 1.6;
        text-align: center; }
        body main .content .text .quotation {
          display: inline-block;
          width: 30px;
          height: 25px;
          background: url(../images/quotation-mark.svg) no-repeat;
          background-size: cover;
          margin-right: .5rem; }
      body main .content::after {
        display: block;
        content: "";
        clear: both; }
      @media only screen and (min-width: 1023px) {
        body main .content {
          display: flex;
          padding: 6rem 2rem; }
          body main .content .logo {
            width: 25%;
            margin-right: 10%;
            margin-bottom: 0; }
          body main .content .text {
            width: 65%;
            text-align: left;
            font-size: 1.4rem; } }