/* ~~ This the css file for the Responsive Design of Virtual Deals from Ecommerce Templates.
The first section correponds to the maximum width version of 980 pixels ~~ */

@charset "utf-8";
body {
	font:100%/1.5 Arial, serif;
	background:#fff;
	margin:0;
	padding:0;
	color:#000;
	background:url(../images/bg.jpg) repeat-x;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding:0;
	margin:0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top:0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right:15px;
	padding-left:15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
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:#42413C;
	text-decoration:underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	color:#6E6C64;
	text-decoration:underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration:none;
}
/* ~~Styling for the store generated links~~ */
a.ectlink:link {
	color:#516D20;
	text-decoration:none;
}
a.ectlink:visited {
	color:#516D20;
	text-decoration:none;
}
a.ectlink:hover, a.ectlink:active, a.ectlink:focus {
	text-decoration:underline;
}

/* ~~this fixed width container surrounds the other divs~~ */
.container {
	max-width:960px;
	background:#fff;
	margin:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ the header  ~~ */
.header {
	background:#fff;
}

.top {
	background:#e0e0e0;
	height:37px;
	max-width:960px;
}

div.homeslider{
	display:flex;
}

div.midtop{
	height:86px;
}

.topleft{
	display:inline-block;
	text-align:right;
	color:#8a8a8a; 
	font-size:0.8em; 
	margin-top:9px;
}

.topleft a{  
	color:#8a8a8a; 
	font-size:0.9em; 
	margin:0 7px; 
	text-decoration:none;
}

.topleft a:hover{  
	color:#e06e1d; 
	text-decoration:underline;  
}

.topright{
	width:167px;
	float:right;
	text-align:right;
}

.logo{
	height:50px;
	float:left;
	width:300px;
	margin-top:20px;
}

.topsocial{
	width:250px;
	float:left;
	height:50px;
	padding-top:36px;
	text-align:center;
}

.topsocial img{ 
	margin-right:20px; 
}

/* The Mega Menu */

.ectmegamenu > ul, .ectmegamenu li, .ectmegamenu li > a{
    background-color:#DA6A1E;
	font-family:'Arial',Georgia;
    font-size:14px;
    color:#fff;
    text-decoration:none;
}
.ectmegamobile {
    padding:5px 20px;
}
.ectmegamobile > a {
    color:#FFF;
	text-decoration:none;
}
ul.show-on-mobile{
	z-index:1000;
}

/* ~~ the search form  ~~ */

.topsearch{
	clear:right;
	float:right;
	height:50px;
	padding-top:24px;
	text-align:right;
}

#form-search p	{
	padding:0;
	margin:0;
}
	
#form-search label, #input-keywords, #submit-search{
	vertical-align:middle;
	padding:0;
	margin:0;
	height:25px;
}
	
#input-keywords	{
	border-width:1px 0 1px 1px;
	border-style:solid;
	border-color:#ccc;
	height:23px;
	width:356px;
	line-height:20px;
 	padding-left:2px;
}

/* ~~ Top horizontal navigation bar ~~*/
div.top_nav{
	width:100%;
	height:33px;
	background:#DA6B1D;
	border-bottom:1px solid #fff;
	box-sizing:border-box;
}

div#topnav{
	width:960px;
	height:32px;
	background:#DA6B1D;
	text-align:center;
	margin-bottom:1px;
}
div#topnav ul{
	font-size:0.9em;
	color:#999;
	text-align:center;
	margin:0;
	padding-top:6px;
	height:21px;
	padding-left:0px;
}
div#topnav ul li{
	display:inline;
}
div#topnav ul li a{
	padding:5px 10px 5px 10px;
	color:#fff;
	text-decoration:none;
	border-left:1px solid #EF965A;
	border-right:1px solid #EF965A;
	margin-right:-1px;
}
div#topnav ul li a:hover{
	background-color:#da6805;
	color:#EF965A;
}
.freebar{
	max-width:960px;
	height:55px;
	background:#7C9F45;
	margin-bottom:20px;
	background:url(../images/topbg.jpg) repeat-x;
	text-align:center;
}

.freebar img{ 
	margin:0px 54px 0px 30px;
}

/*Internal store naviagtion*/
a.ectlink:link {
	color:#42413C;
	text-decoration:none;
}
a.ectlink:visited {
	color:#42413C;
	text-decoration:none;
}
a.ectlink:active {
	color:#42413C;
	text-decoration:none;
}
a.ectlink:hover {
	color:#666;
	text-decoration:none;
}

/* Automatically generated products menu */
ul.ectmenu1 {
	border-top:1px solid #EF965A;
	margin-bottom:15px;
}
ul.ectmenu1 li {
	border-bottom:1px solid #EF965A; 
}
ul.ectmenu1 a, ul.ectmenu1 a:visited {
	padding:2px 2px 2px 15px;
	display:block; 
	width:160px;
	text-decoration:none;
	background:#fff;
  	font-size:0.8em;
}
ul.ectmenu1 a:hover, ul.ectmenu1 a:active, ul.ectmenu1 a:focus { 
	background:#EF965A;
	color:#FFF;
}

/*Button and form field styles*/
input.ectbutton,button.ectbutton{
	background:#DA6A1E;
	color:#fff;
	padding:4px 12px;
	border:0;
	border-radius:4px;
	-webkit-appearance:none;
	text-shadow:0 1px 1px rgba(0, 0, 0, 0.6);
}
input.ectbutton:hover,button.ectbutton:hover{
	background:#ddd;
	color:#000;
	cursor:pointer;
	-webkit-appearance:none;
	text-shadow:0 1px 1px rgba(255, 255, 255, 0.6);
}
div.largereviewstars svg.icon, div.smallreviewstars svg.icon {
fill:#DA6A1E;
}
input.previmg, input.nextimg, input.detailprevimg, input.detailnextimg{
border-radius:4px;
border:1px solid #ccc;
background:#fff;
margin:4px;
font-size:11px;
cursor:pointer;
color:#006aba;
padding:4px;
}
input.previmg:hover, input.nextimg:hover, input.detailprevimg:hover, input.detailnextimg:hover{
color:#000;
border:1px solid #666;
}

/* ~~ These are the columns for the layout. ~~ */
.sidebar1 {
	float:left;
	width:180px;
	background:#fff;
	padding-bottom:10px;
	margin-top:12px;
}
.content {
	padding:0px;
	float:left;
	margin-left:12px;
	width:calc(100% - 192px); /* 180px sidebar + 12px padding */
}

.content-home {
	padding:0px;
	max-width:968px;
	float:left;
	margin-left:0px;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding:0 15px 15px 40px;
}

/* ~~ the menu titles  ~~ */
p.menuhead{
  	width:131px;  border-top:1px solid #ccc;
   	border-right:1px solid #ccc;
   	border-left:1px solid #ccc;
  	margin-bottom:0px;
  	padding:2px 4px 4px 44px;
  	font-size:0.9em;
  	background:url(../images/menudown.gif) repeat-y;
}

ul.nav {
	list-style:none;
	border-top:1px solid #EF965A;
	margin-bottom:15px;
}
ul.nav li {
	border-bottom:1px solid #EF965A; 
}
ul.nav a, ul.nav a:visited {
	padding:2px 2px 2px 15px;
	display:block; 
	width:160px;
	text-decoration:none;
	background:#fff;
  	font-size:0.8em;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	background:#EF965A;
	color:#FFF;
}

/* ~~ The footer ~~ */
.footer {
	padding:10px 0;
	background:#FCEFE6;
	background:url(../images/foobg.jpg) repeat-x;
	position:relative;
	clear:both; 
	height:220px;/* ~~ If you add extra content to the footer you will need to increase the height here. ~~ */
}

div.footer1{
	width:960px;
	margin:0 auto;
}

div.foobar{
	width:960px;
	margin:0 auto;
	height:24px;
	background:#E3C8B4;
}

div.cards{
	width:480px;
	float:left;
}

.cards img{margin:0px 10px 0px 10px; cursor:pointer;  vertical-align:top; }

div.ftrsocial{
	width:480px;
	float:right;
	text-align:right;
}

.ftrsocial img{margin-right:25px;}

div.foo1{
	font:0.8em Arial, Helvetica, sans-serif;
	float:left;
	width:220px;
	padding:0 0 0 10px;
	line-height:1.7em;
}

.foo1 a, .foo2 a, .foo3 a, .foo4 a{color:#865B3B; 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:0 10px 10px 10px;
	width:220px;
	color:#666;
	line-height:1.7em;
}

.foo3{
	font:0.8em Arial, Helvetica, sans-serif;
	color:#666;
	float:left;
	width:220px;
	padding:0 10px 10px 10px;
	line-height:1.7em;
}

.foo4{
	font:0.8em Arial, Helvetica, sans-serif;
	float:right;
	line-height:1.7em;
	width:220px;
}

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

.ftrbtm{
	width:480px;
	float:left;
	font-size:0.7em;
	color:#666;
  	margin-top:22px;
}

.ftrbtm1{
	width:480px;
	float:right;
	text-align:right;
	font-size:0.7em;
	color:#666;
	margin-top:22px;
}

/* ~~ Horizontal rule ~~*/
HR {
	height:0;
	border-width:1px 0 0 0;
	border-style:solid;
	border-color:#DA6B1D;
}

/* ~~ 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;
}

/* ~~ the home page layout  ~~ */
.slider-left{ 
	width:249px; 
	float:left; 
}

.slider-left img{ 
	margin-top:0px;
}

.slider-left-bottom{ 
  	width:216px; 
  	height:101px; 
  	background:#e06e1d; 
  	padding-left:33px; 
  	padding-top:24px; 
  	color:#fff; 
  	font-size:0.9em; 
	box-sizing:content-box;
}

.slider-left-bottom a{
	color:#fff; 
	font-size:1.1em;
	text-decoration:none;
}

.slider-left-bottom a:hover{ 
	text-decoration:underline;
}

.slider-right{ 
	width:708px; 
	height:auto; 
	float:left;
}

.slider-right-home{
	height:auto; 
	float:left;
}

.middle-logo{
	width:760px; 
	height:45px; 
	margin-top:12px;
}

.middle-logo img{ 
	float:left; 
	margin-right:44px;
}

.middle-logo-home{
	width:960px; 
	height:45px; 
	margin-top:12px;
}

.middle-logo-home img{ 
	float:left; 
	margin-right:44px;
}

.fashion-main{ 
	width:975px; 
	height:370px;  
	margin-top:30px;
}

.fashion-left{ 
	width:308px; 
	height:370px; 
	background:url(../images/homepic1.jpg) no-repeat; 
	float:left;
}

.fashion-inner{ 
	width:190px; 
	height:96px; 
	margin-top:190px; 
	margin-left:19px; 
	color:#fff;
	font-size:1.4em;
}

.fashion-left2{ 
	width:308px; 
	height:370px; 
	background:url(../images/homepic2.jpg) no-repeat; 
	float:left;
	margin-left:16px;
}

.prodcenter{ width:210px; 
	height:25px; 
	margin-top:165px; 
	margin-left:90px; 
	font-size:1.4em; 
}

.white{ 
	color:#fff;
}


.fashion3{  
	width:308px; 
	height:370px; 
	background:url(../images/homepic3.jpg) no-repeat; 
	float:right; 
	color:#fff; 
	font-size:1.2em; 
	padding-left:30px; 
	padding-top:18px;
}

.heading-main{ 
	width:439px; 
	margin-top:20px; 
	color:#535159; 
	font-size:1.1em;
	float:left;
}

.heading-main-home{ 
	width:639px; 
	margin-top:20px; 
	color:#535159; 
	font-size:1.1em;
	float:left;
}

.heading-main h1, .heading-main-home h1{ 
	color:#e06e1d; 
	font-size:40px; 
	font-weight:normal; 
	margin:0px; 
	padding:0px; 
	margin-bottom:14px; 
	font-weight:bold;
}

p.homeblurb{
	font-size:0.9em;
}


.bullet-point{ 
	width:276px; 
	float:right; 
	margin-top:20px; 
	margin-right:9px;
}

.bullet-point-home{ 
	width:276px; 
	float:left; 
	margin:20px 30px 0px 18px;
}

.bullet-point h1, .bullet-point-home h1{ 
	color:#9db86f; 
	font-size:2em;
	margin:0px; 
	padding:0px; 
	font-weight:normal; 
	margin-bottom:23px; 
	font-weight:bold;
}

ul.bullet { 
	list-style:none; 
	margin:0px; 
	padding:0px 0 5px 0px ; 
}

ul.bullet li { 
	background:url(../images/bullet.jpg) no-repeat; 
	background-position:0px 1px; 
	background-repeat:no-repeat; 
	padding-left:25px; 
	padding-bottom:18px; 
	color:#dc6e1d;
}


/* This is the first breakpoint and is for screen sizes between 772 and 980 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
-------------------------------------*/
@media screen and (max-width:980px) {
  
.logo{
	width:230px;
}

.topsocial{
	display:none;
}

/* ~~ the search form  ~~ */

#input-keywords	{
	width:326px;
}
  
div#topnav{
	width:772px;
}

.freebar img{ 
	margin:0px 4px 0px 3px;
}
  
.slider-right{ 
	width:568px; 
}
  
.slider-left-bottom{
    display:none;
}
  
.middle-logo{
	width:468px; 
	margin-left:90px;
}
  
.middle-logo-home{
	width:740px; 
	margin-left:30px;
}
  
span.logo4{
    display:none;
}
  
span.logos772{
    display:none;
}
  
.heading-main{
    width:568px;
}
  
.bullet-point{ 
	float:left; 
    width:568px;
}
  
.fashion-main{ 
	width:772px; 
}
  
.fashion-left{ 
	margin-left:60px; 
}
  
.fashion3{
	float:left; 
	margin-top:18px;
  	margin-left:60px; 
}
  
.heading-main-home{
    float:left;
    width:770px;
}
  
div.footer1{
	width:768px;
}

div.foobar{
	width:768px;
}

div.cards{
	width:360px;
	float:left;
}

div.ftrsocial{
	width:360px;
  	padding-right:6px;
}
  
div.foo1, .foo2, .foo3, .foo4{
	width:178px;
}

.ftrbtm{
	width:380px;
  	padding-left:2px;
}

.ftrbtm1{
	width:380px;
  	padding-right:2px;
}

}
  
/* This is the second breakpoint and is for screen sizes between 468 and 758 pixels. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:758px) {
  
.topsearch{
	width:236px;
}

#input-keywords	{
	width:182px;
}
  
div#topnav{
	width:468px;
}
  
.topnav1{
    display:none;
}
  
span.day{
    display:none;
}
  
.slider-left{
    display:none;
}
  
.content, .content-home{
    margin:0px;
	width:100%;
}
  
.logos468{
    display:none;
}
  
.middle-logo, .middle-logo-home{
	width:448px; 
	margin-left:10px;
}
  
div.sidebar1{
	display:none;
}
  
.fashion-main{ 
	width:314px; 
}
  
.fashion-left2  {
	float:left; 
	margin-top:18px;
    margin-left:60px; 
}
  
.heading-main-home, .heading-main{
    width:468px;
}

.bullet-point{ 
	width:468px;
}

div.nosearchresults{
	width:460px;
}
  
div.footer1{
	width:468px;
}

div.foobar{
	width:468px;
}

div.cards{
	display:none;
}

div.ftrsocial{
	width:460px;
    text-align:center;
}
  
div.foo1, .foo2, .foo3{
	width:130px;
}
  
.foo4{
	display:none;
}

.ftrbtm{
	width:260px;
}

.ftrbtm1{
	width:200px;
}

}


/* This is the third breakpoint and is for smartphones. 
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below
*/
@media screen and (max-width:468px) {
  
.topright{
    display:none;
}
  
#navlist{
    display:none;
}
.topsearch{
	width:308px;
    float:left;
    height:0px;
    margin:0px;
    padding-top:16px;
}

#input-keywords	{
	width:252px;
    margin-top:3px;
}
  
#submit-search{
    margin-top:3px
  }
  
div#topnav{
	width:308px;
}  
  
span.free, span.megamobiletext{
    display:none;
}
  
.content, .content-home{
    margin:0px;
}
  
.middle-logo, .middle-logo-home{
	display:none;
}
.bullet-point-home{
    margin-left:1px;
}
  
.fashion-main{ 
	width:308px; 
}
  
.fashion-left, .fashion-left2, .fashion3{
    margin-left:0px;
    margin-right:0px;
    padding:0px;
}
   
.heading-main-home, .heading-main{
    width:308px;
}

.heading-main-home h1, .heading-main h1{
    font-size:1.8em;
}
  
.bullet-point-home, .bullet-point{
    width:308px;
}
 
div.footer1{
	width:100%;
}

div.foobar{
	width:100%;
}

div.ftrsocial{
	width:100%;
    text-align:center;
}
  
div.foo1, .foo2{
	width:130px;
}
  
.foo3{
	display:none;
}

.ftrbtm{
	width:200px;
}

.ftrbtm1{
	width:96px;
}

}