<style>
:root
{
	/*
	 * COLORES DEL DISEÑO
	 */
	--primary: {$color_primary};
	--secondary: {$color_secondary};

	/*
	 * Variaciones automáticas del primario
	 */
	--primary-dark: color-mix(in srgb, var(--primary) 82%, black);
	--primary-darker: color-mix(in srgb, var(--primary) 68%, black);

	--primary-light: color-mix(in srgb, var(--primary) 78%, white);
	--primary-lighter: color-mix(in srgb, var(--primary) 45%, white);
	--primary-soft: color-mix(in srgb, var(--primary) 10%, white);


	/*
	 * Valores que dependen de configuraciones de la BD
	 */
	--primary-background: {$primary_background};

	--top-box-background: {$top_box_background};
	--top-box-color: {$top_box_color};

	--top-navbar-color: {$top_navbar_color};

	--header-menu-background: {$header_menu_background};

	--boxed-bg-image: {$boxed_bg_image};
	--boxed-bg-repeat: {$boxed_bg_repeat};
	--boxed-bg-attachment: {$boxed_bg_attachment};
	--boxed-bg-color: {$boxed_bg_color};


	/*
	 * VARIABLES GENERALES
	 */
	--blue: var(--primary);
	--blue2: var(--secondary);
	--blue3: var(--primary-soft);

	--cyan: #13a6c6;

	--ink: #24313d;
	--muted: #687684;
	--line: #dce5ec;
	--bg: #f5f8fb;
	--white: #fff;

	--green: #17834b;
	--green-bg: #eaf7f0;

	--orange: #a45d00;
	--orange-bg: #fff4e3;

	--shadow: 0 10px 28px rgba(31,57,81,.10);
	--radius: 18px;
}



/* =========================================================
 * PRIMARY
 * ========================================================= */

.text-primary,
a.text-primary
{
	color: var(--primary);
}


.btn,
.btn:visited,
.carousel-box .next:hover,
.carousel-box .prev:hover,
.sidebar .menu li.active > a
{
	background: var(--primary);
}
/* =========================================================
 * BUTTON ACTIVE / DROPDOWN
 * ========================================================= */

.btn:active,
.btn.active,
.btn-group.open .btn.dropdown-toggle
{
	background: var(--gray-active);
	-webkit-box-shadow: inset 0px 5px 0px rgba(0,0,0,0.12);
	-moz-box-shadow: inset 0px 5px 0px rgba(0,0,0,0.12);
	box-shadow: inset 0px 5px 0px rgba(0,0,0,0.12);
	outline: none;
}


.btn-group.open .btn.dropdown-toggle
{
	background: var(--gray-active);
	-webkit-box-shadow: inset 0px 5px 0px rgba(0,0,0,0.12);
	-moz-box-shadow: inset 0px 5px 0px rgba(0,0,0,0.12);
	box-shadow: inset 0px 5px 0px rgba(0,0,0,0.12);
}



/* =========================================================
 * INVERSE
 * ========================================================= */

.btn.btn-inverse,
.btn.btn-inverse:visited
{
	background: var(--gray-soft);
}


.btn.btn-inverse:hover,
.btn.btn-inverse:focus,
.btn.btn-inverse:active,
.btn.btn-inverse.active,
.btn.btn-inverse.disabled,
.btn.btn-inverse[disabled]
{
	color: var(--gray-100);
	background-color: var(--black);
}


.btn.btn-inverse:active,
.btn.btn-inverse.active,
.btn-group.open .btn.dropdown-toggle.btn-inverse
{
	background-color: var(--gray-300);
}



/* =========================================================
 * PRIMARY
 * ========================================================= */

.btn.btn-primary,
.btn.btn-primary:visited
{
	background: var(--primary);
}


.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary.disabled,
.btn.btn-primary[disabled]
{
	color: var(--white);
	background-color: var(--primary-hover);
}


.btn.btn-primary:active,
.btn.btn-primary.active,
.btn-group.open .btn.dropdown-toggle.btn-primary
{
	background-color: var(--primary-hover);
}



/* =========================================================
 * SECONDARY
 * ========================================================= */

.btn.btn-secondary,
.btn.btn-secondary:visited
{
	background: var(--secondary);
}


.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active,
.btn.btn-secondary.active,
.btn.btn-secondary.disabled,
.btn.btn-secondary[disabled]
{
	color: var(--white);
	background-color: var(--secondary-hover);
}


.btn.btn-secondary:active,
.btn.btn-secondary.active,
.btn-group.open .btn.dropdown-toggle.btn-secondary
{
	background-color: var(--secondary-hover);
}



/* =========================================================
 * WARNING
 * ========================================================= */

.btn.btn-warning,
.btn.btn-warning:visited
{
	background: var(--warning);
}


.btn.btn-warning:hover,
.btn.btn-warning:focus,
.btn.btn-warning:active,
.btn.btn-warning.active,
.btn.btn-warning.disabled,
.btn.btn-warning[disabled]
{
	color: var(--white);
	background-color: var(--warning-hover);
}


.btn.btn-warning:active,
.btn.btn-warning.active,
.btn-group.open .btn.dropdown-toggle.btn-warning
{
	background-color: var(--warning-hover);
}



/* =========================================================
 * DANGER
 * ========================================================= */

.btn.btn-danger,
.btn.btn-danger:visited
{
	background: var(--danger);
}


.btn.btn-danger:hover,
.btn.btn-danger:focus,
.btn.btn-danger:active,
.btn.btn-danger.active,
.btn.btn-danger.disabled,
.btn.btn-danger[disabled]
{
	color: var(--white);
	background-color: var(--danger-hover);
}


.btn.btn-danger:active,
.btn.btn-danger.active,
.btn-group.open .btn.dropdown-toggle.btn-danger
{
	background-color: var(--danger-hover);
}



/* =========================================================
 * SUCCESS
 * ========================================================= */

.btn.btn-success,
.btn.btn-success:visited
{
	background: var(--success);
}


.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-success:active,
.btn.btn-success.active,
.btn.btn-success.disabled,
.btn.btn-success[disabled]
{
	color: var(--white);
	background-color: var(--success-hover);
}


.btn.btn-success:active,
.btn.btn-success.active,
.btn-group.open .btn.dropdown-toggle.btn-success
{
	background-color: var(--success-hover);
}



/* =========================================================
 * INFO
 * ========================================================= */

.btn.btn-info,
.btn.btn-info:visited
{
	background: var(--info);
}


.btn.btn-info:hover,
.btn.btn-info:focus,
.btn.btn-info:active,
.btn.btn-info.active,
.btn.btn-info.disabled,
.btn.btn-info[disabled]
{
	color: var(--white);
	background-color: var(--info-hover);
}


.btn.btn-info:active,
.btn.btn-info.active,
.btn-group.open .btn.dropdown-toggle.btn-info
{
	background-color: var(--info-hover);
}



/* =========================================================
 * LINK
 * ========================================================= */

.btn.btn-link,
.btn.btn-link:active,
.btn.btn-link[disabled]
{
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}


.btn.btn-link,
.btn.btn-link:visited
{
	cursor: pointer;
	color: var(--primary);
}


.btn.btn-link:hover,
.btn.btn-link:focus
{
	background: none;
	color: var(--primary-dark);
	text-decoration: underline;
}


.btn.btn-link[disabled]:hover,
.btn.btn-link[disabled]:focus
{
	opacity: .8;
	filter: alpha(opacity=80);
}



/* =========================================================
 * RED
 *
 * Lo dejo por compatibilidad con btn-red,
 * pero usa el mismo esquema que danger.
 * ========================================================= */

.btn.btn-red,
.btn.btn-red:visited
{
	background: var(--danger);
}


.btn.btn-red:hover,
.btn.btn-red:focus,
.btn.btn-red:active,
.btn.btn-red.active,
.btn.btn-red.disabled,
.btn.btn-red[disabled]
{
	color: var(--white);
	background-color: var(--danger-hover);
}



/* =========================================================
 * WHITE
 * ========================================================= */

.btn.btn-white,
.btn.btn-white:visited
{
	background: var(--white);
	color: var(--gray-900);
}


.btn.btn-white:hover,
.btn.btn-white:focus,
.btn.btn-white:active,
.btn.btn-white.active,
.btn.btn-white.disabled,
.btn.btn-white[disabled],
.btn-group.open .btn.dropdown-toggle.btn-white
{
	color: var(--gray-900);
	background-color: color-mix(in srgb, var(--white) 80%, transparent);
}



/* =========================================================
 * DISABLED
 * ========================================================= */

.btn.disabled,
.btn[disabled]
{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}



/* =========================================================
 * BORDER
 * ========================================================= */

.btn.btn-border
{
	background: none;
	border: 1px solid var(--gray-900);
	color: var(--gray-900);
	padding-top: 9px;
	padding-bottom: 9px;
}


.btn.btn-border .caret
{
	color: var(--gray-900);
}



/* =========================================================
 * BORDER INVERSE
 * ========================================================= */

.btn.btn-border.btn-inverse,
.btn.btn-border.btn-inverse .caret
{
	border-color: var(--gray-soft);
	color: var(--gray-900);
}



/* =========================================================
 * BORDER DEFAULT
 * ========================================================= */

.btn.btn-border.btn-default,
.btn.btn-border.btn-default .caret
{
	border-color: var(--primary);
	color: var(--primary);
}


.btn.btn-border.btn-default:hover,
.btn.btn-border.btn-default:focus,
.btn.btn-border.btn-default:active
{
	background-color: var(--primary);
	border-color: var(--primary);
	color: var(--white);
}



/* =========================================================
 * BORDER PRIMARY
 * ========================================================= */

.btn.btn-border.btn-primary,
.btn.btn-border.btn-primary .caret
{
	border-color: var(--primary);
	color: var(--primary);
}



/* =========================================================
 * BORDER SECONDARY
 * ========================================================= */

.btn.btn-border.btn-secondary,
.btn.btn-border.btn-secondary .caret
{
	border-color: var(--secondary);
	color: var(--secondary);
}



/* =========================================================
 * BORDER WARNING
 * ========================================================= */

.btn.btn-border.btn-warning,
.btn.btn-border.btn-warning .caret
{
	border-color: var(--warning);
	color: var(--warning);
}



/* =========================================================
 * BORDER DANGER
 * ========================================================= */

.btn.btn-border.btn-danger,
.btn.btn-border.btn-danger .caret
{
	border-color: var(--danger);
	color: var(--danger);
}



/* =========================================================
 * BORDER SUCCESS
 * ========================================================= */

.btn.btn-border.btn-success,
.btn.btn-border.btn-success .caret
{
	border-color: var(--success);
	color: var(--success);
}



/* =========================================================
 * BORDER INFO
 * ========================================================= */

.btn.btn-border.btn-info,
.btn.btn-border.btn-info .caret
{
	border-color: var(--info);
	color: var(--info);
}



/* =========================================================
 * BORDER HOVER
 * ========================================================= */

.btn.btn-border:hover,
.btn.btn-border:focus,
.btn.btn-border:active,
.btn.btn-border.active,
.btn.btn-border.disabled,
.btn.btn-border[disabled],
.btn-group.open .btn.dropdown-toggle.btn-border,
.btn.btn-border:hover .caret,
.btn.btn-border:focus .caret,
.btn.btn-border:active .caret,
.btn.btn-border.active .caret,
.btn.btn-border.disabled .caret,
.btn.btn-border[disabled] .caret,
.btn-group.open .btn.dropdown-toggle.btn-border .caret
{
	color: var(--white);
}



/* =========================================================
 * BORDER BACKGROUND SEGUN TIPO
 * ========================================================= */

.btn.btn-border.btn-primary:hover,
.btn.btn-border.btn-primary:focus,
.btn.btn-border.btn-primary:active
{
	background-color: var(--primary);
}


.btn.btn-border.btn-secondary:hover,
.btn.btn-border.btn-secondary:focus,
.btn.btn-border.btn-secondary:active
{
	background-color: var(--secondary);
}


.btn.btn-border.btn-warning:hover,
.btn.btn-border.btn-warning:focus,
.btn.btn-border.btn-warning:active
{
	background-color: var(--warning);
}


.btn.btn-border.btn-danger:hover,
.btn.btn-border.btn-danger:focus,
.btn.btn-border.btn-danger:active
{
	background-color: var(--danger);
}


.btn.btn-border.btn-success:hover,
.btn.btn-border.btn-success:focus,
.btn.btn-border.btn-success:active
{
	background-color: var(--success);
}


.btn.btn-border.btn-info:hover,
.btn.btn-border.btn-info:focus,
.btn.btn-border.btn-info:active
{
	background-color: var(--info);
}
.header .primary .navbar .nav > li.primary.item-bg:hover > a,
.header .primary .navbar .nav > li.primary.item-bg.activeArea > a,
.header .primary .primary.item-bg .sub,
.header .primary .primary.item-bg.parent .sub,
.header .primary .primary.item-bg.parent:hover > .sub
{
	background: var(--primary);
}





.header .primary .navbar .nav > li.primary.item-bg:hover > a,
.header .primary .navbar .nav > li.primary:hover > a,
.header .primary .primary .sub,
.header .primary .primary.megamenu > .sub .promo-block,
.header .primary .navbar .btn-navbar .icon-bar
{
	border-color: var(--primary);
}

.header .primary .navbar .nav > li.secondary.item-bg > a {
  background: var(--primary-darker);
  color: #FFF;
}
.header .primary .navbar .nav > li.secondary.item-bg:hover > a {

	background: var(--primary);
	border-color: var(--primary);
	color: #FFF;
}

/*
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > span:hover,
.progressive-slider-two .pagination a,
.progressive-slider-two .pagination a:hover,
.progressive-slider-two .pagination .selected,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > span:hover,
*/



.product .product-hover,
.slider .slider-nav,
.panel-group .active.panel .panel-heading > .panel-title > a,
.panel-group .active.panel .panel-heading > .panel-title > a:hover,
.employee .employee-hover,

.sidebar .tags a:hover,
.sidebar .banners .banner-text,
#catalog .category-img .description,
.product-bottom .related-products header:before,
.slider.rs-slider .tparrows,
.slider.rs-slider .tparrows:hover,
.toolbar .sort-catalog .dropdown-toggle,
.toolbar .grid-list .grid,
.toolbar .grid-list .list,
.toolbar .up-down,
.toolbar .up-down.active,
.toolbar .grid-list a.grid:hover,
.toolbar .grid-list a.list:hover,

.banner-set .pagination a:hover,
.carousel-box .pagination a:hover,

.sidebar .tags a,
.sidebar .menu li.parent > a .open-sub:before,
.sidebar .menu li.parent > a .open-sub:after,
.panel-group .panel-default .panel-heading > .panel-title > a:before,
.panel-group .panel-default .panel-heading > .panel-title > a:after,
.new-radio.checked span,
.list .product .actions a:hover,
.product-page .col-md-7 .actions a:hover,
.product-page .image-box .thumblist-box .prev:hover,
.product-page .image-box .thumblist-box .next:hover,
.accordion-tab > li > a .open-sub:before,
.accordion-tab > li > a .open-sub:after,
.products-tab .accordion-tab > li > a .open-sub:before,
.products-tab .accordion-tab > li > a .open-sub:after,
.sidebar .calendar-wrap caption,
.btn-group.open .btn.dropdown-toggle,
.product .limit-offer,
.product .not-rotation-actions,
.fancybox-nav span:hover,

.minimized-menu .primary .navbar .nav > .parent.active > a,
.minimized-menu .primary .navbar .nav > .parent.active:hover > a,
.minimized-menu .primary .navbar .nav .open-sub span,

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus
{
	background: var(--primary-background);
}



/* =========================================================
 * TOP BOX
 * ========================================================= */

#top-box .top-box-wrapper
{
	background: var(--top-box-background);
	color: var(--top-box-color);
}



/* =========================================================
 * TOP NAVBAR
 * ========================================================= */

.top-navbar .nav > li a
{
	color: var(--top-navbar-color);
}



/* =========================================================
 * HEADER / MENU
 * ========================================================= */

.header .primary .navbar .nav > li.cian.item-bg.activeArea > a
{
	background: var(--primary);
}


.header .primary .navbar .nav > li.cian.item-bg:hover > a,
.header .primary .cian.item-bg .sub,
.header .primary .cian.item-bg.parent .sub,
.header .primary .cian.item-bg.parent:hover > .sub
{
	background: var(--primary-dark);
}



/* =========================================================
 * BIG ICON
 * ========================================================= */

.big-icon.default,
.big-icon.default:visited
{
	background-color: var(--primary) !important;
	color: var(--white);
}


.big-icon.default:hover,
.big-icon.default:focus,
.big-icon.default:active,
.big-icon.default.active
{
	color: var(--white);
	background-color: var(--primary-dark) !important;
}


.big-icon.default:active,
.big-icon.default.activeg
{
	background-color: var(--primary-dark) !important;
}



/* =========================================================
 * BACKGROUND GENERAL
 * ========================================================= */

#boxed-bg
{
	background-image: var(--boxed-bg-image);
	background-repeat: var(--boxed-bg-repeat);
	background-attachment: var(--boxed-bg-attachment);
	background-color: var(--boxed-bg-color);
}



/* =========================================================
 * HEADER BACKGROUND
 * ========================================================= */

.header-wrapper-2
{
	background: var(--header-menu-background);
}



/*
.slider .slider-nav
{
	background-color: var(--primary);
}
*/



/* =========================================================
 * PRODUCTOS
 * ========================================================= */

.product .limit-offer,
.product .not-rotation-actions
{
	background-color: var(--primary);
}



/* =========================================================
 * BUTTONS
 * ========================================================= */

.btn:hover,
.btn:focus,
.btn:active,
.btn.active
{
	background-color: var(--primary-dark);
}


.btn.disabled,
.btn[disabled]
{
	background-color: var(--primary-light);
}



/* =========================================================
 * TOOLBAR / TAGS
 * ========================================================= */

#catalog .category-img .description,
.toolbar .sort-catalog .dropdown-toggle,
.toolbar .grid-list .grid,
.toolbar .grid-list .list,
.toolbar .up-down,
.toolbar .up-down.active,
.sidebar .tags a,
.btn-group.open .btn.dropdown-toggle
{
	background-color: var(--primary-dark);
}



/* =========================================================
 * SLIDER
 * ========================================================= */

.slider.rs-slider .tparrows,
.product-page .add-cart-form .number .regulator a:hover,
.progressive-slider-two .pagination a
{
	background-color: var(--primary-dark);
}



/* =========================================================
 * PRICING
 * ========================================================= */

.pricing .bottom-box
{
	background-color: var(--primary-dark);
}


.pricing:before
{
	background-color: var(--primary-dark);
}


.pricing .options li,
.pricing .bottom-box
{
	border-color: var(--primary-soft);
	background-color: var(--primary-dark);
}



/* =========================================================
 * BORDERS
 * ========================================================= */

.btn.btn-border,
.minimized-menu .primary .navbar .nav > .parent.active > a,
.minimized-menu .primary .navbar .nav > .parent.active:hover > a
{
	border-color: var(--primary);
}


.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus
{
	border-color: var(--primary);
}



/* =========================================================
 * TEXTOS / ICONOS PRIMARY
 * ========================================================= */

.header .cart-header .dropdown-toggle,
#footer .newsletter input:focus + .submit,
.icon,
.big-icon,
.big-icon:visited,
.service .icon,
.close:hover,
.close:focus,
.img-thumbnail:hover .bg-images i:before,
.box-404 h1,
.gallery-images:hover .bg-images i:before,

.sidebar .newsletter input:focus + .submit,
.sidebar .section .selected .close:hover,
.package .title a,
.package .price-box .price,
.package .price-box .icon,
.pricing .title a,
.pricing .options li span,
.pricing .options li.active,
.banner-set .next:hover,
.banner-set .prev:hover,
.btn.btn-border,
.btn.btn-border .caret,
.product-remove:hover,
.one-page .header .primary .navbar .nav .active
{
	color: var(--primary);
}



/* =========================================================
 * PRICING TEXT
 * ========================================================= */

.pricing .bottom-box .more
{
	color: var(--primary-light);
}


.pricing .options li
{
	color: var(--primary-lighter);
}



/* =========================================================
 * SVG
 * ========================================================= */

.phone-header a svg path,
.search-header a svg path,
.product .actions a svg path,
.sidebar .wishlist .add-cart:hover path,
.header .cart-header .dropdown-toggle .icon svg path,
.header .search-form .search-submit svg path,
.new-checkbox svg polygon,
.product-bottom .related-products li .button-box .wishlist:hover svg path,
.jslider .jslider-pointer svg path,
.rating-box .rating svg polygon,
.search-result .search-form .search-submit svg path
{
	fill: var(--primary);
}



/* =========================================================
 * PAGINATION
 * ========================================================= */

.carousel-box .pagination a.selected,
.banner-set .pagination a.selected
{
	background: #ccc;
	background: rgba(0,0,0,.3);
}



/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 979px)
{
	.header .primary .navbar .nav > .parent.active > a,
	.header .primary .navbar .nav > .parent.active:hover > a,
	.header .primary .navbar .nav .open-sub span,
	.accordion-tab > li.active > a,
	.accordion-tab > li.active > a:hover,
	.accordion-tab > li.active > a:focus,
	.accordion-tab > li.active:hover > a,
	.products-tab .accordion-tab > li.active > a,
	.products-tab .accordion-tab > li.active:hover > a
	{
		background-color: var(--primary);
	}


	.header .primary .navbar .nav > .parent.active > a,
	.header .primary .navbar .nav > .parent.active:hover > a
	{
		border-color: var(--primary);
	}
}



/* =========================================================
 * TEXTOS BLANCOS
 * ========================================================= */

.btn-group.btn-select .dropdown-toggle,
.product .product-hover,
.employee .employee-hover,
.slider .slid-content
{
	color: var(--white);
}



/* =========================================================
 * PRODUCT CHECK
 * ========================================================= */

.product .product-hover ul li
{
	background-image: url("../img/svg/check-icon-white.svg"), none;
}

</style>