@charset "utf-8";
/* ~~ This the css file for the Responsive Design of Virtual Beauty from Ecommerce Templates.
		/* XX    Edited Sections by MM     XX */
			/* %% New Inserted Sections by MM  %% */

/* ~~ The first section correponds to the maximum width version of 980 pixels ~~ */

body{
	font:14px/1.4 Arial, Helvetica, sans-serif;
	/*background:  url(images/bg.gif) #ffffdf repeat-x;*/
	background:#ffffdf;
	/*background: url('images/website%20background.gif');*/
	background-image : url('images/website%20background%20br127.gif');
	margin:0px 2px 0px 4px;
	padding:0;
	color:#000;
}

/* %% The following makes a box around the page so a backgroung picture can be seen when the screen is larger thatn the displayed page %% */
div.wrapper { 
	text-align : center;
	margin-top : 0;
	margin-left : auto; 
	margin-right : auto; 
	padding : 0;
	background-color : #ffffdf; 
	width : 980px;
	height : auto;
} 

/* ~~ Element/tag selectors ~~ */
ul, ol, dl{
	padding:0;
	margin:0;
}
h1, h2, h3, h4, h5, h6, p{
	padding-right:15px;
	padding-left:15px;
}
/* ~~ Headings ~~ */
h1{
  	background:#ffffdf;
  	font-size:1.2em;
  	border-left:20px solid #99CC46;
  	color:#6D6D6D;
  	width:90%;
}
h1.mennav{
  	background:#ffffcf;
  	font-size:1em;
  	border-right:10px solid #FED778;
  	color:#6D6D6D;
  	width:140px;
  	font-weight:normal;
  	border-left:0px;
}
			/* %% Added for red heading on index page %% */
h2{
  	background:#ffffdf;
  	font-size:.9em;
  	color:#AB003C;
  	width:100;
  	text-style:underline;
  	text-align:center;
}

			/* %% Added for Green Boardered Gray headding on index page when below 712px wide %% */
h3{
  	background:#ffffdf;
  	font-size:1.2em;
  	border-left:160px solid #99CC46;
  	border-right:160px solid #99CC46;
  	color:#6D6D6D;
  	text-align:center;
  	display:none;
}

/* ~~ Center paragraph ~~ */
p.ctr{
	text-align:center;
}

a img{ /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
	border:none;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link{
	color:#667903;
	text-decoration:none;
}

a:visited{
	color:#667903;
	text-decoration:none;
}

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

/* ~~this fixed width container surrounds the other divs~~ */
div.container{
	max-width:980px;
	background:#ffffdf;
	margin:0 auto;
}

/* ~~ the header ~~ */
.header{
}

div.thead{
	border-bottom:3px solid #FFE681;
	height:53px;
	box-sizing:border-box;
}
div.tlinks{
	width:50%;
	float:left;
	margin:18px 0px;
	color:#667903;
	font-size:0.8em;
}
div.tsearch{
	float:right;
}
div.logo{
	width:40%;
	float:left;
}
div.smedia{
	width:40%;
	float:left;
	text-align:center;
	padding-top:36px;
}
div.logoright{
	float:left;
	width:20%;
}
/* ~~ Top search ~~ */
.searchinput{
	float:left;
	width:264px;
	height:24px;
	padding:2px;
	border:1px solid #eee;
	background:#F6F6F6;
	color:#858585;
	border-radius:5px 0px 0px 5px;
	margin:8px 0px 8px 8px;
}
.searchsub{
	float:left;
	width:34px;
	height:30px;
	background:url(../images/searchicon.gif);
	border:0px;
	margin-top:8px;
	cursor:pointer;
}

/* ~~ Top horizontal navigation bar ~~*/
.clearfix:after{
    content:"";
    display:table;
	clear:both;
}

nav{
	border-bottom:3px solid #96CB44;
	margin-bottom:1px;
}

ul.nav{
  	list-style:none;
}

.ectmegamenu > ul, .ectmegamenu > ul > li{
    background-color: #FFF;
}

.ectmegamenu > ul > li > ul{
border:1px solid #96CB44;
border-top:2px solid #96CB44;
}

.ectmegamenu > ul > li > ul.normal-sub > li a,
.ectmegamenu > ul > li > ul > li a,
.ectmegamenu > ul > li > ul > li > ul > li a{
color:#667903;;
border-bottom:1px solid #96CB44;
}

.ectmegamenu > ul > li > ul > li a:hover,
.ectmegamenu > ul > li > ul > li > ul > li a:hover{
background-color:#f0f0f0;
}

/* ~~ These are the columns for the layout - content1 is only used on the home page ~~ */
.sidebar1{
	float:right;
	width:180px;
	background:#fff;
	padding-bottom:10px;
	padding-top:16px;
}

div.content{
	padding:16px 10px;
	width:calc(100% - 180px);
	float:left;
	box-sizing:border-box;
}

div.content ul, .content ol{
	padding:0px;
}

div.content1{
	padding:0px;
	max-width:980px;
}

div.content1 ul, .content1 ol{
	padding:0px;
}

.content ul, .content ol{
	padding:0 15px 15px 40px;
}

/* ~~ Right hand menu. ~~ */
div.ectmegamobile{
	background-color:#667903;
	margin-bottom:-3px;
}

span.megamobiletext{
	color:#FFF;
}

/* ~~ The home page content ~~ */
div.blurbleft{
	width:200px;
	float:left;
}

div.blurbright{
	width:760px;
	float:right;
	padding:6px;
	color:#999;
	box-sizing:border-box;
}

div.blurbright1{
	padding:6px;
	color:#999;
}

div.homeprod1{
	width:300px;
	border:1px solid #D6DEB9;
	padding:4px;
	margin:4px 8px 14px 8px;
	float:left;
}

p.prodtitle{
	background:#f1f1f1;
	color:#667903;
	font-weight:bold;
}

/* ~~ The footer ~~ */
.footer{
	padding:0px;
	position:relative;
	clear:both;
	overflow:auto;
	background: url(../images/btmbg.gif) #f1f1f1 repeat-x;
}

div.footer1{
	max-width:980px;
	margin:0 auto;
}

div.foobar{
	width:100%;
	margin:0 auto;
	height:24px;
	background:#96CB44;
}

div.cards{
	width:100%;
}

.cards img{margin:2px 4px 0px 4px; cursor:pointer;}
div.foo1{
	font:0.8em Arial, Helvetica, sans-serif;
	float:left;
	width:25%;
	padding:0px;
	line-height:1.7em;
  	background:#f1f1f1;
}

.foo1 a, .foo2 a, .foo3 a, .foo4 a{color:#6D6D6D;; text-decoration:none;}
.foo1 a:hover, .foo2 a:hover, .foo3 a:hover, .foo4 a:hover{text-decoration:underline;}
.foo2{
	font:0.8em Arial, Helvetica, sans-serif;
	float:left;
	padding:0px;
	width:25%;
	color:#6D6D6D;
	line-height:1.7em;
  	background:#f1f1f1;
}

.foo3{
	font:0.8em Arial, Helvetica, sans-serif;
	color:#6D6D6D;
	float:left;
	width:25%;
	padding:0px;
	line-height:1.7em;
    background:#f1f1f1;
}

.foo4{
	font:0.8em Arial, Helvetica, sans-serif;
	float:right;
	line-height:1.7em;
	width:25%;
  	background:#f1f1f1;
}

p.foothead{
	font-weight:bold;
	text-align:left;
	margin:20px 0px 10px 0px;
	font-size:0.9em;
	color:#666;
	line-height:25px;
	padding-left:0px;
}

.ftrbtm{
	width:50%;
	float:left;
	font-size:0.7em;
	color:#666;
  	padding-top:22px;
    background:#f1f1f1;
}

.ftrbtm1{
	width:50%;
	float:right;
	text-align:right;
	font-size:0.7em;
	color:#666;
	padding-top:22px;
    background:#f1f1f1;
}

input[type="button"].ectbutton,input[type="submit"].ectbutton,button.ectbutton{
	background:#7AC244;
	color:#fff;
	text-shadow:0 1px 1px rgba(0, 0, 0, 0.6);
}

input[type="button"].ectbutton:hover,input[type="submit"].ectbutton:hover,button.ectbutton:hover{
	background:#ddd;
	color:#000;
	text-shadow:0 1px 1px rgba(255, 255, 255, 0.6);
}

div.largereviewstars svg.icon, div.smallreviewstars svg.icon {
fill:#7AC244;
}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt{  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float:right;
	margin-left:8px;
}

.fltlft{ /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float:left;
	margin-right:8px;
}

.clearfloat{ /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size:1px;
	line-height:0px;
}

/*This is the first breakpoint and contains styles for screens 950px to 715px*/
@media screen and (max-width:950px){
div.logoright{
    display:none;
}

div.blurbright{
	width:490px;
}

}

/*This is the second breakpoint and contains styles for screens 715px to 480px*/
@media screen and (max-width:715px){
div.content{
	width:auto;
}

/*Hide right navigation bar*/
div.sidebar1{
	display:none;
}

div.tlinks{
    width:100%;
}

div.tsearch{
    float:right;
}

div.logo{
    width:100%;
}

div.smedia{
    display:none;;
}

div.blurbleft{
    width:100%
}

div.blurbright, div.blurbright1{
	width:100%;
}

div.foo1, .foo2, .foo3, .foo4{
    width:50%;
}

}

/*This is the last breakpoint and contains styles for screens 480px and lower*/
@media only screen and (max-width :480px){
div.callbacks_container{
    display:none;
}

div.blurbright, div.blurbright1{
    width:300px;
}

h1{
    padding:2px 0px 0px 6px;
    width:90%;
}

div.homeprod1{
	width:300px;
	border:1px solid #D6DEB9;
	padding:2px;
	margin:0px 0px 4px 0px;
	float:left;
}
}