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


@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Imbue:opsz,wght@10..100,100..900&family=Oswald:wght@200..700&display=swap');

@font-face {
        font-family: 'Items'; 
        src: url("../fonts/Items-Regular.woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
}

@font-face {
        font-family: 'ABC Diatype'; 
        src: url("../fonts/ABCDiatype-Regular.woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }

@font-face {
        font-family: 'ABC Diatype Mono'; 
        src: url("../fonts/abc-diatype-mono-regular.woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }

table.bloatTable{ width:100%;}
table.bloatTable td.tdLeft, table.bloatTable td.tdRight{ width:50%;}
table.bloatTable td.tdLeft{}
table.bloatTable td.tdRight{background-color:#22bf8e; color:#fff;}
table.bloatTable td.tdLeft > span, table.bloatTable td.tdRight > span{ width: calc(100% - 30px); display: block; margin: 0 15px; font-size:18px; padding: 15px 0px; line-height: 22px;}
table.bloatTable td.tdLeft > span{border-bottom:1px solid #e9ebec;}
table.bloatTable td.tdRight > span{border-bottom:1px solid #7fccb6;}

table.bloatTable td.tdLeft > span:after, table.bloatTable td.tdRight > span:after{display: block; height: 0px; clear: both; width: 100%; content: " ";}

table.bloatTable tr:last-child td.tdLeft > span, 
table.bloatTable tr:last-child td.tdRight > span{ border-bottom:none;}

table.bloatTable td.tdLeft > span > span, table.bloatTable td.tdRight > span > span{ float: left; width: calc(100% - 40px)}

table.bloatTable img{float: left; margin-right:10px;}




#special{background-color:#b31818; height: 50px; line-height: 50px;}
#logoBar{line-height: 85px; font-family: "Oswald", sans-serif; font-weight: 400; text-align: center;}
#logoBar .cbWrap{padding-top:10px;}




#hero{ min-height: 1015px; background-image: url("../images/heroDesktop.jpg"); background-position: top center; background-repeat: no-repeat;}

#heroChecks{font-size:27px; margin-top:20px; list-style: none; padding: 0px; line-height: 47px;}
#heroChecks li{ background-image: url("../images/check-red.png"); background-repeat: no-repeat; padding-left: 35px; background-position: 0px 10px;}

p{font-size:20px;}

table.table th, table.table td{border-width:2px !important;}
.table tbody tr th span{font-weight:normal;}
.table tbody tr td{text-align:center;}
.table{border-color:#fff;}


.table-active td, .table-active th, th.table-active{background-color:rgba(227, 232, 255, 1); box-shadow: none;}

.chartLeft, .chartRight{display:inline-block; line-height: 40px;}
.chartLeft{margin-right:5px;}



.border-info{border-color:#ca7474 !important;}

footer{border-top:1px solid #e7e7e7; font-size:12px; padding: 30px 0; background-color:#f7f7f7;}
footer, footer a{color:#000; text-decoration: none;}
footer a{ margin: 0 10px;}
footer a:first-child{ margin-left: 0px;}
footer a:last-child{ margin-right: 0px;}

.chartTHLeft, .chartTHRight{float: left !important; position: relative; display: block;}
.chartTHLeft{margin-right:15px; width: 65px;}
.chartTHRight{line-height: 30px; width: calc(100% - 80px)}

@media only screen and (max-width: 767.98px){
    .chartTHLeft{display:none;}
    .chartTHRight{line-height:inherit; width: 100%;}

}



.cbWrap{width:auto; margin: auto; text-align: center;}
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.claimButton{ width:96%; max-width: 420px;display: inline-block; background: linear-gradient(to bottom,  rgba(90,194,59,1) 0%,rgba(61,164,31,1) 100%); padding-left: 2%; padding-right:2%; padding-top:10px; padding-bottom:10px; margin: auto; position: relative; border: 2px solid #58C039;}
.claimButton span:nth-child(1){line-height: 24px; padding-top:8px; padding-bottom:8px; display:block; float: left; position: relative; width: calc(98% - 40px); text-align: center; color:#fff; font-weight: bold; font-family: "Oswald", sans-serif; font-size:24px;}
.claimButton svg{line-height: 30px; width:30px; margin-left:2%; display: block; float: left; position: relative;  padding: 5px 0}


.plantsDesktop{display:block;}
.plantsMobile{display:none;}


@media only screen and (max-width: 991.98px){
    .plantsDesktop{display:none;}
    .plantsMobile{display:block;}
}



/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 250px;
  height: 250px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  display:inline-block;
}


.flip-card.flipcols{
    width:100%;
    padding-top:100%;
    height: inherit;
}
.flip-card.flipcols > .flip-card-inner{
    position: absolute;
    top: 0px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  color: black;
}
.flip-card-front > div, .flip-card-back > div{ width:100%; height: 100%; display:inline-flex; text-align: center; background-size: cover; background-position: 50% 50%; border-radius:20%;}

.flip-card-front > div > div{display:block; width: 100%; text-align: center; color:#fff;}
.flip-card-front > div > div h2{font-size:30px; line-height: 35px; text-shadow: 0px 0px 5px rgba(0,0,0,0.5); }
.flip-card-front > div > div h2, .flip-card-front > div > div small{color:#fff; margin-bottom: 0px; padding-bottom: 0px; padding-top: 0px; margin-top:0px; font-style: normal;}
.flip-card-front > div > div small:last-child{ border: 1px solid #fff; padding: 1px 10px 3px 10px; border-radius: 8px; background-color:rgba(255,255,255,0.3);}
.flip-card small{text-shadow: 0px 0px 5px rgba(0,0,0,1);}

/* Style the back side */
.flip-card-back {
  color: white;
  transform: rotateY(180deg);
}

.flip-card p{font-size:16px; line-height: inherit;}
.flip-card-back > div{  background-color: dodgerblue;
}
.flip-card-front > div > div, .flip-card-back > div > div{ display: block; margin: auto; position: relative; width:200px;}
.flip-card.flipcols .flip-card-front > div > div, .flip-card.flipcols .flip-card-back > div > div{  width:80%;}

.flip-card-back > div > div h2{font-size:30px; line-height: 35px;}

.flip-card-col{padding:1em;}

@media only screen and (max-width: 767.98px){
    .flip-card-col{max-width:80%;}
}





/*-----------------------
		Pulse
------------------------*/
.pulse {
	animation-name: pulse;
	-webkit-animation-name: pulse;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	}
@keyframes pulse {
0% {transform: scale(0.9);}
50% {transform: scale(1);}
100% {transform: scale(0.9);}
}

@-webkit-keyframes pulse {
0% {-webkit-transform: scale(0.95);}
50% {-webkit-transform: scale(1);}
100% {-webkit-transform: scale(0.95);}
}	






#headerTestimonial{ padding-top:100px;}
#heroTitle{font-size:170px; line-height: 170px;}

@media only screen and (max-width: 1199.98px){
    #headerTestimonial{padding-top:50px;}
}
@media only screen and (max-width: 991.98px){
    #headerTestimonial{padding-top:0px;}
}
@media only screen and (max-width: 767.98px){
    #headerTestimonial{padding-top:0px;}
    #hero{ background-size:cover}
    #heroTitle{font-size:120px; line-height: 100px !important;}
}
@media only screen and (max-width: 575.98px){
    #headerTestimonial{padding-top:30px; padding-bottom: 30px; margin-top:20px; background-color:#fff;}
    #hero{ background-size:cover; background-image: url("../images/heroMobile.jpg"); }
    #heroTitle{font-size:100px; line-height: 80px !important;}
    #heroLeft{max-width:100%; width:100%; min-width: 100%;}
    
    #heroChecks li{max-width:70%; line-height: 30px; padding-top:5px; font-size:20px;}
    #heroSubHead{width:80%;}
}