diff --git a/ext/clarico-addons/clarico_attribute_filter/template/template.xml b/ext/clarico-addons/clarico_attribute_filter/template/template.xml
index 0dd2dbb2..8da14a44 100755
--- a/ext/clarico-addons/clarico_attribute_filter/template/template.xml
+++ b/ext/clarico-addons/clarico_attribute_filter/template/template.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-	<template id="clarico_attribute_filter_clarico_filter" inherit_id="clarico_shop.clarico_shop_shop_page">
+	<template id="clarico_attribute_filter_clarico_filter" inherit_id="website_sale.products_categories">
 		<xpath expr="//div[hasclass('main')]" position="after">
 		<div class="filter-main-div">
         	<div class="filter-div-maxW">
diff --git a/ext/clarico-addons/clarico_base/static/src/less/owl.carousel.min.less b/ext/clarico-addons/clarico_base/static/src/less/owl.carousel.min.less
new file mode 100755
index 00000000..1ece042a
--- /dev/null
+++ b/ext/clarico-addons/clarico_base/static/src/less/owl.carousel.min.less
@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.2.1
+ * Copyright 2013-2017 David Deutsch
+ * Licensed under  ()
+ */
+.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
\ No newline at end of file
diff --git a/ext/clarico-addons/clarico_base/static/src/less/owl.theme.default.min.less b/ext/clarico-addons/clarico_base/static/src/less/owl.theme.default.min.less
new file mode 100755
index 00000000..59836030
--- /dev/null
+++ b/ext/clarico-addons/clarico_base/static/src/less/owl.theme.default.min.less
@@ -0,0 +1,6 @@
+/**
+ * Owl Carousel v2.2.1
+ * Copyright 2013-2017 David Deutsch
+ * Licensed under  ()
+ */
+.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
\ No newline at end of file
diff --git a/ext/clarico-addons/clarico_base/template/assets.xml b/ext/clarico-addons/clarico_base/template/assets.xml
index 6350c582..52309676 100755
--- a/ext/clarico-addons/clarico_base/template/assets.xml
+++ b/ext/clarico-addons/clarico_base/template/assets.xml
@@ -9,13 +9,13 @@
 			
 			<!-- Owl-Carosel css -->
 			<link rel="stylesheet" type="text/less"
-				href="/clarico_base/static/src/less/owl.carousel.min.css" />
+				href="/clarico_base/static/src/less/owl.carousel.min.less" />
 			<link rel="stylesheet" type="text/less"
-				href="/clarico_base/static/src/less/owl.theme.default.min.css" />
+				href="/clarico_base/static/src/less/owl.theme.default.min.less" />
 			
 			<!-- Owl-Carosel Js -->
 			<script src="/clarico_base/static/src/js/owl.carousel.js"
 				type="text/javascript"></script>
 		</xpath>
 	</template>
-</odoo>
\ No newline at end of file
+</odoo>
diff --git a/ext/clarico-addons/clarico_blog/templates/template.xml b/ext/clarico-addons/clarico_blog/templates/template.xml
index ef85c482..6103de20 100755
--- a/ext/clarico-addons/clarico_blog/templates/template.xml
+++ b/ext/clarico-addons/clarico_blog/templates/template.xml
@@ -22,7 +22,76 @@
             <attribute name="class">lb_name</attribute>
         </xpath>
 	</template>
-	
+
+	<template id="clarico_blog_blog_post_short" inherit_id="website_blog.blog_post_short">
+		<xpath expr="//t/div[@class='container'][1]" position="attributes">
+			<attribute name="class">block</attribute>
+		</xpath>
+		<xpath expr="//div[@class='oe_structure']/section/div[@class='container']"
+			position="attributes">
+			<attribute name="class">block</attribute>
+		</xpath>
+		<xpath expr="//t/div[4]" position="attributes">
+			<attribute name="class">block blog_main</attribute>
+		</xpath>
+		<xpath expr="//t/div[4]/div[hasclass('row')]" position="attributes">
+			<attribute name="class">sub-blog_main</attribute>
+		</xpath>
+		<xpath expr="//div[@id='main_column']" position="attributes">
+			<attribute name="class">blogpost_left_main</attribute>
+		</xpath>
+		<xpath expr="//h1[@t-field='blog.name']" position="attributes">
+			<attribute name="class">catg_title_main_blog ch_h1_class ch_h1_class_new
+			</attribute>
+		</xpath>
+		<xpath expr="//h3[@t-field='blog.subtitle']" position="attributes">
+			<attribute name="class">ctg_subtitle_main</attribute>
+		</xpath>
+		<xpath expr="//div[@name='blog_post']/div[@class='text-muted']"
+			position="replace">
+			<div class="blog_post_data_more">
+				<t t-foreach="blog_post.tag_ids" t-as="one_tag">
+					<a class="blog_post_tabs_a"
+						t-attf-href="#{blog_url(tag=one_tag.id, date_begin=False, date_end=False)}"
+						t-esc="one_tag.name" />
+				</t>
+				<span class="seprater">-</span>
+				<span class="blog_post_date" t-field="blog_post.post_date"
+					t-options='{"format": "MMMM, yyyy"}' />
+
+				<span class="seprater">-</span>
+				<span class="blog_post_author-static">
+					By
+					<span class="blog_post_author" t-field="blog_post.author_id"
+						style="display: inline-block;"
+						t-options='{
+		                           "widget": "contact",
+		                           "fields": ["name"]
+		                       }' />
+				</span>
+			</div>
+
+			<div class="blog-post-subtitle-div">
+				<!-- <p t-field="blog_post.subtitle" class="blog-post-subtitle">Untitled 
+					Post</p> -->
+				<p t-field="blog_post.teaser" class="blog-post-subtitle o_blog_post_teaser" />
+			</div>
+			<div class="o_sharing_links social-icons">
+				<a class="o_twitter">
+					<i class="fa fa-twitter"></i>
+				</a>
+				<a class="o_facebook">
+					<i class="fa fa-facebook"></i>
+				</a>
+				<a class="o_linkedin">
+					<i class="fa fa-linkedin"></i>
+				</a>
+				<a class="o_google">
+					<i class="fa fa-google-plus"></i>
+				</a>
+			</div>
+		</xpath>
+	</template>
 	
 	<template id="clarico_blogs_post_complete" inherit_id="website_blog.blog_post_complete">
 		<xpath expr="//p[2][@class='post-meta text-muted text-center']"
diff --git a/ext/clarico-addons/clarico_brand/template/template.xml b/ext/clarico-addons/clarico_brand/template/template.xml
index ec723b53..cb692ee5 100755
--- a/ext/clarico-addons/clarico_brand/template/template.xml
+++ b/ext/clarico-addons/clarico_brand/template/template.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-	<template id="clarico_brand_form" inherit_id="clarico_shop.clarico_shop_shop_page">
+	<template id="clarico_brand_form" inherit_id="website_sale.products_attributes">
 		<xpath expr="//form/ul[@class='nav nav-pills nav-stacked mt16']"
 			position="inside">
 			<t t-if="brand_list">
diff --git a/ext/clarico-addons/clarico_brand/view/brand.xml b/ext/clarico-addons/clarico_brand/view/brand.xml
index a09b4680..9eaeed93 100755
--- a/ext/clarico-addons/clarico_brand/view/brand.xml
+++ b/ext/clarico-addons/clarico_brand/view/brand.xml
@@ -20,7 +20,7 @@
 				<sheet>
 				<group>
 					<field name="name" string="Name" />
-					<field name="brand_image" string="Image" widget="image" class="oe_avatar" options="{'preview_image': 'image_medium', 'size': [150,150]}" />
+					<field name="brand_image" string="Image" />
 					<field name="is_website_publish" string="Website Publish" />
 				</group>
 				</sheet>
@@ -40,4 +40,4 @@
 		<menuitem action="brand_action" id="brand_menu" parent="website.menu_website_global_configuration"
 			sequence="0" />
 	</data>
-</odoo>
\ No newline at end of file
+</odoo>
diff --git a/ext/clarico-addons/clarico_cart/static/src/js/clarico_cart.js b/ext/clarico-addons/clarico_cart/static/src/js/clarico_cart.js
index 810a6780..dc5f7da6 100755
--- a/ext/clarico-addons/clarico_cart/static/src/js/clarico_cart.js
+++ b/ext/clarico-addons/clarico_cart/static/src/js/clarico_cart.js
@@ -79,7 +79,7 @@ odoo.define('clarico_cart.cart', function (require) {
         setTimeout(function () {
             if (!$(".popover:hover").length) {
                 if(!$(self).is(':hover')) {
-//                   $(self).popover('hide');
+                   $(self).popover('hide');
                 }
             }
         }, 1000);
diff --git a/ext/clarico-addons/clarico_cart/static/src/less/cart_responsive.less b/ext/clarico-addons/clarico_cart/static/src/less/cart_responsive.less
index af037211..29535f76 100755
--- a/ext/clarico-addons/clarico_cart/static/src/less/cart_responsive.less
+++ b/ext/clarico-addons/clarico_cart/static/src/less/cart_responsive.less
@@ -122,6 +122,10 @@
 	{
 		overflow:hidden;
 	}
+	.address-row-main-div .checkout_autoformat
+	{
+		width:100%;
+	}
 }
 @media (max-width:800px){
 
@@ -164,6 +168,9 @@
 		margin:unset;
 		.mt(2%);
 	}
+	.address-row-main-div .form-group {
+    width: 100%;
+    }	
 }
 @media (max-width:600px){
 	#cart_total
diff --git a/ext/clarico-addons/clarico_cart/static/src/less/clarico_cart.less b/ext/clarico-addons/clarico_cart/static/src/less/clarico_cart.less
index 40c62ca9..385a42c5 100755
--- a/ext/clarico-addons/clarico_cart/static/src/less/clarico_cart.less
+++ b/ext/clarico-addons/clarico_cart/static/src/less/clarico_cart.less
@@ -1,3 +1,9 @@
+#order_delivery .text-right {
+    text-align: left !important;
+}
+#order_delivery .text-left-xs {
+    text-align: right !important;
+}
 .cart_style_2
 {
 	display:none;
@@ -434,6 +440,11 @@
 	.checkout_autoformat
 	{
 		width:75%;
+		
+		.has-error .form-control
+		{
+			border-color: #c51111 !important;
+		}
 	}
 	
 	.wizard-main-ul
diff --git a/ext/clarico-addons/clarico_cart/templates/template.xml b/ext/clarico-addons/clarico_cart/templates/template.xml
index cc1a7700..3cdbe022 100755
--- a/ext/clarico-addons/clarico_cart/templates/template.xml
+++ b/ext/clarico-addons/clarico_cart/templates/template.xml
@@ -1,5 +1,47 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+	  <template id="clarico_cart_header_icon" inherit_id="clarico_layout.clarico_header_main">
+		<xpath expr="//div[hasclass('header_cart_main')]"
+			position="inside"  priority="25">
+			<div class="cart_style_2">
+			<t t-set="website_sale_order" t-value="website.sale_get_order()" />
+			<a href="/shop/cart">
+				<i class="fa fa-shopping-bag" aria-hidden="true"></i>
+				<sup t-attf-class="my_cart_quantity label label-primary"
+					t-esc="website_sale_order and website_sale_order.cart_quantity or ''" />
+				<input type="hidden" id="hiddencount" t-att-value="website_sale_order and website_sale_order.cart_quantity or '0'" />
+			</a> 
+			</div>
+				<div class="cart-update">
+				<span class="cart-update-text">
+				<t t-set="website_sale_order" t-value="website.sale_get_order()" />
+					<span class="my_cart_quantity label"
+						t-esc="website_sale_order and website_sale_order.cart_quantity or '0'" >
+					</span>
+					<t t-if="website_sale_order.cart_quantity > 1" >
+						<span>items : </span>
+						<span class="cart-header-total" t-field="website_sale_order.amount_total"
+						t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
+					</t>
+					<t t-if="website_sale_order.cart_quantity == 1" >
+						<span>item :</span>
+						<span class="cart-header-total" t-field="website_sale_order.amount_total"
+						t-options="{'widget': 'monetary','from_currency': website_sale_order.pricelist_id.currency_id,'display_currency': website.currency_id}" />
+					</t>
+					<t t-if="website_sale_order.cart_quantity == 0" >
+						<span>item </span>
+					</t>
+			</span>
+			<span id="cart-update-icon" class="cart-update-icon">
+				<t t-set="website_sale_order" t-value="website.sale_get_order()" />
+	            <a href="/shop/cart">
+	                <i class="fa fa-shopping-bag"></i>
+	                <input type="hidden" id="hiddencount" t-att-value="website_sale_order and website_sale_order.cart_quantity or '0'" />
+	            </a>
+			</span>
+			</div>
+		</xpath>
+	</template>
 
 	<!-- Cart in Account-->
     <template id="clarico_account_cart" inherit_id="clarico_account.clarico_account_clarico_layout">
@@ -58,9 +100,9 @@
                     <tr>
                         <td colspan="2" t-if="not line.product_id.product_tmpl_id" class='td-img'></td>
                         <td align="center" t-if="line.product_id.product_tmpl_id" class='td-img'>
-                            <span t-field="line.product_id.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
+                            <div t-field="line.product_id.image" t-options="{'widget': 'image','resize': '150x150','class':'img-rounded'}" />
                         </td>
-                        <td t-if="line.product_id.product_tmpl_id">
+                        <td t-if="line.product_id.product_tmpl_id" class="td-product_name">
 			                 <div class="cart_product_name">
 			                     <a t-attf-href="/shop/product/#{ slug(line.product_id.product_tmpl_id) }">
 			                         <strong t-esc="line.product_id.with_context(display_default_code=False).name" />
@@ -154,6 +196,7 @@
               <!--   <p>
                   Have a promo code? Fill in this field and apply.
                 </p> -->
+                <p></p>
                 <t t-call='website_sale.coupon_form'/>
             </div>
         </xpath>
@@ -460,6 +503,27 @@
 		<xpath expr="//div[hasclass('row')]/t[3]/h2" position="replace">
 			   <h2 class="page-header mt8 ml16 sub-heading">Shipping Address</h2>
 		</xpath>
+		<xpath expr="//form[hasclass('checkout_autoformat')]/div[1]" position="attributes">
+			<attribute name="t-attf-class">form-group #{error.get('name') and 'has-error' or ''} col-md-12 div_name o_website_form_required_custom</attribute>
+		</xpath>
+		<xpath expr="//div[@id='div_email']" position="attributes">
+			<attribute name="t-attf-class">form-group #{error.get('email') and 'has-error' or ''} col-md-6 o_website_form_required_custom</attribute>
+		</xpath>
+		<xpath expr="//div[@id='div_phone']" position="attributes">
+			<attribute name="t-attf-class">form-group #{error.get('phone') and 'has-error' or ''} col-md-6 o_website_form_required_custom</attribute>
+		</xpath>
+		<xpath expr="//form[hasclass('checkout_autoformat')]/div[6]" position="attributes">
+			<attribute name="t-attf-class">form-group #{error.get('street') and 'has-error' or ''} col-md-12 div_street o_website_form_required_custom</attribute>
+		</xpath>
+		<xpath expr="//form[hasclass('checkout_autoformat')]/div[9]" position="attributes">
+			<attribute name="t-attf-class">form-group #{error.get('city') and 'has-error' or ''} col-sm-8 div_city o_website_form_required_custom</attribute>
+		</xpath>
+		<xpath expr="//form[hasclass('checkout_autoformat')]/div[11]" position="attributes">
+			<attribute name="t-attf-class">form-group #{error.get('country_id') and 'has-error' or ''} col-md-6 div_country o_website_form_required_custom</attribute>
+		</xpath>
+		<xpath expr="//form[hasclass('checkout_autoformat')]/div[12]" position="attributes">
+			<attribute name="t-attf-class">form-group #{error.get('state_id') and 'has-error' or ''} col-md-6 div_state o_website_form_required_custom</attribute>
+		</xpath>
 	</template>
 	
 	
@@ -496,7 +560,7 @@
                     <tr t-foreach="suggested_products" t-as="product">
                         <td class='td-img'>
                             <a t-attf-href="/shop/product/#{ slug(product.product_tmpl_id) }">
-                                <span t-field="product.image_small" t-options="{'widget': 'image', 'class': 'img-rounded'}" />
+                                <span t-field="product.image" t-options="{'widget': 'image', 'class': 'img-rounded','resize':'150x150'}" />
                             </a>
                         </td>
                         <td class='td-product_name'>
diff --git a/ext/clarico-addons/clarico_compare/static/src/less/compare.less b/ext/clarico-addons/clarico_compare/static/src/less/compare.less
index 169b025d..082555f2 100755
--- a/ext/clarico-addons/clarico_compare/static/src/less/compare.less
+++ b/ext/clarico-addons/clarico_compare/static/src/less/compare.less
@@ -372,6 +372,7 @@
 	.mr(10px);
 	vertical-align: top;
 }
+
 @media (min-width:800px){
 	.non-carousel{
 		& .compare_main{
@@ -394,6 +395,7 @@
 		max-width: 100%;
 		margin: 0px auto;
 	}
+
 }
 
 /* Specification table  */
@@ -438,3 +440,17 @@
 		.pr(10px); 
 	}
 }
+
+.spec_sep_res
+{
+	display:none;
+}
+@media(max-width:1200px)
+{
+	.spec_sep_res
+	{
+		display: inline-block;
+	}
+}
+
+
diff --git a/ext/clarico-addons/clarico_compare/templates/template.xml b/ext/clarico-addons/clarico_compare/templates/template.xml
index 893304fb..62c01c1e 100755
--- a/ext/clarico-addons/clarico_compare/templates/template.xml
+++ b/ext/clarico-addons/clarico_compare/templates/template.xml
@@ -124,7 +124,7 @@
 	                                        <span class=''>x</span>
 	                                    </a>
 										<div class="compare_img_div compare_product_img">
-											<div t-field="product.image_medium" t-options="{'widget': 'image' }" />
+											<div t-field="product.image" t-options="{'widget': 'image','resize': '600x600'}" />
 
 											<div class="sale-div" t-if="product.label_ept_id">
 												<div t-field="product.label_ept_id" class="sale-btn"></div>
@@ -257,9 +257,9 @@
                                         </tr>
                                     </t>
                                     <tr t-foreach="atts[spec]" t-as="att" t-att-class="'collapse in ' + spec.split()[0]">
-                                        <td t-esc="att.attribute_id.name"/>
+                                        <td t-esc="att.attribute_id.name"></td>
                                         <td>
-                                            <t t-set='or_separator'>or</t>
+                                           <span class="spec_sep_res">:</span> <t t-set='or_separator'>or</t>
                                             <t t-esc="(' %s ' % or_separator).join(att.value_ids.mapped('name'))"/>
                                         </td>
                                     </tr>
diff --git a/ext/clarico-addons/clarico_customize_color/static/src/js/snippet_bg_color_js.js b/ext/clarico-addons/clarico_customize_color/static/src/js/snippet_bg_color_js.js
index c81ffe0f..f15bf1a8 100755
--- a/ext/clarico-addons/clarico_customize_color/static/src/js/snippet_bg_color_js.js
+++ b/ext/clarico-addons/clarico_customize_color/static/src/js/snippet_bg_color_js.js
@@ -18,7 +18,6 @@ options.registry.set_custom_color = options.Class.extend({
         
         start: function(){
         	var self = this;
-        	
         },
         set_color: function(type,value) {
             var self = this;
@@ -55,20 +54,22 @@ options.registry.set_custom_color = options.Class.extend({
             	
             	if(isValidColor){
             		color_global = color;
-            		self.$target.addClass('custom')
-            		Utils.set_cookie('ept'+color,color,60*60*24)
-            		
+            		if(self.$target.hasClass("carousel") == true){
+            			self.$target.find(".item.active").css('background-color',color_global);
+            			Utils.set_cookie('ept'+color,color,60*60*24);
+            		}else{
+            			self.$target.css('background-color',color_global);
+	            		Utils.set_cookie('ept'+color,color,60*60*24);
+            		}
             	}else{
             		alert("Invalid Color Code! Please enter correct format.")
             		self.set_color('click');
             	}
-       
-            	
             })
             return def;
         },
         cleanForSave:function(){
-        	this.$target.closest('.custom').css('background-color',color_global)
+        	//this.$target.find('.active.custom').css('background-color',color_global)
 	    }
     });
 });
diff --git a/ext/clarico-addons/clarico_expertise/templates/template.xml b/ext/clarico-addons/clarico_expertise/templates/template.xml
index ce0051f0..c42f0007 100755
--- a/ext/clarico-addons/clarico_expertise/templates/template.xml
+++ b/ext/clarico-addons/clarico_expertise/templates/template.xml
@@ -2,6 +2,7 @@
 <odoo>
 	<!-- ===================== ABOUT US ========================== -->
 	<template id="expertise" name="Expertise" inherit_id="website.aboutus">
+<!--
 		<xpath expr="//h1" position="attributes">
 			<attribute name="class">ch_h1_class text-center abt_h1_margin</attribute>
 		</xpath>
@@ -50,6 +51,7 @@
 		<xpath expr="//section[2]/div[hasclass('container')]" position="attributes">
 			<attribute name="class">container hidden</attribute>
 		</xpath>
+-->
 	</template>
  <template id="clarico_expertise_about_us" inherit_id="website_hr.aboutus">
 		<xpath expr="//img[hasclass('img-rounded')]" position="attributes">
diff --git a/ext/clarico-addons/clarico_layout/data/data.xml b/ext/clarico-addons/clarico_layout/data/data.xml
index ff24cf2c..71172186 100755
--- a/ext/clarico-addons/clarico_layout/data/data.xml
+++ b/ext/clarico-addons/clarico_layout/data/data.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <odoo>
-	<data noupdate="0">
+	<data noupdate="1">
 		<record id="clarico_categories" model="website.menu">
 			<field name="name">Categories</field>
 			<field name="parent_id" ref="website.main_menu" />
diff --git a/ext/clarico-addons/clarico_layout/static/src/js/custom_header.js b/ext/clarico-addons/clarico_layout/static/src/js/custom_header.js
index ac44fb09..ec37aaba 100755
--- a/ext/clarico-addons/clarico_layout/static/src/js/custom_header.js
+++ b/ext/clarico-addons/clarico_layout/static/src/js/custom_header.js
@@ -1,7 +1,20 @@
 $(document).ready(function(){ 
 	if ($(window).width() > 1200) {
 		
+		
 		$('#top_menu > li > a').mouseenter(function(){
+			$('#top_menu > li').each(function(){
+				
+				var menu_height =$(this).position().top;
+				var li_height = $(this).height(); 
+				var mega_menu_top = menu_height + li_height;
+				
+					$(this).find('.custom-menu-inside-div').css("top",mega_menu_top);
+					$(this).find('ul').css("top",mega_menu_top);
+				
+			})
+			
+			
 			if ($(this).next().hasClass('custom-menu-inside-div')){
 				$(this).next('.custom-menu-inside-div').css("display","block");
 				var first_li = $('.first-level-category-li').first('li');
@@ -30,12 +43,25 @@ $(document).ready(function(){
 		});
 		
 		// Dynamic category hover
-		$('.first-level-category-li').mouseenter(function(){
-			var self =$(this) 
-			var first_div = $(self).find('.first-level-left-div');
-			first_div.addClass("active-li");
-			self.find('.toggel_div').css("display","block");
-			self.find('.toggel_div').find('.menu_1_div').css("display","block");
+		$('.first-level-category-li').each(function(){
+			var self =$(this);
+			var str =self.attr('id');
+			var suffix = str.match(/\d+/).toString();
+
+			$(self).mouseenter(function(){
+				var first_div = $(self).find('.first-level-left-div');
+				first_div.addClass("active-li");
+				self.find('.toggel_div').css("display","block");
+				
+				$('.toggel_div').each(function(){
+					var append_div = $(this).attr('id').match(/\d+/).toString();;
+					if(suffix == append_div)
+						{
+							$('.toggel_div').css("display","none");
+							$(this).css("display","block").find(".menu_1_div").css("display","block");
+						}
+				})
+			})
 		});
 		$('.first-level-category-li').mouseleave(function(){
 			var self =$(this)
@@ -158,7 +184,38 @@ $(document).ready(function(){
 	});
 	
 	// Dropdown manu
-	$('.dropdown-submenu span.submenu-a').on("click", function(e){
+		if ($(window).width() < 1200) {
+		
+	$('.first-level-category-li.dropdown-submenu').each(function(){
+		var self =$(this);
+		var str =self.attr('id');
+		var suffix = str.match(/\d+/).toString();
+
+		$('div.toggel-div-effect').each(function(){
+			var append_div = $(this).attr('id').match(/\d+/).toString();;
+			if(suffix == append_div)
+				{
+					$(this).appendTo(self);
+					
+				}
+		})
+		$(self).find('span.submenu-a').click(function(e){
+			$(this).next('ul').toggle();
+			$(this).next('div.toggel-div-effect').toggle();
+			e.stopPropagation();
+			e.preventDefault();
+			
+			var clicks = $(this).data('clicks');
+			if (clicks) {
+				$(this).removeClass("fa-chevron-down").addClass("fa-chevron-right");
+			} else {
+				$(this).removeClass("fa-chevron-right").addClass("fa-chevron-down");
+			}
+			$(this).data("clicks", !clicks);
+		})
+	});
+	}
+	$('.category-heading-div.dropdown-submenu span.submenu-a').on("click", function(e){
 		$(this).next('ul').toggle();
 		$(this).next('div.toggel-div-effect').toggle();
 		e.stopPropagation();
@@ -196,17 +253,41 @@ $(document).ready(function(){
 		$("body").removeClass("scroll_remove");
 	})
 });
-
-// Show first category by default on load the window
+//Show first category by default on load the window
 $(window).load(function(){
+	if ($(window).width() > 1200) {
 	var first_li = $('.first-level-category-li').first('li');
 	first_li.find('.first-level-left-div').addClass('active-li');
-	first_li.find('.toggel_div').find('.menu_1_div').css("display","block");
-	first_li.find('.toggel_div').css("display","block");
-	
+
+	var str =first_li.attr('id');
+	var suffix = str.match(/\d+/).toString();
+
+	$('div.toggel-div-effect').each(function(){
+		var append_div = $(this).attr('id').match(/\d+/).toString();;
+		if(suffix == append_div)
+		{
+			$(this).css("display","block").find(".menu_1_div").css("display","block");
+				
+		}
+	})
 	$("div.custom-menu-inside-div , ul.custom-menu-inside-div").closest("li").removeClass("active");
-	//$("div.custom-menu-inside-div , ul.custom-menu-inside-div").closest("li").find("a:first").removeAttr("data-toggle href");
+	}
 })
+$(document).ready(function(){ 
+	if ($(window).width() < 1200) {
+	$('#top_menu > li').each(function(){
+	if($(this).find(".dropdown-menu").length > 0)
+		{
+	$(this).find(" > a").append("<i class='fa fa-chevron-right' style='font-size:12px'/>")
+	 $(this).on("show.bs.dropdown hide.bs.dropdown", function(){
+			$(this).find("> a > i.fa").toggleClass("fa-chevron-right fa-chevron-down");
+		});
+		}
+	})
+	}
+})
+
+
 //for searching
 $(document).keyup(function(e) {
 	if (e.which == 27) {
diff --git a/ext/clarico-addons/clarico_layout/static/src/less/clarico_header.less b/ext/clarico-addons/clarico_layout/static/src/less/clarico_header.less
index 76f5cf16..4e05ab63 100755
--- a/ext/clarico-addons/clarico_layout/static/src/less/clarico_header.less
+++ b/ext/clarico-addons/clarico_layout/static/src/less/clarico_header.less
@@ -659,7 +659,7 @@
 	transition: 0.8s;
 }
 .header-stick .custom-menu-inside-div{
-	top:90% !important;
+	//top:90% !important;
 }
 .custom-menu-nth-div{
 	width: 70% !important;
@@ -1394,7 +1394,7 @@ ul#top_menu{
 }
 #top_menu ul.dropdown-menu{
 	right:auto;
-	top: 90%;
+//	top: 90%;
 //	width:100%;
 	
 	& .active > a{
@@ -1403,7 +1403,7 @@ ul#top_menu{
 }
 
 .header-stick #top_menu ul.dropdown-menu{
-	top:90% !important;
+//	top:90% !important;
 }
 .js_searchBox
 {
@@ -1606,6 +1606,10 @@ width: 30%;
 		.bg(transparent) !important;
 	}
 }
+.company_pricelist a.header_btn_style
+{
+	color: #000 !important;
+}
 .header_style_logo_stick
 {
 	display:none;
@@ -1742,6 +1746,39 @@ width: 30%;
 
 
 
+//category changes
+@media (min-width:1200px)
+{
+.main_ctg_list
+{
+	display: inline-block;
+	width: 30%;
+	max-height: 450px;
+	overflow: auto;
+	
+	.first-level-category-li .first-level-left-div
+	{
+		width: 100%;
+	}
+}
+.sub_ctg_list_main
+{
+	display: inline-block;
+	width: 70%;
+	position: absolute;
+	top: 0;
+}
+.toggel_div
+{
+	left:0;
+	right: auto;
+	width:100%;
+}
+.first-level-category .first-level-category-li:last-child .first-level-left-div
+{
+	border-bottom:0;
+}
+}
 
 
 
diff --git a/ext/clarico-addons/clarico_layout/static/src/less/header_responsive.less b/ext/clarico-addons/clarico_layout/static/src/less/header_responsive.less
index 3122b646..7c291631 100755
--- a/ext/clarico-addons/clarico_layout/static/src/less/header_responsive.less
+++ b/ext/clarico-addons/clarico_layout/static/src/less/header_responsive.less
@@ -273,6 +273,7 @@
 		margin:0;
 		.left !important;
 		display:none;
+		width:100%;
 	}
 	
 	.second_level-ul > li{
@@ -320,15 +321,37 @@
 		color:black !important;
 		.size(13px) !important;
 	}
-	.second-level-category-caret{
-		.mt(-15px) !important;
-	}
+
 	.category-heading-center h4 a{
 		color:#777777 !important;
 	}
 	.expand-div{
 		padding:0px 20px 0px 20px;
 	}
+
+	.navbar .navbar-top-collapse ul.navbar-right .dropdown-menu
+	{
+		box-shadow: unset;
+		border: 0;
+		.bg(#f5f5f5);
+		
+		.dropdown-menu
+		{
+			.bg(#f5f5f5);
+		}
+	}
+	ul#top_menu li ul.dropdown-menu {
+       	.mb(16px);
+	}
+	.second-level-category-caret
+	{
+		margin-top: 0 !important;
+		.size(12px);
+	}
+	.first-level-category-caret
+	{
+		.mt(15px);
+	}
 }
 @media (max-width:980px){
 	.main-header-left{
@@ -344,9 +367,6 @@
 	{
 		font-size: 13px;
 	}
-	.navbar-default .navbar-nav > li > a {
-		font-size: 12px;
-    }
     .company_details_footer
     {
     	width:100%;
@@ -472,9 +492,7 @@
 	.header-right .company-phone-div .dropdown .dropdown-toggle b span {
 		font-size: 11px !important;
 	}
-	.navbar-default .navbar-nav > li > a {
-		font-size: 12px;
-	}
+	
 	.nav navbar-nav navbar-right
 	{
 		float: right !important;
@@ -529,7 +547,9 @@
 	{
 		height:60px;
 	}
-	
+	.third-level-ul li {
+    	padding: 4px 0 4px 0;
+	}
 }
 
 @media (max-width:768px){
@@ -570,9 +590,6 @@
 		text-align: left;
 		margin-left: 20px;
 	}
-	.navbar-default .navbar-nav > li > a {
-		font-size: 12px;
-	}
 	.nav > li > a {
 		padding: 10px 9px !important;
 	}
@@ -602,10 +619,9 @@
 		display:none;
 		list-style: none;
 		.ml(15px);
-		
-		& li{
-			padding: 10px 0 10px 0;
-		}
+	}
+	ul#top_menu li ul.dropdown-menu {
+    	margin-bottom: 0;
 	}
 }
 
@@ -675,6 +691,19 @@
 			margin: 0 auto;
 		}
 	}
+	.first-level-category-a, .second-level-a, .third-level-ul li a {
+    	font-size: 13px;
+	}
+	ul#top_menu li ul.dropdown-menu {
+    margin-bottom: 0;
+	}
+	
+		.second-level-category-caret{
+		.mt(-15px) !important;
+	}
+	.sub-menu-ul-heading:last-child {
+    	padding-bottom: 8px !important;
+	}
 }
 
 
diff --git a/ext/clarico-addons/clarico_layout/template/template.xml b/ext/clarico-addons/clarico_layout/template/template.xml
index 50c275d5..744d34fe 100755
--- a/ext/clarico-addons/clarico_layout/template/template.xml
+++ b/ext/clarico-addons/clarico_layout/template/template.xml
@@ -1,5 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
+	<template id="clarico_submenu" inherit_id="website.submenu">
+		<xpath
+			expr="//li[@t-if='submenu.is_visible and not submenu.child_id.filtered(lambda menu: menu.is_visible)']"
+			position="inside">
+			<t t-if="submenu.dynamic_menu">
+				<t t-call="clarico_layout.dynamic_category"></t>
+			</t>
+			<div class="custom-menu-inside-div dropdown-menu" t-field="submenu.menu_html" />
+			<span class="dynamic_active_inactive" t-esc="submenu.dynamic_menu"
+				style="display:none;"></span>
+		</xpath>
+	</template>
 
 	<!-- Header main -->
 	<template id="clarico_header_main" inherit_id="portal.frontend_layout">
@@ -132,8 +144,10 @@
 			<div class="custom-menu-inside-maxW">
 				<div class="fisrt_li">
 					<t t-set="category_fetch" t-value="website.category_check()"></t>
+					<div class="main_ctg_list">
 					<t t-foreach="category_fetch" t-as="category_individual">
 						<t t-if="not category_individual.parent_id">
+							
 							<li class="first-level-category-li dropdown-submenu" t-att-id="'genrate_categ_id-%s' % category_individual.id">
 								<div class="first-level-left-div">
 									<div class="first-level-category-image" itemprop="image"
@@ -142,8 +156,15 @@
 										t-field="category_individual.display_name"></a>
 								</div>
 								<span tabindex="-1"
-									class="submenu-a first-level-category-caret fa fa-chevron-right" />
-								<div class="toggel_div toggel-div-effect" t-att-id="category_individual.id">
+									class="submenu-a first-level-category-caret fa fa-chevron-right" t-if="category_individual.child_id"/>
+								
+							</li>
+							</t>
+							</t>
+						</div>
+						<div class="sub_ctg_list_main">
+									<t t-foreach="category_fetch" t-as="category_individual">
+							<div class="toggel_div toggel-div-effect" t-att-id="category_individual.id">
 									<div class="toggel-inside-div">
 										<div class="menu_expand menu_1_div">
 											<div class="menu_expand_overflow menu_1_column_div">
@@ -154,7 +175,7 @@
 																<a class="second-level-a menu_heading " t-att-href="'/shop/category/%s' %slug(c)"
 																	t-field="c.name"></a>
 																<span tabindex="-1"
-																	class="submenu-a second-level-category-caret fa fa-chevron-right" />
+																	class="submenu-a second-level-category-caret fa fa-chevron-right"  t-if="c.child_id" />
 																<ul class="third-level-ul dropdown-menu">
 																	<t t-foreach="c.child_id" t-as="child">
 																		<li class="third-level-li">
@@ -171,9 +192,8 @@
 										</div>
 									</div>
 								</div>
-							</li>
 						</t>
-					</t>
+				</div>
 				</div>
 			</div>
 		</ul>
diff --git a/ext/clarico-addons/clarico_pricefilter/static/src/less/ion.rangeSlider.less b/ext/clarico-addons/clarico_pricefilter/static/src/less/ion.rangeSlider.less
new file mode 100755
index 00000000..2b2b328f
--- /dev/null
+++ b/ext/clarico-addons/clarico_pricefilter/static/src/less/ion.rangeSlider.less
@@ -0,0 +1,146 @@
+/* Ion.RangeSlider
+// css version 2.0.3
+// © 2013-2014 Denis Ineshin | IonDen.com
+// ===================================================================================================================*/
+
+/* =====================================================================================================================
+// RangeSlider */
+
+.irs {
+    position: relative; display: block;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+}
+    .irs-line {
+        position: relative; display: block;
+        overflow: hidden;
+        outline: none !important;
+    }
+        .irs-line-left, .irs-line-mid, .irs-line-right {
+            position: absolute; display: block;
+            top: 0;
+        }
+        .irs-line-left {
+            left: 0; width: 11%;
+        }
+        .irs-line-mid {
+            left: 9%; width: 82%;
+        }
+        .irs-line-right {
+            right: 0; width: 11%;
+        }
+
+    .irs-bar {
+        position: absolute; display: block;
+        left: 0; width: 0;
+    }
+        .irs-bar-edge {
+            position: absolute; display: block;
+            top: 0; left: 0;
+        }
+
+    .irs-shadow {
+        position: absolute; display: none;
+        left: 0; width: 0;
+    }
+
+    .irs-slider {
+        position: absolute; display: block;
+        cursor: default;
+        z-index: 1;
+    }
+        .irs-slider.single {
+
+        }
+        .irs-slider.from {
+
+        }
+        .irs-slider.to {
+
+        }
+        .irs-slider.type_last {
+            z-index: 2;
+        }
+
+    .irs-min {
+        position: absolute; display: block;
+        left: 0;
+        cursor: default;
+    }
+    .irs-max {
+        position: absolute; display: block;
+        right: 0;
+        cursor: default;
+    }
+
+    .irs-from, .irs-to, .irs-single {
+        position: absolute; display: block;
+        top: 0; left: 0;
+        cursor: default;
+        white-space: nowrap;
+    }
+
+.irs-grid {
+    position: absolute; display: none;
+    bottom: 0; left: 0;
+    width: 100%; height: 20px;
+}
+.irs-with-grid .irs-grid {
+    display: block;
+}
+    .irs-grid-pol {
+        position: absolute;
+        top: 0; left: 0;
+        width: 1px; height: 8px;
+        background: #000;
+    }
+    .irs-grid-pol.small {
+        height: 4px;
+    }
+    .irs-grid-text {
+        position: absolute;
+        bottom: 0; left: 0;
+        white-space: nowrap;
+        text-align: center;
+        font-size: 9px; line-height: 9px;
+        padding: 0 3px;
+        color: #000;
+    }
+
+.irs-disable-mask {
+    position: absolute; display: block;
+    top: 0; left: -1%;
+    width: 102%; height: 100%;
+    cursor: default;
+    background: rgba(0,0,0,0.0);
+    z-index: 2;
+}
+.irs-disabled {
+    opacity: 0.4;
+}
+.lt-ie9 .irs-disabled {
+    filter: alpha(opacity=40);
+}
+
+
+.irs-hidden-input {
+    position: absolute !important;
+    display: block !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+    font-size: 0 !important;
+    line-height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    outline: none !important;
+    z-index: -9999 !important;
+    background: none !important;
+    border-style: solid !important;
+    border-color: transparent !important;
+}
diff --git a/ext/clarico-addons/clarico_pricefilter/static/src/less/ion.rangeSlider.skinHTML5.less b/ext/clarico-addons/clarico_pricefilter/static/src/less/ion.rangeSlider.skinHTML5.less
new file mode 100755
index 00000000..c8e7e87c
--- /dev/null
+++ b/ext/clarico-addons/clarico_pricefilter/static/src/less/ion.rangeSlider.skinHTML5.less
@@ -0,0 +1,121 @@
+/* Ion.RangeSlider, Simple Skin
+// css version 2.0.3
+// © Denis Ineshin, 2014    https://github.com/IonDen
+// © guybowden, 2014        https://github.com/guybowden
+// ===================================================================================================================*/
+
+/* =====================================================================================================================
+// Skin details */
+
+.irs {
+    height: 55px;
+}
+.irs-with-grid {
+    height: 75px;
+}
+.irs-line {
+    height: 5px; top: 33px;
+    background: #EEE;
+    background: linear-gradient(to bottom, #DDD -50%, #FFF 150%); /* W3C */
+    border: 1px solid #CCC;
+    border-radius: 16px;
+    -moz-border-radius: 16px;
+}
+    .irs-line-left {
+        height: 8px;
+    }
+    .irs-line-mid {
+        height: 8px;
+    }
+    .irs-line-right {
+        height: 8px;
+    }
+
+.irs-bar {
+    height: 5px; top: 33px;
+    border-top: 1px solid #000;
+    border-bottom: 1px solid #000;
+    background: #000;
+    background: linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
+}
+    .irs-bar-edge {
+        height: 10px; top: 33px;
+        width: 14px;
+        border: 1px solid #428bca;
+        border-right: 0;
+        background: #428bca;
+        background: linear-gradient(to top, rgba(66,139,202,1) 0%,rgba(127,195,232,1) 100%); /* W3C */
+        border-radius: 16px 0 0 16px;
+        -moz-border-radius: 16px 0 0 16px;
+    }
+
+.irs-shadow {
+    height: 2px; top: 38px;
+    background: #000;
+    opacity: 0.3;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+}
+.lt-ie9 .irs-shadow {
+    filter: alpha(opacity=30);
+}
+
+.irs-slider {
+    top: 27px;
+    width: 15px; height: 16px;
+    border: 1px solid #AAA;
+    background: #DDD;
+    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%); /* W3C */
+    border-radius: 27px;
+    -moz-border-radius: 27px;
+    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+    cursor: pointer;
+}
+
+.irs-slider.state_hover, .irs-slider:hover {
+    background: #FFF;
+}
+
+.irs-min, .irs-max {
+    color: #333;
+    font-size: 12px; line-height: 1.333;
+    text-shadow: none;
+    top: 0;
+    padding: 1px 5px;
+    background: rgba(0,0,0,0.1);
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+}
+
+.lt-ie9 .irs-min, .lt-ie9 .irs-max {
+    background: #ccc;
+}
+
+.irs-from, .irs-to, .irs-single {
+    color: #000;
+    font-size: 12px;
+    text-shadow: none;
+    padding: 1px 10px;
+}
+.lt-ie9 .irs-from, .lt-ie9 .irs-to, .lt-ie9 .irs-single {
+    background: #999;
+}
+
+.irs-grid {
+    height: 27px;
+}
+.irs-grid-pol {
+    opacity: 0.5;
+    background: #428bca;
+}
+.irs-grid-pol.small {
+    background: #999;
+}
+
+.irs-grid-text {
+    bottom: 5px;
+    color: #99a4ac;
+}
+
+.irs-disabled {
+}
diff --git a/ext/clarico-addons/clarico_pricefilter/static/src/less/normalize.less b/ext/clarico-addons/clarico_pricefilter/static/src/less/normalize.less
new file mode 100755
index 00000000..46f646a5
--- /dev/null
+++ b/ext/clarico-addons/clarico_pricefilter/static/src/less/normalize.less
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+    display: inline-block; /* 1 */
+    vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+    display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+    margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+    overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+    overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+    line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+    overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+    font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+td,
+th {
+    padding: 0;
+}
diff --git a/ext/clarico-addons/clarico_pricefilter/templates/assets.xml b/ext/clarico-addons/clarico_pricefilter/templates/assets.xml
index 7e09fae8..5568ccf6 100755
--- a/ext/clarico-addons/clarico_pricefilter/templates/assets.xml
+++ b/ext/clarico-addons/clarico_pricefilter/templates/assets.xml
@@ -2,9 +2,9 @@
 <odoo>
 	<template id="layout_assets_frontend" inherit_id="web.assets_frontend">
 		<xpath expr="." position="inside">
-			<link rel="stylesheet" href="/clarico_pricefilter/static/src/less/normalize.css"></link>
-			<link rel="stylesheet" href="/clarico_pricefilter/static/src/less/ion.rangeSlider.skinHTML5.css"></link>
-			<link rel="stylesheet" href="/clarico_pricefilter/static/src/less/ion.rangeSlider.css"></link>
+			<link rel="stylesheet" type="text/less" href="/clarico_pricefilter/static/src/less/normalize.less"></link>
+			<link rel="stylesheet" type="text/less" href="/clarico_pricefilter/static/src/less/ion.rangeSlider.skinHTML5.less"></link>
+			<link rel="stylesheet" type="text/less" href="/clarico_pricefilter/static/src/less/ion.rangeSlider.less"></link>
 			<link rel="stylesheet" href="/clarico_pricefilter/static/src/less/price_filter_style.less"></link>
 			<script type="text/javascript" src="/clarico_pricefilter/static/src/js/ion.rangeSlider.js"></script>
 			<script type="text/javascript" src="/clarico_pricefilter/static/src/js/price_filter_slider.js"></script>
diff --git a/ext/clarico-addons/clarico_pricefilter/templates/template.xml b/ext/clarico-addons/clarico_pricefilter/templates/template.xml
index 87ab854f..76708609 100755
--- a/ext/clarico-addons/clarico_pricefilter/templates/template.xml
+++ b/ext/clarico-addons/clarico_pricefilter/templates/template.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 	<template id="clarico_pricefilter_for_category" name="Price Filter"
-		inherit_id="clarico_shop.clarico_shop_shop_page">
+		inherit_id="website_sale.products_attributes">
 		<xpath expr="//form/ul[hasclass('nav-stacked')]"
 			position="inside">
 			<div class="form_class price_filter_main">
diff --git a/ext/clarico-addons/clarico_product/__manifest__.py b/ext/clarico-addons/clarico_product/__manifest__.py
index 1f1540b4..387f5c1d 100755
--- a/ext/clarico-addons/clarico_product/__manifest__.py
+++ b/ext/clarico-addons/clarico_product/__manifest__.py
@@ -8,7 +8,7 @@
 
     # Dependencies
     'depends': [
-        'clarico_base','dp_custom'
+        'clarico_base'
     ],
 
     # Views
diff --git a/ext/clarico-addons/clarico_product/static/src/less/clarico_product.less b/ext/clarico-addons/clarico_product/static/src/less/clarico_product.less
index e96d9d07..c7f862b2 100755
--- a/ext/clarico-addons/clarico_product/static/src/less/clarico_product.less
+++ b/ext/clarico-addons/clarico_product/static/src/less/clarico_product.less
@@ -127,7 +127,7 @@
 				}
 			
 			#o-carousel-product .carousel-inner div.item {
-			    height: 650px !important;
+			    //height: 650px !important;
 			}
 			.carousel-outer .inner-slider
 			{
diff --git a/ext/clarico-addons/clarico_product/templates/template.xml b/ext/clarico-addons/clarico_product/templates/template.xml
index 1854df7b..1d614752 100755
--- a/ext/clarico-addons/clarico_product/templates/template.xml
+++ b/ext/clarico-addons/clarico_product/templates/template.xml
@@ -320,8 +320,8 @@
                                     <div class="alternet_common">
                                         <div class="parent">
                                             <a t-attf-href="/shop/product/#{ slug(alt_product) }">
-                                                <div t-field="alt_product.image_medium" class="recently_viewed_img_div"
-                                                     t-options="{'widget': 'image' ,'image':'s_image_common'}" />
+                                                <div t-field="alt_product.image" class="recently_viewed_img_div"
+                                                     t-options="{'widget': 'image' ,'image':'s_image_common','resize': '600x600'}" />
 											</a>
 											<div class="alt_prod_details">
 												<div class="alt_prod_product_name">
@@ -365,8 +365,8 @@
 										<div class="parent">
 											<a t-attf-href="/shop/product/#{ slug(alt_product.product_tmpl_id) }"
 												style="display: block">
-												<div t-field="alt_product.image_medium" class="recently_viewed_img_div"
-													t-options="{'widget': 'image','class':'s_image_common'}" />
+												<div t-field="alt_product.image" class="recently_viewed_img_div"
+													t-options="{'widget': 'image','class':'s_image_common','resize': '600x600'}" />
 											</a>
 											<div class="alt_prod_details">
 												<div class="alt_prod_product_name">
diff --git a/ext/clarico-addons/clarico_product_carousel/templates/ecommerce_product_carousel_snippet.xml b/ext/clarico-addons/clarico_product_carousel/templates/ecommerce_product_carousel_snippet.xml
index 443b6b9b..5b92c800 100755
--- a/ext/clarico-addons/clarico_product_carousel/templates/ecommerce_product_carousel_snippet.xml
+++ b/ext/clarico-addons/clarico_product_carousel/templates/ecommerce_product_carousel_snippet.xml
@@ -58,7 +58,8 @@
 							</div>
 						</div>
 						<a t-attf-href="/shop/product/#{ slug(product) }">
-						<img t-att-src="'data:image/png;base64,%s' % to_text(product.image_medium)" class="s_image_common"></img>
+						<span itemprop="image" t-field="product.image"
+								t-options="{'widget': 'image', 'resize': '600x600', 'class': 's_image_common'}" t-att-alt="product.name"  />
 						</a>
 					</div>
 				
diff --git a/ext/clarico-addons/clarico_product_multi_carousel/templates/product_static_carousel.xml b/ext/clarico-addons/clarico_product_multi_carousel/templates/product_static_carousel.xml
index 7b403661..b31a835b 100755
--- a/ext/clarico-addons/clarico_product_multi_carousel/templates/product_static_carousel.xml
+++ b/ext/clarico-addons/clarico_product_multi_carousel/templates/product_static_carousel.xml
@@ -66,8 +66,8 @@
 							</div>
 						</div>
 							<a t-attf-href="/shop/product/#{ slug(product) }">
-					<span itemprop="image" t-field="product.image_medium"
-						t-options="{'widget': 'image'}" t-att-alt="product.name" />
+					<span itemprop="image" t-field="product.image"
+						t-options="{'widget': 'image', 'resize': '600x600'}" t-att-alt="product.name" />
 						</a>
 				</div>
 			
@@ -142,7 +142,8 @@
 
 						<div class="quick_view_img_div_container">
 							<div class="quick_view_image_div">
-								<img t-att-src="'data:image/png;base64,%s' % product.image_medium"></img>
+									<span itemprop="image" t-field="product.image"
+						t-options="{'widget': 'image', 'resize': '600x600'}" />
 							</div>
 						</div>
 
diff --git a/ext/clarico-addons/clarico_recently_viewed/templates/template.xml b/ext/clarico-addons/clarico_recently_viewed/templates/template.xml
index a969660e..5b84398f 100755
--- a/ext/clarico-addons/clarico_recently_viewed/templates/template.xml
+++ b/ext/clarico-addons/clarico_recently_viewed/templates/template.xml
@@ -23,8 +23,8 @@
 													<div class="parent">
 														<div class="recently_viewed_img_div">
 																<a t-attf-href="/shop/product/#{ slug(rproduct) }">
-																		<div t-field="rproduct.image_medium" class=""
-																			t-options="{'widget': 'image', 'class': 'img img-responsive' }" />
+																		<div t-field="rproduct.image" class=""
+																			t-options="{'widget': 'image', 'class': 'img img-responsive','resize': '600x600' }" />
 																</a>
 														</div>
 														<div class="recently_viwed_details">
@@ -84,8 +84,8 @@
 												<div class="parent">
 													<div class="recently_viewed_img_div">
 														<a t-attf-href="/shop/product/#{ slug(rproduct) }">
-														<div t-field="rproduct.image_medium" class=""
-																			t-options="{'widget': 'image', 'class': 'img img-responsive' }" />
+														<div t-field="rproduct.image" class=""
+																			t-options="{'widget': 'image', 'class': 'img img-responsive','resize': '600x600' }" />
 														</a>
 														</div>
 													<div class="recently_viwed_details">
@@ -139,8 +139,8 @@
 												<div class="parent">
 													<div class="recently_viewed_img_div">
 														<a t-attf-href="/shop/product/#{ slug(rproduct) }">
-														<div t-field="rproduct.image_medium" class=""
-																			t-options="{'widget': 'image', 'class': 'img img-responsive' }" />
+														<div t-field="rproduct.image" class=""
+																			t-options="{'widget': 'image', 'class': 'img img-responsive','resize': '600x600' }" />
 														</a>
 													</div>
 													<div class="recently_viwed_details">
diff --git a/ext/clarico-addons/clarico_shop/__init__.py b/ext/clarico-addons/clarico_shop/__init__.py
index 3882f994..1104df8b 100755
--- a/ext/clarico-addons/clarico_shop/__init__.py
+++ b/ext/clarico-addons/clarico_shop/__init__.py
@@ -1,3 +1,2 @@
 from . import controllers
-from . import model
-from . import tools
\ No newline at end of file
+from . import model
\ No newline at end of file
diff --git a/ext/clarico-addons/clarico_shop/static/src/less/clarico_shop.less b/ext/clarico-addons/clarico_shop/static/src/less/clarico_shop.less
index 6c4d77ee..e5c2d403 100755
--- a/ext/clarico-addons/clarico_shop/static/src/less/clarico_shop.less
+++ b/ext/clarico-addons/clarico_shop/static/src/less/clarico_shop.less
@@ -21,6 +21,11 @@
 		max-width:2000px !important;
 	}
 } 
+.clarico_shop_attribute_filter
+{
+	.pl(10%);
+}
+
 .shop_product_breadcrumb
 {
 	width: 100%;
@@ -645,7 +650,7 @@
 		& a{
 			color: #717171;
 		    font-weight: normal;
-		    max-width: 90%;
+		    max-width: 250px;
 		    overflow: hidden;
 		    text-overflow: ellipsis;
 		    white-space: nowrap;
@@ -754,6 +759,7 @@
     .size(13px);
     .pt(4px);
     .mr(12px);
+    color:#fff;
 }
 .attr-val{
 	width: 95%;
diff --git a/ext/clarico-addons/clarico_shop/static/src/less/jquery.mCustomScrollbar.less b/ext/clarico-addons/clarico_shop/static/src/less/jquery.mCustomScrollbar.less
new file mode 100755
index 00000000..97ac152e
--- /dev/null
+++ b/ext/clarico-addons/clarico_shop/static/src/less/jquery.mCustomScrollbar.less
@@ -0,0 +1,1268 @@
+/*
+== malihu jquery custom scrollbar plugin ==
+Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
+*/
+
+
+
+/*
+CONTENTS: 
+	1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 
+	2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 
+	3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
+	4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 
+	5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 
+	6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 
+		6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
+*/
+
+
+
+/* 
+------------------------------------------------------------------------------------------------------------------------
+1. BASIC STYLE  
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+	.mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ }
+	.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }
+	
+	.mCustomScrollBox{ /* contains plugin's markup */
+		position: relative;
+		overflow: hidden;
+		height: 100%;
+		max-width: 100%;
+		outline: none;
+		direction: ltr;
+	}
+
+	.mCSB_container{ /* contains the original content */
+		overflow: hidden;
+		width: auto;
+		height: auto;
+	}
+
+
+
+/* 
+------------------------------------------------------------------------------------------------------------------------
+2. VERTICAL SCROLLBAR 
+y-axis
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+	.mCSB_inside > .mCSB_container{ margin-right: 15px; }
+
+	.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */
+	
+	.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
+		margin-right: 0;
+		margin-left: 30px;
+	}
+	
+	.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */
+
+	.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
+		position: absolute;
+		width: 16px;
+		height: auto;
+		left: auto;
+		top: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */
+	
+	.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, 
+	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
+		right: auto;
+		left: 0;
+	}
+	
+	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */
+
+	.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0; 
+		height: auto;
+	}
+
+	.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }
+
+	.mCSB_scrollTools .mCSB_draggerRail{
+		width: 2px;
+		height: 100%;
+		margin: 0 auto;
+		-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
+	}
+
+	.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
+		cursor: pointer;
+		width: 100%;
+		height: 30px; /* minimum dragger height */
+		z-index: 1;
+	}
+
+	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
+		position: relative;
+		width: 4px;
+		height: 100%;
+		margin: 0 auto;
+		-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
+		text-align: center;
+	}
+	
+	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
+	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }
+	
+	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }
+
+	.mCSB_scrollTools .mCSB_buttonUp,
+	.mCSB_scrollTools .mCSB_buttonDown{
+		display: block;
+		position: absolute;
+		height: 20px;
+		width: 100%;
+		overflow: hidden;
+		margin: 0 auto;
+		cursor: pointer;
+	}
+
+	.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }
+
+
+
+/* 
+------------------------------------------------------------------------------------------------------------------------
+3. HORIZONTAL SCROLLBAR 
+x-axis
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+	.mCSB_horizontal.mCSB_inside > .mCSB_container{
+		margin-right: 0;
+		margin-bottom: 30px;
+	}
+	
+	.mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; }
+
+	.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */
+
+	.mCSB_scrollTools.mCSB_scrollTools_horizontal{
+		width: auto;
+		height: 16px;
+		top: auto;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
+	.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
+	.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */
+
+	.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; }
+
+	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{
+		width: 100%;
+		height: 2px;
+		margin: 7px 0;
+	}
+
+	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{
+		width: 30px; /* minimum dragger width */
+		height: 100%;
+		left: 0;
+	}
+
+	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
+		width: 100%;
+		height: 4px;
+		margin: 6px auto;
+	}
+	
+	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
+	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
+		height: 12px; /* auto-expanded scrollbar */
+		margin: 2px auto;
+	}
+	
+	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
+		height: 8px; /* auto-expanded scrollbar */
+		margin: 4px 0;
+	}
+
+	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
+	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{
+		display: block;
+		position: absolute;
+		width: 20px;
+		height: 100%;
+		overflow: hidden;
+		margin: 0 auto;
+		cursor: pointer;
+	}
+	
+	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; }
+
+	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; }
+
+
+
+/* 
+------------------------------------------------------------------------------------------------------------------------
+4. VERTICAL AND HORIZONTAL SCROLLBARS 
+yx-axis 
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+	.mCSB_container_wrapper{
+		position: absolute;
+		height: auto;
+		width: auto;
+		overflow: hidden;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin-right: 30px;
+		margin-bottom: 30px;
+	}
+	
+	.mCSB_container_wrapper > .mCSB_container{
+		padding-right: 30px;
+		padding-bottom: 30px;
+		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
+	}
+	
+	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; }
+	
+	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; }
+	
+	/* non-visible horizontal scrollbar */
+	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; }
+	
+	/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
+	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
+	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; }
+	
+	/* RTL direction/left-side scrollbar */
+	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; }
+	
+	/* non-visible scrollbar/RTL direction/left-side scrollbar */
+	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; }
+	
+	.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */
+		margin-right: 0;
+		margin-left: 30px;
+	}
+	
+	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; }
+	
+	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; }
+	
+	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{
+		margin-right: 0; /* non-visible scrollbar */
+		margin-left: 0;
+	}
+	
+	/* non-visible horizontal scrollbar */
+	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; }
+
+
+
+/* 
+------------------------------------------------------------------------------------------------------------------------
+5. TRANSITIONS  
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+	.mCSB_scrollTools, 
+	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCSB_scrollTools .mCSB_buttonUp,
+	.mCSB_scrollTools .mCSB_buttonDown,
+	.mCSB_scrollTools .mCSB_buttonLeft,
+	.mCSB_scrollTools .mCSB_buttonRight{
+		-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
+		-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
+		-o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
+		transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
+	}
+	
+	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
+	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, 
+	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, 
+	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
+		-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
+					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
+					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
+					opacity .2s ease-in-out, background-color .2s ease-in-out; 
+		-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
+					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
+					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
+					opacity .2s ease-in-out, background-color .2s ease-in-out; 
+		-o-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
+					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
+					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
+					opacity .2s ease-in-out, background-color .2s ease-in-out; 
+		transition: width .2s ease-out .2s, height .2s ease-out .2s, 
+					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
+					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
+					opacity .2s ease-in-out, background-color .2s ease-in-out; 
+	}
+
+
+
+/* 
+------------------------------------------------------------------------------------------------------------------------
+6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS  
+------------------------------------------------------------------------------------------------------------------------
+*/
+
+	/* 
+	----------------------------------------
+	6.1 THEMES 
+	----------------------------------------
+	*/
+	
+	/* default theme ("light") */
+
+	.mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }
+	
+	.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
+	.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }
+	
+	.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
+	.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
+	.mCustomScrollBox:hover > .mCSB_scrollTools,
+	.mCustomScrollBox:hover ~ .mCSB_scrollTools,
+	.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
+	.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }
+
+	.mCSB_scrollTools .mCSB_draggerRail{
+		background-color: #000; background-color: rgba(0,0,0,0.4);
+		filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
+	}
+
+	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		background-color: #fff; background-color: rgba(255,255,255,0.75);
+		filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; 
+	}
+
+	.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
+		background-color: #fff; background-color: rgba(255,255,255,0.85);
+		filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; 
+	}
+	.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+		background-color: #fff; background-color: rgba(255,255,255,0.9);
+		filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; 
+	}
+
+	.mCSB_scrollTools .mCSB_buttonUp,
+	.mCSB_scrollTools .mCSB_buttonDown,
+	.mCSB_scrollTools .mCSB_buttonLeft,
+	.mCSB_scrollTools .mCSB_buttonRight{
+		background-image: url(mCSB_buttons.png); /* css sprites */
+		background-repeat: no-repeat;
+		opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
+	}
+
+	.mCSB_scrollTools .mCSB_buttonUp{
+		background-position: 0 0;
+		/* 
+		sprites locations 
+		light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
+		dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
+		*/
+	}
+
+	.mCSB_scrollTools .mCSB_buttonDown{
+		background-position: 0 -20px;
+		/* 
+		sprites locations
+		light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
+		dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
+		*/
+	}
+
+	.mCSB_scrollTools .mCSB_buttonLeft{
+		background-position: 0 -40px;
+		/* 
+		sprites locations 
+		light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
+		dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
+		*/
+	}
+
+	.mCSB_scrollTools .mCSB_buttonRight{
+		background-position: 0 -56px;
+		/* 
+		sprites locations 
+		light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
+		dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
+		*/
+	}
+
+	.mCSB_scrollTools .mCSB_buttonUp:hover,
+	.mCSB_scrollTools .mCSB_buttonDown:hover,
+	.mCSB_scrollTools .mCSB_buttonLeft:hover,
+	.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }
+
+	.mCSB_scrollTools .mCSB_buttonUp:active,
+	.mCSB_scrollTools .mCSB_buttonDown:active,
+	.mCSB_scrollTools .mCSB_buttonLeft:active,
+	.mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }
+	
+	
+
+	/* theme: "dark" */
+
+	.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }
+
+	.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: #eee; }
+	
+	.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(206, 206, 206, 0.8); }
+
+	.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(206, 206, 206, 0.8); }
+
+	.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; }
+
+	.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }
+
+	.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }
+
+	.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
+	
+	/* ---------------------------------------- */
+	
+
+
+	/* theme: "light-2", "dark-2" */
+
+	.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
+		width: 4px;
+		background-color: #fff; background-color: rgba(255,255,255,0.1);
+		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
+	}
+
+	.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		width: 4px;
+		background-color: #fff; background-color: rgba(255,255,255,0.75);
+		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
+	}
+
+	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
+		width: 100%;
+		height: 4px;
+		margin: 6px auto;
+	}
+
+	.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }
+
+	.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
+
+	.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; }
+
+	.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{	background-position: -32px -20px; }
+
+	.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{	background-position: -40px -40px; }
+
+	.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; }
+	
+	
+	/* theme: "dark-2" */
+
+	.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
+		background-color: #000; background-color: rgba(0,0,0,0.1);
+		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
+	}
+
+	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		background-color: #000; background-color: rgba(0,0,0,0.75);
+		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
+	}
+
+	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
+
+	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
+
+	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; }
+
+	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; }
+
+	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; }
+
+	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -56px; }
+	
+	/* ---------------------------------------- */
+	
+
+
+	/* theme: "light-thick", "dark-thick" */
+
+	.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
+		width: 4px;
+		background-color: #fff; background-color: rgba(255,255,255,0.1);
+		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
+	}
+
+	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		width: 6px;
+		background-color: #fff; background-color: rgba(255,255,255,0.75);
+		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
+	}
+
+	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{
+		width: 100%;
+		height: 4px;
+		margin: 6px 0;
+	}
+
+	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
+		width: 100%;
+		height: 6px;
+		margin: 5px auto;
+	}
+
+	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }
+
+	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
+
+	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; }
+
+	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{	background-position: -16px -20px; }
+
+	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{	background-position: -20px -40px; }
+
+	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; }
+
+
+	/* theme: "dark-thick" */
+	
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
+		background-color: #000; background-color: rgba(0,0,0,0.1);
+		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
+	}
+
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		background-color: #000; background-color: rgba(0,0,0,0.75);
+		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
+	}
+
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
+
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
+
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; }
+
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; }
+
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; }
+
+	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{	background-position: -100px -56px; }
+	
+	/* ---------------------------------------- */
+	
+
+
+	/* theme: "light-thin", "dark-thin" */
+	
+	.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); }
+
+	.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; }
+
+	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; }
+
+	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
+		width: 100%;
+		height: 2px;
+		margin: 7px auto;
+	}
+
+
+	/* theme "dark-thin" */
+	
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }
+
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
+	
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
+	
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
+	
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{	background-position: -80px 0; }
+
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }
+
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }
+
+	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
+	
+	/* ---------------------------------------- */
+	
+	
+	
+	/* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */
+	
+	.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); }
+	
+	.mCS-rounded.mCSB_scrollTools .mCSB_dragger, 
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, 
+	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; }
+	
+	.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		width: 14px;
+		margin: 0 1px;
+	}
+	
+	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, 
+	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, 
+	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; }
+	
+	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
+		height: 14px;
+		margin: 1px 0;
+	}
+	
+	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
+	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
+	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
+		width: 16px; /* auto-expanded scrollbar */
+		height: 16px;
+		margin: -1px 0;
+	}
+	
+	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
+	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ }
+	
+	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
+	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
+	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
+		height: 16px; /* auto-expanded scrollbar */
+		width: 16px;
+		margin: 0 -1px;
+	}
+	
+	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
+	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
+		height: 4px; /* auto-expanded scrollbar */
+		margin: 6px 0;
+	}
+	
+	.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; }
+	
+	.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; }
+	
+	.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; }
+	
+	.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; }
+	
+	
+	/* theme "rounded-dark", "rounded-dots-dark" */
+	
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
+	
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }
+	
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
+	
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
+	
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; }
+	
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; }
+	
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; }
+	
+	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; }
+	
+	
+	/* theme "rounded-dots", "rounded-dots-dark" */
+	
+	.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; }
+	
+	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
+		background-color: transparent;
+		background-position: center;
+	}
+	
+	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
+		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
+		background-repeat: repeat-y;
+		opacity: 0.3;
+		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
+	}
+	
+	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
+		height: 4px;
+		margin: 6px 0;
+		background-repeat: repeat-x;
+	}
+	
+	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; }
+	
+	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; }
+	
+	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; }
+	
+	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; }
+	
+	
+	/* theme "rounded-dots-dark" */
+	
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
+		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=");
+	}
+	
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; }
+	
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; }
+	
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; }
+	
+	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; }
+	
+	/* ---------------------------------------- */
+	
+	
+	
+	/* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */
+	
+	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		background-repeat: repeat-y;
+		background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
+		background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
+		background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
+		background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
+		background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
+		background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
+	}
+	
+	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
+		background-repeat: repeat-x;
+		background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
+		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
+		background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
+		background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
+		background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
+		background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
+	}
+	
+	
+	/* theme "3d", "3d-dark" */
+	
+	.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, 
+	.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; }
+	
+	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, 
+	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; }
+	
+	.mCS-3d.mCSB_scrollTools, 
+	.mCS-3d-dark.mCSB_scrollTools{
+		opacity: 1;
+		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
+	}
+	
+	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; }
+	
+	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
+		width: 8px;
+		background-color: #000; background-color: rgba(0,0,0,0.2);
+		box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2);
+	}
+	
+	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 	 
+	.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
+	.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }
+
+	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; }
+
+	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
+		width: 100%;
+		height: 8px;
+		margin: 4px 0;
+		box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2);
+	}
+
+	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
+		width: 100%;
+		height: 8px;
+		margin: 4px auto;
+	}
+	
+	.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
+	
+	.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
+	
+	.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
+	
+	.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
+	
+	
+	/* theme "3d-dark" */
+	
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
+		background-color: #000; background-color: rgba(0,0,0,0.1);
+		box-shadow: inset 1px 0 1px rgba(0,0,0,0.1);
+	}
+	
+	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); }
+	
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
+
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }
+
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }
+
+	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
+	
+	/* ---------------------------------------- */
+	
+	
+	
+	/* theme: "3d-thick", "3d-thick-dark" */
+	
+	.mCS-3d-thick.mCSB_scrollTools, 
+	.mCS-3d-thick-dark.mCSB_scrollTools{
+		opacity: 1;
+		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
+	}
+	
+	.mCS-3d-thick.mCSB_scrollTools, 
+	.mCS-3d-thick-dark.mCSB_scrollTools, 
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, 
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
+	
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
+	
+	.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, 
+	.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; }
+	
+	.mCS-3d-thick.mCSB_scrollTools_vertical, 
+	.mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); }
+	
+	.mCS-3d-thick.mCSB_scrollTools_horizontal, 
+	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{
+		bottom: 1px;
+		box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);
+	}
+	
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		box-shadow: inset 1px 0 0 rgba(255,255,255,0.4);
+		width: 12px;
+		margin: 2px;
+		position: absolute;
+		height: auto;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+	
+	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
+	
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,  
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }
+	
+	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
+		height: 12px;
+		width: auto;
+	}
+	
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{
+		background-color: #000; background-color: rgba(0,0,0,0.05);
+		box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
+	}
+	
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
+	
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
+	
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
+
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
+
+	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{	background-position: -40px -128px; }
+	
+	
+	/* theme: "3d-thick-dark" */
+	
+	.mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); }
+	
+	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); }
+	
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); }
+	 
+	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); }
+	
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,  
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; }
+	
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{
+		background-color: #fff; background-color: rgba(0,0,0,0.05);
+		box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
+	}
+	
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
+	
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
+	
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }
+
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }
+
+	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
+	
+	/* ---------------------------------------- */
+	
+	
+	
+	/* theme: "minimal", "minimal-dark" */
+	
+	.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
+	.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
+		right: 0; 
+		margin: 12px 0; 
+	}
+	
+	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
+	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
+	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
+	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{
+		bottom: 0; 
+		margin: 0 12px; 
+	}
+	
+	/* RTL direction/left-side scrollbar */
+	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
+	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
+		left: 0; 
+		right: auto;
+	}
+	
+	.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
+	
+	.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, 
+	.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; }
+	
+	.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, 
+	.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; }
+	
+	.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		background-color: #fff; background-color: rgba(255,255,255,0.2);
+		filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
+	}
+	
+	.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+		background-color: #fff; background-color: rgba(255,255,255,0.5);
+		filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
+	}
+	
+	
+	/* theme: "minimal-dark" */
+	
+	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
+		background-color: #000; background-color: rgba(0,0,0,0.2);
+		filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
+	}
+	
+	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
+		background-color: #000; background-color: rgba(0,0,0,0.5);
+		filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
+	}
+	
+	/* ---------------------------------------- */
+	
+	
+	
+	/* theme "light-3", "dark-3" */
+	
+	.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{
+		width: 6px;
+		background-color: #000; background-color: rgba(0,0,0,0.2);
+	}
+
+	.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; }
+
+	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{
+		width: 100%;
+		height: 6px;
+		margin: 5px 0;
+	}
+	
+	.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
+	.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
+		width: 12px;
+	}
+	
+	.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
+	.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
+	.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
+		height: 12px;
+		margin: 2px 0;
+	}
+	
+	.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
+	
+	.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
+	
+	.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
+	
+	.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
+	
+	
+	/* theme "dark-3" */
+	
+	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
+
+	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
+
+	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
+	
+	.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
+	
+	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
+
+	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }
+
+	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }
+
+	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
+	
+	/* ---------------------------------------- */
+	
+	
+	
+	/* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */
+	
+	.mCS-inset.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{
+		width: 12px;
+		background-color: #000; background-color: rgba(0,0,0,0.2);
+	}
+
+	.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 
+		width: 6px;
+		margin: 3px 5px;
+		position: absolute;
+		height: auto;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+
+	.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
+		height: 6px;
+		margin: 5px 3px;
+		position: absolute;
+		width: auto;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+	
+	.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
+	.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
+		width: 100%;
+		height: 12px;
+		margin: 2px 0;
+	}
+	
+	.mCS-inset.mCSB_scrollTools .mCSB_buttonUp, 
+	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, 
+	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
+	
+	.mCS-inset.mCSB_scrollTools .mCSB_buttonDown, 
+	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, 
+	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
+	
+	.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, 
+	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, 
+	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
+	
+	.mCS-inset.mCSB_scrollTools .mCSB_buttonRight, 
+	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, 
+	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
+	
+	
+	/* theme "inset-dark", "inset-2-dark", "inset-3-dark" */
+	
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
+
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
+
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
+	
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
+	
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
+
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }
+
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }
+
+	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, 
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
+	
+	
+	/* theme "inset-2", "inset-2-dark" */
+	
+	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{
+		background-color: transparent;
+		border-width: 1px;
+		border-style: solid;
+		border-color: #fff;
+		border-color: rgba(255,255,255,0.2);
+		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
+	}
+	
+	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); }
+	
+	
+	/* theme "inset-3", "inset-3-dark" */
+	
+	.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); }
+	
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); }
+	
+	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
+	
+	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
+	
+	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
+	
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); }
+	
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }
+	
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
+	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
+	
+	/* ---------------------------------------- */
diff --git a/ext/clarico-addons/clarico_shop/templates/assets.xml b/ext/clarico-addons/clarico_shop/templates/assets.xml
index 41183e4f..6240d2f8 100755
--- a/ext/clarico-addons/clarico_shop/templates/assets.xml
+++ b/ext/clarico-addons/clarico_shop/templates/assets.xml
@@ -7,10 +7,10 @@
 			<link rel="stylesheet" type="text/less"
 				href="/clarico_shop/static/src/less/responsive_shop.less" />
 
-			<link rel="stylesheet" type="text/css"
-				href="/clarico_shop/static/src/less/jquery.mCustomScrollbar.css" media="(min-width: 600px)" />
+			<link rel="stylesheet" type="text/less"
+				href="/clarico_shop/static/src/less/jquery.mCustomScrollbar.less" media="(min-width: 600px)" />
 
-			<link rel="stylesheet" type="text/css"
+			<link rel="stylesheet" type="text/less"
 				href="/clarico_shop/static/src/less/compare_wishlist_common.less" />
 			<script type="text/javascript" src="/clarico_shop/static/src/js/clarico_shop.js"></script>
 			<script type="text/javascript"
diff --git a/ext/clarico-addons/clarico_shop/templates/template.xml b/ext/clarico-addons/clarico_shop/templates/template.xml
index 1fb1d029..e0d4762a 100755
--- a/ext/clarico-addons/clarico_shop/templates/template.xml
+++ b/ext/clarico-addons/clarico_shop/templates/template.xml
@@ -1,116 +1,118 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <!-- Change Qweb view priority  -->
-    <record id="website_sale.products_categories" model="ir.ui.view">
-        <field name="priority">17</field>
-    </record>        
-    
-    <record id="website_sale.products_description" model="ir.ui.view">
-        <field name="priority">24</field>
-    </record>
-    
-    
-    <!-- View As Template -->
-    <template id="clarico_shop_products" inherit_id="website_sale.products" name="Clarico Shop">
-        <xpath expr="//div[@id='wrap']" position="replace">
-            <div id="wrap" class="js_sale">
-                <div class="oe_structure" />
-                <div class="oe_website_sale">
-                    <span>
-                        <section>
-                            <div class="oe_structure"/>
-                            <img class="img img-responsive center" src="/clarico_shop/static/src/img/shop.jpeg"/>
-                        </section>
-                    </span>
-                    <div t-att-style="'display:none;' if not bins  else 'display:block;'"
-                         id="sub_header_row" class="shop-page-breadcrumb">
-                        <div class="clarico_product_breadcrumb">
-                            <div class="sub_breadcrumb">
-                                <div class="nav-view">
-                                    <div class="nav-selection-div">
-                                        <a class="home-icon" href="/shop">
-                                            <i class="fa fa-home" aria-hidden="true"></i>
-                                        </a>
-                                        <span class="select-nevigation-span" />
-                                        <a class="select-nevigation-child"></a>
-                                        <!-- <a class="select-nevigation" href="/shop"> Home <span>/</span>
+	<!-- Change Qweb view priority -->
+	<record id="website_sale.products_categories" model="ir.ui.view">
+		<field name="priority">17</field>
+	</record>
+
+	<record id="website_sale.products_description" model="ir.ui.view">
+		<field name="priority">24</field>
+	</record>
+
+
+	<!-- View As Template -->
+	<template id="clarico_shop_products" inherit_id="website_sale.products"
+		name="Clarico Shop">
+		<xpath expr="//div[@id='wrap']" position="replace">
+			<div id="wrap" class="js_sale">
+				<div class="oe_structure" />
+				<div class="oe_website_sale">
+					<div t-att-style="'display:none;' if not bins  else 'display:block;'"
+						id="sub_header_row" class="shop-page-breadcrumb">
+						<div class="clarico_product_breadcrumb">
+							<div class="sub_breadcrumb">
+								<div class="nav-view">
+									<div class="nav-selection-div">
+										<a class="home-icon" href="/shop">
+											<i class="fa fa-home" aria-hidden="true"></i>
+										</a>
+										<span class="select-nevigation-span" />
+										<a class="select-nevigation-child"></a>
+										<!-- <a class="select-nevigation" href="/shop"> Home <span>/</span> 
 											</a> -->
-                                    </div>
-                                    <div class="view-as-div">
-                                        <label class="view-label">View As</label>
-                                        <a class="grid-view">
-                                            <i class="fa fa-th" aria-hidden="true"></i>
-                                        </a>
-                                        <a class="list-view">
+									</div>
+									<div class="view-as-div">
+										<label class="view-label">View As</label>
+										<a class="grid-view">
+											<i class="fa fa-th" aria-hidden="true"></i>
+										</a>
+										<a class="list-view">
 
-                                            <i class="fa fa-bars" aria-hidden="true"></i>
-                                        </a>
+											<i class="fa fa-bars" aria-hidden="true"></i>
+										</a>
 
-                                        <a class="view-as-two-col">2</a>
-                                        <a class="view-as-three-col">4</a>
-                                    </div>
-                                </div>
-                                <div class="products_pager" id="shop_pager">
-                                    <div class="row" style="width: 100%;">
-                                        <t t-call="website.pager" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="right-cnt-main">
-                        <div class="right-cnt-maxW">
+										<a class="view-as-two-col">2</a>
+										<a class="view-as-three-col">4</a>
+									</div>
+								</div>
+								<div class="products_pager" id="shop_pager">
+									<div class="row" style="width: 100%;">
+										<t t-call="website.pager" />
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="right-cnt-main">
+						<div class="right-cnt-maxW">
 
-                            <div class="view-as">
-                                <div class="view-as-maxW">
-                                    <div class="view-mode">
-                                        <div class="menu-filter-div">
-                                            <a class="menu-filter">
-                                                <i class="fa fa-align-left" aria-hidden="true"></i>
-                                                Filter
-                                            </a>
-                                            <p t-if='search and search_count' class='oe_search_found search_found'> <small>( <t t-esc="search_count"/> found )</small></p>
-                                            <a class="apply-filter apply-filter-in-page btn">View Filter</a>
-                                        </div>
-                                    </div>
-                                    <div t-att-style="'display:none;' if not bins  else 'display:block;'" class="view-as-right-cnt">
-                                        <div class="filter-show">
+							<div class="view-as">
+								<div class="view-as-maxW">
+									<div class="view-mode">
+										<div class="menu-filter-div">
+											<a class="menu-filter">
+												<i class="fa fa-align-left" aria-hidden="true"></i>
+												Filter
+											</a>
+											<p t-if='search and search_count' class='oe_search_found search_found'>
+												<small>
+													(
+													<t t-esc="search_count" />
+													found )
+												</small>
+											</p>
+											<a class="apply-filter apply-filter-in-page btn">View Filter</a>
+										</div>
+									</div>
+									<div t-att-style="'display:none;' if not bins  else 'display:block;'"
+										class="view-as-right-cnt">
+										<div class="filter-show">
 
-                                            <button class="btn-2 dropdown-toggle" data-toggle="dropdown">
-                                                <i class="icon-exchange"></i>
-                                                <span class="filter-show-label">show</span>
-                                                <i class="icon-chevron-down"></i>
-                                            </button>
-                                            <ul class="dropdown-menu" role="menu">
+											<button class="btn-2 dropdown-toggle" data-toggle="dropdown">
+												<i class="icon-exchange"></i>
+												<span class="filter-show-label">show</span>
+												<i class="icon-chevron-down"></i>
+											</button>
+											<ul class="dropdown-menu" role="menu">
 
-                                                <li class="show_product">
-                                                    <a class="ppg_show" data-id="16">16</a>
-                                                </li>
-                                                <li class="show_product">
-                                                    <a class="ppg_show" data-id="20">20</a>
-                                                </li>
+												<li class="show_product">
+													<a class="ppg_show" data-id="16">16</a>
+												</li>
+												<li class="show_product">
+													<a class="ppg_show" data-id="20">20</a>
+												</li>
 
-                                            </ul>
-                                        </div>
+											</ul>
+										</div>
 
-                                        <div class="filter-sort-by">
+										<div class="filter-sort-by">
 
-                                            <t t-set="list_price_desc_label">
-                                                Price
-                                                <i class="fa fa-arrow-up" aria-hidden="true" />
-                                            </t>
-                                            <t t-set="list_price_asc_label">
-                                                Price
-                                                <i class="fa fa-arrow-down" aria-hidden="true" />
-                                            </t>
-                                            <t t-set="name_asc_label">Name</t>
-                                            <t t-set="website_sale_sortable"
-                                               t-value="[
+											<t t-set="list_price_desc_label">
+												Price
+												<i class="fa fa-arrow-up" aria-hidden="true" />
+											</t>
+											<t t-set="list_price_asc_label">
+												Price
+												<i class="fa fa-arrow-down" aria-hidden="true" />
+											</t>
+											<t t-set="name_asc_label">Name</t>
+											<t t-set="website_sale_sortable"
+												t-value="[
 			                (list_price_desc_label, 'list_price desc'),
 			                (list_price_asc_label, 'list_price asc'),
 			                (name_asc_label, 'name asc')
 			            ]" />
-                                            <div class="dropdown btn-group dropdown_sorty_by">
+											<div class="dropdown btn-group dropdown_sorty_by">
 												<a href="#" class="dropdown-toggle btn-default"
 													data-toggle="dropdown">
 													<span class="filter-show-label">Sort by</span>
@@ -133,49 +135,40 @@
 							<div class="hidden" id="products_grid_before"></div>
 							<div class="products-grid-main" id="products_grid">
 								<table id="product-grid-table" width="100%">
-									<!-- <tr>
-										<td>
-											<div class="product-grid-div" t-foreach="bins" t-as="tr_product">
-												<p class="p_Count" style="display:none" t-att-data-id="products_count" />
-												<t t-foreach="tr_product" t-as="td_product">
-		
-													<t t-if="td_product">
-														<t t-set="product" t-value="td_product['product']" />
-														<div class="product-row3" t-att-colspan="td_product['x'] != 1 and td_product['x']"
-															t-att-rowspan="td_product['y'] != 1 and td_product['y']"
-															t-attf-class="oe_product oe_grid oe-height-#{td_product['y']*2} #{ td_product['class'] }">
-															<div class="oe_product_cart"
-																t-att-data-publish="product.website_published and 'on' or 'off'">
-																<t t-set="product_image_big" t-value="td_product['x']+td_product['y'] &gt; 2" />
-																<t t-call="clarico_shop.clarico_shop_products_item" />
-															</div>
-														</div>
-													</t>
-													<div t-if="not td_product" class="oe-height-2" />
-												</t>
-											</div>
-										</td>
-									</tr> -->
+									<!-- <tr> <td> <div class="product-grid-div" t-foreach="bins" t-as="tr_product"> 
+										<p class="p_Count" style="display:none" t-att-data-id="products_count" /> 
+										<t t-foreach="tr_product" t-as="td_product"> <t t-if="td_product"> <t t-set="product" 
+										t-value="td_product['product']" /> <div class="product-row3" t-att-colspan="td_product['x'] 
+										!= 1 and td_product['x']" t-att-rowspan="td_product['y'] != 1 and td_product['y']" 
+										t-attf-class="oe_product oe_grid oe-height-#{td_product['y']*2} #{ td_product['class'] 
+										}"> <div class="oe_product_cart" t-att-data-publish="product.website_published 
+										and 'on' or 'off'"> <t t-set="product_image_big" t-value="td_product['x']+td_product['y'] 
+										&gt; 2" /> <t t-call="clarico_shop.clarico_shop_products_item" /> </div> 
+										</div> </t> <div t-if="not td_product" class="oe-height-2" /> </t> </div> 
+										</td> </tr> -->
 									<tr>
 										<td>
 											<t t-foreach="bins" t-as="tr_product">
 												<t t-foreach="tr_product" t-as="td_product">
-									                <div class="product-grid-div"> 
+													<div class="product-grid-div">
 														<p class="p_Count" style="display:none" t-att-data-id="products_count" />
-									                        <t t-if="td_product">
-									                            <t t-set="product" t-value="td_product['product']" />
-									                          <div class="product-row3" t-att-colspan="td_product['x'] != 1 and td_product['x']" t-att-rowspan="td_product['y'] != 1 and td_product['y']" t-attf-class="oe_product product_div oe_grid oe-height-#{td_product['y']*2} #{ td_product['class'] }"> 
-									                                <div class="oe_product_cart" t-att-data-publish="product.website_published and 'on' or 'off'">
-									                                     <t t-set="product_image_big" t-value="td_product['x']+td_product['y'] &gt; 2" /> 
-									                                    <t t-call="website_sale.products_item" />
-									                                </div>
-									                         </div> 
-									                        </t>
-									                        <div t-if="not td_product" class="oe-height-2" />
-									            	</div>
-								            	</t>
-								            </t>
-								         </td>
+														<t t-if="td_product">
+															<t t-set="product" t-value="td_product['product']" />
+															<div class="product-row3" t-att-colspan="td_product['x'] != 1 and td_product['x']"
+																t-att-rowspan="td_product['y'] != 1 and td_product['y']"
+																t-attf-class="oe_product product_div oe_grid oe-height-#{td_product['y']*2} #{ td_product['class'] }">
+																<div class="oe_product_cart"
+																	t-att-data-publish="product.website_published and 'on' or 'off'">
+																	<t t-set="product_image_big" t-value="td_product['x']+td_product['y'] &gt; 2" />
+																	<t t-call="website_sale.products_item" />
+																</div>
+															</div>
+														</t>
+														<div t-if="not td_product" class="oe-height-2" />
+													</div>
+												</t>
+											</t>
+										</td>
 									</tr>
 								</table>
 								<t t-if="not bins">
@@ -221,12 +214,12 @@
 					<div class="product-image oe_product_image">
 						<a itemprop="url"
 							t-att-href="keep('/shop/product/%s' % slug(product), page=(pager['page']['num'] if pager['page']['num']&gt;1 else None))">
-							<span itemprop="image" t-field="product.image_medium"
-								t-options="{'widget': 'image'}" t-att-alt="product.name" />
+							<span itemprop="image" t-field="product.image"
+								t-options="{'widget': 'image', 'resize': '600x600', 'zoom': 'image'}" t-att-alt="product.name"  />
 						</a>
-					<div id="in-wishlist-shop"></div>
+						<div id="in-wishlist-shop"></div>
 					</div>
-					
+
 					<div class="product-des">
 						<div class="hover-cnt">
 							<div id="wishlist_shop"></div>
@@ -257,162 +250,213 @@
 									</label>
 								</h5>
 							</div>
-							
-							<div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer" class="product_price" t-if="product.product_variant_ids">
-		                        <b>
-		                            <t t-if="product.website_price_difference and website.get_current_pricelist().discount_policy=='without_discount'">
-		                                <del class="strike-through mr8" style="white-space: nowrap;" t-esc="compute_currency(product.website_public_price)" t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}"/>
-		                            </t>
-		
-		                            <span t-esc="product.website_price" t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
-		                            <span itemprop="price" style="display:none;" t-esc="product.website_price"/>
-		                            <span itemprop="priceCurrency" style="display:none;" t-esc="website.currency_id.name"/>
-		                        </b>
-		                    </div>
+
+							<div itemprop="offers" itemscope="itemscope" itemtype="http://schema.org/Offer"
+								class="product_price" t-if="product.product_variant_ids">
+								<b>
+									<t
+										t-if="product.website_price_difference and website.get_current_pricelist().discount_policy=='without_discount'">
+										<del class="strike-through mr8" style="white-space: nowrap;"
+											t-esc="compute_currency(product.website_public_price)"
+											t-options="{'widget': 'monetary', 'display_currency': website.get_current_pricelist().currency_id, 'from_currency': website.currency_id}" />
+									</t>
+
+									<span t-esc="product.website_price"
+										t-options="{'widget': 'monetary', 'display_currency': website.currency_id}" />
+									<span itemprop="price" style="display:none;" t-esc="product.website_price" />
+									<span itemprop="priceCurrency" style="display:none;"
+										t-esc="website.currency_id.name" />
+								</b>
+							</div>
 						</div>
 					</section>
 				</div>
 			</form>
 		</xpath>
 	</template>
-	
+
 	<!-- Category Grid Before -->
-	<template id="clarico_shop_shop_page" inherit_id="website_sale.products_categories" priority="17">
+	<!-- <template id="clarico_shop_shop_page" inherit_id="website_sale.products_categories" 
+		priority="17"> <xpath expr="//div[@id='products_grid_before']" position="replace"> 
+		<div class="main"> <div class="mCustomScrollbar" id="products_grid_before" 
+		data-mcs-theme="dark"> <div class="products_grid_before_maxW"> <span class="mobile-view-filter-close-btn">X</span> 
+		<h4 class="category">Product Category</h4> <a class="apply-filter">View Filter</a> 
+		<hr></hr> <div class="all-category-div"> <ul class="nav nav-pills nav-stacked 
+		mt16" id="o_shop_collapse_category"> <li t-att-class=" '' if category else 
+		'active all-products' "> <a t-att-href="keep('/shop',category=0)" class="o_not_editable">All 
+		Products </a> </li> <t t-foreach="categories" t-as="categ"> <t t-call="clarico_shop.clarico_shop_option_collapse_categories_recursive" 
+		/> <t t-call="website_sale.option_collapse_categories_recursive" /> </t> 
+		</ul> </div> </div> </div> </div> </xpath> <xpath expr="//div[@id='products_grid']" 
+		position="attributes"> <attribute name="class">products-grid-main</attribute> 
+		</xpath> </template> -->
+
+	<template id="website_sale.products_categories" inherit_id="clarico_shop.clarico_shop_products"
+		active="True" customize_show="False" name="eCommerce Categories"
+		priority="17">
 		<xpath expr="//div[@id='products_grid_before']" position="replace">
 			<div class="main">
+				
 				<div class="mCustomScrollbar" id="products_grid_before"
 					data-mcs-theme="dark">
-					<div class="products_grid_before_maxW">
-						<span class="mobile-view-filter-close-btn">X</span>
-						<h4 class="category">Product Category</h4>
-						<a class="apply-filter">View Filter</a>
+				<ul></ul>
+					<div class="clarico_shop_catg">
 
-						<hr></hr>
+					</div>
+					<div class="clarico_shop_attribute_filter">
 
-						<div class="all-category-div">
-							<ul class="nav nav-pills nav-stacked mt16" id="o_shop_collapse_category">
-								<li t-att-class=" '' if category else 'active all-products' ">
-									<a t-att-href="keep('/shop',category=0)" class="o_not_editable">All Products
-									</a>
-								</li>
-								<t t-foreach="categories" t-as="categ">
-									<!-- <t t-call="clarico_shop.clarico_shop_option_collapse_categories_recursive" 
-										/> -->
-									<t t-call="website_sale.option_collapse_categories_recursive" />
-								</t>
-							</ul>
-						</div>
-
-
-						<hr></hr>
-
-						<form class="js_attributes" method="get">
-							<input type="hidden" name="search" t-att-value="search" />
-							<ul class="nav nav-pills nav-stacked mt16">
-								<t t-foreach="attributes" t-as="a">
-									<t t-if="a.type != 'hidden'">
-										<li t-if="a.value_ids and len(a.value_ids) &gt; 1">
-											<div class="attribut-main-div">
-												<div class="filter-by-div">
-													<i class="down-arrow fa fa-caret-down" aria-hidden="true"></i>
-													<h5 class="refined-by-attr">Filter By </h5>
-													<h5 class="refined-by-attr refined-by-dynamic" t-field="a.name">
-													</h5>
-
-												</div>
-												<a class="clear-all-variant">(Clear all)</a>
-												<div class="attr-val mCustomScrollbar" data-mcs-theme="dark">
-													<t t-if="a.type == 'color'">
-														<t t-foreach="a.value_ids" t-as="v">
-															<div class="color-with-name-divmaxW">
-																<div class="color-with-name-div">
-																	<label t-attf-style="background-color:#{v.html_color or v.name}"
-																		t-attf-class="css_attribute_color #{'active' if v.id in attrib_set else ''}">
-																		<input type="checkbox" name="attrib"
-																			t-att-value="'%s-%s' % (a.id,v.id)"
-																			t-att-checked="'checked' if v.id in attrib_set else None"
-																			t-att-title="v.name" />
-																	</label>
-																	<p class="color-name" t-esc="v.name"></p>
-																</div>
-															</div>
-														</t>
-													</t>
-
-													<t t-if="a.type == 'radio'">
-														<div>
-															<ul
-																class="nav nav-pills nav-stacked type-radio nav-overflow-scroll">
-																<t t-foreach="a.value_ids" t-as="v">
-																	<li class="nav-stacked-li" t-att-class="'active' if v.id in attrib_set else None">
-																		<div class="nav-stacked-div">
-																			<label class="type-checkbox">
-																				<input class="checkbox-custom" type="checkbox"
-																					t-att-data-id="'%s' % v.id" name="attrib"
-																					t-att-value="'%s-%s' % (a.id,v.id)"
-																					t-att-checked="'checked' if v.id in attrib_set else None" />
-																				<label class="checkbox-custom-label" style="font-weight: normal"
-																					t-field="v.name" />
-																				<!-- <input class="checkbox-custom" type="checkbox" name="attrib" 
-																					t-att-value="'%s-%s' % (a.id,v.id)" t-att-checked="'checked' if v.id in attrib_set 
-																					else None" /> <label class="checkbox-custom-label" style="font-weight: normal" 
-																					t-field="v.name" /> -->
-																			</label>
-																		</div>
-																	</li>
-																</t>
-															</ul>
-														</div>
-													</t>
-												</div>
-                                                <t t-if="a.type == 'select'">
-                                                    <div>
-                                                        <select class="form-control filter_select_box" name="attrib">
-                                                            <option value="" />
-                                                            <t t-foreach="a.value_ids" t-as="v">
-                                                                <option t-att-value="'%s-%s' % (a.id,v.id)"
-                                                                        t-esc="v.name" t-att-selected="v.id in attrib_set" />
-                                                            </t>
-                                                        </select>
-                                                    </div>
-                                                </t>
-                                                <hr class="refined-by-hr"></hr>
-                                            </div>
-										</li>
-									</t>
-								</t>
-							</ul>
-						</form>
 					</div>
 				</div>
 			</div>
 		</xpath>
 		<xpath expr="//div[@id='products_grid']" position="attributes">
-            <attribute name="class">products-grid-main</attribute>
-        </xpath>
+			<attribute name="class">products-grid-main</attribute>
+		</xpath>
+
+
 	</template>
+
+
+	<template id="clarico_shop_ecommerce_categories" inherit_id="website_sale.products_categories"
+		active="False" customize_show="True" name="Clarico Ecommerce Category">
+		<xpath expr="//div[hasclass('clarico_shop_catg')]" position="replace">
+			<div class="products_grid_before_maxW">
+				<span class="mobile-view-filter-close-btn">X</span>
+				<h4 class="category">Product Category</h4>
+				<a class="apply-filter">View Filter</a>
+
+				<hr></hr>
+
+				<div class="all-category-div">
+					<ul class="nav nav-pills nav-stacked mt16" id="o_shop_collapse_category">
+						<li t-att-class=" '' if category else 'active all-products' ">
+							<a t-att-href="keep('/shop',category=0)" class="o_not_editable">All Products
+							</a>
+						</li>
+						<t t-foreach="categories" t-as="categ">
+							<t t-call="website_sale.option_collapse_categories_recursive" />
+						</t>
+					</ul>
+				</div>
+			</div>
+		</xpath>
+	</template>
+
+
+	<!--<template id="website_sale.option_collapse_products_categories"
+		name="Collapsible Category List" inherit_id="clarico_shop.clarico_shop_ecommerce_categories"
+		active="False" customize_show="False">
+		<xpath expr="//div[hasclass('all-category-div')/ul" position="replace">
+			<ul class="nav nav-pills nav-stacked mt16" id="o_shop_collapse_category">
+				<li t-att-class=" '' if category else 'active' ">
+					<a t-att-href="keep('/shop',category=0)" class="o_not_editable">All Products</a>
+				</li>
+				<t t-foreach="categories" t-as="categ">
+					<t t-call="website_sale.option_collapse_categories_recursive" />
+				</t>
+			</ul>
+		</xpath>
+	</template>-->
 	
-    <template id="website_sale.option_collapse_products_categories" name="Collapsible Category List" inherit_id="clarico_shop.clarico_shop_shop_page" active="False" customize_show="False">
-        <xpath expr="//div[hasclass('all-category-div')/ul" position="replace">
-            <ul class="nav nav-pills nav-stacked mt16" id="o_shop_collapse_category">
-                <li t-att-class=" '' if category else 'active' ">
-                    <a t-att-href="keep('/shop',category=0)" class="o_not_editable">All Products</a>
-                </li>
-                <t t-foreach="categories" t-as="categ">
-                    <t t-call="website_sale.option_collapse_categories_recursive" />
-                </t>
-            </ul>
-        </xpath>
-    </template>
-	
-	
-    <!-- Sort By -->
-    <template id="clarico_shop_sort" inherit_id="website_sale.sort">
-        <xpath expr="//div[hasclass('dropdown_sorty_by')]"
-               position="replace">
-        </xpath>
-    </template>
-	
-	 
-	
+<template id="clarico_shop_collapse_categories" inherit_id="website_sale.option_collapse_products_categories">
+		<xpath expr="//ul[@id='o_shop_collapse_category']" position="replace">
+		
+		</xpath>
+	</template>
+
+
+	<!-- Sort By -->
+	<template id="clarico_shop_sort" inherit_id="website_sale.sort">
+		<xpath expr="//div[hasclass('dropdown_sorty_by')]" position="replace">
+		</xpath>
+	</template>
+
+
+	<!-- product attributes filter -->
+
+	<template id="website_sale.products_attributes" inherit_id="website_sale.products_categories"
+		active="False" customize_show="True" name="Product Attribute's Filters">
+		<xpath expr="//div[hasclass('clarico_shop_attribute_filter')]"
+			position="inside">
+			
+			<hr></hr>
+			<form class="js_attributes" method="get">
+				<input type="hidden" name="search" t-att-value="search" />
+				<ul class="nav nav-pills nav-stacked mt16">
+					<t t-foreach="attributes" t-as="a">
+						<t t-if="a.type != 'hidden'">
+							<li t-if="a.value_ids and len(a.value_ids) &gt; 1">
+								<div class="attribut-main-div">
+									<div class="filter-by-div">
+										<i class="down-arrow fa fa-caret-down" aria-hidden="true"></i>
+										<h5 class="refined-by-attr">Filter By </h5>
+										<h5 class="refined-by-attr refined-by-dynamic" t-field="a.name">
+										</h5>
+
+									</div>
+									<a class="clear-all-variant">(Clear all)</a>
+									<div class="attr-val mCustomScrollbar" data-mcs-theme="dark">
+										<t t-if="a.type == 'color'">
+											<t t-foreach="a.value_ids" t-as="v">
+												<div class="color-with-name-divmaxW">
+													<div class="color-with-name-div">
+														<label t-attf-style="background-color:#{v.html_color or v.name}"
+															t-attf-class="css_attribute_color #{'active' if v.id in attrib_set else ''}">
+															<input type="checkbox" name="attrib" t-att-value="'%s-%s' % (a.id,v.id)"
+																t-att-checked="'checked' if v.id in attrib_set else None"
+																t-att-title="v.name" />
+														</label>
+														<p class="color-name" t-esc="v.name"></p>
+													</div>
+												</div>
+											</t>
+										</t>
+
+										<t t-if="a.type == 'radio'">
+											<div>
+												<ul
+													class="nav nav-pills nav-stacked type-radio nav-overflow-scroll">
+													<t t-foreach="a.value_ids" t-as="v">
+														<li class="nav-stacked-li" t-att-class="'active' if v.id in attrib_set else None">
+															<div class="nav-stacked-div">
+																<label class="type-checkbox">
+																	<input class="checkbox-custom" type="checkbox"
+																		t-att-data-id="'%s' % v.id" name="attrib"
+																		t-att-value="'%s-%s' % (a.id,v.id)"
+																		t-att-checked="'checked' if v.id in attrib_set else None" />
+																	<label class="checkbox-custom-label" style="font-weight: normal"
+																		t-field="v.name" />
+																	<!-- <input class="checkbox-custom" type="checkbox" name="attrib" 
+																		t-att-value="'%s-%s' % (a.id,v.id)" t-att-checked="'checked' if v.id in attrib_set 
+																		else None" /> <label class="checkbox-custom-label" style="font-weight: normal" 
+																		t-field="v.name" /> -->
+																</label>
+															</div>
+														</li>
+													</t>
+												</ul>
+											</div>
+										</t>
+									</div>
+									<t t-if="a.type == 'select'">
+										<div>
+											<select class="form-control filter_select_box" name="attrib">
+												<option value="" />
+												<t t-foreach="a.value_ids" t-as="v">
+													<option t-att-value="'%s-%s' % (a.id,v.id)" t-esc="v.name"
+														t-att-selected="v.id in attrib_set" />
+												</t>
+											</select>
+										</div>
+									</t>
+									<hr class="refined-by-hr"></hr>
+								</div>
+							</li>
+						</t>
+					</t>
+				</ul>
+			</form>
+		</xpath>
+	</template>
+
+
 </odoo>
diff --git a/ext/clarico-addons/clarico_shop_left_sidebar/static/src/js/shop_left_categ.js b/ext/clarico-addons/clarico_shop_left_sidebar/static/src/js/shop_left_categ.js
index 3260b5ef..9bd26a08 100755
--- a/ext/clarico-addons/clarico_shop_left_sidebar/static/src/js/shop_left_categ.js
+++ b/ext/clarico-addons/clarico_shop_left_sidebar/static/src/js/shop_left_categ.js
@@ -5,6 +5,7 @@ $(document).ready(function(){
 			$("div").find(".main").addClass("main_left");
 			$("div").find("#products_grid").addClass("main_left_grid");
 			$("div").find(".right-cnt-maxW").addClass("right-cnt-maxW_left");
+			$(".shop-page-breadcrumb .sub_breadcrumb").addClass("leftbar_breadcrumb_width");
 			//$("div").find(".products-grid-main").removeClass("main_left_grid");
 			$(".menu-filter").unbind("click"); 
 			$('.menu-filter').css("display","none");
diff --git a/ext/clarico-addons/clarico_shop_left_sidebar/static/src/less/shop_left_categ.less b/ext/clarico-addons/clarico_shop_left_sidebar/static/src/less/shop_left_categ.less
index c06880c6..def2c1c9 100755
--- a/ext/clarico-addons/clarico_shop_left_sidebar/static/src/less/shop_left_categ.less
+++ b/ext/clarico-addons/clarico_shop_left_sidebar/static/src/less/shop_left_categ.less
@@ -9,6 +9,12 @@
 		background-color: transparent;
 		.left;
 		z-index:100;
+		
+		
+		.clarico_shop_attribute_filter
+		{
+			.pl(0);
+		}
 	}
 	.left_products_grid_before{
 		height: 100%;
@@ -54,3 +60,7 @@
 	padding: 10px 0 !important;
     .mr(15px) !important;
 }
+.shop-page-breadcrumb .sub_breadcrumb.leftbar_breadcrumb_width
+{
+	max-width: 1400px !important;
+}
diff --git a/ext/clarico-addons/clarico_signin/static/src/less/clarico_signin.less b/ext/clarico-addons/clarico_signin/static/src/less/clarico_signin.less
index 7bdbd229..cc35fd6a 100755
--- a/ext/clarico-addons/clarico_signin/static/src/less/clarico_signin.less
+++ b/ext/clarico-addons/clarico_signin/static/src/less/clarico_signin.less
@@ -68,7 +68,8 @@
 
 	.pull-right
 	{
-		//.common-div;
+		.common-div;
+		.mb(8px);
 		//float:none !important;
 	
 		a:first-child
@@ -84,7 +85,13 @@
 		}
 	}
 }
-
+.oe_login_buttons .pull-right  a.btn.btn-link
+{
+	&:hover
+	{
+		color:@theme-color !important;
+	}
+}
 .login_area
 {
 	display: block;
diff --git a/ext/clarico-addons/clarico_signin/static/src/less/responsive.less b/ext/clarico-addons/clarico_signin/static/src/less/responsive.less
index 3767313d..6f8f995b 100755
--- a/ext/clarico-addons/clarico_signin/static/src/less/responsive.less
+++ b/ext/clarico-addons/clarico_signin/static/src/less/responsive.less
@@ -88,4 +88,10 @@
 			.size(12px);
 		}
 	}
+	.back_home_icon_div
+	{
+		left: 6%;
+		top: 65px;
+		.size(20px);
+	}
 }
diff --git a/ext/clarico-addons/clarico_signin/templates/template.xml b/ext/clarico-addons/clarico_signin/templates/template.xml
index d391dd8c..05c1b66c 100755
--- a/ext/clarico-addons/clarico_signin/templates/template.xml
+++ b/ext/clarico-addons/clarico_signin/templates/template.xml
@@ -72,7 +72,10 @@
 			<attribute name="class">btn-link reset_pw_main</attribute>
 		</xpath>
 		<xpath expr="//a[@t-if='signup_enabled']" position="replace">
-			<a t-if="signup_enabled" t-attf-href="/web/signup?{{ keep_query() }}" class="btn btn btn-link signup_main common-btn">Sign Up</a>
+			
 		</xpath>
+		 <xpath expr="//button[@type='submit']" position="after">
+		 <a t-if="signup_enabled" t-attf-href="/web/signup?{{ keep_query() }}" class="btn btn btn-link signup_main common-btn">Sign Up</a>
+		 </xpath>
 	</template>
 </odoo>
diff --git a/ext/clarico-addons/clarico_signup/static/src/less/signup.less b/ext/clarico-addons/clarico_signup/static/src/less/signup.less
index 1a9b89f3..88641cad 100755
--- a/ext/clarico-addons/clarico_signup/static/src/less/signup.less
+++ b/ext/clarico-addons/clarico_signup/static/src/less/signup.less
@@ -1,8 +1,14 @@
 .c_signup_link_btn a.btn{
 	background: transparent;
 }
-
-
+.c_signup_link_btn,.c_reset_login_btns 
+{
+	> div.pull-right
+{
+	.common-div;
+	.mb(8px);
+}
+}
 .clarico_signup,.oe_reset_password_form
 {
 	max-width:400px !important;
@@ -15,6 +21,10 @@
 		.mb(12%);
 	}
 }
+.oe_reset_password_form
+{
+	.mt(32px);
+}
 
 
 .c_signup_input,.c_reset_input
diff --git a/ext/clarico-addons/clarico_signup/templates/template.xml b/ext/clarico-addons/clarico_signup/templates/template.xml
index d5bbab9b..cf42e95f 100755
--- a/ext/clarico-addons/clarico_signup/templates/template.xml
+++ b/ext/clarico-addons/clarico_signup/templates/template.xml
@@ -18,7 +18,7 @@
 						<div class="clearfix oe_login_buttons c_signup_link_btn">
 
 							<button type="submit" class="btn pull-left c_signup_btn common-btn">Sign up</button>
-							<a t-attf-href="/web/login?{{ keep_query() }}" class="btn btn-link pull-right back_to_login_text">Back to
+							<a t-attf-href="/web/login?{{ keep_query() }}" class="btn-link pull-right back_to_login_text">Back to
 								Login
 							</a>
 						</div>
@@ -67,7 +67,7 @@
 				<button type="submit" class="btn pull-left reset_submit_btn">Confirm</button>
 				<a t-if="invalid_token" href="/web/login" class="btn btn-link pull-right">Back to Login</a>
 				<a t-if="not token" t-attf-href="/web/login?{{ keep_query() }}"
-					class="btn btn-link pull-right c_reset_backtologin">Back to Login</a>
+					class="btn-link pull-right c_reset_backtologin">Back to Login</a>
 			</div>
 		</xpath>
 	</template>
diff --git a/ext/clarico-addons/clarico_similar_product/template/template.xml b/ext/clarico-addons/clarico_similar_product/template/template.xml
index 8c8fd6eb..55d60322 100755
--- a/ext/clarico-addons/clarico_similar_product/template/template.xml
+++ b/ext/clarico-addons/clarico_similar_product/template/template.xml
@@ -31,7 +31,7 @@
 		<div class="similar_product_main">
 			<t t-if="product">
 				<div class="similar_main">
-					<div t-field="product.image_small" class="similar_main_product_img_div" t-options="{'widget': 'image'}" />
+					<div t-field="product.image" class="similar_main_product_img_div" t-options="{'widget': 'image','resize':'150x150'}" />
 					<h4>
 						<a class="similar_main_product_name" t-field="product.name"></a>
 					</h4>
@@ -43,7 +43,7 @@
 				<t t-foreach="product.alternative_product_ids" t-as="alt_product">
 					<div class="similar_product_div">
                         <a t-attf-href="/shop/product/#{ slug(alt_product) }">
-                            <div t-field="alt_product.image_medium" class="similar_product_img" t-options="{'widget': 'image'}" />
+                            <div t-field="alt_product.image" class="similar_product_img" t-options="{'widget': 'image','resize': '600x600'}" />
                         </a>
                         <div class="similar_product_details">
                             <div class="similar_product_name">
diff --git a/ext/clarico-addons/clarico_slider_style_1/static/src/less/slider_1.less b/ext/clarico-addons/clarico_slider_style_1/static/src/less/slider_1.less
index 8e829e9b..dff453f4 100755
--- a/ext/clarico-addons/clarico_slider_style_1/static/src/less/slider_1.less
+++ b/ext/clarico-addons/clarico_slider_style_1/static/src/less/slider_1.less
@@ -19,6 +19,7 @@
 			padding: 20%;
 			background-repeat: no-repeat;
 			background-position: center;
+			background-size: cover;
 		}
 	}
 	
diff --git a/ext/clarico-addons/clarico_slider_style_2/static/src/less/slider_2.less b/ext/clarico-addons/clarico_slider_style_2/static/src/less/slider_2.less
index 6564c771..a0d19ecb 100755
--- a/ext/clarico-addons/clarico_slider_style_2/static/src/less/slider_2.less
+++ b/ext/clarico-addons/clarico_slider_style_2/static/src/less/slider_2.less
@@ -31,6 +31,7 @@
 			padding: 25%;
 			background-repeat: no-repeat;
 			background-position: center;
+			background-size: cover;
 		}
 	}
 	& .lc_carousel_caption{
diff --git a/ext/clarico-addons/clarico_slider_style_3/static/src/less/slider_3.less b/ext/clarico-addons/clarico_slider_style_3/static/src/less/slider_3.less
index 6074cd76..7b1b68aa 100755
--- a/ext/clarico-addons/clarico_slider_style_3/static/src/less/slider_3.less
+++ b/ext/clarico-addons/clarico_slider_style_3/static/src/less/slider_3.less
@@ -25,6 +25,7 @@
 			padding: 25%;
 			background-repeat: no-repeat;
 			background-position: center;
+			background-size: cover;
 		}
 	}
 	& .lc2_carousel_caption{
diff --git a/ext/clarico-addons/clarico_slider_style_4/templates/template.xml b/ext/clarico-addons/clarico_slider_style_4/templates/template.xml
index 1e13b269..7a943b37 100755
--- a/ext/clarico-addons/clarico_slider_style_4/templates/template.xml
+++ b/ext/clarico-addons/clarico_slider_style_4/templates/template.xml
@@ -12,7 +12,7 @@
 		<section>
 		<div class="slider_section">
 			<div id="slider_wrapper_wo" class="slider_wrapper_wo">
-		        <div id="myCarousel" class="carousel slide clarico_slider_style_4_carousel" data-interval="4000" data-ride="carousel">
+		        <div id="myCarousel" class="carousel slide clarico_slider_style_4_carousel ts_banner" data-interval="4000" data-ride="carousel">
 				
 					<!-- Indicators -->
 					<ol class="carousel-indicators hidden">
@@ -49,4 +49,4 @@
 			</div>
 		</section>
 	</template>
-</odoo>
\ No newline at end of file
+</odoo>
diff --git a/ext/clarico-addons/clarico_slider_style_5/static/src/less/slider_5.less b/ext/clarico-addons/clarico_slider_style_5/static/src/less/slider_5.less
index c0ca3d47..75d572af 100755
--- a/ext/clarico-addons/clarico_slider_style_5/static/src/less/slider_5.less
+++ b/ext/clarico-addons/clarico_slider_style_5/static/src/less/slider_5.less
@@ -37,6 +37,7 @@
 			padding: 20%;
 			background-repeat: no-repeat;
 			background-position: center;
+			background-size: cover;
 		}
 	}
 	& .mtb_carousel_caption{
diff --git a/ext/clarico-addons/clarico_wishlist/static/src/less/wishlist_style.less b/ext/clarico-addons/clarico_wishlist/static/src/less/wishlist_style.less
index 738a36f0..b9a3b6c2 100755
--- a/ext/clarico-addons/clarico_wishlist/static/src/less/wishlist_style.less
+++ b/ext/clarico-addons/clarico_wishlist/static/src/less/wishlist_style.less
@@ -168,4 +168,7 @@ color: #717171;
     color: @theme-color !important;
 }
 
-
+.wish-add-cart-checkbox .checkbox-custom-label {
+    padding-left: 30px !important;
+    vertical-align: sub;
+}
diff --git a/ext/clarico-addons/clarico_wishlist/template/wishlist_list_popout.xml b/ext/clarico-addons/clarico_wishlist/template/wishlist_list_popout.xml
index 392cb0a2..e3198a3a 100755
--- a/ext/clarico-addons/clarico_wishlist/template/wishlist_list_popout.xml
+++ b/ext/clarico-addons/clarico_wishlist/template/wishlist_list_popout.xml
@@ -19,7 +19,7 @@
 					<div class="popover_each_product_div">
 						<div class="product_img_popover">
 							<a t-att-href="'/shop/product/%s' %slug(p.product_id)">
-								<img t-att-src="'data:image/png;base64,%s' % to_text(p.product_id.image_small)"></img>
+								<div t-field="p.product_id.image" t-options="{'widget': 'image','resize': '150x150'}" />
 							</a>
 						</div>
 						<div class="name_price_comb_popover">
diff --git a/ext/clarico-addons/customize_theme/controllers/main.py b/ext/clarico-addons/customize_theme/controllers/main.py
index 4d7ca9ae..3806018e 100755
--- a/ext/clarico-addons/customize_theme/controllers/main.py
+++ b/ext/clarico-addons/customize_theme/controllers/main.py
@@ -12,13 +12,13 @@ class themeColor(http.Controller):
             request.env['ir.config_parameter'].sudo().set_param("customize_theme.theme_color",
                                                                 repr(theme_color))
 
-            path = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
-            path = path + "/static/src/less/custom_color.less"
-
-            #...write file
-            f = open(path, "w")
-            f.write("@theme-color:"+theme_color+';')
-            f.close()
+#             path = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+#             path = path + "/static/src/less/custom_color.less"
+# 
+#             #...write file
+#             f = open(path, "w")
+#             f.write("@theme-color:"+theme_color+';')
+#             f.close()
 
     @http.route('/theme_color_store', type='json', auth="user", website=True)
     def color_store(self, theme_color=False, **kw):
diff --git a/ext/clarico-addons/customize_theme/models/__init__.py b/ext/clarico-addons/customize_theme/models/__init__.py
index 5cb91a6d..aba22284 100755
--- a/ext/clarico-addons/customize_theme/models/__init__.py
+++ b/ext/clarico-addons/customize_theme/models/__init__.py
@@ -1 +1 @@
-# from . import res_config_settings
\ No newline at end of file
+from . import res_config_settings
\ No newline at end of file
diff --git a/ext/clarico-addons/customize_theme/static/src/less/custom_color.less b/ext/clarico-addons/customize_theme/static/src/less/custom_color.less
index d02426e8..662d1263 100755
--- a/ext/clarico-addons/customize_theme/static/src/less/custom_color.less
+++ b/ext/clarico-addons/customize_theme/static/src/less/custom_color.less
@@ -1 +1 @@
-@theme-color:#000;
\ No newline at end of file
+@theme-color:#444;
\ No newline at end of file
diff --git a/ext/clarico-addons/customize_theme/static/src/less/footer_styles/footer_style_2.less b/ext/clarico-addons/customize_theme/static/src/less/footer_styles/footer_style_2.less
index 29bf03af..412412fd 100755
--- a/ext/clarico-addons/customize_theme/static/src/less/footer_styles/footer_style_2.less
+++ b/ext/clarico-addons/customize_theme/static/src/less/footer_styles/footer_style_2.less
@@ -82,6 +82,15 @@ footer #footer
 {
 	padding:10px 0;
 }
+.ftr_language
+{
+	#products li >a
+	{
+		.muli-light();
+		line-height: 180%;
+		.size(13px);
+	}
+}
 .company_info_section_main
 {
 	.common-div;
diff --git a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_2.less b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_2.less
index 021ec07a..b400e9d6 100755
--- a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_2.less
+++ b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_2.less
@@ -300,10 +300,10 @@ ul.navbar-right{
 				display:block !important;
 			}
 .header-stick #top_menu ul.dropdown-menu {
-    top: 100% !important;
+  //  top: 100% !important;
 }
 .header-stick .custom-menu-inside-div {
-    top: 100% !important;
+   // top: 100% !important;
 }
 .block-none
 {
diff --git a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_3.less b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_3.less
index 3634f387..43d26293 100755
--- a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_3.less
+++ b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_3.less
@@ -50,10 +50,10 @@ margin-left: 2px;
 	padding: 0px 7px !important;
 }
 .header-stick #top_menu ul.dropdown-menu {
-    top: 92% !important;
+   // top: 92% !important;
 }
 .header-stick .custom-menu-inside-div {
-    top: 92% !important;
+   // top: 92% !important;
 }
 .company_pricelist
 {
diff --git a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_4.less b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_4.less
index 229240c2..1404bdaf 100755
--- a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_4.less
+++ b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_4.less
@@ -197,10 +197,10 @@ header
 }
 
 .header-stick #top_menu ul.dropdown-menu {
-    top: 92% !important;
+  //  top: 92% !important;
 }
 .header-stick .custom-menu-inside-div {
-    top: 92% !important;
+   // top: 92% !important;
 }
 .company_pricelist
 {
@@ -260,6 +260,14 @@ header
 		.bg(#fff);
 		.pb(2%) !important;
 	}
+	#top_menu > li.dropdown > a > i
+	{
+		color:#fff;
+	}
+	#top_menu > li.dropdown.open > a > i
+	{
+		color:#444;
+	}
 }
 @media (max-width:800px)
 {
diff --git a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_5.less b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_5.less
index 79794576..f9cecf73 100755
--- a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_5.less
+++ b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_5.less
@@ -55,13 +55,13 @@
 	}	
 }
 .header-stick #top_menu ul.dropdown-menu {
-    top: 88% !important;
+   // top: 88% !important;
 }
 .header-stick #top_menu ul.dropdown-menu {
-    top: 93% !important;
+   // top: 93% !important;
 }
 .header-stick .custom-menu-inside-div {
-    top: 93% !important;
+ //   top: 93% !important;
 }
 .header-stick .navbar-nav > li.active > a span {
     color: #fff !important;
@@ -316,6 +316,20 @@ ul#top_menu
 	{
 		display:block !important;
 	}
+	ul#top_menu > li.active > a {
+	    color: @theme-color;
+		border-radius: 0;
+		background-color: transparent;
+	}
+	ul#top_menu > li:hover > a {
+    color: inherit;
+		border-radius: 0;
+		background-color: transparent;
+	}
+	.navbar .navbar-top-collapse
+	{
+		width:100%;
+	}
 }
 
 @media (max-width:1100px)
diff --git a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_6.less b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_6.less
index 8e31ea68..a10a61e0 100755
--- a/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_6.less
+++ b/ext/clarico-addons/customize_theme/static/src/less/header_styles/header_style_6.less
@@ -123,10 +123,10 @@
     max-width:1400px;
 }
 .header-stick .custom-menu-inside-div {
-    top: 100% !important;
+    //top: 100% !important;
 }
 .header-stick #top_menu ul.dropdown-menu {
-    top: 100% !important;
+    //top: 100% !important;
 }
 .logo-stick
     {
diff --git a/ext/clarico-addons/customize_theme/templates/templates.xml b/ext/clarico-addons/customize_theme/templates/templates.xml
index 92034dd7..116f32b9 100755
--- a/ext/clarico-addons/customize_theme/templates/templates.xml
+++ b/ext/clarico-addons/customize_theme/templates/templates.xml
@@ -18,10 +18,17 @@
 						<div class="modal-body">
 							<!-- Color Container -->
 							<div class="col-md-12 col-xs-12 mb8 b_btm">
-								<h5 class="">Select Theme Color  <a class="more_custom_icon"><i class="fa fa-minus-circle"></i></a></h5>
+								<h5 class="">
+									Select Theme Color
+									<a class="more_custom_icon">
+										<i class="fa fa-minus-circle"></i>
+									</a>
+								</h5>
 								<hr />
 								<div class="mt16">
-									<div class="btn-group common-div expand_main_div expand_main_div_first" data-toggle="buttons">
+									<div
+										class="btn-group common-div expand_main_div expand_main_div_first"
+										data-toggle="buttons">
 										<label class="btn btn-main checked">
 											<input type="radio" name="options" id="option2"
 												autocomplete="off" chacked="chacked" data-xmlid="customize_theme.main_color" />
@@ -52,7 +59,7 @@
 												autocomplete="off" data-xmlid="customize_theme.main_color5" />
 											<span class="fa fa-check"></span>
 										</label>
-										
+
 										<label class="btn btn-new1">
 											<input type="radio" name="options" id="option2"
 												autocomplete="off" data-xmlid="customize_theme.main_color7" />
@@ -88,46 +95,64 @@
 							</div>
 							<!-- multi color -->
 							<div class="col-md-12 col-xs-12 mb8 b_btm">
-								<h5 class="">Set your custom color<a class="more_custom_icon"><i class="fa fa-plus-circle"/></a></h5>
-								<hr/>
+								<h5 class="">
+									Set your custom color
+									<a class="more_custom_icon">
+										<i class="fa fa-plus-circle" />
+									</a>
+								</h5>
+								<hr />
 								<div class="mt16">
-									<div class="btn-group common-div expand_main_div" data-toggle="buttons">
+									<div class="btn-group common-div expand_main_div"
+										data-toggle="buttons">
 										<label class="btn checked" style="display:none !important">
-											<input type="radio" name="options" id="option2" autocomplete="off" chacked="chacked" data-xmlid=""/>
+											<input type="radio" name="options" id="option2"
+												autocomplete="off" chacked="chacked" data-xmlid="" />
 										</label>
 										<div class="multi_color">
 											<section class="common-div">
-												<input id="input_color" type="text" placeholder="#2b2b2b" class="col-md-8 color_box"/>
-												<label class="btn select_theme_color">Go
-													<input type="radio" name="options" id="option2" autocomplete="off" data-xmlid="customize_theme.multi_color"/>
+												<input id="input_color" type="text" placeholder="#2b2b2b"
+													class="col-md-8 color_box" />
+												<label class="btn select_theme_color">
+													Go
+													<input type="radio" name="options" id="option2"
+														autocomplete="off" data-xmlid="customize_theme.multi_color" />
 												</label>
 											</section>
 										</div>
 									</div>
-								</div>  	
-							</div>								
+								</div>
+							</div>
 							<!-- Header Style -->
 
 							<div class="col-md-12 col-xs-12 mb8 b_btm">
-								<h5 class="">Select Header Style <a class="more_custom_icon"><i class="fa fa-plus-circle"></i></a></h5>
+								<h5 class="">
+									Select Header Style
+									<a class="more_custom_icon">
+										<i class="fa fa-plus-circle"></i>
+									</a>
+								</h5>
 								<hr />
 
 								<div class="mt16">
-									<div class="btn-group  common-div expand_main_div" data-toggle="buttons">
+									<div class="btn-group  common-div expand_main_div"
+										data-toggle="buttons">
 										<label class="btn header_style_label">
 											<input type="radio" name="headeroptions" id="header_style_1"
 												autocomplete="off" checked="checked" data-xmlid="customize_theme.header_style_1"
 												data-tmp_xmlid="customize_theme.template_header_style_1">
-												<img src="/customize_theme/static/src/img/Header_1.jpg" class="s_image_common"></img>
+												<img src="/customize_theme/static/src/img/Header_1.jpg"
+													class="s_image_common"></img>
 											</input>
-							
+
 										</label>
 										<label class="btn header_style_label">
 											<input type="radio" name="headeroptions"
 												id="customize_theme_layout_style_2" autocomplete="off"
 												checked="checked" data-xmlid="customize_theme.header_style_2"
 												data-tmp_xmlid="customize_theme.template_header_style_2">
-												<img src="/customize_theme/static/src/img/Header_2.jpg" class="s_image_common"></img>
+												<img src="/customize_theme/static/src/img/Header_2.jpg"
+													class="s_image_common"></img>
 											</input>
 										</label>
 										<label class="btn header_style_label">
@@ -135,7 +160,8 @@
 												id="customize_theme_layout_style_3" autocomplete="off"
 												checked="checked" data-xmlid="customize_theme.header_style_3"
 												data-tmp_xmlid="customize_theme.template_header_style_3">
-												<img src="/customize_theme/static/src/img/Header_3.jpg" class="s_image_common"></img>
+												<img src="/customize_theme/static/src/img/Header_3.jpg"
+													class="s_image_common"></img>
 											</input>
 										</label>
 										<label class="btn header_style_label">
@@ -143,7 +169,8 @@
 												id="customize_theme_layout_style_4" autocomplete="off"
 												checked="checked" data-xmlid="customize_theme.header_style_4"
 												data-tmp_xmlid="customize_theme.template_header_style_4">
-											<img src="/customize_theme/static/src/img/Header_4.jpg" class="s_image_common"></img>
+												<img src="/customize_theme/static/src/img/Header_4.jpg"
+													class="s_image_common"></img>
 											</input>
 										</label>
 										<label class="btn header_style_label">
@@ -151,7 +178,8 @@
 												id="customize_theme_layout_style_5" autocomplete="off"
 												checked="checked" data-xmlid="customize_theme.header_style_5"
 												data-tmp_xmlid="customize_theme.template_header_style_5">
-												<img src="/customize_theme/static/src/img/Header_5.jpg" class="s_image_common"></img>
+												<img src="/customize_theme/static/src/img/Header_5.jpg"
+													class="s_image_common"></img>
 											</input>
 										</label>
 										<label class="btn header_style_label">
@@ -159,192 +187,172 @@
 												id="customize_theme_layout_style_6" autocomplete="off"
 												checked="checked" data-xmlid="customize_theme.header_style_6"
 												data-tmp_xmlid="customize_theme.template_header_style_6">
-											<img src="/customize_theme/static/src/img/Header_6.jpg" class="s_image_common"></img>
+												<img src="/customize_theme/static/src/img/Header_6.jpg"
+													class="s_image_common"></img>
 											</input>
 										</label>
 									</div>
 								</div>
 							</div>
-							
-							
-							
+
+
+
 							<div class="col-md-12 col-xs-12 mb8 b_btm">
-								<h5 class="">Select Footer Style<a class="more_custom_icon"><i class="fa fa-plus-circle"></i></a></h5>
+								<h5 class="">
+									Select Footer Style
+									<a class="more_custom_icon">
+										<i class="fa fa-plus-circle"></i>
+									</a>
+								</h5>
 								<hr />
 
 								<div class="mt16">
-									<div class="btn-group common-div expand_main_div" data-toggle="buttons">
+									<div class="btn-group common-div expand_main_div"
+										data-toggle="buttons">
 										<label class="btn footer_style_label">
 											<input type="radio" name="footeroptions" id="footer_style_1"
 												autocomplete="off" checked="checked" data-xmlid="customize_theme.footer_style_1"
 												data-tmp_xmlid="customize_theme.template_Footer_style_1">
-												<img src="/customize_theme/static/src/img/footer_1.jpg" class="s_image_common"></img>
+												<img src="/customize_theme/static/src/img/footer_1.jpg"
+													class="s_image_common"></img>
 											</input>
-											
+
 										</label>
 										<label class="btn footer_style_label">
 											<input type="radio" name="footeroptions"
 												id="customize_theme_footer_style_2" autocomplete="off"
 												checked="checked" data-xmlid="customize_theme.footer_style_2"
 												data-tmp_xmlid="customize_theme.template_Footer_style_2">
-												<img src="/customize_theme/static/src/img/footer_2.jpg" class="s_image_common"></img>
+												<img src="/customize_theme/static/src/img/footer_2.jpg"
+													class="s_image_common"></img>
 											</input>
-											
+
 										</label>
-									 	<label class="btn footer_style_label">
+										<label class="btn footer_style_label">
 											<input type="radio" name="footeroptions"
 												id="customize_theme_layout_style_3" autocomplete="off"
 												checked="checked" data-xmlid="customize_theme.footer_style_3"
 												data-tmp_xmlid="customize_theme.template_Footer_style_3">
-												<img src="/customize_theme/static/src/img/footer_3.jpg" class="s_image_common"></img>
+												<img src="/customize_theme/static/src/img/footer_3.jpg"
+													class="s_image_common"></img>
 											</input>
-											
-										</label> 
+
+										</label>
 									</div>
 								</div>
 							</div>
-							
-							
+
+
 							<!-- Font Style -->
-							
-						<!-- 	
-							<div class="col-md-12 col-xs-12 mb8 b_btm">
-								<h5 class="">Select Font Style<a class="more_custom_icon"><i class="fa fa-plus-circle"></i></a></h5>
-								<hr />
-								<div class="mt16">
-								<div class="expand_main_div">
-									<button type="button" id="font_box" class="btn-comman no_btn_style" data-toggle="modal" data-target="#font_box">Open Font Box</button>
-								</div>
-								</div>
-							</div> -->
-							
-							
+
+							<!-- <div class="col-md-12 col-xs-12 mb8 b_btm"> <h5 class="">Select 
+								Font Style<a class="more_custom_icon"><i class="fa fa-plus-circle"></i></a></h5> 
+								<hr /> <div class="mt16"> <div class="expand_main_div"> <button type="button" 
+								id="font_box" class="btn-comman no_btn_style" data-toggle="modal" data-target="#font_box">Open 
+								Font Box</button> </div> </div> </div> -->
+
+
 							<!-- select button styles -->
-							
-							
-							 <div class="col-md-12 col-xs-12 mb8 b_btm">
-								<h5 class="">Select Button Style <a class="more_custom_icon"><i class="fa fa-plus-circle"></i></a></h5>
+
+
+							<div class="col-md-12 col-xs-12 mb8 b_btm">
+								<h5 class="">
+									Select Button Style
+									<a class="more_custom_icon">
+										<i class="fa fa-plus-circle"></i>
+									</a>
+								</h5>
 								<hr />
 								<div class="mt16">
-								<div class="expand_main_div">
-									<div class="btn-group common-div" data-toggle="buttons">
-										<label class="shop_now_button1 cbtn btn">
-											<input type="radio" name="btn options" id="customize_theme_btn_style_1" class=""
-												autocomplete="off"  data-xmlid="customize_theme.btn1" checked="checked">
-												Button 1
-											</input>
-											<span class="fa fa-check"></span>
-										</label>
-										<label class="shop_now_button2 cbtn btn">
-											<input type="radio" name="btn options"
-												id="customize_theme_btn_style_2" autocomplete="off"
-												 data-xmlid="customize_theme.btn2">					
-												Button 2
-											</input>
-											<span class="fa fa-check"></span>
-										</label>
-										<label class="shop_now_button3 cbtn btn">
-											<input type="radio" name="btn options" class="shop_now_button"
-												id="customize_theme_btn_style_3" autocomplete="off"
-												 data-xmlid="customize_theme.btn3">				
-												Button 3
-											</input>
-											<span class="fa fa-check"></span>
-										</label>
-										<label class="btn cbtn shop_now_button4">
-											<input type="radio" name="btn options" class="shop_now_button"
-												id="customize_theme_btn_style_4" autocomplete="off"
-												 data-xmlid="customize_theme.btn4">
-												Button 4
-											</input>
-											<span class="fa fa-check"></span>
-										</label>
-										<label class="btn cbtn shop_now_button5 btn_common">
-											<input type="radio" name="btn options" class="shop_now_button"
-												id="customize_theme_btn_style_5" autocomplete="off"
-												 data-xmlid="customize_theme.btn5">
-												Button 5
-											</input>
-											<span class="fa fa-check"></span>
-										</label>
+									<div class="expand_main_div">
+										<div class="btn-group common-div" data-toggle="buttons">
+											<label class="shop_now_button1 cbtn btn">
+												<input type="radio" name="btn options" id="customize_theme_btn_style_1"
+													class="" autocomplete="off" data-xmlid="customize_theme.btn1"
+													checked="checked">
+													Button 1
+												</input>
+												<span class="fa fa-check"></span>
+											</label>
+											<label class="shop_now_button2 cbtn btn">
+												<input type="radio" name="btn options" id="customize_theme_btn_style_2"
+													autocomplete="off" data-xmlid="customize_theme.btn2">
+													Button 2
+												</input>
+												<span class="fa fa-check"></span>
+											</label>
+											<label class="shop_now_button3 cbtn btn">
+												<input type="radio" name="btn options" class="shop_now_button"
+													id="customize_theme_btn_style_3" autocomplete="off"
+													data-xmlid="customize_theme.btn3">
+													Button 3
+												</input>
+												<span class="fa fa-check"></span>
+											</label>
+											<label class="btn cbtn shop_now_button4">
+												<input type="radio" name="btn options" class="shop_now_button"
+													id="customize_theme_btn_style_4" autocomplete="off"
+													data-xmlid="customize_theme.btn4">
+													Button 4
+												</input>
+												<span class="fa fa-check"></span>
+											</label>
+											<label class="btn cbtn shop_now_button5 btn_common">
+												<input type="radio" name="btn options" class="shop_now_button"
+													id="customize_theme_btn_style_5" autocomplete="off"
+													data-xmlid="customize_theme.btn5">
+													Button 5
+												</input>
+												<span class="fa fa-check"></span>
+											</label>
 											<label class="btn cbtn shop_now_button6 btn_common">
-											<input type="radio" name="btn options" class="shop_now_button"
-												id="customize_theme_btn_style_6" autocomplete="off"
-												data-xmlid="customize_theme.btn6">
-												Button 6
-											</input>
-											<span class="fa fa-check"></span>
-										</label>
+												<input type="radio" name="btn options" class="shop_now_button"
+													id="customize_theme_btn_style_6" autocomplete="off"
+													data-xmlid="customize_theme.btn6">
+													Button 6
+												</input>
+												<span class="fa fa-check"></span>
+											</label>
+										</div>
 									</div>
 								</div>
-								</div>
-							</div> 
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-			<script type="text/javascript" src="/customize_theme/static/src/js/customize_font.js"></script>
+			<script type="text/javascript"
+				src="/customize_theme/static/src/js/customize_font.js"></script>
 		</xpath>
 	</template>
 
-<!-- 	<template id="font_box_template" name="Font Box">
-		<div id="fontbox" class="modal fade in" tabindex="-1" role="dialog" style="display: block;">
-		  <div class="modal-dialog">
-			<div class="modal-content">
-		      <div class="modal-header">
-		        <button type="button" class="close close-popup" data-dismiss="modal"><span aria-hidden="true">&amp;times;</span></button>
-		        <h4 class="modal-title">Font Box</h4>
-		      </div>
-				<div class="modal-body">
-					<section class="text-center f_bg_light"><h4 class="font_style_sub-heading">Font style 1</h4></section>
-				
-					<div class="font_input_grp">
-						<h5 class="light_font_h5">Light</h5>
-						<input type="text" name="light_type" id="light_type" placeholder="https://fonts.gstatic.com/s/muli/v11/7Au_p_0qiz-adZnkOCX2zw.woff2" />
-					</div>
-					<div class="font_input_grp">
-						<h5 class="regular_font_h5">Regular</h5>
-						<input type="text" name="regular_type" id="regular_type" />
-					</div>
-					<div class="font_input_grp">
-						<h5 class="semibold_font_h5">Semibold</h5>
-						<input type="text" name="semibold_type" id="semibold_type" />
-					</div>
-					<div class="font_input_grp">
-						<h5 class="bold_font_h5">Bold</h5>
-						<input type="text" name="bold_type" id="bold_type" />
-					</div>
-		      </div>
-		      <div class="modal-body">
-		     	<section class="text-center f_bg_light"><h4 class="font_style_sub-heading">Font style 2</h4></section>
-					<div class="font_input_grp">
-						<h5 class="light_font_h5">Light</h5>
-						<input type="text" name="light_type" id="f2_light_type" />
-					</div>
-					<div class="font_input_grp">
-						<h5 class="regular_font_h5">Regular</h5>
-						<input type="text" name="regular_type" id="f2_regular_type" />
-					</div>
-					<div class="font_input_grp">
-						<h5 class="semibold_font_h5">Semibold</h5>
-						<input type="text" name="semibold_type" id="f2_semibold_type" />
-					</div>
-					<div class="font_input_grp">
-						<h5 class="bold_font_h5">Bold</h5>
-						<input type="text" name="bold_type" id="f2_bold_type" />
-					</div>
-		      </div>
-		      <div class="modal-footer">
-		      	<button type="button" id="apply_font" class="btn btn-default" data-dismiss="modal">Submit</button>
-		     	<button type="button" id="apply_to_all" class="btn btn-default">Apply to all</button>
-		     	<a class="font_reset_a">Reset</a>
-		        <button type="button" class="btn btn-default close-popup" data-dismiss="modal">Close</button>
-		      </div>
-		    </div>
-		
-		  </div>
-		</div>
-	</template> -->
+	<!-- <template id="font_box_template" name="Font Box"> <div id="fontbox" 
+		class="modal fade in" tabindex="-1" role="dialog" style="display: block;"> 
+		<div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> 
+		<button type="button" class="close close-popup" data-dismiss="modal"><span 
+		aria-hidden="true">&amp;times;</span></button> <h4 class="modal-title">Font 
+		Box</h4> </div> <div class="modal-body"> <section class="text-center f_bg_light"><h4 
+		class="font_style_sub-heading">Font style 1</h4></section> <div class="font_input_grp"> 
+		<h5 class="light_font_h5">Light</h5> <input type="text" name="light_type" 
+		id="light_type" placeholder="https://fonts.gstatic.com/s/muli/v11/7Au_p_0qiz-adZnkOCX2zw.woff2" 
+		/> </div> <div class="font_input_grp"> <h5 class="regular_font_h5">Regular</h5> 
+		<input type="text" name="regular_type" id="regular_type" /> </div> <div class="font_input_grp"> 
+		<h5 class="semibold_font_h5">Semibold</h5> <input type="text" name="semibold_type" 
+		id="semibold_type" /> </div> <div class="font_input_grp"> <h5 class="bold_font_h5">Bold</h5> 
+		<input type="text" name="bold_type" id="bold_type" /> </div> </div> <div 
+		class="modal-body"> <section class="text-center f_bg_light"><h4 class="font_style_sub-heading">Font 
+		style 2</h4></section> <div class="font_input_grp"> <h5 class="light_font_h5">Light</h5> 
+		<input type="text" name="light_type" id="f2_light_type" /> </div> <div class="font_input_grp"> 
+		<h5 class="regular_font_h5">Regular</h5> <input type="text" name="regular_type" 
+		id="f2_regular_type" /> </div> <div class="font_input_grp"> <h5 class="semibold_font_h5">Semibold</h5> 
+		<input type="text" name="semibold_type" id="f2_semibold_type" /> </div> <div 
+		class="font_input_grp"> <h5 class="bold_font_h5">Bold</h5> <input type="text" 
+		name="bold_type" id="f2_bold_type" /> </div> </div> <div class="modal-footer"> 
+		<button type="button" id="apply_font" class="btn btn-default" data-dismiss="modal">Submit</button> 
+		<button type="button" id="apply_to_all" class="btn btn-default">Apply to 
+		all</button> <a class="font_reset_a">Reset</a> <button type="button" class="btn 
+		btn-default close-popup" data-dismiss="modal">Close</button> </div> </div> 
+		</div> </div> </template> -->
 
 
 	<!-- Header Option -->
@@ -398,7 +406,7 @@
 
 
 	<!-- Footer Option -->
-	
+
 	<template id="footer_style_1" inherit_id="web.assets_frontend"
 		name="Footer Style 1" active="False">
 		<xpath expr="//link[last()]" position="after">
@@ -413,22 +421,29 @@
 				href="/customize_theme/static/src/less/footer_styles/footer_style_2.less" />
 		</xpath>
 	</template>
-	 <template id="footer_style_3" inherit_id="web.assets_frontend"
+	<template id="footer_style_3" inherit_id="web.assets_frontend"
 		name="Footer Style 3" active="False">
 		<xpath expr="//link[last()]" position="after">
 			<link rel="stylesheet" type="text/less"
 				href="/customize_theme/static/src/less/footer_styles/footer_style_3.less" />
 		</xpath>
-	</template> 
+	</template>
 
 
 	<!-- Color Option -->
 
-    <template id="multi_color" inherit_id="web.assets_frontend" name="Multi color">
-    	<xpath expr="//link[last()]" position="after">
-    		<link rel="stylesheet" type="text/less" href="/customize_theme/static/src/less/custom_color.less" />
-    	</xpath>
-    </template>
+	<template id="multi_color" inherit_id="web.assets_frontend"
+		name="Multi color">
+		<xpath expr="//link[last()]" position="after">
+			<t t-set="theme_color"
+				t-value="request.env['ir.config_parameter'].sudo().get_param('customize_theme.theme_color')" />
+			<t t-if="theme_color">
+			<style type='text/less'>
+				@theme-color: <t t-esc='"%s"%theme_color.replace("&apos;","")' />;
+			</style>
+			</t>
+		</xpath>
+	</template>
 	<template id="main_color" inherit_id="web.assets_frontend"
 		name="Main color">
 		<xpath expr="//link[last()]" position="after">
@@ -521,63 +536,65 @@
 	</template>
 
 	<!-- Button options -->
- 
-    <template id="btn1" inherit_id="web.assets_frontend"
-		name="Main button" active="False">
+
+	<template id="btn1" inherit_id="web.assets_frontend" name="Main button"
+		active="False">
 		<xpath expr="//link[last()]" position="after">
 			<link rel="stylesheet" type="text/less"
 				href="/customize_theme/static/src/less/button_styles/button_style_1.less" />
 		</xpath>
 	</template>
-	
-	<template id="btn2" inherit_id="web.assets_frontend"
-		name="Main button2" active="False"> 
+
+	<template id="btn2" inherit_id="web.assets_frontend" name="Main button2"
+		active="False">
 		<xpath expr="//link[last()]" position="after">
 			<link rel="stylesheet" type="text/less"
 				href="/customize_theme/static/src/less/button_styles/button_style_2.less" />
 		</xpath>
 	</template>
-	
-	<template id="btn3" inherit_id="web.assets_frontend"
-		name="Main button3" active="False">
+
+	<template id="btn3" inherit_id="web.assets_frontend" name="Main button3"
+		active="False">
 		<xpath expr="//link[last()]" position="after">
 			<link rel="stylesheet" type="text/less"
 				href="/customize_theme/static/src/less/button_styles/button_style_3.less" />
 		</xpath>
 	</template>
-	
-	<template id="btn4" inherit_id="web.assets_frontend"
-		name="Main button4" active="False">
+
+	<template id="btn4" inherit_id="web.assets_frontend" name="Main button4"
+		active="False">
 		<xpath expr="//link[last()]" position="after">
 			<link rel="stylesheet" type="text/less"
 				href="/customize_theme/static/src/less/button_styles/button_style_4.less" />
 		</xpath>
 	</template>
-	
-	<template id="btn5" inherit_id="web.assets_frontend"
-		name="Main button5" active="False">
+
+	<template id="btn5" inherit_id="web.assets_frontend" name="Main button5"
+		active="False">
 		<xpath expr="//link[last()]" position="after">
 			<link rel="stylesheet" type="text/less"
 				href="/customize_theme/static/src/less/button_styles/button_style_5.less" />
 		</xpath>
 	</template>
-	
-	<template id="btn6" inherit_id="web.assets_frontend" name="Main button6" active="False">
+
+	<template id="btn6" inherit_id="web.assets_frontend" name="Main button6"
+		active="False">
 		<xpath expr="//link[last()]" position="after">
 			<link rel="stylesheet" type="text/less"
 				href="/customize_theme/static/src/less/button_styles/button_style_6.less" />
 		</xpath>
-	</template> 
-	
+	</template>
 
 
 
-<!--  header templates -->
+
+	<!-- header templates -->
 
 	<template id="template_header_style_1" inherit_id="clarico_layout.clarico_header_main"
 		customize_show="False" active="False" name="Header Style 1">
 		<xpath expr="//div[hasclass('main-header')]" position="replace">
-			<div class="main-header main_header_default" t-if="website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
+			<div class="main-header main_header_default"
+				t-if="website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
 				<div class="main-header-maxW">
 					<div class="offer-center">
 						<p class="offer-p">
@@ -588,7 +605,8 @@
 					</div>
 				</div>
 			</div>
-			<div class="main-header main_header_default" t-if="not website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
+			<div class="main-header main_header_default"
+				t-if="not website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
 				<section class="main-header-maxW">
 					<section class="offer-center">
 						<p class="offer-p">
@@ -628,7 +646,8 @@
 											</p>
 										</li>
 										<li id="o_logout">
-											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem" class="btn">Logout
+											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem"
+												class="btn">Logout
 											</a>
 										</li>
 									</ul>
@@ -687,14 +706,16 @@
 		<xpath expr="//div[hasclass('main-header')]" position="replace">
 			<div class="main-header header_style_2_div">
 				<div class="main-header-maxW">
-					<section class="offer-left_header" t-if="website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
+					<section class="offer-left_header"
+						t-if="website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
 						<p class="offer-p">
 							<label t-field="website.clarico_header_style_one" class="header_pera_offer" />
 							<label t-field="website.clarico_header_style_two" class="header_pera_offer header_pera_offer_pipe" />
 							<label t-field="website.clarico_header_style_three" class="header_pera_offer header_pera_offer_pipe" />
 						</p>
 					</section>
-					<section class="offer-left_header" t-if="not website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
+					<section class="offer-left_header"
+						t-if="not website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
 						<p class="offer-p">
 							<label class="header_pera_offer">Special Offer on First Purchase</label>
 							<label class="header_pera_offer header_pera_offer_pipe">Code : #ASDA44</label>
@@ -764,7 +785,8 @@
 											</p>
 										</li>
 										<li id="o_logout">
-											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem" class="btn">Logout
+											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem"
+												class="btn">Logout
 											</a>
 										</li>
 									</ul>
@@ -825,14 +847,16 @@
 
 			<div class="main-header header_style_3_div">
 				<div class="main-header-maxW">
-					<div class="offer-left_header"  t-if="website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
+					<div class="offer-left_header"
+						t-if="website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
 						<p class="offer-p">
 							<label t-field="website.clarico_header_style_one" class="header_pera_offer" />
 							<label t-field="website.clarico_header_style_two" class="header_pera_offer header_pera_offer_pipe" />
 							<label t-field="website.clarico_header_style_three" class="header_pera_offer header_pera_offer_pipe" />
 						</p>
 					</div>
-					<section class="offer-left_header"  t-if="not website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
+					<section class="offer-left_header"
+						t-if="not website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
 						<p class="offer-p">
 							<label class="header_pera_offer">Special Offer on First Purchase</label>
 							<label class="header_pera_offer header_pera_offer_pipe">Code : #ASDA44</label>
@@ -902,7 +926,8 @@
 											</p>
 										</li>
 										<li id="o_logout">
-											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem" class="btn">Logout
+											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem"
+												class="btn">Logout
 											</a>
 										</li>
 									</ul>
@@ -960,14 +985,16 @@
 
 			<div class="main-header header_style_4_div">
 				<div class="main-header-maxW">
-					<div class="offer-left_header"  t-if="website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
+					<div class="offer-left_header"
+						t-if="website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
 						<p class="offer-p">
 							<label t-field="website.clarico_header_style_one" class="header_pera_offer" />
 							<label t-field="website.clarico_header_style_two" class="header_pera_offer header_pera_offer_pipe" />
 							<label t-field="website.clarico_header_style_three" class="header_pera_offer header_pera_offer_pipe" />
 						</p>
 					</div>
-					<section class="offer-left_header"  t-if="not website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
+					<section class="offer-left_header"
+						t-if="not website.clarico_header_style_one or website.clarico_header_style_two or website.clarico_header_style_three">
 						<p class="offer-p">
 							<label class="header_pera_offer">Special Offer on First Purchase</label>
 							<label class="header_pera_offer header_pera_offer_pipe">Code : #ASDA44</label>
@@ -1069,7 +1096,8 @@
 												</p>
 											</li>
 											<li id="o_logout">
-												<a t-attf-href="/web/session/logout?redirect=/" role="menuitem" class="btn">Logout
+												<a t-attf-href="/web/session/logout?redirect=/" role="menuitem"
+													class="btn">Logout
 												</a>
 											</li>
 										</ul>
@@ -1110,7 +1138,8 @@
 				<div class="main-header-before-maxW">
 					<div class="main-header-right">
 
-						<section class="header_style_share"  t-if="website.social_facebook or website.social_twitter or website.social_youtube or website.social_googleplus or website.social_github">
+						<section class="header_style_share"
+							t-if="website.social_facebook or website.social_twitter or website.social_youtube or website.social_googleplus or website.social_github">
 							<section t-if="website.social_facebook">
 								<a target="_Blank" class="header_facebook" t-att-href="website.social_facebook">
 									<i class="fa fa-facebook"></i>
@@ -1138,33 +1167,15 @@
 								</a>
 							</section>
 						</section>
-						<!-- <section class="header_style_share"  t-if="not website.social_facebook or website.social_twitter or website.social_youtube or website.social_googleplus or website.social_github">
-							<section>
-								<a class="header_facebook" href="#">
-									<i class="fa fa-facebook"></i>
-								</a>
-							</section>
-							<section>
-								<a class="header_twitter" href="#">
-									<i class="fa fa-twitter"></i>
-								</a>
-							</section>
-							<section>
-								<a class="header_linkedin" href="#">
-									<i class="fa fa-linkedin"></i>
-								</a>
-							</section>
-							<section>
-								<a class="header_google" href="#">
-									<i class="fa fa-google-plus"></i>
-								</a>
-							</section>
-							<section>
-								<a class="header_mail" href="#">
-									<i class="fa fa-github" />
-								</a>
-							</section>
-						</section> -->
+						<!-- <section class="header_style_share" t-if="not website.social_facebook 
+							or website.social_twitter or website.social_youtube or website.social_googleplus 
+							or website.social_github"> <section> <a class="header_facebook" href="#"> 
+							<i class="fa fa-facebook"></i> </a> </section> <section> <a class="header_twitter" 
+							href="#"> <i class="fa fa-twitter"></i> </a> </section> <section> <a class="header_linkedin" 
+							href="#"> <i class="fa fa-linkedin"></i> </a> </section> <section> <a class="header_google" 
+							href="#"> <i class="fa fa-google-plus"></i> </a> </section> <section> <a 
+							class="header_mail" href="#"> <i class="fa fa-github" /> </a> </section> 
+							</section> -->
 						<div class="company_call_us" t-if="res_company.phone">
 							<span class="header_call_icon">
 								<i class="fa fa-phone" aria-hidden="true"></i>
@@ -1234,7 +1245,8 @@
 											</p>
 										</li>
 										<li id="o_logout">
-											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem" class="btn">Logout
+											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem"
+												class="btn">Logout
 											</a>
 										</li>
 									</ul>
@@ -1286,7 +1298,8 @@
 
 				<div class="main-header-before-maxW">
 					<div class="main-header-right">
-						<section class="header_style_share" t-if="website.social_facebook or website.social_twitter or website.social_youtube or website.social_googleplus or website.social_github">
+						<section class="header_style_share"
+							t-if="website.social_facebook or website.social_twitter or website.social_youtube or website.social_googleplus or website.social_github">
 							<section t-if="website.social_facebook">
 								<a target="_Blank" class="header_facebook" t-att-href="website.social_facebook">
 									<i class="fa fa-facebook"></i>
@@ -1314,35 +1327,17 @@
 								</a>
 							</section>
 						</section>
-						
-						<!-- <section class="header_style_share" t-if="not website.social_facebook or website.social_twitter or website.social_youtube or website.social_googleplus or website.social_github">
-							<section>
-								<a class="header_facebook" href="#">
-									<i class="fa fa-facebook"></i>
-								</a>
-							</section>
-							<section>
-								<a class="header_twitter" href="#">
-									<i class="fa fa-twitter"></i>
-								</a>
-							</section>
-							<section>
-								<a class="header_linkedin" href="#">
-									<i class="fa fa-linkedin"></i>
-								</a>
-							</section>
-							<section>
-								<a class="header_google" href="#">
-									<i class="fa fa-google-plus"></i>
-								</a>
-							</section>
-							<section>
-								<a class="header_mail" href="#">
-									<i class="fa fa-github" />
-								</a>
-							</section>
-						</section> -->
-						
+
+						<!-- <section class="header_style_share" t-if="not website.social_facebook 
+							or website.social_twitter or website.social_youtube or website.social_googleplus 
+							or website.social_github"> <section> <a class="header_facebook" href="#"> 
+							<i class="fa fa-facebook"></i> </a> </section> <section> <a class="header_twitter" 
+							href="#"> <i class="fa fa-twitter"></i> </a> </section> <section> <a class="header_linkedin" 
+							href="#"> <i class="fa fa-linkedin"></i> </a> </section> <section> <a class="header_google" 
+							href="#"> <i class="fa fa-google-plus"></i> </a> </section> <section> <a 
+							class="header_mail" href="#"> <i class="fa fa-github" /> </a> </section> 
+							</section> -->
+
 						<div class="company_call_us" t-if="res_company.phone">
 							<span class="header_call_icon">
 								<i class="fa fa-phone" aria-hidden="true"></i>
@@ -1464,7 +1459,8 @@
 											</p>
 										</li>
 										<li id="o_logout">
-											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem" class="btn">Logout
+											<a t-attf-href="/web/session/logout?redirect=/" role="menuitem"
+												class="btn">Logout
 											</a>
 										</li>
 									</ul>
@@ -1496,480 +1492,560 @@
 			</div>
 		</xpath>
 	</template>
-	
-	
-	
-	<template id="template_Footer_style_1" inherit_id="clarico_layout.clarico_layout_footer_default"  customize_show="False" active="False">
-		<xpath expr="//div[@id='footer']" position="replace" >
+
+
+
+	<template id="template_Footer_style_1" inherit_id="clarico_layout.clarico_layout_footer_default"
+		customize_show="False" active="False">
+		<xpath expr="//div[@id='footer']" position="replace">
 			<div id="footer" class="container hidden-print">
-					<div class="row">
-						<div class="theme_icon_and_social_container">
-							<div class="clarico_logo_footer">
-								<div class="logo_name_container">
-									<span t-field="res_company.logo" class="ftr_logo_span" itemprop="name" t-options="{'widget': 'image','class':'s_image_common'}">Company logo							</span>
-								</div>
-							</div>
-							<div class="search_bar_footer">
-								<div class="lbl_div_container">
-									<p class="newsltr_lbl">sign up for our newsletter!</p>
-								</div>
+				<div class="row">
+					<div class="theme_icon_and_social_container">
+						<div class="clarico_logo_footer">
+							<div class="logo_name_container">
+								<span t-field="res_company.logo" class="ftr_logo_span"
+									itemprop="name" t-options="{'widget': 'image','class':'s_image_common'}">Company logo							</span>
 							</div>
 						</div>
-						<div class="common_footer_content_details_div">
-							<div class="company_details_footer">
-								<ul class="customer-contact-ul">
-									<li>
-										<div class="contact_detail_para">
-											<p class="span_lbl">Add</p>
-											:
-											<p class="field_padding" t-field="res_company.street" />
-										</div>
-									</li>
-									<li>
-										<div class="contact_detail_para">
-											<p class="span_lbl">Tel</p>
-											:
-											<p class="field_padding" t-field="res_company.phone" />
-										</div>
-									</li>
-									<li>
-										<div class="contact_detail_para">
-											<p class="span_lbl">Email</p>
-											:
-											<p class="field_padding" t-field="res_company.email" />
-										</div>
-									</li>
-								</ul>
-
-								<div class="social_icons_footer">
-									<div class="footer-social-icon">
-										<a class="o_facebook" t-att-href="website.social_facebook"
-											t-if="website.social_facebook">
-											<i class="fa fa-facebook" />
-										</a>
-										<a class="o_twitter" t-att-href="website.social_twitter"
-											t-if="website.social_twitter">
-											<i class="fa fa-twitter" />
-										</a>
-										<a class="o_linkedin" t-att-href="website.social_linkedin"
-											t-if="website.social_linkedin">
-											<i class="fa fa-linkedin" />
-										</a>
-										<a class="o_youtube" t-att-href="website.social_youtube"
-											t-if="website.social_youtube">
-											<i class="fa fa-youtube-play" />
-										</a>
-										<a class="o_googleplus" t-att-href="website.social_googleplus"
-											t-if="website.social_googleplus" rel="publisher">
-											<i class="fa fa-google-plus-square" />
-										</a>
-										<a class="o_github" t-att-href="website.social_github" t-if="website.social_github">
-											<i class="fa fa-github" />
-										</a>
-									</div>
-								</div>
-								<ul class="list-unstyled" id="products">
-								</ul>
+						<div class="search_bar_footer">
+							<div class="lbl_div_container">
+								<p class="newsltr_lbl">sign up for our newsletter!</p>
 							</div>
-							<div class="oe_structure">
+						</div>
+					</div>
+					<div class="common_footer_content_details_div">
+						<div class="company_details_footer">
+							<ul class="customer-contact-ul">
+								<li>
+									<div class="contact_detail_para">
+										<p class="span_lbl">Add</p>
+										:
+										<p class="field_padding" t-field="res_company.street" />
+									</div>
+								</li>
+								<li>
+									<div class="contact_detail_para">
+										<p class="span_lbl">Tel</p>
+										:
+										<p class="field_padding" t-field="res_company.phone" />
+									</div>
+								</li>
+								<li>
+									<div class="contact_detail_para">
+										<p class="span_lbl">Email</p>
+										:
+										<p class="field_padding" t-field="res_company.email" />
+									</div>
+								</li>
+							</ul>
+
+							<div class="social_icons_footer">
+								<div class="footer-social-icon">
+									<a class="o_facebook" t-att-href="website.social_facebook"
+										t-if="website.social_facebook">
+										<i class="fa fa-facebook" />
+									</a>
+									<a class="o_twitter" t-att-href="website.social_twitter"
+										t-if="website.social_twitter">
+										<i class="fa fa-twitter" />
+									</a>
+									<a class="o_linkedin" t-att-href="website.social_linkedin"
+										t-if="website.social_linkedin">
+										<i class="fa fa-linkedin" />
+									</a>
+									<a class="o_youtube" t-att-href="website.social_youtube"
+										t-if="website.social_youtube">
+										<i class="fa fa-youtube-play" />
+									</a>
+									<a class="o_googleplus" t-att-href="website.social_googleplus"
+										t-if="website.social_googleplus" rel="publisher">
+										<i class="fa fa-google-plus-square" />
+									</a>
+									<a class="o_github" t-att-href="website.social_github" t-if="website.social_github">
+										<i class="fa fa-github" />
+									</a>
+								</div>
+							</div>
+							
+						</div>
+						<div class="oe_structure">
 							<section class="col-md-4  col-lg-2">
 								<div class="footer-heading">
 									<ul class="customer-service-ul">
 										<li>
-											<section><a href="#">help</a></section>
+											<section>
+												<a href="#">help</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">gift cards</a></section>
+											<section>
+												<a href="#">gift cards</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">order status</a></section>
+											<section>
+												<a href="#">order status</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">free shipping</a></section>
+											<section>
+												<a href="#">free shipping</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">returns &amp; exchanges</a></section>
+											<section>
+												<a href="#">returns &amp; exchanges</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">international</a></section>
+											<section>
+												<a href="#">international</a>
+											</section>
 										</li>
 									</ul>
 								</div>
 							</section>
-							</div>
-							<div class="oe_structure">
+						</div>
+						<div class="oe_structure">
 							<section class="col-md-4  col-lg-2">
 								<div class="footer-heading">
 									<ul class="help-ul">
 										<li>
-											<section><a href="#">about us</a></section>
+											<section>
+												<a href="#">about us</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">jobs</a></section>
+											<section>
+												<a href="#">jobs</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">Affiliates</a></section>
+											<section>
+												<a href="#">Affiliates</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">meet the maker</a></section>
+											<section>
+												<a href="#">meet the maker</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">contact</a></section>
+											<section>
+												<a href="#">contact</a>
+											</section>
 										</li>
+										<ul class="list-unstyled" id="products">
+										</ul>
 									</ul>
 								</div>
 							</section>
-							</div>
-							<div class="oe_structure">
+						</div>
+						<div class="oe_structure">
 							<section class="col-md-4  col-lg-2">
 								<div class="footer-heading">
 									<ul class="security-ul">
 										<li>
-											<section><a href="#">security</a></section>
+											<section>
+												<a href="#">security</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">privacy</a></section>
+											<section>
+												<a href="#">privacy</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">text messaging</a></section>
+											<section>
+												<a href="#">text messaging</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">legal</a></section>
+											<section>
+												<a href="#">legal</a>
+											</section>
 										</li>
 										<li>
-											<section><a href="#">supply chain</a></section>
+											<section>
+												<a href="#">supply chain</a>
+											</section>
 										</li>
 									</ul>
 								</div>
 							</section>
-							</div>
-							<div class="col-md-4  col-lg-3">
-								<div class="oe_stucture" />
+						</div>
+						<div class="col-md-4  col-lg-3">
+							<div class="oe_stucture" />
+							<section>
+								<h3 class="footer_payment_heading">payment methods</h3>
+							</section>
+							<div class="payment_img_footer">
+
 								<section>
-									<h3 class="footer_payment_heading">payment methods</h3>
+									<img src="/clarico_layout/static/src/img/payment.png"></img>
 								</section>
-								<div class="payment_img_footer">
-									
-									<section>
-										<img src="/clarico_layout/static/src/img/payment.png"></img>
-									</section>
-								</div>
-								<div class="" id="info">
+							</div>
+							<div class="" id="info">
 								<ul class="payment_method_list list-inline">
-					                <t t-foreach="request.website.payment_icons()" t-as="icon">
-					                    <li>
-					                        <span t-field="icon.image" t-options='{"widget": "image", "alt-field": "name"}' />
-					                    </li>
-					                </t>
-					            </ul>
+									<t t-foreach="request.website.payment_icons()" t-as="icon">
+										<li>
+											<span t-field="icon.image" t-options='{"widget": "image", "alt-field": "name"}' />
+										</li>
+									</t>
+								</ul>
 							</div>
 							<t t-call="website.language_selector" />
-								
-							</div>
-							
+
 						</div>
+
 					</div>
 				</div>
+			</div>
 
-				<div class="scrollup-div">
-					<a href="#" class="scrollup-a">
-						<i class="fa fa-angle-up scrollup-i"></i>
-					</a>
-				</div>
+			<div class="scrollup-div">
+				<a href="#" class="scrollup-a">
+					<i class="fa fa-angle-up scrollup-i"></i>
+				</a>
+			</div>
 		</xpath>
 	</template>
-	
-	<template id="template_Footer_style_2" inherit_id="clarico_layout.clarico_layout_footer_default" customize_show="False" active="False">
-		<xpath expr="//div[@id='footer']" position="replace" >
+
+	<template id="template_Footer_style_2" inherit_id="clarico_layout.clarico_layout_footer_default"
+		customize_show="False" active="False">
+		<xpath expr="//div[@id='footer']" position="replace">
 			<div class="ftr_main">
 				<div id="footer" class="container hidden-print">
 					<section class="company_info_section_main">
 						<div class="ftr_company_detail" t-if="res_company.street">
-							<span><i class="fa fa-map-marker"></i></span>
+							<span>
+								<i class="fa fa-map-marker"></i>
+							</span>
 							<p class="field_padding" t-field="res_company.street" />
 						</div>
 						<div class="ftr_company_detail" t-if="res_company.phone">
-							<span><i class="fa fa-phone"></i></span>
+							<span>
+								<i class="fa fa-phone"></i>
+							</span>
 							<p class="field_padding" t-field="res_company.phone" />
 						</div>
 						<div class="ftr_company_detail" t-if="res_company.email">
-							<span><i class="fa fa-envelope"></i></span>
+							<span>
+								<i class="fa fa-envelope"></i>
+							</span>
 							<p class="field_padding" t-field="res_company.email" />
 						</div>
 					</section>
-				
+
 					<section class="ftr_menu_section">
 						<div class="ftr_language">
-								<t t-call="website.language_selector" />
-								<ul class="list-unstyled" id="products">
-								</ul>
-							</div>
-							<section class="sign_up_newsletter">
-						<div class="lbl_div_container">
-							<p class="newsltr_lbl">Sign up for our newsletter!</p>
+							<t t-call="website.language_selector" />
+							<ul class="list-unstyled" id="products">
+							</ul>
 						</div>
-					</section>
+						<section class="sign_up_newsletter">
+							<div class="lbl_div_container">
+								<p class="newsltr_lbl">Sign up for our newsletter!</p>
+							</div>
+						</section>
 					</section>
 					<div class="scrollup-div">
-					<a href="#" class="scrollup-a">
-						<i class="fa fa-angle-up scrollup-i"></i>
-					</a>
-				</div>
-					<section class="common-div text-center">
-						<ul class="list-unstyled" id="products">
-								</ul>
-					
-					</section>
-					
+						<a href="#" class="scrollup-a">
+							<i class="fa fa-angle-up scrollup-i"></i>
+						</a>
+					</div>
 					<section class="ftr_logo_social_section">
 						<div class="clarico_logo_footer">
-							<span t-field="res_company.logo" class="ftr_logo_span" itemprop="name" t-options="{'widget': 'image','class':'s_image_common'}">Company logo							</span>
+							<span t-field="res_company.logo" class="ftr_logo_span"
+								itemprop="name" t-options="{'widget': 'image','class':'s_image_common'}">Company logo							</span>
 						</div>
 						<div class="oe_structure">
-						<section class="ftr_inline-menu">
-							<ul>
-								<li>
-									<section><a href="#">about us</a></section>
-								</li>
-								<li>
-									<section><a href="#">contact us</a></section>
-								</li>
-								<li>
-									<section><a href="#">customer service</a></section>
-								</li>
-								<li>
-									<section><a href="#">privacy policy</a></section>
-								</li>
-								<li>
-									<section><a href="#">accessibility</a></section>
-								</li>
-								<li>
-									<section><a href="#">store directory</a></section>
-								</li>
-							</ul>
-						</section>
+							<section class="ftr_inline-menu">
+								<ul>
+									<li>
+										<section>
+											<a href="#">about us</a>
+										</section>
+									</li>
+									<li>
+										<section>
+											<a href="#">contact us</a>
+										</section>
+									</li>
+									<li>
+										<section>
+											<a href="#">customer service</a>
+										</section>
+									</li>
+									<li>
+										<section>
+											<a href="#">privacy policy</a>
+										</section>
+									</li>
+									<li>
+										<section>
+											<a href="#">accessibility</a>
+										</section>
+									</li>
+									<li>
+										<section>
+											<a href="#">store directory</a>
+										</section>
+									</li>
+								</ul>
+							</section>
 						</div>
 						<div class="ftr_social_icons_main">
-									<div class="footer-social-icon">
-										<a class="o_facebook" t-att-href="website.social_facebook"
-											t-if="website.social_facebook">
-											<i class="fa fa-facebook" style="color:#3B5998;" />
-										</a>
-										<a class="o_twitter" t-att-href="website.social_twitter"
-											t-if="website.social_twitter">
-											<i class="fa fa-twitter" style="color:#36B9FF"/>
-										</a>
-										<a class="o_linkedin" t-att-href="website.social_linkedin"
-											t-if="website.social_linkedin">
-											<i class="fa fa-linkedin" style="color:#0077B5;"/>
-										</a>
-										<a class="o_youtube" t-att-href="website.social_youtube"
-											t-if="website.social_youtube">
-											<i class="fa fa-youtube-play" style="color:#FF0000;"/>
-										</a>
-										<a class="o_googleplus" t-att-href="website.social_googleplus"
-											t-if="website.social_googleplus" rel="publisher">
-											<i class="fa fa-google-plus-square" style="color:#DC4A38;" />
-										</a>
-										<a class="o_github" t-att-href="website.social_github" t-if="website.social_github">
-											<i class="fa fa-github" style="color:#24292E;"/>
-										</a>
-									</div>
-								</div>
-								
+							<div class="footer-social-icon">
+								<a class="o_facebook" t-att-href="website.social_facebook"
+									t-if="website.social_facebook">
+									<i class="fa fa-facebook" style="color:#3B5998;" />
+								</a>
+								<a class="o_twitter" t-att-href="website.social_twitter" t-if="website.social_twitter">
+									<i class="fa fa-twitter" style="color:#36B9FF" />
+								</a>
+								<a class="o_linkedin" t-att-href="website.social_linkedin"
+									t-if="website.social_linkedin">
+									<i class="fa fa-linkedin" style="color:#0077B5;" />
+								</a>
+								<a class="o_youtube" t-att-href="website.social_youtube" t-if="website.social_youtube">
+									<i class="fa fa-youtube-play" style="color:#FF0000;" />
+								</a>
+								<a class="o_googleplus" t-att-href="website.social_googleplus"
+									t-if="website.social_googleplus" rel="publisher">
+									<i class="fa fa-google-plus-square" style="color:#DC4A38;" />
+								</a>
+								<a class="o_github" t-att-href="website.social_github" t-if="website.social_github">
+									<i class="fa fa-github" style="color:#24292E;" />
+								</a>
+							</div>
+						</div>
+
 					</section>
 				</div>
 			</div>
 			<section class="copyright_payment_section">
 				<div class="block ef_sub_div">
-				<div class="text-muted ef_copyright_left" itemscope="itemscope"
-					itemtype="http://schema.org/Organization">
-					Copyright
-					<a href="http://www.emiprotechnologies.com/" target="_blank">&amp;copy;
-					</a>
-					<span t-field="res_company.name" itemprop="name">Company name</span>
-				</div>
-				<div class="ef_payment_right">
-					<div class="oe_structure">
-					<section>
-						<img class="s_image_common" src="/clarico_layout/static/src/img/payment2.png"></img>
-					</section>
+					<div class="text-muted ef_copyright_left" itemscope="itemscope"
+						itemtype="http://schema.org/Organization">
+						Copyright
+						<a href="#" target="_blank">&amp;copy;
+						</a>
+						<span t-field="res_company.name" itemprop="name">Company name</span>
+					</div>
+					<div class="ef_payment_right">
+						<div class="oe_structure">
+							<section>
+								<img class="s_image_common" src="/clarico_layout/static/src/img/payment2.png"></img>
+							</section>
+						</div>
+						<div id="info">
+							<ul class="payment_method_list list-inline">
+								<t t-foreach="request.website.payment_icons()" t-as="icon">
+									<li>
+										<span t-field="icon.image" t-options='{"widget": "image", "alt-field": "name"}' />
+									</li>
+								</t>
+							</ul>
+						</div>
 					</div>
-					<div id="info">
-								<ul class="payment_method_list list-inline">
-					                <t t-foreach="request.website.payment_icons()" t-as="icon">
-					                    <li>
-					                        <span t-field="icon.image" t-options='{"widget": "image", "alt-field": "name"}' />
-					                    </li>
-					                </t>
-					            </ul>
-							</div>
 				</div>
-				</div>
-				</section>
-			</xpath>
+			</section>
+		</xpath>
 	</template>
- 	<template id="template_Footer_style_3"  inherit_id="clarico_layout.clarico_layout_footer_default"  customize_show="False" active="False">
+	<template id="template_Footer_style_3" inherit_id="clarico_layout.clarico_layout_footer_default"
+		customize_show="False" active="False">
 		<xpath expr="//div[@id='footer']" position="replace">
-		
-		<section class="ftr_main">
-			<div id="footer" class="container hidden-print">
-				<section class="footer_company_logo_left">
-					<div class="clarico_logo_footer">
-							<span t-field="res_company.logo" class="ftr_logo_span" itemprop="name" t-options="{'widget': 'image','class':'s_image_common'}">Company logo							</span>
-					</div>
-			
+
+			<section class="ftr_main">
+				<div id="footer" class="container hidden-print">
+					<section class="footer_company_logo_left">
+						<div class="clarico_logo_footer">
+							<span t-field="res_company.logo" class="ftr_logo_span"
+								itemprop="name" t-options="{'widget': 'image','class':'s_image_common'}">Company logo							</span>
+						</div>
+
 						<div class="lbl_div_container">
 							<h4 class="ftr_list_title">Sign up for our newsletter!</h4>
 							<p class="news_ltr"></p>
 						</div>
-					<div class="ftr_language_main">
-						<t t-call="website.language_selector" />
-					</div>
-					<div class="ftr_social_icons_main">
-									<div class="footer-social-icon">
-										<a class="o_facebook" t-att-href="website.social_facebook"
-											t-if="website.social_facebook">
-											<i class="fa fa-facebook" />
-										</a>
-										<a class="o_twitter" t-att-href="website.social_twitter"
-											t-if="website.social_twitter">
-											<i class="fa fa-twitter"/>
-										</a>
-										<a class="o_linkedin" t-att-href="website.social_linkedin"
-											t-if="website.social_linkedin">
-											<i class="fa fa-linkedin"/>
-										</a>
-										<a class="o_youtube" t-att-href="website.social_youtube"
-											t-if="website.social_youtube">
-											<i class="fa fa-youtube-play"/>
-										</a>
-										<a class="o_googleplus" t-att-href="website.social_googleplus"
-											t-if="website.social_googleplus" rel="publisher">
-											<i class="fa fa-google-plus-square"/>
-										</a>
-										<a class="o_github" t-att-href="website.social_github" t-if="website.social_github">
-											<i class="fa fa-github"/>
-										</a>
+						<div class="ftr_language_main">
+							<t t-call="website.language_selector" />
+						</div>
+						<div class="ftr_social_icons_main">
+							<div class="footer-social-icon">
+								<a class="o_facebook" t-att-href="website.social_facebook"
+									t-if="website.social_facebook">
+									<i class="fa fa-facebook" />
+								</a>
+								<a class="o_twitter" t-att-href="website.social_twitter" t-if="website.social_twitter">
+									<i class="fa fa-twitter" />
+								</a>
+								<a class="o_linkedin" t-att-href="website.social_linkedin"
+									t-if="website.social_linkedin">
+									<i class="fa fa-linkedin" />
+								</a>
+								<a class="o_youtube" t-att-href="website.social_youtube" t-if="website.social_youtube">
+									<i class="fa fa-youtube-play" />
+								</a>
+								<a class="o_googleplus" t-att-href="website.social_googleplus"
+									t-if="website.social_googleplus" rel="publisher">
+									<i class="fa fa-google-plus-square" />
+								</a>
+								<a class="o_github" t-att-href="website.social_github" t-if="website.social_github">
+									<i class="fa fa-github" />
+								</a>
+							</div>
+						</div>
+					</section>
+					<div class="footer_menu_and_contact_right">
+
+						<div class="ftr_menu_list">
+							<h4 class="ftr_list_title">Informations</h4>
+							<div class="oe_structure">
+								<section class="col-md-4  col-lg-6">
+									<div class="footer-heading">
+										<ul class="customer-service-ul">
+											<li>
+												<section>
+													<a href="#">help</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">gift cards</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">order status</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">free shipping</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">returns &amp; exchanges</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">international</a>
+												</section>
+											</li>
+											<div class="">
+												<ul class="list-unstyled" id="products">
+												</ul>
+											</div>
+										</ul>
 									</div>
-								</div>
-				</section>
-				<div class="footer_menu_and_contact_right">
-					
-					<div class="ftr_menu_list">
-						<h4 class="ftr_list_title">Informations</h4>
-						<div class="oe_structure">
-						<section class="col-md-4  col-lg-6">
-								<div class="footer-heading">
-									<ul class="customer-service-ul">
-										<li>
-											<section><a href="#">help</a></section>
-										</li>
-										<li>
-											<section><a href="#">gift cards</a></section>
-										</li>
-										<li>
-											<section><a href="#">order status</a></section>
-										</li>
-										<li>
-											<section><a href="#">free shipping</a></section>
-										</li>
-										<li>
-											<section><a href="#">returns &amp; exchanges</a></section>
-										</li>
-										<li>
-											<section><a href="#">international</a></section>
-										</li>
-										
-									</ul>
-								</div>
-							</section>
+								</section>
 							</div>
 							<div class="oe_structure">
 								<section class="col-md-4  col-lg-6">
-								<div class="footer-heading">
-									<ul class="security-ul">
-										<li>
-											<section><a href="#">security</a></section>
-										</li>
-										<li>
-											<section><a href="#">privacy</a></section>
-										</li>
-										<li>
-											<section><a href="#">text messaging</a></section>
-										</li>
-										<li>
-											<section><a href="#">legal</a></section>
-										</li>
-										<li>
-											<section><a href="#">supply chain</a></section>
-										</li>
-										<li>
-											<section><a href="#">contact</a></section>
-										</li>
-									</ul>
-								</div>
-							</section>
+									<div class="footer-heading">
+										<ul class="security-ul">
+											<li>
+												<section>
+													<a href="#">security</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">privacy</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">text messaging</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">legal</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">supply chain</a>
+												</section>
+											</li>
+											<li>
+												<section>
+													<a href="#">contact</a>
+												</section>
+											</li>
+										</ul>
+									</div>
+								</section>
 							</div>
-					</div>
-					<div class="ftr_contact_company">
-						<h4 class="ftr_list_title">Contact Info</h4>
-						<ul class="customer-contact-ul">
-									<li t-if="res_company.street">
-										<div class="contact_detail_para">
-											<span><i class="fa fa-map-marker"></i></span>
-											<p class="field_padding" t-field="res_company.street" />
-										</div>
-									</li>
-									<li t-if="res_company.phone">
-										<div class="contact_detail_para">	
-											<span><i class="fa fa-phone"></i></span>
-											<p class="field_padding" t-field="res_company.phone" />
-										</div>
-									</li>
-									<li t-if="res_company.email">
-										<div class="contact_detail_para">
-											<span><i class="fa fa-envelope"></i></span>
-											<p class="field_padding" t-field="res_company.email" />
-										</div>
-									</li>
-								</ul>
+						</div>
+						<div class="ftr_contact_company">
+							<h4 class="ftr_list_title">Contact Info</h4>
+							<ul class="customer-contact-ul">
+								<li t-if="res_company.street">
+									<div class="contact_detail_para">
+										<span>
+											<i class="fa fa-map-marker"></i>
+										</span>
+										<p class="field_padding" t-field="res_company.street" />
+									</div>
+								</li>
+								<li t-if="res_company.phone">
+									<div class="contact_detail_para">
+										<span>
+											<i class="fa fa-phone"></i>
+										</span>
+										<p class="field_padding" t-field="res_company.phone" />
+									</div>
+								</li>
+								<li t-if="res_company.email">
+									<div class="contact_detail_para">
+										<span>
+											<i class="fa fa-envelope"></i>
+										</span>
+										<p class="field_padding" t-field="res_company.email" />
+									</div>
+								</li>
+							</ul>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="scrollup-div">
+				<div class="scrollup-div">
 					<a href="#" class="scrollup-a">
 						<i class="fa fa-angle-up scrollup-i"></i>
 					</a>
 				</div>
-		</section>
-		<section class="copyright_payment_section">
-			<div class="block ef_sub_div">
-				<div class="text-muted ef_copyright_left" itemscope="itemscope"
-					itemtype="http://schema.org/Organization">
-					Copyright
-					<a href="http://www.emiprotechnologies.com/" target="_blank">&amp;copy;
-					</a>
-					<span t-field="res_company.name" itemprop="name">Company name</span>
-				</div>
-				<div class="ef_payment_right">
-					<div class="oe_structure">
-					<section>
-						<img class="s_image_common" src="/clarico_layout/static/src/img/payment2.png"></img>
-					</section>
+			</section>
+			<section class="copyright_payment_section">
+				<div class="block ef_sub_div">
+					<div class="text-muted ef_copyright_left" itemscope="itemscope"
+						itemtype="http://schema.org/Organization">
+						Copyright
+						<a href="#" target="_blank">&amp;copy;
+						</a>
+						<span t-field="res_company.name" itemprop="name">Company name</span>
 					</div>
-					<div id="info">
-						<ul class="payment_method_list list-inline">
-					        <t t-foreach="request.website.payment_icons()" t-as="icon">
-					          <li>
-					             <span t-field="icon.image" t-options='{"widget": "image", "alt-field": "name"}' />
-					           </li>
-					         </t>
-					     </ul>
+					<div class="ef_payment_right">
+						<div class="oe_structure">
+							<section>
+								<img class="s_image_common" src="/clarico_layout/static/src/img/payment2.png"></img>
+							</section>
+						</div>
+						<div id="info">
+							<ul class="payment_method_list list-inline">
+								<t t-foreach="request.website.payment_icons()" t-as="icon">
+									<li>
+										<span t-field="icon.image" t-options='{"widget": "image", "alt-field": "name"}' />
+									</li>
+								</t>
+							</ul>
+						</div>
 					</div>
 				</div>
-			</div>
-		</section>
+			</section>
 		</xpath>
 	</template>
 </odoo>
diff --git a/ext/clarico-addons/snippet_style_2/__manifest__.py b/ext/clarico-addons/snippet_style_2/__manifest__.py
index 48d16097..42cacfea 100755
--- a/ext/clarico-addons/snippet_style_2/__manifest__.py
+++ b/ext/clarico-addons/snippet_style_2/__manifest__.py
@@ -14,6 +14,7 @@
     # Views
     'data': [
         'template/style_2.xml',  
+        'template/timer.xml',
         'template/assets.xml',
     ],
     
diff --git a/ext/clarico-addons/snippet_style_2/static/src/img/timer.jpg b/ext/clarico-addons/snippet_style_2/static/src/img/timer.jpg
new file mode 100644
index 00000000..1baf5f67
Binary files /dev/null and b/ext/clarico-addons/snippet_style_2/static/src/img/timer.jpg differ
diff --git a/ext/clarico-addons/snippet_style_2/static/src/js/c_snippent_frontend.js b/ext/clarico-addons/snippet_style_2/static/src/js/c_snippent_frontend.js
index 601c70c0..9a117df3 100755
--- a/ext/clarico-addons/snippet_style_2/static/src/js/c_snippent_frontend.js
+++ b/ext/clarico-addons/snippet_style_2/static/src/js/c_snippent_frontend.js
@@ -26,11 +26,7 @@ odoo.define('theme_clarico.front_js',function(require){
     	  var self = this;
     	  var date = self.$target.data("date");
     	  console.log("target date =="+date)
-    	  ajax.jsonRpc("/timer/render", 'call')
-    	  .then(function(objects) {
-        	  $(objects).appendTo(self.$target);
-    		  // july 29, 2018 7:30:00
-        	  if(date != "nan")
+    	  if(date != "nan")
         	  {
     		  var countDownDate = new Date(date).getTime();
     		  var x = setInterval(function() {
@@ -75,24 +71,16 @@ odoo.define('theme_clarico.front_js',function(require){
     				
     				if(self.$target.find(".snippet_right_timer_div"))
     				{
-    					self.$target.find(".snippet_right_timer_div").css("display","block")
-    					
-    					// Output the result in an element with id="date_timer"
-    					self.$target.find("#days").html(days);
-    					self.$target.find("#d_lbl").html("days");
-    					self.$target.find("#hours").html(hours);
-    					self.$target.find("#h_lbl").html("hours");
-    					self.$target.find("#minutes").html(minutes);
-    					self.$target.find("#m_lbl").html("minutes");
-    					self.$target.find("#seconds").html(seconds);
-    					self.$target.find("#s_lbl").html("seconds");
+						self.$target.find(".snippet_right_timer_div").remove()
+						var append_data="<div class='snippet_right_timer_div'><p id='date_timer' ><div class='timer_common'><div id='days'>"+	days +"</div><p id='d_lbl'>Days</p></div><p class='colon'>:</p><div class='timer_common'><div id='hours'>" + hours + "</div><p id='h_lbl'>Hours</p></div><p class='colon'>:</p><div class='timer_common'><div id='minutes'>"+ minutes +"</div><p id='m_lbl'>Minutes</p></div><p class='colon'>:</p><div class='timer_common'><div id='seconds'>" +seconds + "</div><p id='s_lbl'>Seconds</p></div></p></div>";
+
+						self.$target.find(".snippet_right_timer_div").css("display","block")
+						self.$target.append(append_data)			
     				}
     				}, 1000);
-        	   }
-        	  
-    	  })
+        	   }	  
       }
   });
 });
 			
-			
\ No newline at end of file
+			
diff --git a/ext/clarico-addons/snippet_style_2/static/src/less/c_snippet.less b/ext/clarico-addons/snippet_style_2/static/src/less/c_snippet.less
index 945c54a3..1e9a9cc2 100755
--- a/ext/clarico-addons/snippet_style_2/static/src/less/c_snippet.less
+++ b/ext/clarico-addons/snippet_style_2/static/src/less/c_snippet.less
@@ -10,7 +10,7 @@
 /*style*/
 .snippet_right_timer_div
 {
-	display:none;
+	display:block;
 }
 .snippet_design
 {	
@@ -106,11 +106,15 @@
 		}
 	}
 	
-	
+	.js_timer_div
+	{
+		.common-div;
+		.mt(64px);
+	}
 	.snippet_right_timer_div
 	{
 		width:100%;
-		.pb(46%);
+		//.pb(46%);
 	}
 	.timer_common
 	{
@@ -178,6 +182,10 @@
 	{
 		.size(55px);
 	}
+	.snippet_left_container .snippet_left_content .desc_para
+	{
+		.mb(5px);
+	}
 }
 @media (max-width: 1000px) {
 	.snippet_left_container .snippet_left_content
@@ -190,6 +198,10 @@
 			.mb(2%) !important;
 		}
 	}
+	.snippet_left_container
+	{
+		max-width: 90%;
+	}
 	
 }
 
@@ -258,6 +270,14 @@
    		.size(14px) !important;
    		.mb(25px) !important;
     }
+    .snippet_left_container .snippet_left_content
+    {
+    	max-height: 100%;
+    }
+    .snippet_left_container .js_timer_div
+    {
+    	.mt(32px);
+    }
 }
 
 @media (max-width: 600px) {
@@ -270,7 +290,7 @@
 	}
 	.snippet_left_container .snippet_left_content {
    		padding: 0 !important;
-   		max-height: 250px;
+   		max-height: 100%;
 		min-height: 230px;
     }
     
diff --git a/ext/clarico-addons/snippet_style_2/template/style_2.xml b/ext/clarico-addons/snippet_style_2/template/style_2.xml
index 1eb290c6..d431bb6d 100755
--- a/ext/clarico-addons/snippet_style_2/template/style_2.xml
+++ b/ext/clarico-addons/snippet_style_2/template/style_2.xml
@@ -10,24 +10,7 @@
 	</template>
 	<template id="snippet_style_2_body" name="Timer">
 		<section class="snippet_design">
-				<div class="js_timer" data-date="nan" contentEditable="false"
-					data-isemipro='true' />
-		</section>
-	</template>
-
-	<template id="snippet_style_2_snippet_options" inherit_id="website.snippet_options">
-		<xpath expr="." position="inside">
-			<div data-js='js_timer' data-selector=".js_timer">
-				<li data-date_configure="" data-no-preview="true">
-					<a class="js_products_slider">Modify Time</a>
-				</li>
-			</div>
-		</xpath>
-	</template>
-
-	<template id="snippet_style_2_template" name="Style 2">
-		<section class="left_container_parent">
-			
+		  <section class="left_container_parent">
 			<section class="snippet_left_container">
 				<section class="snippet_left_content">
 					<h3 class="chs_heading">Furniture Interior</h3>
@@ -36,29 +19,7 @@
 						sofa sections.
 					</p>
 					<a class="shop_now_button" href="#">Shop now</a>
-				</section>
-				<section class="snippet_right_timer_div">
-					<p id="date_timer" >
-						<div class="timer_common">
-							<div id="days"></div>
-							<p id="d_lbl"></p>
-						</div>
-						<p class="colon">:</p>
-						<div class="timer_common">
-							<div id="hours"></div>
-							<p id="h_lbl"></p>
-						</div>
-						<p class="colon">:</p>
-						<div class="timer_common">
-							<div id="minutes"></div>
-							<p id="m_lbl"></p>
-						</div>
-						<p class="colon">:</p>
-						<div class="timer_common">
-							<div id="seconds"></div>
-							<p id="s_lbl"></p>
-						</div>
-					</p>
+					<div class="js_timer_div">   </div>
 				</section>
 			</section>
 		</section>
@@ -70,10 +31,7 @@
 				<span>off</span>
 			</section>
 			</section>
+		</section>				
 		</section>
-
-
 	</template>
-
-
 </odoo>
diff --git a/ext/clarico-addons/snippet_style_2/template/timer.xml b/ext/clarico-addons/snippet_style_2/template/timer.xml
new file mode 100644
index 00000000..047fe070
--- /dev/null
+++ b/ext/clarico-addons/snippet_style_2/template/timer.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+	
+<template id="snippet_style_timer" inherit_id="clarico_snippets.clarico_offer_snippets"
+		name="Dispay Timer" >
+		<xpath
+			expr="//div[@id='clarico_offer_structure']/div[hasclass('o_panel_body')]"
+			position="inside">
+			<t t-snippet="snippet_style_2.time_type" t-thumbnail="/snippet_style_2/static/src/img/timer.jpg" />
+		</xpath>
+</template>
+
+<template id="time_type"  name="Inner Timer Snippet">   
+
+            <div class="js_timer oe_snippet_body" data-date="nan"  ></div>
+	
+</template>
+
+<template id="snippet_style_2_snippet_options" inherit_id="website.snippet_options">
+		<xpath expr="//div" position="after">
+			<div data-js='js_timer' data-selector=".js_timer" data-drop-in=".js_timer_div" >
+				<li data-date_configure="" data-no-preview="true"  class="dropdown-submenu">
+					<a class="js_products_slider">Modify Time</a>
+				</li>
+			</div>
+		</xpath>
+	</template>
+</odoo>
diff --git a/ext/clarico-addons/theme_clarico/__manifest__.py b/ext/clarico-addons/theme_clarico/__manifest__.py
index d7b361fb..0d6f86c5 100755
--- a/ext/clarico-addons/theme_clarico/__manifest__.py
+++ b/ext/clarico-addons/theme_clarico/__manifest__.py
@@ -2,7 +2,7 @@
     # Theme information
     'name': 'Theme Clarico',
     'category': 'Theme/eCommerce',
-    'version': '11.0.2.9',
+    'version': '11.0.2.15',
     'summary': 'Fully Responsive Odoo Theme suitable to both Services & eCommerce Businesses',
     'description': """.""",
     'license': 'OPL-1',
@@ -10,33 +10,35 @@
     # Dependencies
     'depends': [
         'website',
-        'clarico_attribute_filter',
-        'clarico_latest_blogs',
-        'clarico_brand',
-        'clarico_category',
-        'clarico_category_attribute',
-        'clarico_customize_color',
-        'clarico_404',
-        'clarico_recently_viewed',
-        'clarico_contact',
-        'clarico_layout2',
-        'clarico_reset_password',
-        'clarico_shop_left_sidebar',
-        'clarico_shop_list',
-        'clarico_shop_right_sidebar',
-        'clarico_signin',
-        'clarico_signup',
-        'clarico_product_carousel_wishlist',
-        'clarico_quick_view_compare',
-        'clarico_quick_view_wishlist',
-        'clarico_quick_view_carousel',
-        'clarico_pricefilter',
-        'customize_theme',
-        'clarico_compare_wishlist',
-        'clarico_rating',
-        'clarico_category_description',
-        'clarico_similar_product',
-        'clarico_business_carousel',
+        'clarico_product',
+        'clarico_cart'
+        #            'clarico_attribute_filter',
+        #         	'clarico_latest_blogs',
+        #            'clarico_brand',
+        #            'clarico_category',
+        #            'clarico_category_attribute',
+        #			 'clarico_customize_color',
+        #            'clarico_404',
+        #          	'clarico_recently_viewed',
+        #          	'clarico_contact',
+        #          	'clarico_layout2',
+        #          	'clarico_reset_password',
+        #     		'clarico_shop_left_sidebar',
+        #            'clarico_shop_list',
+        #            'clarico_shop_right_sidebar',
+        #            'clarico_signin',
+        #            'clarico_signup',
+        #            'clarico_product_carousel_wishlist',
+        #            'clarico_quick_view_compare',
+        #            'clarico_quick_view_wishlist',
+        #            'clarico_quick_view_carousel',
+        #            'clarico_pricefilter',
+        #            'customize_theme',
+        #            'clarico_compare_wishlist',
+        #            'clarico_rating',
+        #			 'clarico_category_description',
+        #			 'clarico_similar_product',
+        #	     'clarico_business_carousel',
 
     ],
 
diff --git a/ext/clarico-addons/theme_clarico/clarico.tar.gz b/ext/clarico-addons/theme_clarico/clarico.tar.gz
index f4e2c201..8ce8c679 100644
Binary files a/ext/clarico-addons/theme_clarico/clarico.tar.gz and b/ext/clarico-addons/theme_clarico/clarico.tar.gz differ
diff --git a/ext/clarico-addons/theme_clarico/data/company_data/company_data.xml b/ext/clarico-addons/theme_clarico/data/company_data/company_data.xml
index 86c7f4a3..fa2267e2 100755
--- a/ext/clarico-addons/theme_clarico/data/company_data/company_data.xml
+++ b/ext/clarico-addons/theme_clarico/data/company_data/company_data.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <data noupdate="0">
+    <data noupdate="1">
      
 		 <record id="base.main_company" model="res.company">
 			<field name="name">Clarico</field>
@@ -18,4 +18,4 @@
 		</record>
 		
 	</data>
-</odoo>
\ No newline at end of file
+</odoo>
diff --git a/ext/custom-addons/dp_custom/__manifest__.py b/ext/custom-addons/dp_custom/__manifest__.py
index dfe1a2f9..e8c5b54a 100644
--- a/ext/custom-addons/dp_custom/__manifest__.py
+++ b/ext/custom-addons/dp_custom/__manifest__.py
@@ -42,6 +42,7 @@
     ],
     'data': [
         'views/commission_account.xml',
+        'wizards/wizard_confirm_null_invoice.xml',
         'wizards/wizard_confirm_production.xml',
         'wizards/wizard_import_tzbox.xml',
         'wizards/wizard_reset_order.xml',
diff --git a/ext/custom-addons/dp_custom/models/account.py b/ext/custom-addons/dp_custom/models/account.py
index 5167c948..34cba1b3 100644
--- a/ext/custom-addons/dp_custom/models/account.py
+++ b/ext/custom-addons/dp_custom/models/account.py
@@ -80,6 +80,17 @@ class AccountInvoice(models.Model):
     num_items = fields.Integer(string='Anzahl der Artikel', compute='_compute_num_items')
     weight_total = fields.Float(string='Gesamtgewicht', compute='_compute_weight_total')
 
+    @api.multi
+    def action_invoice_open(self):
+        to_open_invoices = self.filtered(lambda inv: inv.state != 'open')
+        if to_open_invoices.filtered(lambda inv: inv.amount_total != 0) or self.env.context.get('confirmed', False):
+            res = super(AccountInvoice, self).action_invoice_open()
+            return res
+
+        action = self.env.ref('dp_custom.action_wizard_confirm_null_invoice').read()[0]
+        action['context'] = str({"invoice_ids": self.env.context.get("active_ids")})
+        return action
+
     @api.multi
     def _compute_weight_total(self):
         for record in self:
diff --git a/ext/custom-addons/dp_custom/models/product.py b/ext/custom-addons/dp_custom/models/product.py
index 32f02904..1d5db32c 100644
--- a/ext/custom-addons/dp_custom/models/product.py
+++ b/ext/custom-addons/dp_custom/models/product.py
@@ -80,6 +80,8 @@ class ProductTemplate(models.Model):
         vals = self.correct_values(vals)
         product_template = self.with_context(active_test=False).search([('default_code', '=', vals['default_code'])])
         if product_template:
+            # default_code may not be changed if there is already an inventory_line (in other company), so we remove it from the dict
+            vals.pop('default_code',None)
             product_template.write(vals)
         else:
             if vals['active']:
diff --git a/ext/custom-addons/dp_custom/models/res_partner.py b/ext/custom-addons/dp_custom/models/res_partner.py
index 29ebe1e6..cd5247da 100644
--- a/ext/custom-addons/dp_custom/models/res_partner.py
+++ b/ext/custom-addons/dp_custom/models/res_partner.py
@@ -90,13 +90,16 @@ class Partner(models.Model):
                 date_today = fields.Date.from_string(fields.Date.context_today(self))
                 warn_date = date_today - relativedelta(months=+3)
                 try:
-                    # if record.date_vat_check < '2000-01-01':
-                    #     record.date_vat_check = '2000-01-01'
                     check_date = dateutil.parser.parse(record.date_vat_check).date()
                 except:
                     check_date = date_today - relativedelta(months=+36)
                 if check_date < warn_date:
                     record.warn_vat_date = True
+                else:
+                    record.warn_vat_date = False
+            else:
+                record.warn_vat_date = True
+
 
     @api.multi
     def action_check_vat(self):
@@ -104,11 +107,12 @@ class Partner(models.Model):
             if record.vat:
                 vat_country, vat_number = self._split_vat(record.vat)
                 try:
-                    result = stdnum_vat.check_vies_approx(vat_country+vat_number,"ATU54619104")
+                    my_vat = self.self.env.user.company_id.vat
+                    my_vat = my_vat.replace(' ','')
+                    result = stdnum_vat.check_vies_approx(vat_country+vat_number,my_vat)
                 except Exception as ex:
                     # Avoid blocking the client when the service is unreachable/unavailable
-                    raise Warning(
-                        _("UID-Prüfung: %s Service ist nicht verfügbar") % record.vat)
+                    raise ValidationError("UID-Prüfung: %s, Service ist nicht verfügbar - %s" % (record.vat,ex))
                     return {}
 
                 if not result['valid']:
diff --git a/ext/custom-addons/dp_custom/views/account_views.xml b/ext/custom-addons/dp_custom/views/account_views.xml
index 9eefaea5..5922385d 100644
--- a/ext/custom-addons/dp_custom/views/account_views.xml
+++ b/ext/custom-addons/dp_custom/views/account_views.xml
@@ -6,6 +6,14 @@
         <field name="model">account.invoice</field>
         <field name="inherit_id" ref="account.invoice_form"/>
         <field name="arch" type="xml">
+<!--
+            <xpath position="attributes" expr="//button[@name='action_invoice_open']">
+                <attribute name="invisible">True</attribute>
+            </xpath>
+            <xpath position="before" expr="//button[@name='action_invoice_open']">
+                <button name="%(action_wizard_confirm_null_invoice)d" type="action" string="Validate" states="draft" class="oe_highlight o_invoice_validate" groups="account.group_account_invoice"/>
+            </xpath>
+-->
             <xpath expr="//field[@name='invoice_line_ids']/tree//field[@name='name']" position="after">
                 <field name="intrastat_id" options="{'no_quick_create':True}"/>
             </xpath>
diff --git a/ext/custom-addons/dp_custom/wizards/__init__.py b/ext/custom-addons/dp_custom/wizards/__init__.py
index 158afb89..2f3cbf49 100644
--- a/ext/custom-addons/dp_custom/wizards/__init__.py
+++ b/ext/custom-addons/dp_custom/wizards/__init__.py
@@ -1,5 +1,6 @@
 from . import wizard_confirm_production
 from . import wizard_import_tzbox
+from . import wizard_confirm_null_invoice
 from . import wizard_confirm_print_invoice
 from . import portal_assign_company
 from . import wizard_reset_order
diff --git a/ext/custom-addons/dp_custom/wizards/wizard_confirm_null_invoice.py b/ext/custom-addons/dp_custom/wizards/wizard_confirm_null_invoice.py
new file mode 100644
index 00000000..14a9574e
--- /dev/null
+++ b/ext/custom-addons/dp_custom/wizards/wizard_confirm_null_invoice.py
@@ -0,0 +1,19 @@
+# Copyright 2018-Today datenpol gmbh (<http://www.datenpol.at>)
+# License OPL-1 or later (https://www.odoo.com/documentation/user/11.0/legal/licenses/licenses.html#licenses).
+
+from odoo import api, fields, models
+from odoo.exceptions import ValidationError
+
+class AccountInvoice(models.TransientModel):
+    _name = 'wizard.confirm.null_invoice'
+    _description = 'Bestätige Nullrechnung'
+
+    @api.one
+    def button_confirm_null_invoice(self):
+        invoice_ids = self._context.get('active_ids')
+        if invoice_ids is None:
+            return {'type': 'ir.actions.act_window_close'}
+        invoice = self.env['account.invoice'].browse(invoice_ids)
+        res = invoice.with_context(confirmed=True).action_invoice_open()
+
+        return res
diff --git a/ext/custom-addons/dp_custom/wizards/wizard_confirm_null_invoice.xml b/ext/custom-addons/dp_custom/wizards/wizard_confirm_null_invoice.xml
new file mode 100644
index 00000000..384c7c0a
--- /dev/null
+++ b/ext/custom-addons/dp_custom/wizards/wizard_confirm_null_invoice.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2018-Today Tischlerzentrum gmbh(<http://www.tzaustria.at>)
+     License OPL-1 or later (https://www.odoo.com/documentation/user/11.0/legal/licenses/licenses.html#licenses). -->
+
+<odoo>
+
+    <record id="view_wizard_confirm_null_invoice_form" model="ir.ui.view">
+        <field name="name">view_wizard_confirm_null_invoice_form</field>
+        <field name="model">wizard.confirm.null_invoice</field>
+        <field name="arch" type="xml">
+            <form string="Wizard Confirm Null Invoice">
+                <group>
+                    <p>Wollen Sie wirklich eine Null-Rechnung erzeugen?</p>
+                </group>
+                <footer>
+                    <button name="button_confirm_null_invoice"
+                            string="Null-Rechnung bestätigen"
+                            class="btn-primary"
+                            type="object"/>
+                    <button string="Abbrechen"
+                            class="btn-default"
+                            special="cancel"/>
+                </footer>
+            </form>
+        </field>
+    </record>
+
+    <act_window id="action_wizard_confirm_null_invoice"
+        name="Nullrechnung"
+        src_model="sale.order"
+        res_model="wizard.confirm.null_invoice"
+        view_type="form"
+        view_mode="form"
+        key2="client_action_multi"
+        target="new"/>
+
+</odoo>
diff --git a/ext/custom-addons/dp_reports/reports/report_templates.xml b/ext/custom-addons/dp_reports/reports/report_templates.xml
index 58eb69b1..f0a53d9b 100644
--- a/ext/custom-addons/dp_reports/reports/report_templates.xml
+++ b/ext/custom-addons/dp_reports/reports/report_templates.xml
@@ -102,12 +102,12 @@
                         <!-- <span>Raiffeisenbank Spannberg</span> -->
                     <strong>
                         IBAN:
-                        <span t-if="company.bank_ids" t-esc="company.bank_ids[0].acc_number"/>
+                        <span t-if="company.partner_id.bank_ids" t-esc="company.partner_id.bank_ids[0].acc_number"/>
                         &#183;
                         BIC:
-                        <span t-if="company.bank_ids" t-esc="company.bank_ids[0].bank_id.bic"/>
+                        <span t-if="company.partner_id.bank_ids" t-esc="company.partner_id.bank_ids[0].bank_id.bic"/>
                         &#183;
-                        <span t-if="company.bank_ids" t-esc="company.bank_ids[0].bank_id.name"/>
+                        <span t-if="company.partner_id.bank_ids" t-esc="company.partner_id.bank_ids[0].bank_id.name"/>
                     </strong>
                 </div>
             </div>