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

/*
Author: S. Ali Raza
Version: 1.9
Details: Styles for Order Page
Last Update: 19-Sept-2020

- Cross Sell and Mobile page updates 04-08-2020
- Contact Form Styles (03-22-2020)
- Product Name on top, Radio Button Color Change (11-Sept-2020)
- Radio button fixed for iOS devices (19-Sept-2020)
*/


/* ======================
	General
======================== */

body { background-color: #f1f1f1; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 16px; color: #333; }

a {
	-webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

a, a:visited { color:#20a2ff; text-decoration:underline; border-bottom:none !important;}
a:hover { outline: none; color:#090; text-decoration:none; }

.red { color: #C00; }

.yellow { color: #FF3; }

.normal-font { font-family: 'Open Sans', Arial, Helvetica, sans-serif; }

.triangle-white {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #fff transparent transparent transparent;
    margin: 0 auto;}

.triangle-grey {
    position: relative;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 20px;
    border-color: #ddd transparent transparent transparent;
    margin: 0 auto;}

.triangle-red {
	position: relative;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: #C00 transparent transparent transparent;
	margin: 0 auto;}
	
.triangle-yellow {
	position: relative;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 20px 0 20px;
	border-color: #ffc transparent transparent transparent;
	margin: 0 auto;}	

.animate_triangle { animation: 1s infinite ease alternate bobbing; }

@keyframes bobbing {
	from { transform: translate(0px, 0px); }
	to { transform: translate(0px, 10px); }
}

.bullets_star { padding-left: 0;max-width: 302px;margin: 0 auto;}
.bullets_star li {
	background: url(https://hfl-4.netdna-ssl.com/images/arrows/star.png) left center no-repeat;
	list-style: none;
	text-align:left;
	padding-left: 30px;
	margin-top: 0px;
	margin-bottom: 7px;
	margin-left: 0px; }
			
.highlight, .highlight-text { background: #fff2a8; padding: 1px 2px; border-radius: 5px; }

.text-underline {  border-bottom: 2px solid #C00;  padding-bottom: 1px; }

/* Steps */
#steps { background-color: #ddd; padding: 5px 0; text-align: center; position: fixed; width: 100%; z-index: 999;}
#steps .step { padding: 5px 0; }
#steps .step span {
border-radius: 50%;
/*background-color: #ddd;*/
color: #333;
border: 2px solid #333;
margin-right: 5px;
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
padding: 2px;
text-align: center;
font-weight: bold; }

#steps .step.active { background-color: #eaf3fe; border-radius: 4px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.25); }
#steps .step.active::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -0.5em;
bottom: -18px;
left: 50%;
box-sizing: border-box;
border: 10px solid black;
border-color: transparent transparent #eaf3fe #eaf3fe;
transform-origin: 0 0;
transform: rotate(-45deg);
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.25);}

#steps .step.complete { cursor:not-allowed; color: #aaa; }
#steps .step.complete span { border-color: #aaa; color: #aaa; background-color: #fff; }
#steps .step.checkout span { border-color: #4285f4; color: #4285f4; }
#steps .step.checkout:hover { background-color: #4285f4; }
#steps .step.checkout:hover span, #steps .step.checkout:hover a { border-color: #fff; color: #fff; }
#steps .step.checkout a { color: #4285f4; border-bottom: 1px dotted #4285f4; padding-bottom: 1px; /*text-decoration: underline;*/ }
#steps .step.checkout a:hover { text-decoration: none; color: #fff;  }
#steps .step.checkout i { top:3px; }

	
/* ======================
	Cross Sell
======================== */

#cross_sell header { background-color: #fff; padding-top: 60px; }
#cross_sell .panel-default { margin-bottom: 0; }
#cross_sell .panel-default > .panel-heading { background-color: #C00; color: #fff; text-align: center; padding: 5px; border-radius: 0; }
#cross_sell .panel-body { background-color: #EAF3FE; padding: 10px 0; border: 1px solid #C00; margin-top: -1px; }
#cross_sell .panel-body p { font-size: 15px; line-height: 2.28rem; margin-bottom: 18px; }
#cross_sell .guarantee_txt { text-align:center; letter-spacing:3px; padding-top:15px; }
#cross_sell .view-ingredient  {
	border-bottom: 1px dotted;
	display: block;
	font-size: 14px;
	max-width: 130px;
	margin: 10px auto; }

#cross_sell .view-btn { 
	border-bottom: 1px dotted;
	display: none;
	font-size: 14px;
	max-width: 88px;
	margin: 10px auto; }

#cross_sell .view-ingredient:hover, #cross_sell .view-ingredient:focus, #cross_sell .view-ingredient:active { text-decoration: none; }
#cross_sell .discount-head h1 { line-height: 1.5; font-weight: normal; }

#cross_sell .bottle-img { padding-left: 12px; }

#cross_sell .bottle-img-qt { padding-left: 12px; margin-top: 30px; }
#cross_sell .bottle-img-qt img { max-height: 300px; }
		
#cross_sell .price-container{
	border: 2px dashed #c00;
	padding: 10px;
	background-color: #FFC;
	text-align: center; 
	margin: 0 0 20px 0; }

#cross_sell .prices { padding: 0; text-align: center; margin-top: 6px; }
#cross_sell .prices span { display: inline-block; vertical-align: middle; padding: 0; }
#cross_sell .prices span:first-child { padding-right: 10px; }

#cross_sell .cutprice1 { font-size:36px; color:#D7D7D7; text-decoration: line-through; padding-right:12px; }
#cross_sell .cutprice2 { font-size:24px; color:#A0A0A0; text-decoration: line-through; padding-right:12px; }
#cross_sell .save-price { font-size: 20px; padding-bottom:5px; }
#cross_sell .save-price i { font-weight: bold; color:#C00;}
#cross_sell .save-price-tagline { font-size:16px; text-align: left; padding: 0; max-width: 204px; margin: 0 auto; }
#cross_sell .save-price-tagline li:before { content: "\e013"; font-family: 'Glyphicons Halflings'; color: #0C0; padding-right: 8px;}
#cross_sell .save-price-tagline li { list-style: none; padding: 0; }

#cross_sell .triangle-grey { margin-right: 20%;}
#cross_sell .view-larger { margin-top: 5px;}

#cross_sell .alert {
	display: none;
	font-size: 14px;
	padding: 5px;
	margin: 10px 0 -10px 0;
	border-radius: 0;
	background-color: #c00;
	color: #ff3; }
			
			
/* ======================
	Header
======================== */

header {
	width: 100%;
	padding: 8px 0;
	margin-bottom: 20px;
	background-color: #f2f2f2;
    box-shadow: 0px 2px 5px #ddd;
	border-bottom: 1px solid #ddd;}

header h1 {
	color: #555;
	font-size: 36px;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: 300;
	text-shadow: 1px 1px #F6FAFE;
	text-align: center;
	line-height: 1.4em;
	padding:0 0 10px 0;
	margin: 0; }
		
.no_thanks { margin-top: 20px; }
.header-logo { text-align: center; list-style-type: none; margin: 0; padding: 0; }
.header-logo li { display: inline-block; }
.header-logo img { height: 50px; }
.header-logo .divider { padding: 0 10px; }
.header-logo .divider img { width: 1px; }

.top-guarantee { color: #666; text-align: center; }
.top-guarantee h2 { margin: 0; line-height: 1em; padding-bottom: 5px; }
.top-guarantee h3 { margin: 0; font-size: 14px; }

.discount-head { text-align: center; background-color: #fff; padding: 10px; box-shadow: 0px 2px 5px #ddd; }
.discount-head h1 { margin: 0; font-size: 24px; font-weight: 700; }
.discount-head h2 { margin: 5px 0 0 0; font-size: 18px; line-height: 1.4em;}
.discount-head-mobile { background-color: #ffc; font-weight: 600; }


/* ======================
	Guarantee
======================== */

.guarantee.panel { border-radius: 0; text-align: center; }
.guarantee .panel-heading { background-color: #E4E4E4; color: #c00; font-weight: 700; font-size: 22px; padding: 5px; border-radius: 0; }
.guarantee .panel-body { background-color: #FFC; font-size: 16px; }

.zoom { -webkit-transition: 0.6s ease; transition: 0.6s ease; margin: 0 auto; cursor: pointer; max-height: 150px; }
.zoom:hover { cursor: zoom-in; z-index: 1; transform: scale(2.5); }
.view-larger { font-size: 10px; color: #20a2ff; }

/* ======================
	Product Description
======================== */

#pd-section { /*margin-top: -140px;*/ }
#pd-section .pd { background-color: #777; text-align: center; color: #fff; padding: 5px; font-size: 14px; }
#pd-section .pd-row { background-color: #EAF3FE; padding: 10px; margin-bottom: 10px; font-size: 14px;  }


/* ======================
	Quick Summary 
======================== */

#quick-summary {
	background-color: #FFF;
	margin: 30px 0px 0px;
	border: 1px solid #f2f2f2;
	box-shadow: 0px 2px 5px #ddd;}
	
#quick-summary h2 {
	max-width: 220px;
	text-align: center;
	letter-spacing: 1px;
	background-color: #aaa;
	color: #fff;
	text-shadow: none;
	padding: 8px;
	border-radius: 4px;
	font-size: 18px;
	font-weight: 600;
	margin: -20px auto 10px}

#quick-summary dt, #quick-summary dd { padding-left: 40px; padding-right: 10px; }

#quick-summary dl { counter-reset: my-badass-counter; }
	
#quick-summary dt {	position: relative; font-size: 14px; font-weight: 600; }
	
#quick-summary dt:before {
	content: counter(my-badass-counter);
	counter-increment: my-badass-counter;
	position: absolute;
	left: 10px;
	top: 0;
	font-weight: bold;
	font-size: 40px;
	line-height: 1.1em;
	color:#aaa;}
	
#quick-summary dd {
	color: #333;
	line-height: 1.5;
	margin-bottom: 10px;
	border-bottom: 1px solid #EBEBEB;
	padding-bottom: 10px;
	font-size: 14px; }

#quick-summary dd span { color:#0C0;}
#quick-summary dd:last-child { border: none; padding-bottom: 0;}


/* ======================
	Packages
======================== */

.packages { margin-top: 10px; box-shadow: 0px 2px 5px #ddd; }
.packages .table { background-color: #fff; text-align: center; margin-bottom: 0; }
.packages .table tr { }
.packages .table td { vertical-align: middle; border: none; border-bottom: 1px solid #ddd; }
.packages .table th { background-color: #777; color: #fff; font-weight: normal; text-align: center; font-size: 14px; }
.packages .table tr td:first-child { text-align: left; padding: 14px; }
.packages .table tr td:nth-child(2) { font-size: 22px; font-weight: 600; background-color: #f9f9f9;  }
.packages .table tr td:nth-child(3) { background-color: #FFC; }

.packages .table tr:last-child td { border-bottom: 0; }

.packages .table td sup { top:0; vertical-align: super; font-size: 9px; color: #777; }
.packages .table .title { }
.packages .table .title b { font-size: 18px;}
.packages .table .sub-title { font-size: 16px; }
.packages .table .save { color: #3C0; font-weight: 600; }
.packages .table .additional-save { color: #f00; background-color: #FFC; margin-top: 4px; display: inline-block; }
.packages .table .additional-save b { font-weight: 600; }
.packages .table .strike-price { position: relative; font-weight:normal; }
.packages .table .each { font-size: 12px; color: #777; font-weight: normal; }
.packages .table .each sup { font-size: 8px; top:2px; left: 1px; }

.packages .table .strike-price:before {
	border-bottom: 1px solid #ff8080;
	position: absolute;
	content: "";
	width: 100%;
	height: 50%;}

.col-pd { float: left; width: 33.33333333%; min-height: 1px; position: relative; }
.seals { margin-top: 40px; }
.seals img { max-width: 70px; margin-right: 5px;}
.view-ps-btn-col { float: left; width: 100%; }

/* ======================
	CTA
======================== */

.cta-section { text-align: center; }


/* ======================
	Radio Button
======================== */

.regular-radio { display: none; }

.regular-radio + label:hover { background-color:#ddd;}
  
.regular-radio + label {
  /*-webkit-appearance: none;*/
  background-color: #fafafa;
  border: 1px solid #cacece;
  padding: 9px;
  border-radius: 50px;
  display: inline-block;
  position: relative;
  cursor: pointer; }

.regular-radio:checked + label:after {
  content: ' ';
  width: 12px;
  height: 12px;
  border-radius: 50px;
  position: absolute;
  top: 3px;
  background: #4285f4;
  text-shadow: 0px;
  left: 3px;
  font-size: 32px;}

.regular-radio:checked + label {
  background-color: #e9ecee;
  color: #4285f4;
  border: 1px solid #adb8c0;}


/* ======================
	Contact Form
======================== */

.contact_form {
	background-color: #FFF;
	margin: 30px 0px 0px;
	border: 1px solid #f2f2f2;
	box-shadow: 0px 2px 5px #ddd;}
	
.contact_form h2 {
	max-width: 280px;
	text-align: center;
	letter-spacing: 1px;
	background-color: #aaa;
	color: #fff;
	text-shadow: none;
	padding: 8px;
	border-radius: 4px;
	font-size: 18px;
	font-weight: 600;
	margin: -20px auto 20px; }
	
.contact_form .input-section { margin-bottom: 15px; }
.contact_form.bv-form .help-block { color: #c00; text-align: center; }

/* ======================
	Misc
======================== */

footer { margin-top: 20px; }
.coupon { margin-top: 14px; font-size: 12px; color: #777; }
.coupon input { text-align: center; border: 1px solid #777; color: #3C0; background-color: #f9f9f9; width:130px; }
.view-btn { border-bottom: 1px dotted; display: none; font-size: 14px; }
.view-btn:hover, .view-btn:focus { text-decoration: none; }
.reseller { text-align: center; }
.conversion { width:1px; height:1px; display:none; }
		
/* ======================
	Media Query
======================== */

@media (max-width: 1199px) {
	#pd-section {/* margin-top: -184px;*/ }
	.seals { }
	.seals img { margin-right: 0px; margin-bottom: 4px; }
}

@media (max-width: 991px) {
	.top-guarantee h2 { font-size: 24px; }
	.zoom:hover { transform: scale(2); }
	.discount-head h1 { font-size: 20px; font-weight: 600; }
	.discount-head h2 { font-size: 16px; }
	.guarantee .panel-heading { font-size: 18px; font-weight: 600; }
	.seals {  margin-top: 4px; }
	#quick-summary h2 { font-size: 17px; max-width: 210px; }
	.contact_form h2 { font-size: 17px; max-width: 270px; }
	#quick-summary dt {	font-family: 'Open Sans Condensed', sans-serif; font-size: 16px; }
	
	.packages .table .title { font-size: 14px; }
	.packages .table .title b { font-size: 16px; }
	.packages .table tr td:first-child { padding: 10px; }
	.packages .table tr td:nth-child(2) { font-size: 18px; }
	
	.footer-cta { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 767px) {
	header { padding: 4px 0; margin-bottom: 10px;}
	header h1 { font-size: 26px; padding: 5px 10px 10px 10px; }
	.p-name-mobile { margin-top: 0; font-weight: bold; font-size: 20px; text-align: center; }
	.header-logo img { height: 30px; }
	.top-guarantee { display: none; }
	.seals { margin-top: 40px; }
	.seals img { margin-right: 5px; margin-bottom: 0; }
	.view-btn { display: inline-block; }
	.view-pd-btn { margin-bottom: 20px; }
	#quick-summary { display: none; margin: 0; padding: 0; }
	#quick-summary h2 { font-size: 16px; max-width: 200px; font-weight: 400; margin-top: 10px; }
	.contact_form h2 { font-size: 16px; max-width: 240px; font-weight: 400; }
	#pd-section { margin-top: 0; margin-bottom: 20px; display: none; }
	.zoom:hover { transform:none; cursor: default;}
	.view-larger { display: none; }
	.col-sm-6 { padding-left: 0; padding-right: 0; }
	.guarantee.panel { margin-bottom: 10px; }
	.packages .table .sub-title { font-size: 14px; }
	.packages .table .each { font-size: 10px; }
	.packages .table .title b { font-size: 15px; }
	.packages .table tr td:first-child { padding-left: 5px; padding-right: 5px; }
	#cross_sell .guarantee_txt { display: none; margin-bottom: 10px; }
	#cross_sell .discount-head { margin-bottom: 10px; }
	#cross_sell .triangle-white { margin-top: -21px; }
	#cross_sell .view-btn { display: block; }
	#cross_sell .save-price { font-size: 18px; }
	#cross_sell .save-price-tagline { font-size: 14px; max-width: 180px; }
	#cross_sell .cutprice1 { font-size: 30px; }
	#cross_sell .cutprice2 { font-size: 20px; }
	#checkpoint { height: 50px; display: none; }
	#cross_sell .cta-section { background-color: #dddddd8c; text-align: center; position: fixed; width: 100%; z-index: 999; bottom: 0; }
}

@media (max-width: 479px) {
	header h1 { font-size: 22px; }
	.p-name-mobile { font-size: 18px; }
	.seals {  margin-top: 4px; }
	.seals img { margin-right: 0px; margin-bottom: 4px; }
	.packages .table tr td:nth-child(2) { padding-left: 0; padding-right: 0; }
	.packages .table .additional-save { font-size: 14px; }
	
	#steps { font-size: 14px; }
	#steps .step span { display: block; margin: 0 auto; }
	#cross_sell header { padding-top: 80px; }
	#cross_sell .discount-head h1 { font-size: 18px; }
	#cross_sell .save-price { font-size: 16px; }
	#cross_sell .panel-default > .panel-heading { font-size: 15px; padding-left: 10px; padding-right: 10px; }
	.discount-head-mobile { font-weight: normal; }
	.contact_form .input-section { width: 100% }
}