@charset "UTF-8";
/* CSS Document */

body {
    background-color: #f8f5f2;
    width: 100%;
    min-width: 400px;
    padding: 0;
    margin: 0;
}
.shell {
    background: url("../img/bg-trees-top.png") no-repeat top;
    background-size: contain;
    width: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
}
.visuallyhidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
.indent {
    left: 1.5em;
    position: relative;
}
a {color: #b04517;}
footer {
	padding: 0 0.5em;
	width: 80vw;
	border-top: 1px solid #000;
	margin: 2em auto 0;
}
footer p {
    font-family: de-walpergens-pica-sc, sans-serif;
    font-size: 1.1rem;
/*    line-height: 1.1rem;*/
    text-align: center;
}
footer p a {
    font-size: 1.3rem;
    color: #197378;
}
footer.termly-consent-banner-footer-e1f124 {
    width: auto;
}
.menu-btn {
    position: absolute;
    top: 3vw;
    right: 3vw;
    z-index: 40;
    background: #fff;
    border-radius: 100%;
    padding: 0.6em 0.5em 0.25em;
}
#menu {
    position: absolute;
    width: auto;
    right: 0;
    background: #fff;
    border: 1px solid #bbb;
    padding: 2em 1em 0.5em;
    z-index: 99;
    box-shadow: -3px 3px 12px #777;
}
#menu .menu a {
    font-size: 1.5em;
    line-height: 0.9em;
    font-family: "nelson rugged", nelson, serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 0 1em 0;
    border-top: 1px solid #bbb;
    list-style: none;
    text-decoration: none;
    top: -0.25em;
    position: relative;
    display: block;
}
#menu .menu img {
  top: 0.65em;
  position: relative;
  padding: 0 0.3em 0 0;
}
#menu ul li a {}
a.mv {color: #596324;}
a.eh {color: #b04517;}
a.ib {color: #197378;}
a.shop {color: #000;}
a.about {color: #97714a;}
#menu .close-btn {
    position: absolute;
    top: 1em;
    right:1em;
}
#menu .menu {
    margin: 1.5em 0.5em 1em 0;
    list-style: none;
    padding: 0 !important;
    padding-left: 0 !important;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: block;
    z-index: 97;
}
.bg-img {
    position: absolute;
    top: 0;
    width: 32%;
    height: 102%;
    overflow: hidden;
}
.bg-left-far {
    background: url("../img/bg-trees-left-sm.jpg") repeat-y top left;
    background-size: 50%;
    left: 0;
    z-index: -1;
}
.bg-right-far {
    background: url("../img/bg-trees-right-sm.jpg") repeat-y top right;
    background-size: 50%;
    right: 0;
    z-index: -1;
}
.logo {
    position: relative;
    margin: 0 auto;
    top: 0;
    z-index: 10;
}
.logo img {width: 100%;}
.content-grid {
    display: grid;
    grid-template-areas: "center ";
    grid-template-columns: 100%;
    z-index: 80;
    grid-gap: 0%;
    position: relative;
    margin: 0;
}
p {
    font-family: de-walpergens-pica, sans-serif;
    line-height: 1.3em;
    font-size: 1.8rem;
    text-align: left;
    max-width: 50em;
    margin: 0 auto 1em;
}
ul li {
    font-family: de-walpergens-pica, sans-serif;
    line-height: 1.2em;
    font-size: 1.4rem;
    text-align: left;
    margin-bottom: 0.5em;
}
.img-right {
    float: right;
    padding: 0 0 1em 1em;
}
 h1 {
    font-family: "nelson rugged", nelson, serif;
    font-weight: 400;
    font-style: normal;
    color: #596324;
    font-size: 3.5em;
    line-height: 0.9em;
    margin: 0;
    padding-bottom: 0.15em;
}
h2 {
    font-family: de-walpergens-pica-sc, sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    line-height: 0.7em;
    margin-top: 0.3em;
    color: #596324;
}
h3 {
    font-family: de-walpergens-pica-sc, sans-serif;
    font-size: 2em;
    color: #000;
}
.left {
    grid-area: left;
    position: relative;
}
.center {
    grid-area: center;
    position: relative;
    text-align: center;
    padding: 0 5vw;
}
.right {
    grid-area: right;
    position: relative;
}
.left img {
    width: 200%;
    border-radius: 100%;
    left: -100%;
    position: absolute;
    box-shadow: 0 0 50px #f6f3f0, 0 0 20px #f6f3f0, 0 0 20px #f6f3f0;
}
.center img.woodcut {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
.center img.img {
    width: 45%;
    max-width: 380px;
    float: right;
    padding: 0;
    border-radius: 100%;
    margin-left: 2%;
}
.center img.buy-now {
    width: 100%;
    max-width: 525px;
    margin: 0;
    display: block;
}
.content-grid .center p {
    text-align: left;
    font-size: 1.5em;
}
.hide {display: none;}
.cart-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0;
    margin: 0;
    max-width: 800px;
}
.cart-main {
    grid-column: 1;
    grid-row: 1;
}
.cart-side {
    grid-column: 1;
    grid-row: 2;
}
.callout-box {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2em;
    margin: 3em auto;
    max-width: 800px;
    width: 80%;
}
.callout-box .col-left {
    grid-column: 1;
    grid-row: 1;
}
.callout-box .col-right {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
}
.callout-box img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    display: block;
}
a.btn {
    display: block;
    padding: 0.3em;
    background: url("../img/icon_leaf-bg.png") no-repeat left;
    background-size: contain;
    background-color: #b04517;
    border: 2px solid #fff;
    border-radius: 1em;
    color: #fff;
    text-decoration: none;
    box-shadow: 2px 2px 5px #888, 2px -2px 10px #666 inset, -2px 2px 5px #eee inset;
    text-shadow: 1px 1px 3px #444;
    width: 90%;
    padding: 0.5em;
    text-align: center;
    margin: 3vw 3vw 2em;
    line-height: 1em;
    font-size: 0.9em;
}

a.btn2 {
    display: block;
    padding: 0.3em;
    background: url(../img/icon_leaf-bg-light.png) no-repeat left;
    background-size: auto;
    background-color: #fff;
    border: 1px solid #596324;
    border-radius: 0.5em;
    color: #596324;
    text-decoration: none;
    box-shadow: 2px 2px 5px #888;
    text-shadow: 1px 1px 3px #fff;
    padding: 1em 1em 1em 2em;
    text-align: center;
    margin: 1.5em 0;
    line-height: 1em;
    font-size: 1.2em;
    text-wrap: balance;
    font-family: 'de-walpergens-pica';
}
a.btn2:hover {background-color: #ede6de;}
.bc-buy-button {margin: 0 auto;}
.modal-content * {font-family: de-walpergens-pica-sc, sans-serif;}

@media only screen and (min-width: 700px){
    .content-grid {
        grid-template-areas: "left center";
        grid-template-columns: 20% 80%;
    }
    .content-grid .center p {
        font-size: 1.3em;
    }
    .callout-box {
        grid-template-columns: 30% 70%;
    }
    .callout-box .col-left {
        grid-column: 1;
        grid-row: 1;
    }
    .callout-box .col-right {
        grid-column: 2;
        grid-row: 1;
    }
    .callout-box .col-right {text-align: left;}
}

@media only screen and (min-width: 900px){
     .content-grid {
        grid-template-areas: "left center right";
        grid-template-columns: 15% 70% 15%;
    }
    .center img.img {
        margin-right: -2em;
    }
    .bc-buy-button {margin-left: 2em;}
    
    .cart-grid {
        grid-template-columns: 1fr 1fr;
        margin: 0 auto 3em;
    }
    .cart-main {
        grid-column: 1;
        grid-row: 1;
    }
    .cart-side {
        grid-column: 2;
        grid-row: 1;
    }
}

@media only screen and (min-width: 716px){
 .logo {display: table;}
}

@media only screen and (min-width:1024px){
        a.btn {width: 40%;}
    }