html {
  min-height: 100%;
  display: flex; }

body {
  flex: 1;
  background: #dcc390;
  color: #260801;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center; }
  @media screen and (max-width: 420px) {
    body {
      font-size: 14px; } }

* {
  box-sizing: border-box; }

a {
  color: #592411; }

p {
  margin: 16px 0; }

header {
  padding: 16px 0; }
  header .header-wrapper {
    border-top: 2px solid #260801;
    padding-top: 2px; }
  header h1 {
    font-family: 'PT Serif', serif;
    font-size: 48px;
    margin: 0;
    padding: 4px 0;
    text-align: center;
    border-top: 2px solid #260801;
    border-bottom: 6px solid #260801; }
    @media screen and (max-width: 420px) {
      header h1 {
        font-size: 23px;
        padding: 8px 0; } }
    @media screen and (min-width: 421px) and (max-width: 635px) {
      header h1 {
        font-size: 30px; } }
  header a {
    color: #260801;
    text-decoration: none; }
  header .subheader-wrapper {
    display: flex;
    justify-content: space-between;
    padding-bottom: 16px; }
    header .subheader-wrapper .social {
      white-space: nowrap;
      display: flex;
      align-items: center; }
      header .subheader-wrapper .social a:first-child {
        margin-right: 4px; }
      header .subheader-wrapper .social a:last-child {
        margin-left: 4px; }
      header .subheader-wrapper .social a img {
        display: block;
        width: 16px; }
      @media screen and (max-width: 420px) {
        header .subheader-wrapper .social {
          margin-top: 8px; } }
    header .subheader-wrapper .sub1 img {
      display: block; }
      @media screen and (max-width: 420px) {
        header .subheader-wrapper .sub1 img {
          max-width: 191px; } }
      @media screen and (min-width: 421px) and (max-width: 635px) {
        header .subheader-wrapper .sub1 img {
          max-width: 160px; } }
    header .subheader-wrapper .sub2 {
      text-transform: uppercase;
      font-size: 16px; }
      @media screen and (max-width: 420px) {
        header .subheader-wrapper .sub2 {
          margin-top: 4px;
          font-size: 10px; } }
      @media screen and (min-width: 421px) and (max-width: 635px) {
        header .subheader-wrapper .sub2 {
          font-size: 11px; } }
    @media screen and (max-width: 420px) {
      header .subheader-wrapper {
        flex-direction: column; } }

.content-wrapper {
  width: 100%;
  height: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  background: linear-gradient(90deg, #dcc390 0%, #ffe4b0 20%, #ffe4b0 80%, #dcc390 100%); }
  @media screen and (max-width: 420px) {
    .content-wrapper {
      background: linear-gradient(90deg, #dcc390 0%, #ffe4b0 15%, #ffe4b0 85%, #dcc390 100%); } }

.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #260801; }

footer {
  margin-top: 24px;
  padding-top: 2px;
  border-top: 2px solid #260801; }
  footer .footer-content {
    border-top: 2px solid #260801;
    font-size: 14px;
    padding: 16px 0;
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 420px) {
      footer .footer-content {
        font-size: 12px; } }

.article-list {
  display: grid;
  grid-template-columns: calc(50% - 16px) calc(50% - 16px);
  grid-column-gap: 32px;
  grid-row-gap: 32px; }
  .article-list img.in-list {
    display: block; }
  .article-list img.in-single {
    display: none; }
  @media screen and (max-width: 420px) {
    .article-list {
      display: flex;
      flex-direction: column; } }
  @media screen and (min-width: 421px) and (max-width: 635px) {
    .article-list {
      display: flex;
      flex-direction: column; } }

.single-article img.in-list {
  display: none; }

.single-article img.in-single {
  display: block; }

article {
  display: flex;
  flex-direction: column;
  /* RECIPE */
  /* END OF RECIPE */ }
  article h1 {
    font-size: 22px;
    font-weight: bold;
    font-family: 'PT Serif', serif;
    margin: 0 0 4px 0; }
    article h1 a {
      color: #260801;
      text-decoration: none; }
    @media screen and (max-width: 420px) {
      article h1 {
        font-size: 18px; } }
  article h2 {
    font-size: 18px;
    font-weight: bold;
    font-family: 'PT Serif', serif; }
  article h3 {
    font-size: 16px;
    font-weight: bold;
    font-family: 'PT Serif', serif; }
  article .article-meta {
    font-size: 11px; }
  article .article-tags ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline; }
    article .article-tags ul li {
      display: inline;
      margin: 0;
      padding: 0; }
      article .article-tags ul li:after {
        content: ', '; }
      article .article-tags ul li:last-child:after {
        content: none; }
  article .article-entry {
    flex: 1;
    text-align: justify; }
    article .article-entry > p > img {
      display: none; }
    article .article-entry blockquote {
      margin: 0;
      border-left: 4px solid #260801;
      padding: 4px 8px 4px 24px;
      font-style: italic; }
      article .article-entry blockquote p:first-child {
        margin-top: 0; }
      article .article-entry blockquote p:last-child {
        margin-bottom: 0; }
    article .article-entry .ci-image-wrapper {
      width: auto; }
    article .article-entry img {
      max-width: 100%; }
      article .article-entry img.ci-image {
        width: 100%; }
    article .article-entry .narrow-image {
      display: flex;
      flex-direction: column;
      align-items: center; }
      article .article-entry .narrow-image img {
        width: auto;
        margin: auto; }
    article .article-entry figure {
      margin: 0; }
    article .article-entry figcaption {
      text-align: center;
      font-size: 14px;
      font-style: italic; }
    article .article-entry .video-container {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 56.25%;
      margin: 1em 0; }
      article .article-entry .video-container iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%; }
  article .article-more-link p {
    margin: 0; }
  article table {
    border-left: 4px solid #260801;
    border-right: 4px solid #260801;
    border-collapse: collapse;
    font-size: 14px; }
    article table th, article table td {
      vertical-align: top;
      text-align: left;
      padding: 4px 8px; }
      article table th:first-child, article table td:first-child {
        padding-left: 24px; }
      article table th:last-child, article table td:last-child {
        padding-right: 24px; }
    @media screen and (max-width: 420px) {
      article table {
        margin: 24px 0; } }
    @media screen and (min-width: 421px) and (max-width: 635px) {
      article table {
        margin: 24px 0; } }
  article .recipe-container {
    border-top: 2px solid #260801;
    border-bottom: 2px solid #260801;
    margin: 16px 0;
    padding-bottom: 16px; }
  article .recipe-output-grid {
    display: grid;
    grid-template-columns: auto 80px 80px;
    column-gap: 8px;
    row-gap: 8px; }
    article .recipe-output-grid .recipe-weight {
      text-align: right; }
    article .recipe-output-grid .recipe-ratio {
      text-align: right; }
    article .recipe-output-grid .recipe-total {
      font-weight: bold; }
  article .recipe-wrapper-grid {
    display: grid;
    grid-template-columns: calc(50% - 16px) calc(50% - 16px);
    column-gap: 32px;
    padding: 0 8px; }
    article .recipe-wrapper-grid:first-of-type {
      padding-bottom: 16px;
      border-bottom: 1px solid #592411; }
    @media screen and (min-width: 421px) and (max-width: 635px) {
      article .recipe-wrapper-grid {
        grid-template-columns: 100%;
        column-gap: 0; } }
  article .multi-pane {
    display: flex;
    align-items: flex-start; }
    article .multi-pane > * {
      flex: 1;
      margin-left: 16px;
      margin-right: 16px; }
      article .multi-pane > *:first-child {
        margin-left: 0; }
      article .multi-pane > *:last-child {
        margin-right: 0; }
    article .multi-pane .recipe-table-wrapper table {
      width: 100%; }
    @media screen and (max-width: 420px) {
      article .multi-pane {
        flex-direction: column;
        align-items: center; }
        article .multi-pane > * {
          margin-left: 0;
          margin-right: 0; } }
    @media screen and (min-width: 421px) and (max-width: 635px) {
      article .multi-pane {
        flex-direction: column;
        align-items: center; }
        article .multi-pane > * {
          margin-left: 0;
          margin-right: 0; } }
  @media screen and (max-width: 420px) {
    article {
      padding-bottom: 16px;
      margin-bottom: 16px;
      border-bottom: 2px solid #260801; }
      article:last-child {
        border-bottom: none; } }
  @media screen and (min-width: 421px) and (max-width: 635px) {
    article {
      padding-bottom: 16px;
      margin-bottom: 16px;
      border-bottom: 2px solid #260801; }
      article:last-child {
        border-bottom: none; } }

nav.pagination {
  display: flex;
  align-self: center;
  margin-top: 32px; }
  nav.pagination a {
    text-decoration: none; }
    nav.pagination a:hover {
      text-decoration: underline; }
  nav.pagination .page-number {
    box-sizing: border-box;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 50%;
    line-height: 24px; }
    nav.pagination .page-number.current {
      line-height: 21px;
      font-weight: bold;
      border: 1px solid #592411; }
  nav.pagination .extend {
    font-size: 14px;
    line-height: 26px; }
  nav.pagination .page-number, nav.pagination .extend {
    margin-left: 4px;
    margin-right: 4px; }
    nav.pagination .page-number:first-child, nav.pagination .extend:first-child {
      margin-left: 0; }
    nav.pagination .page-number:last-child, nav.pagination .extend:last-child {
      margin-right: 0; }

@media screen and (min-width: 636px) {
  .tool-wrapper {
    display: flex; }
    .tool-wrapper .tool-description {
      flex: 1;
      margin-left: 32px; }
      .tool-wrapper .tool-description p:first-child {
        margin-top: 0; } }