/*
Theme Name: BeSustainable
Theme URI: https://www.besustainable.com/
Description: Custom theme made for BeSustainable.com
Version: 2.0
Tags: one-column, custom-background, custom-logo, featured-images, sticky-post, blog
Text Domain: besustainable
AND WordPress Theme, Copyright (C) 2020
*/
body {
    display: block;
    font-size: 1.5em;
    line-height: 1.5;
    color: #333;
    background: #f5f5f5;
    font-family: canada-type-gibson, sans-serif;
    font-weight: 300;
    font-style: normal
}

header.layout-nav {
    order: 1;
    width: 100%;
    margin: 0 auto;
    z-index: 1;
    position: sticky;
    top: 0;
    height: 60px;
    background: #fff;
    padding: 0 20px;
    transition: all .2s ease-in-out;
    -webkit-box-shadow: 0 0 18px 0 rgba(0, 0, 0, .17);
    -moz-box-shadow: 0 0 18px 0 rgba(0, 0, 0, .17);
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, .17)
}

.home .featured-article a.featured-img-link:after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.83), rgba(0, 0, 0, 0.2));
    opacity: 0.75;
}

.home .featured-article {
   position: relative;
}

.home .featured-article h1 {
	font-family: baskerville-urw, serif;
	font-weight: 400;
	letter-spacing: -3px;
}

.home .featured-article a {
	width: 100%;
}
.home .featured-article h2 a {
	font-size: 30px;
}
.home .featured-article .wp-post-image {
   display: flex;
   object-fit: cover;
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   height: 100%;
}

.home .featured-article .article-text {
	position: absolute;
   top: 0;
	background: transparent;
	color: #fff;
   width: 100%;
}

.home .search-icon svg {
	fill: #fff;
}

.featuredone {
   grid-area: boxone;
   background: #000;
}
.featuredtwo {
   grid-area: boxtwo;
   background: #000;
   height: 50vh;
   border-left: 2px solid #fff;
}
.featuredthree {
   grid-area: boxthree;
   background: #000;
   height: 50vh;
   border-top: 2px solid #fff;
   border-left: 2px solid #fff;
}
   
.featured-wrap {
   display: grid;
   width: 100%;
   /** in the case of using fullgrid below, rows will automatically,evenly space themselves out. */
   height: 90vh;
   display: grid;
   /* create your columns */
   grid-template-columns: 1fr 1fr;
   /* create your rows with height */
   grid-template-rows: 1fr 1fr;
   /* "Paint" your grid */
   grid-template-areas:
   "boxone boxtwo"
   "boxone boxthree";
   overflow: hidden;
}
.featured-wrap .article-text {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0; 
   right: 0;
   margin: auto;
   width: 685px;
   padding: 0 20px;
}

.featured-article a:hover < .hero-text h2 {
   color: green;
}
.featured-wrap .article-text h1 {
   line-height: 1;
}

article a img:hover~.article-text header h2 a {
    color: green
}

header.layout-nav button.mobile-btn,
header.layout-nav button.mobile-btn:before {
    color: #000;
    border-color: #000
}

header.layout-nav {
    background: #fff
}

header.layout-nav .aligner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    background: transparent;
}

.search-icon {
    width: 35px;
    height: 100%
}

.hero-text {
	padding-top: 50px;
}

footer a img {
    height: 100px
}

main {
    overflow: hidden;
}

.search-link {
    display: flex;
    width: 100px
}

.search-link:hover {
    cursor: pointer
}

button:focus {
    outline: 0
}

button.mobile-btn {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: relative;
    border: none;
    background: 0 0;
    height: 50px;
    max-width: 50px;
    z-index: 3
}

.mobile-btn span.menu-text {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px
}

button.mobile-btn:before {
    content: ''
}

button.mobile-btn:before {
    display: flex;
    border: 2px solid #000;
    border-radius: 100px;
    padding: 23px;
    position: absolute;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: 0
}

.mobile-btn.open span.menu-text {
    visibility: hidden
}

.close-icon {
	max-width: 30px;
    right: 65px;
    position: absolute;
}
button.mobile-btn.open:before {
    border: 0;
    background-image: url('./images/close-icon.svg');
    visibility: visible!important
}

.mobile-btn:hover {
    cursor: pointer
}

.mobile-btn.open {
    flex-direction: column;
    justify-content: center
}

main.layout-content {
    order: 2;
    width: 100%;
    margin: 0 auto;
    position: relative
}

header.layout-nav nav ul li {
    display: flex;
    text-align: center
}

header.layout-nav nav ul li a:hover {
    color: #217139
}

.layout-logo {
    display: flex;
    order: 1;
    width: 33%
}

.search-link {
    order: 3
}

nav.layout-menu {
    order: 2
}

.layout-logo a,
img.search-icon {
    z-index: 3
}

img.search-icon {
    margin-right: 20px;
    padding: 5px
}

.layout-logo img {
    width: 100px;
    height: auto;
    padding: 10px;
    display: block
}

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

img {
    max-width: 100%;
    width: 100%;
    height: auto
}

.aligner {
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
}

.single-article.aligner {
    max-width: 1800px;
    padding: 0
}

a {
    color: #000;
    display: inline-block;
    transition: color .2s ease-in-out;
    text-decoration: none
}

article p a {
    color: #008013;
    text-decoration: underline
}

.wp-block-image {
    padding-top: 15px
}

.logged-in-as a,
article p a:hover {
    text-decoration: none
}

.layout-breadcrumbs ol li a:hover,
.layout-tags a:hover,
.single-article .author-date span a:hover,
a#cancel-comment-reply-link,
a:hover,
nav.layout-menu ul li a:hover {
    color: #289b48
}

.featured-article h1,
.featured-article h2 a {
    color: #fff
}

h2.featured-title {
	font-weight: 500;
}

.featured-article h2 a:hover {
    color: #289b48
}

.article-text header {
    width: 100%
}

strong {
    font-weight: 600
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 800
}

h2 {
    font-size: 3.1rem;
    line-height: 1.25
}

.single h2 {
	font-weight: 500;
	line-height: 1;
	padding: 20px 0;
}

h2.layout-desc {
    font-family: baskerville-urw, serif;
    font-weight: 200
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: canada-type-gibson,sans-serif;
	font-weight: 400;
	font-style: normal;
    color: #363431;
}

.layout-content p,
article .article-text p {
    font-family: baskerville-urw, serif;
    font-weight: 200;
    font-style: normal;
    font-size: 19px;
    line-height: 1.8;
    padding: 10px 0;
    letter-spacing: .5px;
    color: #363431;
}

ul {
    list-style-type: none
}

article ol,
article ul {
    margin-left: 15px;
    font-size: 18px;
    padding: 15px 0
}

article ol {
    padding-left: 15px
}

article ol li {
    line-height: 40px
}

article ul {
    padding-left: 20px
}

article ul li {
	font-family: baskerville-urw, serif;
    font-weight: 200;
    list-style-type: disc;
    font-size: 20px;
    line-height: 2
}

article ul.commentlist {
	margin: 0;
	padding-left: 0;
}

article ul.commentlist li {
	list-style-type: none;
}

article:hover .article-text h3 a,
.wide-article:hover .article-text h3 a {
	color: #289b48;
}

.threepost article.wide-article {
	display: flex;
	padding: 20px 0;
}

.threepost article.wide-article a {
	width: 100%;
}

ul.author-social li {
    list-style-type: none
}

.image-wrap {
    position: relative
}

.sticky {
    position: fixed;
    top: 0
}

.subhero {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	padding-top: 20px;
}
.subhero-one a,
.subhero-two a,
.subhero-three a {
	height: 100%;
	width: 100%;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.subhero-one a:hover h3,
.subhero-two a:hover h3,
.subhero-three a:hover h3 {
	color: #289b48;
	transition: color .2s ease-in-out;
}

.subhero-one h3,
.subhero-two h3,
.subhero-three h3 {
	font-family: canada-type-gibson,sans-serif;
	font-size: 1.1em;
	font-weight: 500;
	text-align: center;
	color: #fff;
}

.subhero-one {
	position: relative;
	height: 150px;
	width: 33%;
	background-color: #000; /* fallback color */
	background: url('./images/subscribe-background.jpg');
	background-size: cover;
	background-position: center center;
}

.subhero-wrap {
	height: 100%;	
}

.subhero-one:hover .subhero-wrap,
.subhero-two:hover .subhero-wrap,
.subhero-three:hover .subhero-wrap  {
	background-color: rgba(0,0,0,.5);
	transition: background-color .2s ease-in-out;
}

.subhero-two {
	position: relative;
	height: 150px;
	width: 33%;
	background: url('./images/tree-in-woods.jpg');
	background-size: cover;
	background-position: center center;
}

.subhero-three {
	position: relative;
	height: 150px;
	width: 33%;
	background: url('./images/besustainable-podcast-bg.jpg');
	background-size: cover;
	background-position: center center;
}

.layout-content p.layout-desc {
    font-size: 22px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto
}

.layout-content p.layout-desc {
    text-shadow: 0 0 57px rgba(0, 0, 0, .75)
}

.article-text {
    font-size: 15px;
    background: #fff;
    height: min-content;
    max-width: 1000px;
    margin: 0 auto
}

.about-section {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative
}

img.about-img {
    width: 40%;
    -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .38);
    -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .38);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, .38)
}

.about-wrap {
    display: flex;
    flex-direction: column;
    width: 60%
}

.photo-credit {
    text-align: right;
    font-weight: 100;
    font-size: 17px
}

.threepost {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}

.home .threepost {
	padding: 0 20px 20px 20px;
}

.threepost article,
.threepost section {
    max-width: 30%;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.ad-section {
	background: #f5f5f5;
	position: relative;
	width: 95%;
	padding: 20px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.category .ad-section {
	margin-bottom: 20px;
}

.layout-category .threepost article {
    padding-bottom: 30px
}
.zero-waste-section,
.climate-change-section,
.forests-section,
.oceans-section,
.travel-section {
    margin-top: 100px
}

.nature-section {
    padding: 100px 0
}

.layout-category h1 {
    font-size: calc(100px + 1vw);
    line-height: 1.5;
    text-align: center;
    font-weight: 200;
    font-style: normal;
    display: block;
    font-weight: 100;
    color: #ccc;
}

.threepost .article-text {
	background: #fff;
    padding: 20px;
    position: relative;
    margin: 0;
    width: 100%;
}

.threepost .article-text h3 {
    display: block;
    text-align: left
}

.threepost .article-text h3 {
	font-family: canada-type-gibson,sans-serif;
	font-weight: 500;
	font-style: normal;
    font-size: 30px;
    line-height: 1.2
}

.threepost .article-text .post-author {
	display: block;
	padding-top: 10px;
}

.layered-posts {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: -50px
}

.layered-posts article {
    position: relative;
    transform: perspective(0) translateZ(0);
    z-index: 0;
    transition: transform .3s ease-in-out;
    width: 33%;
    display: flex
}

.layered-posts article h3,
.layered-posts article h3 a {
    height: 100%
}

.layered-posts article .article-text {
    position: absolute;
    top: 0;
    background: 0 0;
    display: flex;
    height: 100%
}

.layered-posts article:hover {
    transform: perspective(200px) translateZ(10px);
    z-index: 9
}

.layered-posts article:nth-child(2) {
    margin: 0 -50px -100px -50px
}

.layered-posts article header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto
}

.layered-posts article h3 a {
    font-size: 43px;
    line-height: 1.8;
    color: #fff;
    text-shadow: 0 0 55px rgba(0, 0, 0, .85);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px
}

.single-article .post-meta .article-category,
.threepost .article-text .article-category,
.threepost .article-text .post-author,
.large-article .article-category,
.large-article .post-author,
span.article-date {
    font-weight: 200;
    line-height: 20px;
    color: #aaa;
}

.todays-date,
.article-date,
.article-category {
	text-transform: uppercase;
}

.threepost .article-text .article-category {
    font-size: 16px
}

.article-text .post-meta {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px
}

.article-text .post-meta .article-date {
    color: #aaa;
    font-weight: 200
}

.podcast-banner {
    height: 500px;
    background-image: url(./images/podcast-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.podcast-overlay {
    height: 100%;
    background-color: rgba(40, 155, 72, .82)
}

.podcast-banner h2 {
    font-size: 65px;
    line-height: 1.8;
    text-align: center;
    text-shadow: 0 0 35px rgba(0, 0, 0, .35)
}

.podcast-banner .aligner {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100%
}

.podcast-links {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.podcast-links a {
	max-width: 200px;
}

.podcast-banner ul.podcast-links li img {
    max-width: 70%
}

.powered-by-banner {
    background-image: url('./images/wind-energy-banner.jpg');
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    height: 800px;
    margin-top: 100px
}

.powered-by-banner .aligner {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100%
}

.powered-by-banner .aligner h3 {
    font-size: 55px;
    line-height: 1.8;
    color: #fff;
    text-shadow: 0 0 55px rgba(0, 0, 0, .35);
    text-align: center;
    max-width: 1200px
}

.powered-by-banner .aligner .learn-more {
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 1100px;
    width: 100%
}

.page-template .newsletter-page {
   min-height: 1000px;
}

.newsletter-page {
	background: linear-gradient(rgba(0,0,0,.50),rgba(0,0,0,.20),rgba(0,0,0,10)),  url('./images/natural-iceland.jpg');
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
	max-width: 1800px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.newsletter-page {
   width: 100%;
   min-height: auto;
}

.newsletter-page h1 {
	font-family: baskerville-urw, serif;
    opacity: 60%;
    font-size: 45px;
}

.newsletter-page h1,
.sustainable-newsletter.newsletter-page p,
.sustainable-newsletter.newsletter-page:before {
	color: #fff;
}

.sustainable-newsletter.newsletter-page input {
    border: 1px solid #fff;
}

.newsletter-page input[type=submit]#mc-embedded-subscribe {
	background: #fff;
}

.newsletter-page input[type=submit]#mc-embedded-subscribe:hover {
	color: #fff;
}

section.newsletter-section {
    background-image: url('./images/mountain-trees.png');
    background-size: cover;
    background-position: center center;
    height: 600px;
    position: relative;
    max-width: 1800px;
    margin: 0 auto
}

.home .sustainable-newsletter {
   margin: 50px 0;
}

.sustainable-newsletter {
    color: #fff;
    text-align: center;
    padding: 100px 0;
    margin: 0 auto
}

.sustainable-newsletter .aligner {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
    padding-bottom: 50px
}

.sustainable-newsletter:before {
    content: 'Subscribe';
    display: block;
	font-size: 230px;
	line-height: 1;
    letter-spacing: -13px;
    font-family: baskerville-urw, serif;
	font-weight: 400;
	font-style: normal;
   color: #fff;
}

.sustainable-newsletter h3 {
	font-family: baskerville-urw, serif;
    font-size: 44px;
    line-height: 50px
}

.podcast-banner h2,
.sustainable-newsletter h3 {
    color: #fff;
}

.sustainable-newsletter h3 span {
    display: block;
    font-size: 45px;
}

.sustainable-newsletter p {
    max-width: 800px;
    font-size: 18px;
    line-height: 25px;
    padding: 30px 20px;
    font-weight: 100;
    margin: 0 auto;
    color: #555;
}

.sustainable-newsletter input {
    border: 1px solid #00680f;
    border-radius: 100px;
    background: 0 0;
    color: #289b48;
    width: 500px;
    font-size: 19px;
    font-weight: 200;
    line-height: 45px;
    padding: 0;
}

.sustainable-newsletter .mc-field-group {
	margin-right: 20px;
}

.sustainable-newsletter.newsletter-page::before,
.sustainable-newsletter h3,
.sustainable-newsletter p,
.sustainable-newsletter.newsletter-page input {
   opacity: 70%;
}

.sustainable-newsletter input:focus {
	outline: none;
}

#mc-embedded-subscribe-form,
#mc_embed_signup {
    width: 100%;
    display: flex;
    justify-content: center;
}

#mc_embed_signup_scroll {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    max-width: 800px;
    width: 100%
}

.mc-field-group {
    display: flex;
    max-width: 400px;
    margin-bottom: 0;
}

.layout-page .newsletter-page .mc-field-group input,
.newsletter-page .mc-field-group {
    max-width: 500px;
    width: 100%;
}

#mce-responses {
    position: absolute;
}

footer.site-footer {
	background-color: #000;
	max-width: 1800px;
    min-height: 500px;
    margin: 0 auto;
    padding: 20px 0;
}
.footer-wrap {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	min-height: 400px;
}

.footer-sections {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

.footer-nav {
	display: flex;
	flex-direction: row;
	justify-content: center;
	max-width: 50%;
	width: 100%;
}
.footer-wrapup {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	max-width: 50%;
	width: 100%;
}

footer ul li a {
    font-size: 17px;
    color: #555
}

footer ul li a:hover {
    color: #00680f
}

.layout-footer-logo {
    display: flex;
    flex-direction: row;
    justify-content: center
}

.layout-footer-logo img {
    max-width: 300px
}

.layout-social-links {
    display: flex;
    justify-content: center;
    align-items: center
}

.layout-breadcrumbs ol li:after {
    content: '>';
    color: #ccc
}

.layout-breadcrumbs ol li,
.layout-breadcrumbs ol li a {
    font-size: 16px;
    color: #575757
}

.footer nav {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.layout-breadcrumbs ol,
.layout-social-links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.layout-breadcrumbs ol {
	flex-direction: row;
}

.layout-social-links ul {
	flex-direction: column;
}

.layout-breadcrumbs ol li,
.layout-social-links ul li {
    display: flex;
    justify-content: center;
    align-items: center
}

.layout-breadcrumbs ol li span,
.layout-social-links ul li a {
    padding: 10px
}

.layout-breadcrumbs ol li:last-child:after,
.footer-nav ul li:last-child:after,
.layout-social-links ul li:last-child:after {
    content: none
}

.layout-footer-copy {
    display: flex;
    justify-content: center;
    width: 100%;
    color: #555;
    font-size: 17px;
    padding: 0 20px
}

.layout-footer-copy {
    font-size: 17px;
    font-weight: 100
}

.footer-copyright {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.footer-social {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between
}

.footer-social ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 400px;
    width: 100%
}

.footer-social ul li a {
    height: 48px;
    width: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 1px solid #289b48;
    border-radius: 50%;
    transition: all .2s ease-in-out
}

.footer-social ul li a svg {
    fill: #289b48;
    max-height: 25px;
    max-width: 25px;
    transition: all .2s ease-in-out
}

.footer-social ul li a:hover,
.layout-sharelink:hover {
    border-color: #00680f
}

.footer-social ul li a:hover svg,
.layout-sharelink:hover svg {
    fill: #00680f
}

.footer-social p {
   font-family: baskerville-urw, serif;
	font-weight: 400;
	font-style: normal;
    font-size: 70px;
    font-style: normal;
    text-align: right;
    line-height: 50px;
    color: #555;
    padding-top: 20px
}

.footer-social span {
    display: block;
    font-size: 33px;
    text-transform: uppercase
}

.layout-content.post {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.layout-breadcrumbs {
    padding-top: 20px;
    font-family: baskerville-urw, serif;
}

.layout-post h1 {
    font-size: 50px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    letter-spacing: -1px;
}

.post-meta {
    font-size: 16px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    text-transform:uppercase
}

.post-meta,
.post-meta a {
    color: #999;
    transition: all .2s ease-in-out
}

.post-meta a:hover {
    color: #008013
}

.author-date {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px;
    max-width: 450px;
    width: auto;
    align-items: center
}

.single-article .author-date,
.single-article .author-date span a {
	font-family: canada-type-gibson, sans-serif;
    font-weight: 100;
    color: #aaa;
    text-transform: uppercase;
}

.single-article .article-text {
    padding-top: 10px
}

.single-article figure,
.category-podcast figure,
.category figure {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.single-article h1 {
   padding: 0 20px;
}

figcaption {
    font-size: 16px;
    line-height: 35px;
    font-weight: 100;
    color: #999;
    text-align: right
}

.large-article .article-text {
	max-width: 100%;
	text-align: center;
	padding: 20px;
}

.large-article .post-meta {
	text-align: center;
    display: block;
}

.layout-body {
    padding: 20px;
    position: relative;
    background: #fff
}

.layout-body.layout-solid {
    margin: 0 auto
}

.layout-body ul {
    padding: 0 0 20px 40px;
    list-style-type: decimal-leading-zero;
    font-size: 18px;
    line-height: 35px
}

blockquote.wp-block-quote {
    padding: 30px;
    margin: 0;
    border-left: 0
}

article.layout-post blockquote p {
   font-family: baskerville-urw, serif;
	font-weight: 400;
	font-style: normal;
    font-size: 35px;
    line-height: 1.5;
    padding: 0;
    color: #289b48
}

blockquote.wp-block-quote cite {
    font-size: 15px
}

.layout-content.post .threepost {
    order: 3
}

.related-articles {
	padding: 50px 0;
}
.layout-category h1,
.related-articles h3.headline {
	font-family: baskerville-urw, serif;
	letter-spacing: -3px;
}

.layout-category h2 {
	font-weight: 500;
}

.related-articles h3.headline {
    font-size: 100px;
    font-weight: 400;
    text-align: center
}

.related-articles h3 span {
    color: #ccc
}

.mission-banner {
	max-width: 1800px;
	margin: 0 auto;
	background: #289b48;
	color: #fff;
	height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('./images/mission-bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.mission-overlay {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}
.mission-wrap {
	max-width: 1000px;
	padding: 0 20px;
}
.mission-banner span {
	font-weight: 300;
    font-size: 16px;
    text-transform: uppercase;
}
.mission-banner h2 {
	font-family: baskerville-urw, serif;
	color: #fff;
}

@media screen and (max-width:767px) {
    .post-meta {
        flex-direction: column;
        font-size: 17px
    }
    .layout-breadcrumbs ol li,
    .layout-breadcrumbs ol li a {
        font-size: 15px
    }
}

.layout-page {
	padding-bottom: 50px;
}

.layout-page header {
    text-align: center;
    margin-bottom: 20px
}

.layout-page h1 {
	font-family: baskerville-urw, serif;
    font-size: 100px;
    line-height: 1;
    padding-top: 50px
}

.layout-breadcrumbs ol,
.layout-page .post-meta {
    justify-content: center;
	padding-top: 20px;
}

.layout-tag h1,
.layout-tag span.layout-description {
    text-align: center
}

.layout-page h2 {
    padding-top: 20px
}

.layout-page h3 {
    text-align: center
}

.author-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    border-top: .5px solid #ccc;
    border-bottom: .5px solid #ccc;
    position: relative;
    border-top: .5px solid #ccc;
    margin: 0px auto;
    padding: 30px 20px;
    max-width: 700px
}

.author-avatar {
    order: 1
}

.author-info {
    order: 2
}

.archive.author .author-avatar {
    order: 2
}

.archive.author .author-info {
    order: 1
}

.author-card .author-info {
    padding: 20px
}

.author-card .author-image {
    display: flex;
    justify-content: center;
    width: 20%
}

.author-card .author-image img {
    height: 100px;
    width: 100px;
    border-radius: 100px;
    max-width: 100px;
    margin: 20px;
    display: block;
    position: relative
}

.author-card .author-info h3 a {
	font-family: baskerville-urw, serif;
    font-size: 30px;
    color: #289b48
}

.author-card .author-info p {
    font-size: 15px;
    color: #6a6a6a;
    font-weight: 100
}

ul.author-social {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 80px;
    width: 100%;
    padding: 20px 0
}

ul.author-social li a svg {
    max-width: 25px;
    fill: #6a6a6a;
    transition: fill .2s ease-in-out
}

ul.author-social li a svg:hover {
    fill: #289b48
}

.author-avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.author-avatar img {
    max-width: 150px;
    border-radius: 100px
}

.author-info {
    width: 80%
}

.author-info h1 {
    font-size: 50px
}

.author-data {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-around;
    max-width: 1100px;
    min-height: 200px;
    padding: 20px;
    margin: 0 auto
}

.archive.author h2 {
    text-align: center;
    padding: 0 0 40px 0
}

.layout-share {
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center
}

.layout-sharelink {
    height: 48px;
    width: 48px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    transition: all .2s ease-in-out;
    background: #f5f5f5;
    border-radius: 100px;
}

.layout-sharelink svg {
    width: 30px
}

.layout-sharelink:hover {
    cursor: pointer
}

.share-email svg,
.share-facebook svg,
.share-pinterest svg,
.share-twitter svg {
    fill: #000;
    transition: fill .2s ease-in-out
}

.footer-icons {
	display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    max-width: 200px;
}

.footer-icons svg {
	fill: #555;
	max-height: 27px;
}

.footer-icons svg:hover {
	fill: #00680f;
}

nav.footer-menu ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	max-height: 150px;
}

nav.footer-menu ul li a {
	font-size: 16px;
	line-height: 40px;
	padding-left: 30px;
	text-transform: uppercase;
}
nav.footer-menu ul li a.green {
	color: #00680f;
}

@media screen and (max-width:1200px) {
    .layout-share {
        flex-direction: row;
        max-width: 350px;
        width: 100%;
        position: relative;
        max-width: 350px;
        width: 100%;
        margin: 0 auto
    }
}

@media screen and (min-width:1200px) {
    .layout-share {
        flex-direction: row;
        max-width: 350px;
        position: relative;
        padding: 50px 20px
    }
    li.layout-sharelink {
        border: 0
    }
    .share-email svg,
    .share-facebook svg,
    .share-pinterest svg,
    .share-twitter svg {
        fill: #000
    }
    li.layout-sharelink:hover svg {
        fill: #289b48
    }
	.sustainable-newsletter:before {
		display: block;
		font-size: 200px;
	}
}

.layout-content.layout-category header h1 {
    font-size: 7.5vw;
    text-transform: uppercase;
    line-height: 1.25
}

.layout-category .large-article-right {
    padding: 0
}

.layout-content.layout-category .article-text header h2 {
    font-size: 45px;
    line-height: 50px;
    padding: 20px
}

.layout-content.layout-category header .category-wrap p {
    background: #fff;
    padding: 20px 10px;
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15)
}

.layoutpage-header img {
    max-width: 700px
}

.layout-tags {
    padding: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 15px;
    color: #999
}

.layout-tags a {
    font-size: 15px;
    color: #999
}

div.wpcf7-mail-sent-ok {
    border: 0
}

.layout-comment-section {
    max-width: 700px;
    margin: 50px auto
}

.commentlist {
    max-width: 700px
}

.commentlist .reply {
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.comment-respond {
    margin: 30px auto;
    max-width: 650px
}

.layout-comment-data {
    display: flex;
    flex-direction: column;
    align-items: baseline
}

.layout-comment-meta {
    font-size: 18px;
    color: #999
}

.comment-form p {
    padding-left: 0;
    font-size: 17px;
    margin-bottom: 20px
}

#mc_embed_signup_scroll.newsletter-page input[type=submit],
.form-submit .submit,
a.comment-reply-link,
input.wpcf7-form-control.wpcf7-submit {
    display: flex;
    border: none;
    background-color: #008013;
    color: #fff;
    border-radius: 100px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50px;
    max-width: 250px;
    width: 100%;
    font-family: canada-type-gibson,sans-serif;
    font-style: normal;
    font-size: 15px;
    line-height: 50px;
    text-transform: uppercase;
    transition: all .2s ease-in-out
}

a.comment-reply-link {
	max-width: 150px;
}

#mc_embed_signup_scroll.newsletter-page,
form.wpcf7-form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto
}

.author-card .author-info h3 a:hover {
    color: #00680f
}

#commentform {
    max-width: 500px
}

#commentform .form-submit {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 30px
}

#commentform .comment-form-author input,
#commentform .comment-form-email input,
#commentform textarea,
.layout-page .newsletter-page .mc-field-group input,
.layout-page input,
.layout-page textarea {
    font-family: baskerville-urw, serif;
    font-weight: 400;
    font-size: 18px;
    padding: 10px;
    max-width: 500px;
    width: 100%;
    font-size: 16px;
    border: 0
}

.layout-page .newsletter-page .mc-field-group p {
    width: 100%;
    max-width: 400px;
    margin: 0 auto
}

#commentform .comment-form-author input,
#commentform .comment-form-email input,
.layout-page .newsletter-page .mc-field-group input,
.layout-page input {
    border-bottom: 1px solid #000
}

#commentform textarea {
   border: .5px solid #ccc;
   border-radius: 20px;
}

.layout-page textarea {
    border: 0;
    padding: 20px;
    -webkit-box-shadow: 0 0 13px 0 rgba(0, 0, 0, .06);
    -moz-box-shadow: 0 0 13px 0 rgba(0, 0, 0, .06);
    box-shadow: 0 0 13px 0 rgba(0, 0, 0, .06)
}

textarea:focus {
	outline: none;
    box-shadow: 0 0 5px 0 #ccc;
}

#mc_embed_signup_scroll.newsletter-page input[type=submit],
.circle-button,
.form-submit .submit,
input.wpcf7-form-control.wpcf7-submit,
input[type=submit] {
    height: 50px;
    max-width: 200px;
    width: 100%;
    background: #000;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-in-out;
    border: 3px solid #000;
    -webkit-box-shadow: 0 0 17px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 0 17px rgba(0, 0, 0, .1);
    box-shadow: 0 0 17px rgba(0, 0, 0, .1)
}

.circle-button:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .35)
}

#mc_embed_signup_scroll.newsletter-page input[type=submit]:hover,
.form-submit .submit:hover,
a.comment-reply-link:hover,
input.wpcf7-form-control.wpcf7-submit:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    cursor: pointer
}

input#mce-EMAIL {
    text-align: center
}

input.search:focus {
	outline: none;
}

#mc_embed_signup_scroll.newsletter-page input[type=submit],
.layout-comment-section input[type=submit],
input.wpcf7-form-control.wpcf7-submit,
input[type=submit]#mc-embedded-subscribe {
    color: #fff;
    border-color: #289b48;
    background: #289b48;
}

input[type=submit]#mc-embedded-subscribe {
    font-size: 12px;
    background: #00680f;
    border: #00680f;
    max-width: 200px;
    width: 100%;
    border-radius: 100px;
    color: #000;
}

input[type=submit]#mc-embedded-subscribe:hover {
	cursor: pointer;
	background: #00580f;
    border: #00580f;
}

.layout-comment-section input[type=submit] {
    box-shadow: none;
    text-transform: none
}

.comment-body p {
    font-size: 17px;
    line-height: 32px
}

.twitter-tweet.twitter-tweet-rendered {
    margin: 0 auto
}

.layout-content.search h1 {
    text-align: center;
    padding: 20px 0
}

input.search.form-control {
    font-family: baskerville-urw, serif;
    font-weight: 200;
    border: 1px solid #ccc;
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 15px;
    color: #575757
}

.layout-null {
    text-align: center
}

.sustainable-search {
    position: fixed;
    top: 0;
    background: #fff;
    height: 60px;
    z-index: 2;
    max-width: 1800px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transform: translateY(-100%);
    transition: .2s transform ease-in-out;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.sustainable-search.open {
    transform: translateY(0px);
    z-index: 9;
}

.sustainable-search form.searchform {
    max-width: 500px;
    width: 100%;
    padding: 0 20px
}

.sustainable-search form.searchform input.search.form-control {
	height: 80%;
    width: 100%;
    font-size: 1em;
   font-family: baskerville-urw, serif;
	font-weight: 400;
	font-style: normal;
}

.sustainable-search form.searchform input.search.form-control::focus {
	outline-color: green;
}

.sustainable-search form.searchform input.search.form-control::placeholder {
    font-size: 1.2em;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center
}

.search-results-search {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0 20px 20px 20px
}

ul.create-menu li a {
    color: #333
}

.featured ul.create-menu li a {
    color: #fff
}

.alignnone {
    margin: 5px 20px 20px 0
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto;
    text-align: center
}

.alignright {
    float: right
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px
}

a img.alignnone {
    margin: 5px 20px 20px 0
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0
}

img.alignleft {
    float: left
}

.wp-post-image {
    display: block;
    max-width: 100%
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    max-width: 100%;
    padding: 5px 3px 10px;
    text-align: center
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px
}

video.wp-video-shortcode {
    height: auto
}

.video .wp-playlist {
    border: 0
}

.post-video iframe {
    width: 100%;
    max-height: 400px
}

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden
}

a.post-edit-link:hover {
    text-decoration: none
}

.comment-author .fn a {
    color: #171717
}

.bottom-banner {
    position: fixed;
    bottom: 0;
    background: #eee;
    width: 100%;
    z-index: 9
}

.bottom-banner.remove {
    display: none;
    transform: translateY(100%);
    transition: all .3s ease-in-out
}

.bottom-banner-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: 100;
    font-size: 17px;
    height: 75px
}

.bottom-banner-wrap p {
    max-width: 33%
}

.bottom-banner-wrap button {
    border: 1px solid green;
    color: green;
    border-radius: 50px;
    height: 60px;
    width: 60px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: transparent;
    margin: 0 20px;
    transition: all .2s ease-in-out
}

.bottom-banner-wrap button:hover {
    cursor: pointer;
    color: #fff;
    background: green
}

.bottom-banner-wrap a {
    text-decoration: underline
}

.wp-block-embed {
    margin-top: 1em
}

.blocks-gallery-grid .blocks-gallery-image figcaption,
.blocks-gallery-grid .blocks-gallery-item figcaption,
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
    position: relative;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    overflow: auto;
    padding: 0;
    color: #000;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 0;
    background: 0 0
}

.blocks-gallery-grid .blocks-gallery-item figure {
    flex-direction: column
}

.wp-block-separator {
	padding-top: 30px;
}

@media screen and (min-width:1200px) {
    header.layout-nav nav ul li a {
        font-size: 15px;
        line-height: 75px;
        font-weight: 300;
        text-transform: uppercase;
        white-space: nowrap;
        font-family: canada-type-gibson, sans-serif;
        font-style: normal
    }
    header.layout-nav nav ul li a:hover {
        color: #289b48
    }
    nav.layout-menu {
        display: flex;
        justify-content: center
    }
    nav.layout-menu ul {
        display: flex;
        flex-direction: row
    }
    nav.layout-menu ul li {
        padding: 0 20px
    }
    nav.layout-menu ul li a {
        font-size: 20px;
        font-weight: 100;
        color: #000
    }
    .nature-section:before {
        padding-bottom: 100px
    }
}

@media screen and (max-width:1200px) {
    header.layout-nav {
        width: 100%
    }
    header.layout-nav nav ul li a {
        font-size: 38px;
        line-height: 75px;
        font-weight: 300;
        text-transform: uppercase;
        white-space: nowrap;
    }
    nav.layout-menu {
        position: fixed;
        top: 0;
        left: 0;
        background: #289b48;
        z-index: 2;
        width: 0;
        display: flex;
        justify-content: left;
        transition: width .2s ease-in-out;
        -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15);
        -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 0 15px 0 rgba(0, 0, 0, .15);
        overflow-y: scroll;
        height: 100%
    }
    nav.layout-menu ul {
        position: relative;
        padding-bottom: 100px
    }
    .layout-logo {
        order: 1
    }
    .search-link {
        order: 2;
        z-index: 0;
        width: 33%;
        justify-content: center
    }
    img.search-icon {
        margin: 0
    }
    .featured-wrap {
       grid-template-columns: 1fr;
       /* create your rows with height */
       grid-template-rows: 1fr 1fr 1fr;
       /* "Paint" your grid */
       grid-template-areas:
       "boxone"
       "boxtwo"
       "boxthree";
       height: auto;
    }
    .featuredtwo,
    .featuredthree {
       border-top: 2px solid #fff;
       border-left: 0;
    }
    .btn-wrap {
        display: flex;
        order: 3;
        width: 33%;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end
    }
    button.mobile-btn {
        display: flex
    }
    nav.layout-menu ul {
        display: flex;
        flex-direction: column;
        margin: 150px auto;
        max-width: 2000px;
        width: 100%
    }
    nav.layout-menu ul li {
        padding: 0 20px
    }
    nav.layout-menu ul li a {
        font-weight: 100;
        color: #fff
    }
    nav.layout-menu.show {
        width: 100%
    }
    nav.layout-menu ul li a.patreon {
        border-radius: 9999px;
        border: 1px solid #fff;
        width: 200px;
        transition: all .2s ease-in-out
    }
    nav.layout-menu ul li a.patreon:hover {
        background-color: #3ca75c;
        border-color: #3ca75c;
        color: #fff
    }
    .featured-img-link img {
		display: block;
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    object-fit: cover;
	}
	article.featured-article {
		min-height: 675px;
	}
    .layout-content.layout-category header.layoutpage-header {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center
    }
    .layout-content.layout-category header.layoutpage-header h1,
    .layout-content.layout-category header.layoutpage-header h2 {
        text-align: center
    }
    .layout-content {
        width: 100%
    }
    .layout-category h1 {
        line-height: 1.5
    }
    footer.site-footer {
        padding: 20px
    }
}
@media screen and (min-width:991px) {
	.home .featured-article h1 {
		font-size: 100px;
	}
}
@media screen and (max-width:991px) {
	.home a.featured-img img {
		display: block;
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	.home .featured-article .article-text {
		padding: 20px;
	}
	.home .featured-article h1 {
		font-size: 3rem;
	}
	h2.featured-title {
		font-size: 2.1rem;
	}
	.subhero {
		flex-direction: column;
		padding: 20px 0;
	}
	.subhero-one,
	.subhero-two,
	.subhero-three {
		width: 100%;
		margin: 5px 0;
	}
	.threepost article.wide-article img {
		padding-right: 20px;
	}
	.mission-banner span {
		display: block;
		text-align: center;
	}

    .layout-comment-section {
        padding: 0 20px;
    }
    .layout-content p,
    article .article-text p {
        padding: 20px
    }
    .layout-category h1 {
        font-size: calc(90px + 1vw)
    }
    .zero-waste-section:before,
    .climate-change-section::before,
    .forests-section::before,
    .nature-section::before,
    .oceans-section::before,
    .travel-section::before {
        margin-top: 0
    }
    .layout-body {
        margin: -20px auto 0 auto
    }
    .layout-page h1 {
        font-size: 50px
    }
    article.layout-post blockquote {
        padding: 0
    }
    article.layout-post blockquote p {
        font-size: 25px;
        line-height: 1.5;
        text-align: center
    }
    .threepost {
        flex-direction: column;
        padding: 0 10px
    }
    .threepost article,
    .threepost section {
        max-width: 100%;
        width: 100%;
        margin: 25px 0;
        padding: 0
    }
    .podcast-banner h2 {
        font-size: 47px
    }
    ul.podcast-links li {
        text-align: center;
        padding: 30px 0
    }
    .layered-posts article h3 a {
        font-size: 30px
    }
    input[type=submit] {
        font-size: 14px
    }
    #mc_embed_signup_scroll {
        margin: 20px;
        flex-direction: row
    }
    .related-articles h3 {
        font-size: 50px
    }
    .author-data {
        flex-direction: column;
        justify-content: center;
        text-align: center
    }
    .sustainable-newsletter .aligner {
        min-height: 400px
    }
    footer {
        flex-direction: column;
        flex-wrap: nowrap;
        text-align: center
    }
    .layout-footer-logo a {
        margin: 20px
    }
    .footer-wrapup,
    .layout-footer-nav ul {
        flex-direction: column
    }
    .footer-social {
        align-items: center
    }
    .footer-social ul {
        padding-top: 20px
    }
	.sustainable-newsletter:before {
		font-size: 180px;
		line-height: .75;
	}
}

@media screen and (max-width:768px) {
    .layout-category h1 {
        font-size: calc(50px + 1vw)
    }
    .author-card {
		flex-direction: column;
	}
    .layered-posts {
        flex-direction: column;
        margin-top: 0
    }
    .layered-posts article,
    .layered-posts article a {
        width: 100%
    }
    .layered-posts article:hover {
        transform: none
    }
    .layout-content p,
    article .article-text p {
        text-align: left
    }
    .sustainable-newsletter .mc-field-group {
	    margin: 20px 0;;
    }
    .footer-sections,
    .footer-nav {
	    flex-direction: column;
    }
    .footer-nav,
    .footer-wrapup {
	    max-width: 100%;
    }
    .footer-wrapup {
	    padding-top: 20px;
    }
	.sustainable-newsletter:before {
		font-size: 100px;
		line-height: .75;
		letter-spacing: -5px;
	}
}

@media screen and (min-width:600px) {
    .nature-section:before {
        padding-bottom: 50px
    }
}

@media screen and (max-width:600px) {
    header.layout-nav nav ul li a {
        font-size: 28px
    }
    .layout-category h1 {
        font-size: calc(40px + 1vw)
    }
    .layout-post h1 {
        font-size: 27px;
        line-height: 1.5
    }
    h2 {
        font-size: 2.1rem;
        line-height: 1.25;
        letter-spacing: -.05rem;
        text-align: center
    }
    h2.featured-title {
	    text-align: left;
    }
    .layout-post h2 {
        padding-left: 0
    }
    .podcast-banner {
        height: 100%;
        max-height: 900px
    }
    .podcast-banner h2 {
        font-size: 37px
    }
    ul.podcast-links li {
        text-align: center;
        padding: 10px 0
    }
    .podcast-overlay {
        padding: 20px 0
    }
    .layered-posts article:nth-child(2) {
        margin: 0
    }
    footer.author-card {
        flex-direction: column;
        padding: 20px 0
    }
    .threepost .article-text {
        padding: 0
    }
    .zero-waste-section:before,
    .climate-change-section::before,
    .nature-section::before,
    .oceans-section::before,
    .travel-section::before {
        line-height: 1
    }
    .zero-waste-section
    .climate-change-section,
    .nature-section,
    .oceans-section,
    .travel-section {
        margin-top: 50px
    }
    .layout-content.layout-category header h1 {
        line-height: 2
    }
    .layout-content.layout-category header h2 {
        font-size: 2.5rem
    }
    .category-wrap p {
        margin: 10px
    }
    .post-meta {
        font-size: 15px
    }
    .layout-breadcrumbs ol li a,
    .layout-breadcrumbs ol li:last-child,
    .layout-footer-nav ul li a,
    .layout-social-links ul li a {
        padding: 5px
    }
    .related-articles h3 {
        font-size: 35px
    }
    #commentform .form-submit {
        justify-content: center
    }
    .powered-by-banner {
        margin-top: 0
    }
    .powered-by-banner .aligner h3 {
        font-size: 35px
    }
    section.newsletter-section {
        height: 1000px
    }
    input.required.email {
        margin: 20px;
    }
    .sustainable-newsletter h3 {
        font-size: 26px;
        line-height: 41px
    }
    .sustainable-newsletter h3 span {
        font-size: 53px;
        line-height: 53px
    }
    .sustainable-newsletter p {
        font-size: 18px
    }
    .mc-field-group {
        max-width: 250px
    }
    .related-articles h3.headline {
      font-size: 55px;
    }
    .sustainable-newsletter:before {
        font-size: 17.5vw;
        line-height: 13.5vw
    }
    .footer-social p {
        font-size: 51px;
        line-height: 41px
    }
    .footer-social span {
        font-size: 30px
    }
    .layout-footer-copy {
	    justify-content: center;
    }
}
.audioplayer {
	display:inline-flex;
	background:#eee;
	width: 100%;
}
.audioplayer figure.wp-block-image {
	max-width:25%;
	width: 100%;
}
.audioplayer figure.wp-block-audio {
	max-width:70%;
	width: 100%;
	padding-left:20px;
}