/* 
Fonts Here
font-family: "Maitree", serif;
font-weight: 400;
font-family: "Montserrat", system-ui;
font-weight: 300;
font-weight: 400;
font-weight: 700;
 */

/* Variables */

/* End Variables */

:root {
	--base: #000;
	--purple: #583861;
	--cream: #E6E1D5;
	--green: #1B4A27;
}

/* Generic */
svg {max-width: 100%; display: block;}
body {position: relative; margin: 0; font-family: "Montserrat", system-ui; font-size: 1.25rem; line-height: 1.7; color: var(--base); font-weight: 400;}
#whole-body {overflow: hidden;}
body a {text-decoration: none; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; font-weight: 300; color: #000; border-bottom: 1px solid transparent;}
body a:hover {color: #583861; border-color: #583861;}
body main a {font-weight: 700;}
p {margin: 3.438rem 0;}
p.empty {margin: 0 !important;}
main ol {margin: 3.438rem 0; line-height: 1.7;}
main ul {margin: 3.438rem 0; column-count: 2; column-gap: 2rem;}
main ul li, main ol li {margin: 0 0 1.5rem; line-height: 1.4;}
main ul li:last-child, main ol li:last-child {margin-bottom: 0;}
.clear {clear: both;}
img {max-width: 100%;}
.mobile-only {display: none;}
.full {position: absolute; width: 100% !important; height: 100% !important; z-index: 1; object-fit: cover; top: 0; left: 0;}
.holder {position: relative; z-index: 1;}
h1, h2, h3, h4 {font-weight: 400; line-height: 1.2; margin: 3.438rem 0; font-family: "Maitree", serif;}
h1 {font-size: 3.125rem;}
h2 {font-size: 3.75rem;}
body h3 {font-size: 2.5rem; font-weight: 700; font-family: "Montserrat", system-ui;}
h4 {font-size: 2.5rem;}
.readon {text-transform: uppercase; line-height: 1; position: relative; display: inline-block; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; font-family: "Maitree", serif; font-weight: 400; color: var(--cream); background: var(--purple); border-width: 10px; border-style: solid; border-color: var(--purple);}
.readon span {padding: 1rem;  border-width: 1px; border-style: solid; border-color: var(--cream); display: block; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; position: relative; overflow: hidden;}
.readon:hover {border-color: var(--cream); color: var(--cream);}
.readon:hover span {padding-right: 2rem;}
.readon span:after {content: '>'; position: absolute; right: -1rem; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}
.readon span:before {content: '>'; position: absolute; right: -2rem; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}
.readon:hover span:after, .readon:hover span:before {opacity: 1;}
.readon:hover span:after {right: .5rem;}
.readon:hover span:before {right: 1rem;}
.container {margin: 0 auto;}

#menuToggle {transform: rotate(0deg); transition: all .5s ease-in-out; background: none; border: 0; cursor: pointer; height: 50px; padding: 0; position: absolute; left: 2rem; top: 2rem; width: 50px; z-index: 11000; }
#menuToggle .bar {transform: rotate(0deg); transition: all .5s ease-in-out; height: 4px; background-color: #000; position: absolute; right: 5px; width: 40px;}
#menuToggle.open .bar {background-color: #fff;}
#menuToggle .bar:nth-child(1) {top: 16px;}
#menuToggle .bar:nth-child(2) {top: 24px; right: 5px;}
#menuToggle .bar:nth-child(3) {top: 32px;}
#menuToggle.open .bar:nth-child(1) {transform: rotate(45deg); top: 24px;}
#menuToggle.open .bar:nth-child(2) {right: 50%; width: 0%; }
#menuToggle.open .bar:nth-child(3) {transform: rotate(-45deg); top: 24px; }

.nav_main {position: fixed; background: #000; width: 100%; height: 100%; z-index: 0; text-align: center; opacity: 0; -webkit-transition: all .5s linear; -moz-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; }
.nav_main.open {display: block; opacity: 1; z-index: 2000; overflow-y: auto; overflow-x: hidden; position: fixed;}
.nav_main ul {margin: 0; padding: 0;}
.nav_main ul li {list-style: none; margin: 3rem 0;}
.nav_main ul li a {color: #fff; text-transform: uppercase;}
.nav_main ul li a:hover, .nav_main ul li.active a {color: #acf3be;}
.nav_main ul li:last-child {margin: 0;}
body.open {overflow: hidden;}

#hero, #home-teaser .left, #home-teaser .right, #home-teaser .item-one, #home-teaser .btm-btm, #home-teaser .item-three, #cta .left, #hero-int, .int-img .container {position: relative;}

#navigation {position: absolute; top: 1.15rem; z-index: 20; width: 100%;}
#hero {height: 100vh; min-height: 40rem; z-index: 5;}
#hero .circle {bottom: -4.688rem; left: 0; right: 0; margin: 0 auto; position: absolute; height: 9.375rem; width: 9.375rem; background: #fff; z-index: 6; border-radius: 100%; text-align: center; padding: .625rem; }
#hero .circle .overlay {border-width: 1px; border-style: solid; border-color: var(--purple); border-radius: 100%; width: 100%; height: 100%;}
#hero .icon {width: auto; margin: 0 auto; position: relative; display: inline-block; top: 50%; transform: translateY(-50%);}
#hero .icon svg {display: block;}
#hero .gradient, #hero-int .gradient {position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; background: rgb(230,225,213);
background: linear-gradient(90deg, rgba(230,225,213,1) 0%, rgba(230,225,213,0.8) 40%, rgba(255,255,255,0) 100%);}
#hero .txt, #hero-int .txt {z-index: 3; position: absolute; top: 55%; transform: translateY(-55%); left: 10%;}
#hero h1, #hero-int h1 {margin: 0; line-height: 1; text-transform: capitalize; color: var(--green); font-size: 6.25rem;}
#hero h1 span {display: block; margin-top: 1rem; margin-bottom: 1rem; animation: heroword 3s forwards; margin-left: -100%; opacity: 0;}
#hero h1 span.one {animation-delay: 1s;}
#hero h1 span.two {animation-delay: 2s;}
#hero h1 span.three {animation-delay: 3s;}

#navigation .container {width: 95%; margin: 0 auto; display: block; height: 6.25rem; display: flex; flex-direction: row; align-items: center; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,.17);}
#navigation .left {width: 16.875rem; padding-left: 1.25rem;}
#navigation .right {width: calc(100% - 18.125rem); height: 100%;}
#navigation .nav-top-holder {width: 100%; height: 100%;}
#navigation .nav-top {justify-content: flex-end; display: flex; align-items: center; height: 100%; margin: 0;}
#navigation .nav-top li {list-style: none; margin: 0 .5rem;}
#navigation .nav-top li:last-child {margin-right: 0; background: var(--green); height: 100%; padding: .5rem; box-sizing: border-box; text-align: center;}
#navigation .nav-top li a {text-transform: uppercase; line-height: 1; font-size: 1.25rem; font-weight: 300; border: 0 !important; position: relative; padding: 1rem; display: block;}
#navigation .nav-top li:last-child a {color: var(--cream); border-width: 1px !important; border-style:
solid !important; border-color: var(--cream) !important; height: 100%; display: flex; align-items: center; padding: 0 1rem; font-family: "Maitree", serif; font-weight: 400;}
#navigation .nav-top li:last-child a:hover {background: var(--purple);}
#navigation .nav-top li:last-child a:after {display: none;}
#navigation .nav-top li a:after {content: ''; width: 0; height: 1px; background: var(--purple); bottom: .5rem; position: absolute; display: block; margin: 0 auto; left: 0; right: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;}
#navigation .nav-top li a:hover:after, #navigation .nav-top li.active a:after {width: calc(100% - 2rem);}
#navigation .nav-top li.active a {color: var(--purple);}

#split {padding: 7.5rem 0 4.375rem; text-align: center;}
#home-book {padding: 4.375rem 0; text-align: center;}
#split .container, #home-book .container {width: 90%;}
#split h2, #home-book h2 {margin-top: 0; font-size: 4.375rem; font-family: "Maitree", serif; font-weight: 400; text-transform: capitalize; margin: 0 0 2rem;}
#split h2 span, #home-book h2 span {text-transform: uppercase; font-size: 3.125rem; font-family: "Montserrat", system-ui; font-weight: 400; display: block;}

#home-teaser .teaser-top {height: 26.563rem; display: flex; flex-direction: row; flex-wrap: wrap;}
#home-teaser .teaser-top .left, #home-teaser .teaser-top .right {width: 50%;}
#home-teaser .teaser-btm {display: flex; flex-wrap: wrap; flex-direction: row;}
#home-teaser .item-one {width: 21%;}
#home-teaser .item-two {width: 39%;}
#home-teaser .item-three {width:40%}
#home-teaser .item-three img {object-position: left;}
#home-teaser .btm-top {background: var(--green); color: #fff;}
#home-teaser .btm-top .pad {padding: 2.125rem;}
#home-teaser .btm-top h2 {margin: 0 0 .5rem; font-size: 2.375rem;}
#home-teaser .btm-btm {height: 14.375rem;}
#home-teaser .btn-holder {text-align: right;}
#home-teaser a {font-family: "Maitree", serif; font-weight: 400; color: #fff; line-height: 1; text-transform: lowercase; position: relative; border: 0;}
#home-teaser a:after {width: 100%; height: 1px; background: #fff; position: absolute; bottom: 0; content: ''; left: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; left: 0; right: 0; margin: 0 auto;}
#home-teaser a:hover:after {width: 0; background: #acf3be;}
#home-teaser a:hover {color: #acf3be;}

#cta {padding: 1.25rem;}
#cta .container {display: flex; flex-direction: row; flex-wrap: wrap;}
#cta h2 {margin: 0 0 1rem; font-size: 2.375rem;}
#cta .left {width: 55%;}
#cta .right {width: 45%;}
#cta .right p {margin: 0 0 2.5rem;}
#cta .pad {margin: 0 auto; width: 90%; max-width: 43.75rem; padding: 10rem 0;}
#cta .btn-holder {text-align: right;}
#cta a.readon-blank {font-family: "Maitree", serif; font-weight: 400; color: #000; line-height: 1; text-transform: lowercase; position: relative; border: 0;}
#cta a.readon-blank:after {width: 100%; height: 1px; background: #000; position: absolute; bottom: 0; content: ''; left: 0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; left: 0; right: 0; margin: 0 auto;}
#cta a.readon-blank:hover:after {width: 0; background: var(--purple);}
#cta a.readon-blank:hover {color: var(--purple);}

#footer {padding: 1.25rem;}
#footer .container {display: flex; flex-direction: row; flex-wrap: wrap; background: var(--cream); box-sizing: border-box; padding: 2.813rem; align-items: center;}
#footer .left {width: 40%;}
#footer .right {width: 60%; text-align: right;}
#footer .right p {margin:  0; }
#footer .left a {width: 90%; max-width: 32.813rem; display: block; border: 0;}
#footer .left svg {display: block;}
#footer .right a {font-weight: 400;}

#hero-int {height: 32rem; margin-bottom: 5.625rem;}
#hero-int .txt h1 {animation: heroword 3s forwards; margin-left: -100%; opacity: 0; animation-delay: 1s;}
#hero-int .btm-line {position: absolute; width: 100%; height: 1px; bottom: -0.625rem; left: 0; background: var(--purple);}

.con-container {margin: 0 auto; width: 90%; max-width: 56.25rem;}
.int-img {
	width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
	margin-top: 3.438rem;
	margin-bottom: 3.438rem;
}
.int-img .container {margin: 0 auto; width: 95%; max-width: 81.25rem; height: 31.25rem;}
.int-img .border {position: absolute; top: 1.25rem; left: 1.25rem; width: calc(100% - 2.625rem); height: calc(100% - 2.625rem); border-width: 1px; border-style: solid; border-color: var(--cream); z-index: 4;}
.int-img .img-caption {position: absolute; z-index: 5; bottom: 2.625rem; right: 2.625rem; text-align: right; width: auto; color: var(--cream); font-size: 1.125rem; line-height: 1.2; font-family: "Maitree", serif;}
.int-img .gradient {position: absolute; z-index: 2; background: var(--green); mix-blend-mode: multiply; width: 100%; height: 100%; top: 0; left: 0;}
.int-img .quote-txt {z-index: 5; position: absolute; box-sizing: border-box; width: 100%; height: 100%; text-align: center; color: #fff;}
.int-img .pad {position: relative; top: 50%; transform: translateY(-50%); width: 80%; margin: 0 auto;}
.int-img p {margin-top: 0; font-size: 1.5rem;}
.int-img h4 {margin: 0;}

/* End Int */
@keyframes heroword {
	0% {
		opacity: 0;
		margin-left: -100%;
	}
	100% {
		opacity: 1;
		margin-left: 0;
    }
}

/* Responsive */

@media only screen and (min-width: 75rem) and (max-width: 93.75rem) {
	#navigation .left {width: 14rem;}
	#navigation .right {width: calc(100% - 15.125rem);}
	#navigation .nav-top li {margin: 0 .25rem;}
	#navigation .nav-top li a {font-size: 1.05rem;}
	#hero .txt, #hero-int .txt {left: 5%;}
	#hero {min-height: 35rem;}
	#hero h1, #hero-int h1 {font-size: 5rem;}
	#split h2, #home-book h2 {font-size: 3.75rem;}
	#split h2 span, #home-book h2 span {font-size: 2.75rem;}
	#home-teaser .btm-top .pad {padding: 1.5rem;}
	#home-teaser .item-two {width: 45%;}
	#home-teaser .item-three {width: 34%;}
	#cta .pad {padding: 5rem 0;}
	.footer-hide.second {display: none;}
	.footer-break.second {display: block;}
}

@media only screen and (max-width: 74.9375rem) {

}

@media only screen and (min-width: 60rem) and (max-width: 74.9375rem) {
	#navigation {width: 100%; top: 0; padding: 1rem; box-sizing: border-box;}
	#navigation .container {width: 100%; height: 5rem;}
	#navigation .left {width: 12rem; padding-left: 1rem;}
	#navigation .right {width: calc(100% - 13rem);}
	#navigation .nav-top li {margin: 0;}
	#navigation .nav-top li:last-child {padding: .25rem;}
	#navigation .nav-top li:last-child a {padding: 0 .5rem;}
	#navigation .nav-top li a {font-size: .9rem;}
	#navigation .nav-top li:last-child {padding: .25rem .25rem .35rem .25rem;}
	#hero .txt, #hero-int .txt {left: 5%;}
	#hero h1, #hero-int h1 {font-size: 5rem;}
	#hero {min-height: 30rem; height: 90vh;}
	#hero .circle {width: 8rem; height: 8rem; bottom: -4rem; padding: .4rem;}
	#hero .icon {width: 4rem;}
	#split {padding: 6rem 0 3.5rem;}
	#home-book {padding: 3.5rem 0;}
	#split h2, #home-book h2 {font-size: 3rem;}
	#split h2 span, #home-book h2 span {font-size: 2.25rem;}
	#home-teaser .teaser-top {height: 20rem;}
	#home-teaser .item-one {width: 0; display: none;}
	#home-teaser .item-two {width: 60%;}
	#home-teaser .item-three {width: 40%;}
	#cta .pad {padding: 3.5rem 0;}
	#footer .container {padding: 1.25rem; font-size: 1rem;}
	#hero-int {height: 27rem; margin-bottom: 4.5rem;}
	body p, h2, h3, h4, main ul, main ol {margin: 3rem 0;}
	.int-img {margin-top: 3rem; margin-bottom: 3rem;}
	.int-img .container {height: 25rem;}
	.footer-hide.second {display: none;}
	.footer-break.second {display: block;}
}

@media only screen and (min-width: 48rem) and (max-width: 59.9375rem) {
	#hero .txt {padding: 6rem 1rem;}
	#hero-int {margin-bottom: 4rem;}
	#hero-int .txt {padding: 10rem 1rem 4rem;}
	#hero h1 {font-size: 5rem;}
	#hero-int h1 {font-size: 4rem;}
	#hero .circle {height: 7rem; width: 7rem; bottom: -3.75rem; padding: .35rem;}
	#hero .icon {width: 3rem;}
	#split {padding: 4.5rem 0 3rem;}
	#home-book {padding: 3rem 0;}
	#split h2 span, #home-book h2 span {font-size: 2rem;}
	#split h2, #home-book h2 {font-size: 2.25rem;}
	#home-teaser .teaser-top, #cta .left {height: 20rem;}
	#home-teaser .item-one {width: 0; display: none;}
	#home-teaser .item-two {width: 60%; font-size: 1.15rem;}
	#home-teaser .item-three {width: 40%;}
	#home-teaser .btm-btm {display: none;}
	#home-teaser .btm-top .pad {padding: 1.75rem;}
	#home-teaser .btm-top h2 {font-size: 2rem;}
	#home-teaser p, #cta p {margin-bottom: 1.5rem;}
	#cta .pad {padding: 3rem 0;}
	#footer .left a {width: 70%; margin-bottom: 3rem;}
	body p, h2, h3, h4, main ul, main ol {margin: 3rem 0;}
	.int-img {margin-top: 3rem; margin-bottom: 3rem;}
	.int-img .container {height: 20rem;}
	.int-img p {margin-bottom: 2rem; font-size: 1.25rem;}
	.int-img h4 {font-size: 2.25rem;}
	h2 {font-size: 3rem;}
	body h3 {font-size: 2rem;}
}

@media only screen and (max-width: 59.9375rem) {
	.mobile-only {display: block;}
	#navigation .nav-top-holder {display: none;}
	#navigation {top: 0; padding: 1rem; box-sizing: border-box;}
	#navigation .container {width: 100%; height: 5rem; display: block;}
	#navigation .left {width: 100%; text-align: center; height: 100%}
	#navigation .right {display: none;}
	#navigation .logo {margin: 0 auto; display: block; width: 15rem; top: 50%; transform: translateY(-50%); position: relative;}
	#hero, #hero-int {height: auto; min-height: inherit;}
	#hero .txt, #hero-int .txt {position: relative; top: auto; transform: none; left: auto; text-align: center;}
	#hero .gradient, #hero-int .gradient {background: rgba(230, 225, 213,.8);}
	.readon {border-width: 5px;}
	.readon span {padding: .75rem;}
	#cta .container {flex-direction: column;}
	#cta .left, #cta .right {width: 100%;}
	#cta .right {background: var(--cream);}
	#cta .btn-holder {text-align: left;}
	#footer .container {flex-direction: column;}
	#footer .left, #footer .right {width: 100%; text-align: center;}
	#footer .left a {margin-left: auto; margin-right: auto;}
	#footer .right {line-height: 2;}
	.footer-hide {display: none;}
	.footer-break {display: block;}
}

@media only screen and (max-width: 47.9375rem) {
	#hero .txt {padding: 8rem 1rem 5rem;}
	#hero-int .txt {padding: 12rem 1rem 2.5rem;}
	#hero h1, #hero-int h1 {font-size: 3rem;}
	#hero-int {margin-bottom: 3.5rem;}
	#hero .circle {height: 7rem; width: 7rem; bottom: -3.75rem; padding: .35rem;}
	#hero .icon {width: 3rem;}
	#split {padding: 5rem 0 2.5rem;}
	#home-book {padding: 2.5rem 0;}
	#split h2 span, #home-book h2 span {font-size: 1.5rem;}
	#split h2, #home-book h2 {font-size: 2.25rem;}
	#home-teaser .teaser-top, #cta .left {height: 10rem;}
	#home-teaser .item-one, #home-teaser .item-three {width: 0; display: none;}
	#home-teaser .item-two {width: 100%;}
	#home-teaser .btm-btm {height: 10rem;}
	#home-teaser .btm-top .pad {padding: 2rem 0; width: 90%; box-sizing: border-box; margin: 0 auto;}
	#home-teaser .btm-top .pad .btn-holder {text-align: left;}
	#home-teaser .btm-top h2, #cta h2 {font-size: 2rem;}
	#home-teaser p, #cta p {margin-bottom: 1.5rem;}
	#cta {padding: 1.25rem 0;}
	#cta .pad {padding: 2rem 0; box-sizing: border-box;}
	#footer .container {padding: 2rem .5rem;}
	#footer .left a {width: 80%; margin-bottom: 2rem;}
	#footer {padding: 0; font-size: 1rem;}
	
	.footer-small {line-height: 1.5; font-size: .9rem;}
	body p, h2, h3, h4, main ul, main ol {margin: 2.5rem 0;}
	main ul {column-count: 1;}
	.int-img {margin-top: 2.5rem; margin-bottom: 2.5rem;}
	.int-img .container {height: auto;}
	h2 {font-size: 2.5rem;}
	body h3 {font-size: 1.75rem;}
	.int-img .img-caption {text-align: center; right: 0; left: 0; margin: 0 auto; width: 80%; bottom: 1rem;}
	.int-img .border {display: none;}
	.int-img .quote-txt {position: relative;}
	.int-img .pad {padding: 3rem 0; top: auto; transform: none; width: 90%;}
	.int-img p {font-size: 1.25rem; margin-bottom: 2.25rem;}
	.int-img h4 {font-size: 2rem;}
	body {font-size: 1.15rem;}
}

@media only screen and (min-width: 30.0625rem) and (max-width: 47.9375rem) {

}

@media only screen and (max-width: 30rem) {

}

@media only screen and (max-width: 23.4375rem) {

}