/* Scss Document */
/* Brandcolors */
.extra_list {
  background-color: #F5F4F4; }
  .extra_list .extra_list_title {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .extra_list .extra_list_title h2 {
      color: #112758;
      font-size: 0.85em;
      font-weight: 400;
      margin-bottom: 5vh; }
    .extra_list .extra_list_title svg {
      fill: #d15152; }
  .extra_list ul {
    padding: 0;
    margin: 0; }
    .extra_list ul .extra_thumb {
      padding: 5%; }
      .extra_list ul .extra_thumb h3 {
        color: #112758;
        margin: 2% 0 0 0; }
      .extra_list ul .extra_thumb p {
        color: #d15152;
        font-weight: bold;
        text-transform: uppercase;
        margin: 2% 0; }
        .extra_list ul .extra_thumb p span {
          font-weight: thin;
          text-transform: none; }
      .extra_list ul .extra_thumb a {
        color: #707070; }
        .extra_list ul .extra_thumb a small {
          margin: 5% 0; }

.extra_recipe_list {
  background-color: #F5F4F4; }

.extra_item .resto_main_content {
  text-align: center;
  margin: 3% 0; }
  .extra_item .resto_main_content h1 {
    display: block !important; }
.extra_item .resto_body {
  display: flex;
  flex-direction: column;
  align-items: center; }

#recipe_top {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  #recipe_top h1 {
    color: #112758; }
  #recipe_top p {
    color: #d15152; }
  #recipe_top h1, #recipe_top p {
    margin: 0 5vw; }
  #recipe_top .recipe_img {
    padding-top: 15vh; }

#recipe-body {
  padding: 30px 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 0 5vw; }
  #recipe-body ul {
    padding: 0;
    list-style: none; }
  #recipe-body h3, #recipe-body p {
    color: #112758; }
  #recipe-body p {
    color: #4b4e58; }
  #recipe-body h3 {
    display: flex;
    align-items: center; }
  #recipe-body .flip-arrow {
    transform: rotate(-90deg);
    margin: 0 2% 0 0; }
  #recipe-body .recipe-author .location_icon {
    fill: #d15152; }
  #recipe-body .recipe-author a {
    color: #d15152; }

@supports (display: grid) {
  @media screen and (min-width: 720px) {
    .extra_list {
      height: -webkit-fit-content;
      display: grid;
      padding: 0 0 10vh 0;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: -webkit-min-content;
      grid-template-areas: ". listhead listhead listhead listhead ." ". ul ul ul ul ."; }
      .extra_list .extra_list_title {
        grid-area: listhead; }
        .extra_list .extra_list_title h2 {
          font-size: 1.5em; }
      .extra_list ul {
        grid-area: ul;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        grid-gap: 50px; }
        .extra_list ul .extra_thumb {
          padding: 0; }

    .extra_item .resto_main_content {
      margin: 0; }

    #recipe_top {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: auto;
      grid-template-areas: ". img img img img ." ". title title title title ."; }
      #recipe_top .recipe_img {
        grid-area: img;
        padding-top: 0; }
      #recipe_top .recipe_top_content {
        grid-area: title; }
        #recipe_top .recipe_top_content h1, #recipe_top .recipe_top_content p {
          margin: 0; }

    #recipe-body {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: auto;
      grid-template-areas: ". list list body body ." ". author author author author . "; }
      #recipe-body .recipe-ingredients {
        grid-area: list; }
      #recipe-body .recipe-text {
        grid-area: body; }
      #recipe-body .recipe-author {
        grid-area: author; } } }