:root {
  --green: #304425;
  --text: #060809;
  --tan: #e1e0d8;
	--ow: #f7f4f1;
}

#header{width: 100%; margin: 0; height: 25px; position: relative; z-index: 3; padding: 0; clear: both;text-align: center;}
#header img.logo {display:none;}
.pricehero {background: url(images/cilla2.jpg) no-repeat center left; -webkit-transform: translateZ(0); position:relative;  background-attachment: scroll;  -webkit-background-size: cover;  -moz-background-size: cover;	-o-background-size: cover;  background-size: cover;height: 500px;}
.elhero {background: url(images/elevate.jpg) no-repeat center left;-webkit-transform: translateZ(0); position:relative;  background-attachment: scroll;  -webkit-background-size: cover;  -moz-background-size: cover;	-o-background-size: cover;  background-size: cover;height: 500px;}
img.mhero {display:none;}
.pherotxt {width: 100%;height: 100%; padding: 40px;
}
.pherotxt p {font-size: 24px; line-height: 32px;color: var(--green);}
.elhero .pherotxt p {max-width: 400px;}
.pherotxt img {min-width: 250px;height:auto;display:block;}
h1, h3 {color: var(--green);letter-spacing: -1px; font-size: 62px; line-height: 62px;font-family: plantin-mt-pro; font-weight: 400; margin: 50px 0 25px 0; padding: 0;}
h3 {letter-spacing: 1px;font-size: 32px; line-height: 32px; margin: 10px 0 5px 0; text-transform: uppercase;}
h2, .elbody p.elp {color: var(--green); text-transform: uppercase; letter-spacing: 2px; font-size: 28px; line-height: 32px; font-family: futura-pt-web; font-weight: 700;}
.pbody {padding: 40px 0 0 0; width: 90%; margin: 0 auto;position: relative;}
.elbody p.elp {text-transform: none; font-family: futura-pt-web-medium;width: 50%; float: left;font-weight: 400; letter-spacing: 0;font-size: 22px; line-height: 32px;background: var(--ow);padding: 40px;border-radius: 5px;}
.line {background: url(images/line.png) repeat-x center center; width: 90%; max-width: 400px; margin: 25px auto;text-align: center;}
.line img {margin: 0 auto; width: 35px; height: auto;display: inline-block;padding: 0 5px;background: #fff;}
.smline {width: 90%; border-top: 1px solid var(--tan); margin: 25px auto; max-width: 80px;}
.prices {margin-top: 20px;display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));gap: 20px;}
.pel {grid-template-columns: repeat(1, minmax(0, 1fr));width: 45%; float: right;}
.pcol {position: relative;border: 1px solid var(--tan); border-radius: 7px; padding: 30px 20px 80px 20px;text-align: center;}
.pcolg {border-color: var(--green);}
.flag {position: absolute; padding: 5px 10px; background: var(--green); color: #fff; text-transform: uppercase; top: -15px; left: 50%; width: 150px; margin-left: -75px;border-radius: 5px;}
.pcol a.cta:link, .pcol a.cta:visited, .callout a.cta:link, .callout a.cta:visited {position: absolute; bottom: 20px; left: 20px;width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px);width: calc(100% - 40px);display:block;border-radius: 5px; background: var(--green);border:1px solid var(--green); color: #fff; font-size: 18px; line-height: 18px;margin-top: 20px;}
.pcol a.cta:hover, .pcol a.cta:active, .callout a.cta:hover, .callout a.cta:active {background: #fff; color: var(--green);}
.callout a.cta:link, .callout a.cta:visited {width: auto;position: relative; bottom: auto; left: auto;display: inline-block;float:right;margin-top:0;vertical-align: middle;margin-top:15px;}
.flexoption {text-align: center;}
.pflex a.cta:link, .pflex a.cta:visited {font-size: 14px;}
.pflex p span {font-size: 13px;}
.price {font-family: plantin-mt-pro; font-weight: 400;font-size: 42px; line-height: 42px;}
.price span {font-family: futura-pt-web-medium; font-size: 18px;}
.pcol p {margin: 5px 0;}
.pchecks {border-top: 1px solid var(--tan);margin-top: 20px; padding-top: 15px;text-align: left;}
.pchecks ul {list-style: none; margin: 0; padding: 0;}
.pchecks ul li, .pchecks ul li {margin: 5px 0 5px 20px;vertical-align: top;}
.pchecks ul li::before {
  content: "";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 25px; /* Also needed for space (tweak if needed) */
	height: 20px;
	background: url(images/check.png) no-repeat left bottom;
  margin-left: -1em; /* Also needed for space (tweak if needed) */
	}
.callout {margin: 40px 0; padding: 15px 20px;display:block; width: 100%; background: var(--ow);text-align: center;}
.callout img {display:inline-block; width: auto; height: 100%;}
.cot {text-align: left; display: inline-block; padding: 0 25px;}
.callout h3 {margin: 0; text-transform: none;letter-spacing: 0;}
.callout p {margin: 5px 0;}
img.coi {float: right; margin-right: 30px;}
.pgreen {width: 100%; background: var(--green); color: #fff; text-align: center;padding: 10px;}
.pgreen p {text-transform: uppercase; margin: 0;letter-spacing: 2px;}
.pgreen img {width: auto; height: auto; display: inline-block;vertical-align: top; padding-left: 10px;}
.elbtm {background: url(images/elbtm.jpg) no-repeat bottom left;-webkit-transform: translateZ(0); position:relative;  background-attachment: scroll;  -webkit-background-size: cover;  -moz-background-size: cover;	-o-background-size: cover;  background-size: cover;min-height: 500px;}
.elbtm img {display:none;}
.elbtmtxt {color: #fff; max-width: 50%; padding: 60px 0 60px 5%;font-size: 22px; line-height: 32px;}
#footer {margin-top: 0;}
@media only screen and (max-width: 1100px) {
	.elbtm {background: url(images/elbtm.jpg) no-repeat bottom right;}
}
@media only screen and (max-width: 1000px) {
	.pricehero, .elhero, .elbtm {background: none;height: auto;}
	.elbtm {min-height: 100px;}
	img.mhero {display:block;width:100%;height:auto;}
	.pherotxt {text-align: center;width: 100%;height: auto; padding: 20px;}
	.elbody {padding-top: 0;}
	.elbody p.elp, .prices.pel {width: 100%; float: none;}
	.elhero .pherotxt p {max-width: 100%;}
	.elbtmtxt {width: 100%; max-width: 100%; padding: 40px 5%; text-align: center; background: var(--ow); color: var(--green);}
.pherotxt p {font-size: 18px; line-height: 24px;}
.pherotxt img {min-width: 250px;height:auto;display:block;margin: 0 auto;}
h1, h3 {color: var(--green);letter-spacing: -1px; font-size: 42px; line-height: 42px;font-family: plantin-mt-pro; font-weight: 400; margin: 30px 0 15px 0; padding: 0;}
	h1 br {display:none;}
h3 {letter-spacing: 1px;font-size: 32px; line-height: 32px; margin: 10px 0 5px 0; text-transform: uppercase;}

}
@media only screen and (max-width: 900px) {
	.callout a.cta:link, .callout a.cta:visited, img.coi {float: none; display:block; clear: both;}
	img.coi {margin: 0 auto;}
}
@media only screen and (max-width: 800px) {
	.prices {margin-top: 20px;grid-template-columns: repeat(1, minmax(0, 1fr));gap: 20px;}
}

@media only screen and (max-width: 600px) { 
	.cot {width: 100%; text-align: center; padding: 0;}
}