/* ~~ This is the css file for the Ecommerce Templates Outdoors Responsive Design.
The first section correponds to the maximum width version of 1000 pixels ~~ */

@charset "utf-8";


/* Amazon Button */

div.amazonpaybutton{
float:left;
width:100%;
margin:18px 0px;
}

div.amazonpaybuttontext{
float:left;
width:100%;
margin-bottom:18px;
}

/* Amazon Widget */

div.amazoncontent{
float:left;
width:100%;
text-align:center;
}

#addressBookWidgetDiv{
margin:0 auto !important;
width:90% !important;
margin-bottom:12px !important;
height:228px;
}

#walletWidgetDiv{
margin:0 auto !important;
width:90% !important;
height:228px;
}

/* Amazon pay link and logout divs */

div.paynowamazon{
float:left;
width:100%;
margin:16px 0px;
}

div.amazonlogout2{
float:left;
width:100%;
}

 /* ~~ Main settings ~~*/

body { margin:0 auto; padding:0px; font-family:Arial; font-size:13px; color:#666; border-top:5px solid #000;}


.main_wrapper  { margin:0px; padding:0px;}
.header_wrapper { margin:0px; padding:0px;}
.mid_wrapper { margin:0px; padding:0px;}
.footer_wrapper { margin:0px; padding:0px; background-color:#999999; color:#FFF;}

.FL { float:left;}
.FR { float:right;}
.width { width:100%;}
.clear { clear:both;}
.width_wrapper { max-width:1000px; margin:0 auto;}

 /* ~~ Header section ~~*/

.logo_row { margin:0px; padding:10px 0 10px 0;}

/*.logo { float:left; margin:0px; padding:0px; background: url('/images/logo-500.png') no-repeat;}*/

div.logo {width:375px; padding:10px; float:left; clear:both;}
@media screen and (max-width: 750px) {div.logo {float:none; margin:auto;}}
@media screen and (max-width: 375px) {div.logo {width:100%}}


/*@media screen and (max-width: 500px) {div.logo{width:96%;text-align:center;}}*/

/*@media screen and (max-width: 500px) {
.logo { background: url('/images/logo-350.png') no-repeat;}}
@media screen and (max-width: 360px) { 
.logo { background: url('/images/logo-280.png') no-repeat; margin-left: 2px;}}*/


.logo_right { float:right; width:55%; padding-top:25px; text-align: center; }
@media screen and (max-width: 900px) {.logo_right {width: 50%;}}
@media screen and (max-width: 810px) {.logo_right {width: 45%;}}
@media screen and (max-width: 750px) {.logo_right {width: 100%; padding-top:5px;}}

.welcome_msg { font-size:11px; color:#b3b3b3; margin: auto; padding: 40px 30px 3px 3px; max-width:90%;}
@media screen and (max-width: 750px) {.welcome_msg {padding: 15px 0 5px 0; margin: auto;}}

ul.topLink { float:right; margin:0px; padding:0px;clear:both}
@media screen and (max-width: 750px) {ul.topLink {float: none;}}

ul.topLink li { float:left; margin:0px; padding:0px  8px 0px  8px; list-style:none;}
@media screen and (max-width: 750px) {ul.topLink li {display: inline; float: none; padding: 10px 10px 0 10px;}}

ul.topLink li a { font-size:12px; color:#777373; font-weight:bold; text-decoration:none; text-transform:uppercase;}
ul.topLink li a:hover { text-decoration:underline;}

.topNav_wrapper { border-top:1px solid #e5e5e5; border-bottom:3px solid #e5e5e5; min-height:52px;}

 /* ~~ Below header section ~~*/


.basket { float:right; background:url(../images/cart_icon.png) no-repeat 0 3px; margin-top:14px; padding:5px 5px 5px 25px}
.basket a { color:#000; font-size:13px; color:#000; text-transform:uppercase; text-decoration:none;}

.basket_topLinks { float:right; background:url(../images/cart_icon.png) no-repeat 0 3px; margin-top:14px; padding:5px 5px 5px 25px} /*I created this class */

.searchBox { /*float:right; width:160px; margin:15px 15px 0 20px;*/position:relative; }

.searchBox form { margin:0px; padding:0px;}
.searchBox Input.search_look { margin:0px; padding:3px 25px 3px 3px; color:#646464; border:1px solid #e5e5e5;  width:100%; height:22px; line-height:22px; z-index:1; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */}
.searchBox .search_btn { margin:0px; padding:0px; width:25px; height:22px; background:url(../images/search_icon.png) no-repeat center 2px; position:absolute; right:0px; top:0px; text-indent:-9999px; cursor:pointer; border:none;}

.service_section { padding:5px 0; }
.icon_refresh { float:left; background:url(../images/message_icon.png) no-repeat 0 0; padding-left:40px; line-height:34px; margin-right:50px; font-size:14px; color:#a2a3a5;}
.icon_refresh strong { color:#000000;}
.icon_truck { float:left; background:url(../images/icon_truck.png) no-repeat 0 0; padding-left:40px; line-height:34px; font-size:14px; color:#a2a3a5; font-weight:bold; text-transform:uppercase;}
.icon_phone { float:right; background:url(../images/icon_phone.png) no-repeat 0 0; padding-left:40px; line-height:34px; font-size:14px;}

.banner_wrapper { line-height:0px;}
.banner_wrapper img { width: 100%; margin: 10px; max-width: 800px;}

.mid_area_bg { background:url(../images/mid_area_bg.jpg) no-repeat center top; background-size:100% 100%; padding:50px 0 20px 0;}
.mid_area_space { padding:15px 0;}


 /* ~~ Home page display ~~*/

.offer-banner-section {margin: auto auto 25px; overflow: hidden;}
.offer-banner-section .col {float: left; width:33.6%;}
.offer-banner-section .col-m { float: left; margin-left: 2.1%; width: 28.5%;}
.offer-banner-section .col-last {float: right; margin-right: 0; width:33.6%;}
.offer-banner-section .col-m img { max-width:100%; border: 1px solid #D3D3D3;}
.offer-banner-section .col img, .offer-banner-section .col-last img { width:100%; border:1px solid #d3d3d3;}
.nec_collection_banner { margin-top:18px; border:1px solid #d3d3d3;}

ul.resp-tabs-list {/*background:url(../images/border_bg.png) repeat-x left bottom; */margin: 0px auto; padding:0; width:71%; text-align:center;}
ul.resp-tabs-list { margin: 0 auto 20px;}
@media screen and (max-width: 500px) {ul.resp-tabs-list{display:none;}} /*hides the mid-page title on index.php (original "I swear..." quote */
.clear{clear:both;}

.resp-tabs-list li {font-size: 24px; display: inline-block; margin: 0; padding:10px 25px; list-style: none; font-family:'Exo 2', Arial; text-transform:uppercase;}

div.item img{border:10px solid #FFF; padding:0px 5px 0px 5px; background:#fff;}
div.item{float:left;}

.item h2 {font-family: Arial; font-size:16px; text-transform:uppercase; margin:0px; padding-top:2px; color: #999; text-decoration:none;
text-align:center;}

.item h2 a {text-decoration:none;}

.product_listing { margin:0px; padding:0;}
.product_listing ul {margin:0px; padding:0;}
.product_listing li {text-align: center; margin:0 5% 20px 0; padding:0; float:left; list-style:none; float:left; width:30%;  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */}
.product_listing li.right { margin-right:0px;}

.product_listing li .product_img_box { /*background-color:#f6f6f8;*/ padding:10px; margin-bottom:10px; }
.product_listing li .product_img_box a img { width:100%;}

h2.green_hr_text { margin:0px; padding:0px 0px 20px 0px; font-family:'Exo 2',Tahoma, Aricl; color:black; font-size:22px; text-transform:uppercase; line-height:normal;text-align: center;}
.product_listing li a { font-size:18px; color:#010000; text-decoration:none; font-weight:normal;}

 /* ~~ Footer section ~~*/

.footer_space { padding:30px 0px 0px 0px;}
.footer_column {float: left; margin-bottom: 15px; width:25%;}
.footer_column h4 {color: #fff; font-size: 16px; font-weight: bold; margin: 0; padding: 0 0 10px; text-transform: uppercase; font-family:'Exo 2', Arial;}
.footer_column ul { margin:0px; padding:0;}
.footer_column li { margin:0px; padding:0 0 4px 10px; list-style:none; background:url(../images/footer_arrow.png) no-repeat 0 5px;}
.footer_column li a { color:#FFF; text-decoration:none;}
.footer_column li a:hover { text-decoration:none; color:#ccc; }

.footer_social_row { border-top:1px solid #818080; border-bottom:1px solid #818080; padding:15px; margin-bottom:15px;}
ul.footer_social_icon { margin:0px; padding:0px; float:left;}
ul.footer_social_icon li { margin:0px; padding:0px 10px 0 0; list-style:none; float:left;}
ul.footer_social_icon li a { margin:0px; padding:0px;}
.payment_icon { float:right;  margin-top:-20px;}

.footer_bottom_links { background-color:#636363; padding:20px 0; color:#b3b3b3;} 
.bottom_links { float:left;}
.bottom_links ul { margin:5px 0px 0px -10px; padding:0px;}
.bottom_links li { margin:0px; padding:0px 10px; display:inline; list-style:none; border-right:1px solid #b3b3b3;}
.bottom_links li:last-child, .bottom_links li.last { border-right:0px;}
.bottom_links li a {color:#b3b3b3; text-decoration:none;}
.bottom_links li a:hover { color:#FFF;}
.bottom_links a {color:#fff; text-decoration:none;}
.bottom_links a:hover { color:#ccc;}

.btn_search { margin:0px; padding:0px; width:36px; height:30px; text-indent:-9999px; cursor:pointer; background:url(../images/btn_go.png) no-repeat 0 0; position:absolute; right:0; top:0px; border:0px;}

.basket_header { display:none;}

 /* ~~ Inner pages ~~*/

.demo { width: 980px; margin: 0px auto;}
.demo h1 { margin:33px 0 25px; line-height: 30px;}
.demo h3 { margin: 10px 0; }
pre { background: #fff;}
.how-use, .content { padding: 10px; background: #F3F3F3;}

#tabInfo { display: none;}
.menu_right { float:right;}
.menu_right2 { width:100%; float:left;}


.sidebar { float:left; width:20%;margin-left:6px; }
.col_right { float:right; width:76%;}



.products_category_box { padding-bottom:20px;}
.products_category_box h2, .features_products_wrapper h2 { /*margin:0px 0px 10px 0px;*/ padding:0px 0px 5px 0px; font-family:'Exo 2', Arial; color:#000; font-size:16px; font-weight:normal; border-bottom:1px solid #e5e5e5;}
.products_category_box  ul { margin:0px; padding:0px;}
.products_category_box  li { margin:0px; padding:3px 0px; list-style:none;}
.products_category_box  li a { font-size:14px; color:#676767; text-decoration:none;}
.products_category_box  li a:hover { color:#000;}

.features_products_wrapper {padding-bottom:20px;}

.features_products_wrapper  ul { margin:0px; padding:0px;}
.features_products_wrapper  li { margin:0px; padding:3px 0px; list-style:none;}
.features_products_wrapper  li a { font-size:14px; color:#676767; text-decoration:none;}
.features_products_wrapper  li a:hover { color:#000;}

p.more_link a { font-size:14px; color:#000; text-decoration:underline; font-weight:bold;}
p.more_link a:hover { text-decoration:none;}

.special_offer_pr_box { /*background-color:#f6f6f8;*/ padding:10px; margin-bottom:20px; position:relative;}
.special_offer { position:absolute; right:0px; top:0px;}
.special_offer_pr_box p.product_img { margin:0px; padding:20px 0px 0px 0px; text-align:center;}
.special_offer_pr_box p.product_name { font-size:18px; color:#996666; margin:0px; padding:10px 5px 0px 5px;}
.special_offer_pr_box p.product_name a { text-decoration:none; color:#996666;}

.contact_box_left { margin:0 0 20px 0; padding:10px; /*background-color:#f6f6f8;*/ font-size:12px; color:#7b7676; line-height:20px;}
.contact_box_left h2 { margin:0 0 10px 0; padding:0px; font-family:'Exo 2', Arial;,font-size:14px; text-transform:uppercase; font-weight:bold; color:#666;}
.contact_box_left p { margin:0px; padding:0 0 5px 0;} 
.contact_box_left p.comp_name { margin:0px; padding:0px; font-size:14px; color:#7b7676; font-weight:bold;}
.contact_box_left p.phone_no { background:url(../images/phone_icon.png) no-repeat 0 2px; padding:0 0 5px 25px;}
.contact_box_left p.email_icon { background:url(../images/email_icon.png) no-repeat 0 2px; padding:0 0 5px 25px;}
.contact_box_left p.email_icon a {color:#7b7676; text-decoration:none;}


 /* ~~ Link properties ~~*/
a {text-decoration: underline; padding:0; margin:0; outline: none; color: #000;}
a:hover {text-decoration: none;}


/* Shopping cart classes
----------------------------------------------------------------------------------------------------*/

/*MY CUSTOM CLASS: to limit the width of the small image in the cart */
img.cartimage{max-width: 170px;} 

/*Shopping cart*/
table.cobtbl{background-color: #efefef; border-bottom:1px solid #000; font-size:0.9em;}
td.cobll, td.cobhl{background-color: #fff; color : #333;}
td.cobhdr{/*background-color:#000;*/ font-size:1em; /*color:#fff;*/text-transform:uppercase;}
span.cartoption{font-size:12px !important; color:#333;}
div.giftwrap a{color:#666; font-size:0.8em; text-decoration:none;}

/*Mini cart*/
table.mincart{width:98%; font-size:1em; background:#EAEAEA;}
.cartquant{width:36px !important;}

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

/*Button and form field styles*/
input.buybutton, input.sccheckout, input.checkoutbutton, input.vieworderstatus, input.viewlicense, input.trackpackage{ background:#000; color:#fff; padding:6px 16px; border:0; border-radius:4px; font-size:1.1em; margin: 0 0 8px -5px;}
input.buybutton:hover, input.sccheckout:hover, input.checkoutbutton:hover, input.vieworderstatus:hover, input.viewlicense:hover, input.trackpackage:hover{background:#ddd; color:#000; cursor:pointer;}
input.login, input.newaffiliate, input.affiliatelogin, input.search{background:#000; color:#fff; padding:4px 16px; border:0; border-radius:4px; font-size:1em; margin-top:6px;}
input.login:hover, input.newaffiliate:hover, input.affiliatelogin:hover, input.search:hover{background:#aaa; color:#000; cursor:pointer;}

/* The category page 
-------------------------------------*/

div.category{ width:43%; float:left; line-height:1.6; font-size:0.9em; padding:10px; border:1px solid #ccc; background-color:#fefefe; margin:0px 0px 16px 16px; height:20px;}
div.category:hover{ background-color:#fff; border: 1px solid #64842F; box-shadow: 5px 5px 2px #ccc;}
div.catnavigation{padding:10px 0px 10px 12px; float:left; width:97%; font-size:1em; background-color:#eee; border-bottom: 1px solid #000; margin-bottom:2px;}
.catnavwrapper{background:#fff !important; border: 1px solid #fff !important;}
div.navdesc{display:none; /* Removes the text "View all products in all categories */}
div.catimage{width:95px; float:left;}
div.catdesc{padding:0px 0px 4px 4px; font-size:0.9em;}
div.catname{padding-left:4px; font-size:1.2em;}
div.catdiscounts, div.allcatdiscounts{padding:0px; margin:0px; font-weight:normal; color:#DA6B1D; font-size:0.9em;}
div.categorymessage{padding-top:0px; font-size: 1.1em;}
p.noproducts{padding-top:28px; text-align:left !important;}


/* The products page 
-------------------------------------*/

div.prodfilter{float:left; background-color:#F9F9F4; border: 1px dotted #D7D1C9; padding:6px; color: #42619a; margin-bottom:10px; margin-top:10px;}
div.prodfilterbar{float:left; width:100%;}
div.filtertext{padding:8px;}
select.prodfilter{padding:0px; margin:0px;}
div.product{padding:6px; width:30%; float:left; margin:2px;}

img.prodimage{width:100%; max-width: 220px; margin:auto; display:block;}
img.giantimage{max-width: 800px;}


div.prodname{padding-top:6px; font-size: 1.1em; margin-bottom:8px; text-align: center;}
div.listprice{width:98%; margin: auto; text-align: center; font-size: 0.9em; padding:6px;}
div.prodprice{font-size: 1em; font-weight:normal; width:98%; color:#666; margin: auto; text-align: center;}

.detailname {font-size: 1.4em; REMOVED-padding: 6px 0 10px 0; width:80%; margin:auto; text-align:center; REMOVED-border-bottom: 1px solid #ccc; margin-bottom: 20px;}
.detailname h1 {font-size: 1.2em; padding:6px; float:right; width:66%; margin-top:10px; margin-bottom:12px; border-bottom: 1px solid #ccc;}
div.prodnavigation{padding:10px 0px 10px 12px; float:left; width:97%; font-size:0.9em; background-color:#eee; border-bottom: 1px solid #000; margin-bottom:10px;}

div.detailimage{width:100%; padding:10px; float:left; clear:both; } 
		


		@media screen and (max-width: 500px) {div.product, div.prodnavigation{width:95%;}}

.prodratinglink{font-size:0.8em;}
div.allproddiscounts{color:#DA6A1E; width:100%; margin-bottom:2px; float:left;}
.proddiscounts, .discountsapply{color:#DA6A1E; padding:4px;}
div.prodmanufacturer{color:#666; padding:6px;}
div.prodsku{color:#666; padding:6px;}
div.prodimage{padding-top: 6px; text-align:center; border:1px solid #fff; /* changed to white to hide the outline except on mouseover*/ background-color:#fefefe;}
div.prodimage:hover{background-color:#fefefe; border: 1px solid #D3D3D3;; box-shadow: 5px 5px 2px #ccc;}



div.prodrating{padding-left:4px;}
div.prodinstock{padding:4px; color:#666}
div.proddescription{padding:6px; float:left; font-size: 0.9em; line-height: 1.5em;}
table.emftbl{background:#fff; width:400px;}

span.yousave{background:#0065A7; color:#fff; padding:4px; font-size:0.9em;}

div.prodcurrency{float:left; width:100%; font-size: 0.8em; color:#666;}
div.quantitydiv{float:right;}
.quantityinput{margin-top:1px; height:19px;}
div.addtocart{text-align:center; float:left; width:100%;}
.notifystock{text-align:center; float:left; width:100%;}
.configbutton{text-align:center; margin-top:6px;}
div.outofstock{text-align:center; padding-top:6px; font-weight:bold;}
.prodid {color:#666; padding:6px; font-size: 0.9em;}
div.multioptiontext{width:180px;}
div.pagenums{text-align:center; float:left; padding:0px 0px 10px 0px;}




/* The product info & sizing chart stuff
-------------------------------------*/

/*#GWS-size-chart-table{
 margin:10px 0; 
   text-align:left;  
}
#GWS-size-chart-table td{
  border: 1px solid #725D21;
}

#GWS-sizetable{
  background:#ffffff;
  border-collapse: collapse;

}
#background td{
  border:solid 1px #725D21;
}

#GWS-size-chart-table .table-color{
color:#ffffff;
background:#725D21;
}
/*#workshop-product-info {
    margin: 10px 0px;
    width: 90%;
    overflow: hidden;
    border-top: 1px solid #714F2E;}

.workshop-title3 {
    color: #725D21;
}
.workshop-title3 {
    width: 90%;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 0px auto;
    padding: 10px;*/

/* The product detail page 
-------------------------------------*/
div.detailprodnavigation{width:99%;}

option.oostock {color: #A0A0A0;} /*custom: make oos prodoptions show up in gray */

img.detailimage{width:100%; max-width: 500px; /*max-height: 500px;*/ margin:auto; display:block;} 
/*@media screen and (max-width: 500px) {img.detailimage{width:100%;}}*/

div.detailcheckoutbutton{clear:both;}

div.detailid {color:#ccc; width:74%; font-size: 1em; float:left; margin-left:10px; display: none;} /*display:none is there because detailid id just being used to reduce image width for shirts, etc  */

span.detaildiscountsapply{width:70%; margin-left:36px;}

div.detailmanufacturer{float:left; width:76%; margin:0px 0px 0px 10px; padding:0px;}
div.detailsku{float:left; width:76%; margin:10px; }
div.detailinstock{float:right; width:76%;}
div.detaildescription{font-size: 0.9em; margin: 10px 10% 10px 10%;; padding-top:4px; line-height:1.8em; float:right; width:80%;}
div.detailprice{font-size: 1.2em; font-weight:bold; float:right; width:50%; color:#333; margin-left:10px; padding-top: 15px;}
div.detaillistprice{ font-size: 1em; font-weight:normal; float:right; width:50%; padding-top:6px; color:#DA6A1E;}
div.detailcurrency{padding-top: 6px; font-size: 0.9em; float:right; width:50%; color:#666; margin-left:10px; padding-bottom:20px;}
@media screen and (max-width: 400px) {div.detailcurrency {display:none;}}
div.detaildiscounts{padding: 10px; font-size: 0.9em; float:right;}

div.detailoption{width:100%;}
div.detailoptions{padding: 6px; float:left; width:100%; margin-left:0px;}
select.detailprodoption{font-size: 0.9em; width:100%; max-width: 250px; margin:7px; border:1px solid #ccc; padding:2px;}
input.detailprodoption{font-size: 0.9em; margin:7px; border:1px solid #ccc; padding:2px;}
div.detailoptiontext{padding: 6px; float:left; clear:both;removed width: 320px;} /*removed width: 320px*/
@media screen and (max-width: 400px) {div.detailoptiontext {float:none;}}
div.detailmultioptiontext{padding: 10px; width:40%; border-style: solid; border-width: 2px 2px 2px 2px; margin: 10px; display: inline-block; vertical-align: top; text-align:center;}
img.multiimage{display: inherit; max-width: 220px; width: 100%;}

.previousnext{padding-top:20px; padding-bottom:6px; float:right; width:100%; text-align:center; font-size:0.8em; border-top:1px solid #ccc;}
div.emailfriend{padding-top: 10px; text-align:center; float:right; width:100%; font-size:0.9em; clear:both; margin: 0 0 15px 0;}

td.emfhl{background-color:#aaa; font-size:1.2em; color:#fff; font-weight:bold;}
td.emfll{line-height:18px;}

div.detailquantity{float: right; width: 100%; margin: 20px 5px 5px 10px;}
div.detailquantitytext{margin-top:8px; float:left; width:30%; text-align:right;}
div.detailquantityinput{margin-top:16px; float:right; width:50%; text-align:left; padding:0px; }

#w0quant{height:21px; width:50px; border:1px solid #ccc;}

div.detailaddtocart,.detailoutofstock,.detailwishlist{float:right; width:50%; text-align:left; padding-bottom:20px; margin-top:10px;}

.detailnotifystock{text-align:center; padding-top:6px; float:left; width:98%;}
div.navdesc{padding-top:10px;}
div.review{float:left; margin-top:16px; width:90%; font-size:0.9em;}
hr.review{height: 0; border-width: 1px 0 0 0; border-style: solid; border-color: #bbb; padding:4px; margin-top:6px;}
div.reviewprod{background-color:#eee; padding:10px;}

/* This is the first breakpoint and is for screen sizes between 800 and 780 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: 800px) { 

.menu_right { display:none;}	
.menu_right2 { display:inherit; float: left; padding-bottom: 10px; width: 100%; border-bottom: 2px solid #E5E5E5;}
.menu_right2 .searchBox { float: right; margin: 15px 0 0 20px; position: relative; width: 210px;}
.menu_right2 .basket { background: url("../images/cart_icon.png") no-repeat scroll 0 3px rgba(0, 0, 0, 0); float: left; margin-right: 10px; margin-top: 14px; padding: 5px 5px 5px 25px;}
/*.logo_row {padding: 50px 15px 40px;}*/
/*.logo_right {width: 64%;}*/
/*.welcome_msg {clear: both; float: none; margin-right: 0; padding-top: 10px; text-align: right;}*/

.service_section {padding: 15px 15px;}
.nec_collection_banner { margin-top: 13px;}

.icon_refresh { margin-right: 27px; margin-bottom:10px;}

.searchBox {margin: 15px 15px 0 20px;max-width: 300px;}

.footer_space { padding: 30px 15px 0;}
.bottom_links { float: none; padding-left: 0; text-align: center;}
.newsletter { float: none; margin: 20px auto; width: 345px;}

}

/* This is the second breakpoint and is for screen sizes between 780 and 640 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 only screen and (max-width: 780px) {

div.category{width:90%;}
.detailname h1, span.detaildiscountsapply, {width:95%; font-size: 1.2em;}
span.detaildiscountsapply{margin-left:44px;}
div.detailimage{}
div.detailoptions{width:90%;}
div.detailmultioptiontext{width:45%;}

}

/* This is the third breakpoint and is for screen sizes between 640 and 500 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: 640px) { 

h1.logo { float: none; text-align: center; margin-bottom:10px;}
/*.logo_right { text-align: center; width: 100%;}
ul.topLink {float: none;}
ul.topLink li {display: inline; float: none; padding: 10px 0 0 15px;}
.welcome_msg { text-align:center;}*/

/*.logo_right {float: none;}*/
.basket_header { padding:0px; margin-top:20px; display: block; background:none; float:none; text-align:center; clear:both;}
.basket_header a { background:url(../images/cart_icon.png) no-repeat 0 0px; padding-left:25px;}

.icon_refresh { width:100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */}

.sidebar { float: none; margin-bottom: 20px; width: 96%; padding:0 15px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.col_right { float: none; width: 100%; padding:0 15px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

}


/* This is the fourth breakpoint and is for screen sizes between 500 and 360 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: 500px) {

/*.logo_row { margin:0px; padding:10px 0 10px 0;}*/

div.icon_refresh, div.icon_truck, div.icon_phone{display:none;} /* Removes the offers from the top fo home page on small displays - remove this line if you want them to appear */

div.basket, div.basket_dis { float: left; margin-right: 0px; margin-top: 10px; padding: 5px;width:40%;}
div.service_section{padding:0px; width:98%;}
.menu_right2 .searchBox { float: right; margin: 15px 0 0 0px; position: relative; width: 210px;}

.offer-banner-section .col, .offer-banner-section .col-m, .offer-banner-section .col-last {float: none; width: 100%;  text-align:center; margin-bottom:20px; margin-left:0px;}
.offer-banner-section .col img, .offer-banner-section .col-last img { width:auto; max-width:100%;}

.product_listing li {float:none; margin: 0 0 20px; width: 100%; padding:0 15px; 
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */ }
.product_listing li .product_img_box { text-align:center;}
.product_listing li .product_img_box a img { max-width: 100%;  width: auto;}
.product_listing h2{text-align:center;}

div.item{ width: 100%; text-align:center;}


.footer_social_row {text-align: center; padding: 15px 0;}
ul.footer_social_icon {float: none;}
ul.footer_social_icon li { display: inline; float: none; padding:0;}
.payment_icon { float: none; margin-top: -5px; width:100%; max-width:280px;}

.footer_space { padding: 30px 20px 0;}
.footer_column { float: none; margin-bottom: 15px; width: 100%;}

.bottom_links ul {margin: 10px 0 0 -10px;}

.detailname h1, span.detaildiscountsapply, {width:95%; font-size: 1.2em;}

span.detaildiscountsapply{margin-left:10px;}

div.detailmultioptiontext{width:95%;}
div.category{width:85%;}

 /* ~~ Remove left hand field on checkout ~~*/
.cobcol1{display:none;}

/* ~~ Modify additional info field on checkout ~~*/
textarea.addinfo{width:150px;}


}


/* This is the fifth breakpoint and is for screen sizes between 360 and below. 
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: 460px) { 

.icon_phone { float:left; margin-top:10px;}
.menu_right2 .basket { float:left;}
.menu_right2 .searchBox { margin-left:0px;}
.menu_right2 .searchBox {width: 120px;}
}


@media screen and (max-width: 320px) { 



}


/* CHARACTER ICON MENU */

.character_icon_menu_wrapper{clear:both; padding:10px 0; text-align:center; border-top:1px solid black;}
.character_icon_menu_item_wrapper{padding:10px 6px; float:left; width:90px;}
.character_icon_menu_item_image{height:87px; overflow:hidden;}
.character_icon_menu_item_name{padding:5px 0px; height:23px;}