/* Overrides of minima css */

body {
  background-color: #fffffe;
}

hr {
  color: #f5a;
  margin-bottom: 0.25em;
}

.wrapper {
  max-width: -webkit-calc(800px - (30px * 2));
  max-width: -moz-calc(800px - (30px * 2));
  max-width: calc(800px - (30px * 2));
  max-width: 740px;
}

.site-title {
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.site-title:hover {
  text-decoration: none;
  border-bottom: 2px solid #49f;
}
.site-header {
  border-top: 5px solid #49f;
  background-color: #fef9f0;
}

/* Styles not used in minima */
.nav-current {
  border-bottom: 4px solid #a0d0f0;
}
.buy {
  color: white;
  background-color: #fd8;
  padding: 0.5em;

  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #a99;
}

.update-banner {
  color: #666;
  font-size: 0.8em;
  font-family: Arial;
  height: 20px;
  padding-top: 0.5em;
}
.update-banner a {
  color: #000;
  text-decoration: none;
  /* background-color: #e0e0e0; */
  padding: 4px 14px;
  margin-left: 0.5em;
  border-radius: 4px;
}
.update-banner a:hover {
  background-color: #eb8;
}
.update-banner a:active {
  background-color: #da7;
}

.trigger a:hover {
  text-decoration: none;
  border-bottom: 4px solid #49f;
}
.trigger .buy:hover {
  text-decoration: none;
  background-color: #ec6;
  border-bottom: 0px;

  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #a88;
}

.hero {
  text-align: center;
  padding-top: 3em;
  padding-bottom: 4em;
  max-width: -webkit-calc(1024px - (30px * 2));
  max-width:         calc(1024px - (30px * 2));
  max-width: 964px;
  margin: 0 auto;
}

.hero-page-content {
  padding-top: 0;
}

.hero-wrapper {
  /* background-color: #f8f0ea; */
  margin: 0 auto;
}

.hero h1 {
  max-width: 700px;
  font-family: Avenir Next, Arial;
  font-size: 2.75em;
  font-weight: bold;
  margin: auto;
  padding-top: 0.5em;
  line-height: 1.2;
  color: #235;
  width: 80vw;
  text-align: center;
}

.features h2 {
  font-family: sans-serif;
  font-size: 1.5em;
  padding-top: 4em;
  font-weight: bold;
}

h2 {
  color: #235;
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}

.spacer {
  height: 5em;
}

.hero p {
  font-size: 1.15em;
  line-height: 1.5em;
  margin: auto;
  padding: 0.75em;
  padding-bottom: 0.5em;
  font-family: Helvetica, Arial;
  font-weight: normal;
  width: 60vw;
  color: #578;
  max-width: 600px;
  text-align: center;
}

.hero p em {
  font-family: Georgia;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #eb8;
}

.hero img {
  display: flex;
  margin: 0 auto; /*centering header*/
  position: relative; /*scale header images to 120px*/
  white-space: nowrap; /*keep one-line*/
  overflow: hidden; /*hide excess images parts on small screens*/
}

/* Download */
.first-download-area {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  margin-top: 2em;
}
.first-download-area img {
  height: 54px;
}
.hero-button {
  float: left;
  padding: 0 12px;
}
.download-area {
  display: flex;
  padding-top: 2em;
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}
.download-area img {
  height: 54px;
}

.reviews {
  font-size: 10pt;
  text-align: center;
  margin: 1em;
  margin-bottom: 1.5em;
}
.reviews a {
  color: #556;
  text-decoration: none;
}
.reviews a:hover {
  text-decoration: underline;
}

.price {
  font-size: 15pt;
  font-weight: 600;
  line-height: 1.50em;
}
.download-subtitle {
  display: block;
  font-size: 13pt;
  color: #555;
  margin-top: 1em;
  font-weight: lighter;
  text-align: center;
  line-height: 1.30em;
}
.download-title {
  color: #578;
  display: block;
  font-size: 1.0em;
  font-weight: bold;
  margin-top: 1em;
  text-align: center;
}

#toggle_buttons {
  padding-top: 1em;
  font-weight: normal;
  color: #578;
}
#hero_img {
  max-height: 60vh;
}
.hero_mac {
  padding-top: 0.5em;
  padding-bottom: 1em;
}
.hero_ios {
  padding-top: 0.20em;
  padding-bottom: 0.5em;
  max-width: 240px;
}

.hero_img_div {
  flex-direction: row;
  flex: auto;
}

.ios-screenshot {
  max-height: 70vh;
}