/* Combined from prod-style.css and local.css; comments stripped; exact duplicate rules deduped. */

body{
margin:0;
    padding:0;
    font-size:18px;
    line-height:1.6;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
    color:#333
}

html{
-webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%
}

*{
-webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

:before,:after{
-webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

#custom-grad{
font-size: 20px;
	font-weight: 700;
	padding: 15px;
	color: #FFF;
	background: linear-gradient(0deg, rgba(44, 110, 0, 1) 0%, rgba(0, 212, 46, 1) 79%);
	text-decoration: none;
	border: none;
}

#custom-grad:hover{
font-size: 20px;
	font-weight: 700;
	color: #FFF;
	background: #2c6e00;
background: #235700;
background: linear-gradient(0deg, rgba(35, 87, 0, 1) 0%, rgba(3, 171, 40, 1) 79%);
	border: none;
}









a:hover,a:focus{
text-decoration:underline
}

#footer{
padding:60px 60px 60px;
    font-size:13px;
    word-wrap:break-word;
    background:#2e3138;
    color:#abb0ba;
	margin-top: 15px;
}

#footer p{
font-size:13px
}

#footer p:last-child{
margin:0
}

#footer p,#footer a,#footer a:hover,#footer a:visited{
color:#abb0ba;
    font-weight:400
}

#footer a:before{
content:'\00B7';
    padding:0 5px
}

a,a:visited{
color:#167ac6;
    cursor:pointer;
    text-decoration:none;
    font-weight:700;
    outline:0
}

#right-side::-webkit-scrollbar{
display: none;
}

#right-side{
-ms-overflow-style: none;  
  scrollbar-width: none;
}

.tags{
display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 10px 0;
}

.tag{
border-radius: 999px;
	background: #FF7A7A;
	padding: 10px 15px;
	font-size: 0.9rem;
	font-weight: 400;
	box-shadow: 3px 2px 2px #DBDBDB;
}

.container{
margin:auto;
	padding: 5px 20px;
	max-width: 1200px;
	min-width: 300px;
}

.title{
font-weight: 700;
}

.intro-txt{
padding: 20px 5px 20px 20px;
	align-items: center;
}

.jump-to{
border-radius: 10px;
    overflow: hidden;
	padding: 20px;
    margin:20px 1px 15px 1px;
	border: #DBDBDB;
	border-width: 10px;
    background: linear-gradient(300deg, #FDFDFD 0%, #FFFFFF 40%, #F7F7F7 100%);
    box-shadow: 5px 3px 3px #DBDBDB;
}

.jump-to h3,
.jump-to h4{
font-weight: 700;
}

.main-content{
border-radius: 10px;
    overflow: hidden;
	padding: 20px;
    margin:20px 1px 15px 1px;
	border: #DBDBDB;
	border-width: 10px;
    background: linear-gradient(45deg, #FDFDFD 0%, #FFFFFF 40%, #F7F7F7 100%);
    box-shadow: 5px 3px 3px #DBDBDB;
}

.main-content-alt{
border-radius: 10px;
    overflow: hidden;
	padding: 20px;
    margin:20px 1px 15px 1px;
	border: #DBDBDB;
	border-width: 10px;
    background: linear-gradient(225deg, #FDFDFD 0%, #FFFFFF 40%, #F7F7F7 100%);
    box-shadow: 5px 3px 3px #DBDBDB;
}

.main-content h3,
.main-content h4{
font-weight: 700;
}

.main-content-alt h3,
.main-content-alt h4{
font-weight: 700;
}

.intro-img{
display: flex;
	padding: 20px 5px 20px 20px;
	margin: auto;
	align-items: center;
	justify-content: center;
}



.italic-center{
font-style:italic;
    text-align:center;
    padding:2px 14px;
    line-height:1.45em;
    font-weight:400!important
}

#intro{
display: flex;
	align-items: center;
}

.hero{
border-radius: 10px;
    overflow: hidden;
	padding: 10px;
    margin:20px 1px 15px 1px;
    background: linear-gradient(135deg, #f4efff 0%, #f0f7ff 40%, #fff 100%);
    box-shadow: 5px 3px 3px #DBDBDB;
}

.proslist{
list-style: none;
  margin: 0;
  padding: 0;
}

.proslist li{
position: relative;
  padding-left: 2rem;      
  margin: .4rem 0;
}

.proslist li::before{
content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  text-align: center;
  font-weight: 900;
  color: #fff;
  background: #22c55e;     
  border-radius: 50%;
  box-shadow: 0 0 0 2px #22c55e;
}

.my-div{
background-image: url('circle.svg');
  background-size: contain; 
  background-repeat: no-repeat; 
  background-position: center;
}

#how-to-row{
background-image: url('how-to.svg');
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: right; 
	align-self: center;
}

.how-to{
display: flex;
	flex-direction: row;
		align-items: flex-start;
}

.how-to-headline{
font-size: 1.4rem; font-weight: 700
}

.benefits{
border: 3px solid #C4C4C4;
  border-radius: 5px;
	font-weight: 600;
}

.ben-dark{
background: #C4C4C4;
}





.conslist{
list-style: none;
  margin: 0;
  padding: 0;
}

.conslist li{
position: relative;
  padding-left: 2rem;      
  margin: .4rem 0;
}

.conslist li::before{
content: "-";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1rem;
  text-align: center;
  font-weight: 600;
  color: #fff;
  background: #C42525;     
  border-radius: 50%;
  box-shadow: 0 0 0 2px #C42525;
}

.pros, .cons{
padding: 10px;
}

.pros-row{
display: block;            
  align-items: center;
  gap: 1rem;
}

.hero-row{
display: flex;
		flex-direction: row;
}





.pros-label{
font-weight: 700;
  white-space: nowrap;
  
  color: #22c55e;
  font-size: 1.05rem;
	max-width: 34px;
}

.cons-label{
font-weight: 700;
  white-space: nowrap;
  
  color: #C42525;
  font-size: 1.05rem;
	max-width: 34px;
}

#custom-grad-local{
font-size: 20px;
	font-weight: 700;
	padding: 15px;
	color: #FFF;
	background: linear-gradient(0deg, rgba(44, 110, 0, 1) 0%, rgba(0, 212, 46, 1) 79%);
	text-decoration: none;
	border: none;
}

#custom-grad-local:hover{
font-size: 20px;
	font-weight: 700;
	color: #FFF;
	background: #2c6e00;
background: #235700;
background: linear-gradient(0deg, rgba(35, 87, 0, 1) 0%, rgba(3, 171, 40, 1) 79%);
	border: none;
}

.usage{
border-radius: 15px;
	
	padding: 10px 10px 10px 15px;
	margin-bottom: 10px;
}

h4{
margin: 0.5rem 0;
}

.donut{
--value:.75;                 
  --size:150px;
  --thickness:12px;
  --gap:16deg;
  --bar:#7bd530;
  --track:#e6e6e6;
  --inside:#fff;               
margin: auto;
  width:var(--size);
  aspect-ratio:1;
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;

  
  background:
    conic-gradient(from calc(-90deg - var(--gap)/2),
      var(--bar) 0 calc((360deg - var(--gap)) * var(--value)),
      transparent 0 360deg),
    conic-gradient(from calc(-90deg - var(--gap)/2),
      var(--track) 0 calc(360deg - var(--gap)),
      transparent 0 360deg);
}

.donut::before{
content:"";
  position:absolute;
  inset:var(--thickness);
  background:var(--inside);
  border-radius:50%;
  z-index:0;
}

.donut__label{
position:relative;  
  z-index:1;
  text-align:center;
  line-height:1.1;
}

.donut__votes{
font-size:.9rem; opacity:.65;
}

.donut__score{
font-size:1.2rem; font-weight:600;
}





#intro-local{
display: flex;
	align-items: center;
}

.intro-img-local{
display: flex;
	padding: 15px;
	margin: auto;
	align-items: center;
	justify-content: center;
}

.hero-local{
border-radius: 10px;
	
    overflow: hidden;
	padding: 10px;
    margin:10px 1px 15px 1px;
   
    box-shadow: 2px 2px 4px #DFDFDF;
}







.title-local{
font-weight: 800;
}

.intro-txt-local{
padding: 20px 5px 20px 20px;
	align-items: center;
}

.jump-to-local{
border-radius: 10px;
    overflow: hidden;
	padding: 20px;
    margin: 0px 1px 15px 1px;
	border: #DBDBDB;
	border-width: 10px;
    background: linear-gradient(300deg, #FDFDFD 0%, #FFFFFF 40%, #F7F7F7 100%);
    box-shadow: 2px 2px 4px #DFDFDF;
}

body{
background: linear-gradient(135deg, #F2F4FF 0%, #DCDEE2 40%, #E4EFFF 100%);

	overflow-x: hidden;
}

.jump-to-local ul a{
font-weight: 500;
}

.jump-to-local h3,
.jump-to-local h4{
font-weight: 700;
}

.main-body-container{
border-radius: 10px;
    overflow: hidden;
	padding: 20px;
	background: #fff;
	box-shadow: 2px 2px 4px #DFDFDF;
	margin-bottom: 15px;
}

.how-to-container{
border-radius: 10px;
    overflow: hidden;
	padding: 20px;
	
	box-shadow: 2px 2px 4px #DFDFDF;
	margin-bottom: 15px;
}

.main-body-container#cost{
background-color: transparent;
	box-shadow: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.main-body-container#cost row,
.main-body-container#cost row col 
.main-body-container#cost row col div.main-content-local{
padding: 0 !important;
	margin: 0 !important;
}

.summary-local{
border-radius: 10px;
    overflow: hidden;
	padding: 20px;
    margin:0px 1px 15px 1px;
	border: #DBDBDB;
	border-width: 10px;
    background: linear-gradient(300deg, #FDFDFD 0%, #FFFFFF 40%, #F7F7F7 100%);
    box-shadow: 2px 2px 4px #DFDFDF;
}





.main-content-local h3, .main-content-local h4, .main-content-alt-local h3, .main-content-alt-local h4{
font-weight: 700;
}

.main-content-local h3{
font-weight: 700;
}

#footer-local{
padding:60px 60px 60px;
    font-size:16px;
    word-wrap:break-word;
    background:#2e3138;
    color:#abb0ba;
	margin-top: 15px;
}

#footer-local p{
font-size:16px
}

#footer-local p:last-child{
margin:0
}

#footer-local p,#footer-local a,#footer-local a:hover,#footer-local a:visited{
color:#abb0ba;
    font-weight:400
}

#footer-local a:before{
content:'\00B7';
    padding:0 5px
}

#last-row{
border-bottom: none;
}

#right-side-local::-webkit-scrollbar{
display: none;
}

#right-side-local{
-ms-overflow-style: none;  
  scrollbar-width: none;
}

.caption-over{
text-align: center;
	margin: 0.5rem 1rem;
}







#probz{
color: #fff;
	background: linear-gradient(90deg, rgba(5,30,81,1.00) 0%, rgba(21,21,21,1.00) 50%);
	border-radius: 7px;
	padding: 10px;
}

.bottle-div{
display: flex;
  	flex-direction: column;
	border-radius: 10px;
	margin: 0px 0px 5px 0px;
	padding: 0px 0px 5px 0px !important;
	background: #fff;
}

.bottle{
padding: 20px 10px;
  max-height: 100%;
  max-width: 100%;
  width: auto;    
  height: auto;
  object-fit: contain;  
  flex: 0 0 auto;
}

.bottle-col{
transition: transform 180ms cubic-bezier(.2,.6,.2,1), box-shadow 180ms ease;
	border-radius: 10px;
  transform-origin: center center;
  will-change: transform;
  position: relative;          
  z-index: 0;
	background: transparent;
}

.bottle-col:hover{
transform: scale(1.03);      
  z-index: 3;                  
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
}

.row.row-cols-1.row-cols-md-3.g-2{
overflow: visible;
}

.col{
overflow: visible;
}



.thumb{
height: 225px;
}

.price{
flex: 1;                 
  display: flex;
  flex-direction: column;
  justify-content: center; 
	align-items: center;
}

.reg-price{
font-size: 0.75rem;
	line-height: 1rem;
	margin: 0;
}

.old-price{
font-size: 2.5rem;
	line-height: 2.75rem;
	font-weight: 500;
}

.new-price{
font-size: 2.5rem;
	line-height: 2.75rem;
	font-weight: 700;
}





.buy-button{
border-radius: 5px;
	background: #000;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	box-shadow: 5px 5px 10px #C5C5C5;
	color: #fff;
	margin: 5px 10px 10px 10px;
	padding-bottom: 5px;
}

.summary-order{
justify-content: center;
	align-self: center;
	margin: auto;
	border: #000000 solid;
}

.summary-order p{
margin: 10px;
}

.summary-button{
border-radius: 5px;
	background: #7bd530;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	box-shadow: 5px 5px 10px #C5C5C5;
	color: #000;
	margin: 5px 10px 10px 10px;
	padding: 5px 10px;
}

.object-contain{
object-fit: contain;
	max-width: 90%;
}

.old-price:before{
border-radius: 15px;
    border-top: 4px solid #dc3545;
    bottom: .9rem;
    content: "";
    position: absolute!important;
    transform: rotate(-15deg);
    width: 100%;
}

/* --- Media Queries --- */

@media (min-width: 1400px){
.container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1069px;
	}
}

@media (max-width: 1199px){
blockquote p {
		font-size: 1.3vw;
	}
}

@media (max-width: 1100px){
blockquote p {
		font-size: 1.5vw;
	}
}

@media (min-width: 1200px){
blockquote p {
		font-size: 16px;
	}
}

@media (max-width:768px){
.intro-img {
		padding: 5px 5px 20px 5px;
	}
}

@media(max-width:700px){
.how-to {
		
	flex-direction: column;
		align-items: center;
		
	}
	.how-to-col {
	max-width: 420px;
	}
	
	.row-cols-custsm-1 {
		flex: 0 0 auto;
        width: 100%;
	}
}

@media(min-width:701px){
.row-cols-custmd-3 {
		flex: 0 0 auto;
        width: 33.33333333%;
	}
}

@media(max-width:700px){
.hero-row {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
	.hero-row #intro {
		
	}
	.intro-txt {
	padding: 10px;
	align-items: center; 
	
}
}

@media (max-width: 450px){
.pros-row{
    flex-direction: column; 
    align-items: flex-start;
  }
  .pros-row .donut{ margin-top: .75rem; }
}

@media (min-width: 600px){
.container-local {
		
		margin: auto;
		padding: 0px 5px;
		max-width: 1200px;
	}
}

@media (max-width: 599px){
.container-local {
		overflow-x: hidden;
		margin: auto;
		padding: 0;
		
	}
}

@media (max-width: 725px){
.tags-local {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 5px 0 5px 0;
}
.tag-local {
	border-radius: 999px;
	background: #FF7A7A;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: 400;
	box-shadow: 3px 2px 2px #DBDBDB;
	
}
}

@media (min-width: 500px){
.pros-flex {
		display: flex;
	}
}

@media (max-width: 575px){
.pros-flex {
		display: block;
	}
}

@media (max-width: 767px){
#jump {
	display: none;
}
	.summary-buy {
		max-width: 100%;
	}
	#sum-left {
		
	}
	.how-to-headline {
		
	}
}

@media (min-width: 768px){
#jump {
	padding-right: 5px;
}
#sum-left {
	padding-right: 0px;
}
	.summary-buy {
		max-width: 70%;
	}
}

@media (max-width: 500px){
div.caption-over {
		margin: 0rem;
		padding: 0;
	}
	button.carousel-control-prev,
	button.carousel-control-next {
		max-width: 15px;
	}
	div.carousel-item {
		padding: 0;
	}
	.main-body-container .row .col #testimonials {
		padding: 0;
	}
	.main-body-container .row .col div#testimonials div#carouselExampleDark div {
	padding: 0;
		margin: 0;
}
	.main-body-container .row .col div#testimonials div#carouselExampleDark div.carousel-indicators {
	padding-top: 10px;
	margin-bottom: 0px;
}
	p.quote {
		margin: 10px;
	}
	.caption-over {
	text-align: center;
	margin: 0.5rem 1rem;
}
	.carousel-indicators {
		
	}
}

@media (min-width: 501px){
button.carousel-control-prev,
	button.carousel-control-next {
		max-width: 30px;
	}
	div.carousel-item active {
		padding:0;
	}
	.main-body-container .row .col #testimonials {
		padding: 0;
	}
	.main-body-container .row .col div#testimonials div#carouselExampleDark div  {
		margin-top: 0px;
		margin-bottom: 0px;
		padding-top: 0.5rem;
		padding-bottom: 1rem;
	}
}

@media (min-width: 900px){
.caption-over {
		margin: 1rem;
	}	
	p.quote {
		margin: 1rem;
	}
}

@media (max-width:768px){
.bottle-col:hover { transform: none; box-shadow: none; }
	.bottle-col {
		max-width: 400px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		align-self: center;
	}
	#cost-col {
		flex-direction: column;
		align-items: center;
	}
}

@media (max-width: 1000px){
.old-price {
	font-size: 2rem;
	line-height: 2.25rem;
	font-weight: 500;
}
	.new-price {
	font-size: 2rem;
	line-height: 2.25rem;
	font-weight: 700;
}
}

@media (max-width: 450px){
.old-price {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 500;
}

.new-price {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;

}
}