/*
    Theme Name:	Twenty71
    Template:	twentyseventeen
    Version:	0.3
*/

@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400i,700');

.widget_rss .widget-title:after {
     content: '';
     background-image: url('http://foodforhealth.org.au/wp/wp-content/uploads/2017/04/rotary-logo-300x113.png');
     display: block;
     position: relative;
     width: 200px;
     height: 75px;
     background-size: contain;
     background-repeat: no-repeat;
}

.widget_rss .widget-title + ul {
        clear: both;
}

.widget_rss li .rsswidget {
    font-size: 14px;
}

.rss-widget-icon, .widget-title .rsswidget {
    box-shadow: none !important;
}

.widget-title .rsswidget:last-child {
    pointer-events: none;
    color: black;
    box-shadow: none !important;
}

.widget_rss .rss-date {
    color: #1169a0;
}

.widget_rss ul li {
   padding: 0.5em 0;
}

.post-navigation {
   margin: 0;
}

.blog .site-main > article {
    padding-bottom: 1em;
}

#primary {
  color: #555;
}

img {
    display: block;
}

h3 {
    color: inherit;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    margin: 1em 0 0.75em;
    padding: 0.5em 0 0;
}

#ffh-links tr {
    border-bottom: 4px solid #eee;
}

#ffh-links td {
    overflow: hidden;
}

/*** Contact Us ***/

.wpcf7 label {
    color: #555;
    font-weight: normal;
    font-size: 14pt;
}

.wpcf7 input[type="submit"] {
    background: #1169a0;
    font-weight: normal;
    font-size: 12pt;
}

.wpcf7 input[type="submit"]:hover {
    background: #2fad44;
    outline: none;
}


/*** Recipes ***/

.single-recipe #primary {
    max-width: 1000px;
}

.recipe .entry-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap-reverse;
}

.recipe-wrap {
    flex: 100%;
    margin: 0;
}

.recipe h3 {
    color: #2fad44;
    margin: 1.5em 0 0.75em;
    padding: 0;
}

.recipe h3:first-child {
    margin-top: 0;
}

.recipe aside {
    flex: 1%;
    max-width: 400px;
}

.recipe figure {
    display: table;
    margin: 0.5em auto 1em;
}

.recipe figure img {
    display: block;
}

.recipe figcaption {
    display: table-caption;
    caption-side: bottom;
    text-align: right;
    font-size: 10pt;
}


.nutrition-panel {
    background: #eae4d6;
    margin-bottom: 2em;
    padding-bottom: 0.1em;
    font-size: 10pt;
}

.nutrition-panel header {
    padding: 1em 1em 0;
}

.nutrition-panel h3 {
    color: #ff7c00;
}

.nutrition-panel p {
    margin: 0 0 0.5em;
}

.nutrition-panel th, .nutrition-panel td {
    padding: 0.2em 1em;
}

.nutrition-panel tr {
    border-bottom: 1px solid #daccad;
}

.recipe .button-group {
    text-align: center;
}

.recipe button {
    background: #1169a0;
    font-weight: normal;
    padding: 0.7em 1em 0.5em;
}

.recipe button:hover {
    background: #2fad44;
    outline: none;
}

.recipe button .icon {
    font-size: 1.5em;
    margin-right: 0.5em;
}

@media print, screen and (min-width: 640px) { /* desktop */
    .recipe-wrap {
        flex: 1;
        margin-right: 20px;
    }

    .recipe .button-group {
        text-align: right;
    }
}

@media screen and (min-width: 48em) {
    .has-sidebar:not(.error404) #primary {
        width: 100%;
    }
}

/*** entry content lists ***/

.entry-content ul, .entry-content ol {
    padding-left: 2em;
}

.entry-content ol {
    counter-reset: item;
}

.entry-content ol li {
    display: block;
    position: relative;
}

.entry-content ol li:before {
    content: counter(item);
    counter-increment: item;
    font-weight: 800;
    position: absolute;
    left: -2.2em;
    width: 1.5em;
    text-align: right;
}

/*** Header ***/

.site-branding {
    background: #0c507a;
    background-image: linear-gradient(to bottom, #1169a0 0%, #083856 100%);
    padding: 1em 0;
}

.site-branding a:hover, .site-branding a:focus {
    opacity: 1;
}
/*
.site-branding .wrap {
    display: flex;
    align-items: center;
}
*/
.custom-logo-link {
   flex: 0 1 auto;
   pointer-events: none;
   cursor: default;
   line-height: 0;
   margin-right: 2em;
   padding: 0;
}

.custom-logo-link img {
    width: 100%;
    height: auto;
    max-height: none;
}

.social-navigation {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.social-navigation .screen-reader-text {
    display: none;
}

.social-navigation a {
    background: #1169a0;
    margin: 0 0 1em 1em;
}

.social-navigation a:hover {
    background: #2fad44;
}

@media screen and (min-width: 30em) {
    .site-branding .wrap {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .social-navigation {
        max-width: 40px;
        min-width: auto;
    }
}

@media screen and (min-width: 48em) {
    .social-navigation {
        min-width: 210px;
    }
    .social-navigation a {
        width: 50px;
        height: 50px;
    }

    .social-navigation .icon {
        width: 20px;
        height: 20px;
        top: 15px;
    }
}

#masthead .site-branding-text {
    display: none;
}

/*** Navigation ***/

.navigation-top {
    background: #083856;
    position: static;
    bottom: auto;
    border: none;
}

.navigation-top .wrap {
    padding: 0;
}

.menu-toggle {
    width: 100%;
    margin: 0;
}

.menu-toggle:focus {
    outline: none;
}

.main-navigation.toggled-on .menu-toggle {
    background: #2fad44;
}

.main-navigation .menu {
    padding-bottom: 3em;
    background: transparent;
}

.main-navigation a, .main-navigation li li, .main-navigation li li a {
    transition: none;
}

.main-navigation .menu, .main-navigation .menu li {
    border: none;
}

.main-navigation ul li.menu-item-has-children.focus:before, .main-navigation ul li.menu-item-has-children:hover:before, .main-navigation ul li.menu-item-has-children.focus:after, .main-navigation ul li.menu-item-has-children:hover:after {
    display: none;
}

.main-navigation .menu li:not(:last-child) {
    border-bottom: 1px solid #1169a0;
}

.main-navigation a, .main-navigation a:hover, .main-navigation .current-menu-item a, .menu-toggle {
    color: white;
    font-weight: normal;
}

.main-navigation a, .main-navigation .sub-menu a {
    border-left: 1em solid transparent;
    padding: 0.5em 1em;
}

.main-navigation li:hover.current-menu-parent > a {
    background: #083856;
}

.main-navigation li:hover, .main-navigation .sub-menu li:hover, .main-navigation .sub-menu li.focus, .main-navigation li.current-menu-parent > a:hover, .main-navigation .current-menu-item > a {
    background: #0c507a;
}

.main-navigation .current-menu-item > a {
    border-left: 1em solid #ff7c00;
}

.main-navigation a:hover, .main-navigation .current-menu-parent > a {
    border-left: 1em solid #2fad44;
}

.main-navigation .sub-menu {
    background: #1169a0;
    border-top: 1px solid #1169a0;
    padding: 0;
}

.main-navigation .sub-menu a:before {
    content: '\2022\00a0\00a0\00a0';
}

.dropdown-toggle, .dropdown-toggle:hover, .dropdown-toggle:focus {
    color: black;
    background: white;
    font-size: 1.5em;
    line-height: 0;
    height: 42px;
    right: 0;
    outline: none;
    border-radius: 0;
}

.dropdown-toggle.toggled-on {
    color: white;
    background: #2fad44;
}

@media screen and (min-width: 48em) {
    #top-menu:before {
        content: '';
        float: left;
        position: relative;
        top: 3px;
        width: 42px;
        height: 42px;
        margin-right: 1em;
        background-image: url('http://foodforhealth.org.au/wp/wp-content/uploads/2017/03/food-for-health-icon.png');
        background-size: contain;
        background-position-y: 42px;
        background-repeat: no-repeat;
        transition: background-position-y 0.3s;
    }

    .site-navigation-fixed #top-menu:before {
        background-position-y: 0;
    }

    .custom-logo-link img {
        max-width: none;
    }

    .site-branding {
        margin-top: 49px;
    }

    .main-navigation > div {
        text-align: center;
    }

    #top-menu {
        display: inline-block;
    }

    .navigation-top {
        position: fixed;
        z-index: 999;
    }

    .navigation-top .wrap {
        padding: 0 1em;
    }

    .navigation-top nav {
        margin: 0;
    }

    .main-navigation .menu {
        padding: 0;
    }

    .main-navigation a {
        padding: 1em 1.25em;
        position: relative;
        z-index: 1;
    }

    .main-navigation .sub-menu a {
        padding: 0.5em 1em;
    }

    .main-navigation a, .main-navigation li > a:hover, .main-navigation .current-menu-parent a, .main-navigation .current-menu-item a, .main-navigation .menu > li:not(:last-child) {
        border: none;
    }

    .main-navigation .menu > li:hover {
        background: transparent;
    }

    .main-navigation .menu > .current-menu-item > a {
        background: #ff7c00;
    }

    .main-navigation .menu > li > a:before {
        content: '';
        background: #2fad44;
        width: 100%;
        height: 0;
        transition: height 0.3s, bottom 0.2s;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
    }

    .main-navigation .menu > .current-menu-parent > a:before {
        background: #2fad44;
        width: calc(100% - 2em);
        height: 0.3em;
        left: 1em;
        bottom: 0.8em;
    }

    .main-navigation .menu > li:hover > a:before {
        background: #2fad44;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
    }

    .main-navigation .sub-menu {
        border: none;
        border-left: 1px solid #083856;
        border-right: 1px solid #083856;
        border-bottom-left-radius: 0.5em;
        border-bottom-right-radius: 0.5em;
        max-height: 0;
        transition: max-height 0.7s;
        overflow: hidden;
    }

    .main-navigation .menu > li:hover > .sub-menu {
        border-top: 1px solid #1169a0;
        border-bottom: 1px solid #083856;
        max-height: 250px;
    }

    .main-navigation .sub-menu li a {
        border-left: 0 solid #2fad44;
        transition: border-left 0.1s;
    }

    .main-navigation .sub-menu > .current-menu-item > a {
        border-left: 1em solid #ff7c00;
    }

    .main-navigation .sub-menu li a:hover {
        border-left: 1em solid #2fad44;
    }

    .main-navigation .sub-menu a:before {
        content: '';
    }
}

/*** Front Page ***/

.site-content {
    padding: 2.5em 0 0;
}

.page:not(.home) #content {
    padding-bottom: 0;
}

.home .site-content .wrap {
    max-width: none;
    padding: 0;
    margin: 0;
}

/*** Footer ***/

.site-footer {
    background: #0c507a;
    margin-top: 1em;
}

.site-footer .wrap {
    padding: 1.5em;
}

.site-footer .widget ul li {
    border: none;
}

.site-footer .textwidget {
    color: #eae4d6;
    border-top: 1px solid #1169a0;
    padding-top: 0.5em;
}

.footer-widget-1 .widget ul:first-child {
    border-top: 1px solid #1169a0;
}

.footer-widget-1 .widget:last-child, .footer-widget-3 .widget:last-child {
    padding-bottom: 0;
}

.footer-widget-2 .widget:last-child {
    padding-bottom: 2em;
}

.site-footer .widget-title {
    color: white;
}

.footer-widget-2 .widget-title {
    display: none;
}

.site-info {
    background: #083856;
    text-align: center;
    padding: 2em 1em;
    margin: 0;
    width: auto;
    float: none;
}

.site-info a {
    color: white;
    box-shadow: 0 1px white;
    transition: none;
}

.site-footer .widget-area ul li a {
    color: #eae4d6;
    box-shadow: none;
    transition: none;
}

.site-footer .widget-area ul li a:hover, .site-info a:hover  {
    color: white;
    box-shadow: 0 3px #2fad44;
}

.site-footer .widget-area ul li a:focus, .site-footer .widget-area ul li a:active,
.site-info a:focus, .site-info a:active {
    color: white;
    box-shadow: 0 3px #ff7c00;
}

.search-field {
    padding: 0.5rem;
}

.search-submit {
    background: #0c507a;
}

.search-submit:hover {
  background: #2fad44;
}

.search-submit:focus,
.search-submit:active {
  background: #ff7c00;
}

@media screen and (min-width: 48em) {
    .site-footer .wrap {
        padding: 2em;
    }

    .site-footer .widget-area, .site-footer .widget:last-child {
        padding-bottom: 0;
    }

    .site-footer .widget-column.footer-widget-1 {
        width: 27%;
    }

    .site-footer .widget-column.footer-widget-2 {
        float: left;
        width: 22%;
    }

    .site-footer .widget-column.footer-widget-3 {
        float: right;
        width: 42%;
    }

    .site-footer .widget ul:first-child {
        border-top: 1px solid #1169a0;
    }

    .widget-column.footer-widget-2 .widget-title {
        display: block;
    }

    .search-submit .icon {
        top: -4px;
    }
}

/*** Page Layout ***/

body:not(.twentyseventeen-front-page) .site-content .wrap {
  display: flex;
  flex-direction: column;
}

body:not(.twentyseventeen-front-page) .site-content .wrap {
    padding: 0 1em;
}

#primary, .secondary-sidebar {
  margin-bottom: 1em;
}

.post-type-archive-recipe .page-header,
.tax-recipe_cat .page-header {
  margin: 0;
  padding: 0 0 1em;
}

.post-type-archive-recipe .pagination,
.tax-recipe_cat .pagination {
    margin: 2em 0 0;
    padding: 0;
}

@media screen and (min-width: 40rem) {
  .post-type-archive-recipe .page-header,
  .tax-recipe_cat .page-header {
    margin: 0 1.3%;
  }
  .post-type-archive-recipe .pagination,
  .tax-recipe_cat .pagination {
    padding: 0 1.3%;
  }
}

@media screen and (min-width: 48em)
{
 body:not(.twentyseventeen-front-page) .site-content .wrap {
    padding: 0;
    max-width: 1600px;
    flex-direction: row;
    justify-content: center;
  }

  .secondary-sidebar {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .page.page-one-column:not(.twentyseventeen-front-page) #primary, .blog #primary, .single-post #primary {
    margin-left: 0;
    margin-right: 0;
    max-width: 900px;
  }

  body:not(.twentyseventeen-front-page) #primary {
    padding: 0 2em;
    flex: 1;
  }

  body.post-type-archive-recipe #primary,
  body.tax-recipe_cat #primary {
    padding: 0 1em;
  }

  .secondary-sidebar {
    flex: 0 0 24%;
  }

  #secondary-1 {
    order: -1;
    margin: 0 1em 0 2em;
  }

  #secondary-2 {
    margin: 0 2em 0 1em;
  }
}

/*** Page Title ***/

.page.page-one-column .entry-header {
  margin: 0;
}

.entry-title, .single-post .entry-title,
body.page:not(.twentyseventeen-front-page) .entry-title,
.post-type-archive-recipe .page-title,
.tax-recipe_cat .page-title,
.single-recipe .entry-title {
  color: #ff7c00;
  font-size: 24px;
  font-family: 'Raleway', sans-serif;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.entry-title a {
    display: block; 
    color: #ff7c00;
    margin: 0;
}

.entry-title:first-letter,
.entry-title a:first-letter,
.page:not(.twentyseventeen-front-page) .entry-title:first-letter,
.post-type-archive-recipe .page-title:first-letter,
.tax-recipe_cat .page-title:first-letter,
.single-recipe .entry-title:first-letter {
  background: #ff7c00;
  color: white;
  font-size: 32px;
  margin-right: 0.15em;
  padding: 4px 8px;
}

.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active {
    box-shadow: none;
}

.entry-title a:hover {
    color: #2fad44;
}

.entry-title a:hover:first-letter {
    background: #2fad44;
}


/*** Page Title - Lines ***/

.entry-header, .page-header {
    overflow: hidden;
    text-align: center;
}

.edit-link {
  display: block;
  text-align: left;
}

.entry-title, .page-title {
  display: inline-block;
  position: relative;
}

.entry-title:before, .entry-title:after,
.page-title:before, .page-title:after {
  content: '';
  margin: 0 20px;
  border-bottom: 4px solid;
  position: absolute;
  top: 50%;
  width: 100vw;
}

.entry-title:before,
.page-title:before {
  left: 100%;
}

.entry-title:after,
.page-title:after {
  right: 100%;
}

/*** Hyperlinks ***/

.entry-content a, .widget a, .edit-link a {
  color: #1773bd;
  box-shadow: inset 0 -1px 0 #1773bd;
  text-decoration: none;
}

.entry-content a:hover, .widget a:hover,  .edit-link a:hover, .widget ul li a:hover {
  color: #238a34;
  box-shadow: inset 0 0 0 transparent, 0 3px 0 #2fad44;
  text-decoration: none;
}


/*** Sidebars ***/

.secondary-sidebar h2:first-child {
  padding: 1.5em 0 0;
}

.secondary-sidebar .widget:last-child {
  padding-bottom: 2em;
}

.secondary-sidebar .widget {
  background-color: #eae4d6;
  padding: 1em 2em;
  //margin-bottom: 4px;
}

/*** Left Sidebar ***/

@media screen and (min-width: 48em) {
  #secondary-1 {
    max-width: 240px;
  }
}

#secondary-1 .widget {
  border-left: 10px solid #2fad44;
}

/*** Right Sidebar ***/

#secondary-2 {
  border-top: 10px solid #2fad44;
}

/*** Widget List Items ***/

.widget ul li {
  position: relative;
}

.widget ul li a {
  color: black;
  box-shadow: none;
}

/*** Current Menu Item ***/

.secondary-sidebar .current-menu-parent > a {
  box-shadow: inset 0 0 0 transparent, 0 2px 0 #2fad44;
}


.secondary-sidebar .current-menu-item:not(.current-menu-parent) > a {
  box-shadow: inset 0 0 0 transparent, 0 3px 0 #ff7c00;
}

.secondary-sidebar .current-menu-item:not(.current-menu-parent) > a:after {
  content: "\25C0";
  color: #ff7c00;
  position: absolute;
  right: -2em;
  transform: scale(2);
}

/*** Bullet Points ***/

.secondary-sidebar .widget ul li li:before {
  content: "\2022";
  position: absolute;
  left: 8px;
  transform: scale(1.5);
}

/*** Recipe ***/

.secondary-sidebar .current-recipe-parent > a {
    box-shadow: inset 0 0 0 transparent, 0 3px 0 #ff7c00;
}

/*** Cards ***/

ul.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  /*padding: 0.5rem;*/
  margin: 0;
  padding: 0;
}

.cards-item {
  display: flex;
  box-sizing: border-box;
  padding: 0.8rem 0;
  width: 100%;
}

.cards-item a {
    background: #0c507a;
    flex: 1;
}

.cards-item a:hover {
    background: #2fad44;
}

@media(min-width: 480px) { /* 2 columns */
  .cards-item {
    width: 50%;
    padding-left: 10px;
    padding-right: 10px;
  }
}
/*
@media(min-width: 768px) {
  .cards-item {
    width: 33.3333%;
  }
}
*/

@media(min-width: 1180px) {
  .cards-item {
    width: 25%;
  }
}

.cards-item > div, .cards-item > article {
  background-color: white;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  border-radius: 0.25rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.card-image {
  background: black;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.card-image::before {
  content: "";
  display: block;
  padding-top: 66.6%; // 16:9 aspect ratio
}

@media(min-width: 40rem) {
  .card-image::before {
    padding-top: 75%; // 3:2 aspect ratio
  }
}

.cards .card-title {
  padding: 0.7rem;
  font-size: 1rem;
  font-weight: normal;
  margin: 0;
  color: white;
}