:root { 
  --font-primary: 'Jost', sans-serif;
  --color-gold-p: #2f72bc;
  --background-color-header: #fff;
  --color-header: #000;
}

body,html{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	background: #f2f2f2;
}
#search:focus {
  outline: none!important;
  box-shadow: none!important;
}
/*
	gold #bc995e 
'	Jost', sans-serif
	bg-header #000 
	liliners #bc995e75.
*/
#login{
    display: flex;
    height: 100vh!important;
    background: url(../images/img/fond.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
#compare{
	position: relative;
}
#compare::after{
	content: attr(data-label);
    position: absolute;
    top: -5px;
    left: 24%;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: #2f72bc;
    color: #fff;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin: auto;
}
#celda_vacia{
}
#limit-word{
    position: relative;
    padding: 15px 20px;
}
#limit-word::before{
    content: '';
    position: absolute;
    width: 40px;
    height: 20px;
    background: #ffffffc7;
    right: 0;
    /* top: 0; */
    bottom: 20%;
    /* margin: auto; */
}
#arreglo-priece{
	position: relative;
	bottom: 0.5em;
}
.vacio{
    width: 100%;
    background: #fff;
    height: 393px;
    position: relative;
}
.delete-items{
    position: absolute;
    top: 1%;
    z-index: 1;
    right: 0;
    font-weight: normal;
    transition: 0.3s;	
}
.delete-items button{
    background: #0000!important;
    border: none;
    text-decoration: none;
    outline: none;
    color: #111!important;
}
.delete-items i{
	font-size: 14px!important;
}
.delete-items:hover{
	color: crimson;
	transition: 0.3s;
	cursor: pointer;
}
.navbar{
	position: fixed!important;
    width: 100%;
    background: #fff;
    box-shadow: 0 0 15px 20px rgb(34 34 34 / 10%);
}
.menu-00{

}
.fondo-00{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: linear-gradient(to right, #ffffff85, #fff, #ffffff61);
}
#button{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#button a{
	font-weight: normal;
    letter-spacing: 0;
    font-size: 17px;
    border: 1.5px solid #2f72bc;
    padding: 4% 0;
    border-radius: 5px!important;
    color: #90b902;
}
#b-active{
	background: #90b902;
    color: #fff!important;
}
.bg-register-image{
}
.custom-checkbox{
	padding: 0!important;
	margin: 6% 0;
}
.container-login{
	padding: 2rem 3rem 3rem;
}
.container-login img{
	width: 50%;
	margin-bottom: 1rem;
}
.container-login form{

}
.container-login input{
	border-radius: 5px!important;
}
.container-login a{
	border-radius: 10px!important;
}
.container-login strong{
	color: #3483fa;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}
#card-l::after{
	content: '';
	box-shadow: none;
	background: none;
}
.fix-1{
	grid-template-columns: 1fr!important;
	transition: 0.3s;
}
.fixed{
	width: 100%!important;
	margin-left: 0!important;
	padding: 0!important;
	transition: 0.3s;
}
.find{
	position: absolute;
    width: 96%;
    background: #eee;
    z-index: 1;
    overflow-y: scroll;
    padding: 0;
}
.find .content_r{
    width: 100%;
    position: relative;
    margin: 0.5em 0;
}
.m_end{
	padding: 1.5% 2%;
    font-size: 0.9em;
    text-align: left;
    background: #fff;
    margin: 0.5%;
}
#result ul{
	width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
}

#result ul>li:hover{
	color: #111;
}
#result ul>li>ol{
    list-style: none;
    display: grid;
    grid-template-columns: 25% 75%;
    padding: 2% 0;
    background: #fff;
    margin: 1%;
    border-radius: .25rem;
    align-items: center;
}
#result ul>li>ol>li{
	font-size: 0.8em;
    text-align: left;
    padding: 0 5%;
}
#result ul>li>ol>li>small{
	color: #666;
}
#result ul>li>ol>li>img{
	width: 100%;
}
#btn_buscador{
	background: #2f72bc;
    border: #2f72bc;
}
#search{
	position: relative;
    height: 40px;
    border: 1px solid #ddd!important;	
}
#search::after{
	content: '';
	position: absolute;
}

.modal-open{
	padding-right: 0!important;
	padding-left: 0!important;
}

.resp-mobile{
	display: none!important;
}

.resp-desktop{
	display: block;
}

.max-width{
    max-width: 1500px;
    padding: 0 80px;
    margin: auto;
}
#dolar-price{
	position: relative;
}
#dolar-price::after{
	content: attr(data-label);
    position: absolute;
    font-size: 0.65em;
    padding-left: 1em;
    color: #999;
    font-weight: 400;
    text-transform: uppercase;
}

#dolar-price small{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 0.7em;
}
.xzoom-thumbs a{
	text-decoration: none;
}
.xzoom-thumbs img{
	display: inline-block;
	height: 100px;
	width: 100px;
}

.xzoom-preview{
	border: 1px solid #eee;
}

.oculto{
	display: none;
}
.xzoom-thumbs img:hover {
	transition: .4s;
	border: 2px solid #ddd;
    border-radius: .25rem;
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


/*** HEAD ***/
.head{
		width: 100%;
		margin:0%;
		padding: 0% 0%;
		background: var(--background-color-header);
		position: relative;
		z-index: 2;
		top: 0;
		left: 0;
		font-size: 18px;
}

/* BOX 00 */
.box-00{
	width: 100%;
	padding: 1.5% 5%;
	margin: 0;
	text-align: center;
	justify-content: center;
	border-bottom: 1px solid #ddd;
	transition: 0.3s;
}
.box-00-active{
    position: fixed!important;
    z-index: 1;
    transition: 0.3s;
    padding: 0.5% 5%!important;
    background-image: linear-gradient(to right, #fff, #fff, #ffffffd9);
}

.box-00 img{
	width: 70%;
	margin: auto;
	cursor: pointer;
}

.box-00 form{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.box-00 form>input{
	position: relative;
    width: 100%;
    padding: 7px 14px;
    border: 1px solid #ddd;
    border-radius: 5px 0px 0px 5px;
    outline: none;
}
/*
.box-00 form>input::after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f002";
    position: absolute;
    left: 2%;
    font-size: 16px;
    color: #444;
}
*/

#icon-1::after{
  		font-family: "Font Awesome 5 Free"; 
  		font-weight: 900; 
  		content: "\f1b2";
  		position: absolute;
  		left: 2%;
  		font-size: 16px;
  		color: #444;
}
.box-00 form>button{
    width: 15%;
    border: none;
    outline: none;
    color: #fff;
    /* border-radius: 5px; */
    background-color: #222;
    /* font-weight: bold; */
    letter-spacing: 0px;
    border-radius: 0px 5px 5px 0px;
    font-size: 1em;
}

.box-00 ul{
	width: 100%;
	margin: auto;
	padding: 0%;
	display: flex;
	justify-content: flex-start;
	list-style: none;
}

.box-00 ul>li{
	color: #222;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.box-00 ul>li>ion-icon{
	margin: 0 15px;
}
.box-00 ul>li:hover{
	color: var(--color-gold-p);
}

/** SEARCH ***/
.serch-pc{
	display: flex;
  width: 100%;
  align-items: center;
  padding: 0;
}

.serch-mobil{
	display: none;
	width: 100%;
}

.serch-mobil ul{
	position: relative;
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0 1%;
}

.serch-mobil ul>li{
	display: flex;
}

.serch-mobil ul>li>img{
	width: 60%;
}

.serch-mobil ul>li>ol{
	margin: auto;
	display: flex;
	justify-content: flex-end;
}

.serch-mobil ul>li>ol>li{
	width: 50px;
	height: 50px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: end;
}

.serch-mobil ul>li>ol>li>i{
	margin: auto;
  font-size: 22px;
  color: #333;
}

.serch-mobil ul>li>ol>li>i:hover{
  color: var(--color-gold-p);
}

.search-bar{
	width: 100%;
	display: none;
	margin-bottom: 12px;
}

/* lateral menu  */

.lateral-menu{
	position: absolute;
	width: 100%;
	top: 4.2em;
	left: 0;
	background-color: #fff;
	z-index: 3;
	color: #111;
	display: none;
	height: 100vh;
	overflow-y: scroll;
}

.menu{
    background: #fff;
    width: 90%;
    position: relative;
    height: fit-content;
    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
    margin: 0 auto;
}
.menu ul{
	
}
.menu .dropdown {
	width: 100%;
	position: relative;
    font-size: 17px;
    letter-spacing: 0.5px;
    margin: 1em 0;
}
.menu .dropdown span{
}
.menu .dropdown i{
    position: relative;
    float: right;
    right: 1em;
    top: 0.7em;
    transition: 0.3s;
}
.menu .dropdown .sub-menu{
	display: none;
	transition: 0.3s;
}
.rotate_i{
	transition: 0.3s;
	transform: rotate(90deg);
}
#sub{

}
#sub ul{
    padding: 0 5%;
    font-size: 17px;
    letter-spacing: 0.1px;
}

#sub ul>li{
    margin: 2.5% 0;
}

.lateral-menu ul{
	width: 100%;
	margin: 0;
	padding: 10px 15px 10px 25px;
	list-style: none;
	font-size: 20px;
	letter-spacing: 1px;
	position: relative;
	line-height: 35px;
}

.lateral-menu ul>span{
    position: absolute;
    right: 20px;
    top: -45px;
    color: #111;
    background: #fff;
    font-size: 20px;
    padding: 3px 10px 0px 10px;
}

/* lateral menu user*/

.lateral-menu-user{
	position: absolute;
	width: 60%;
	top: 0;
	right: 0;
	background-color: #333;
	z-index: 3;
	color: #fff;
	display: none;
}

.lateral-menu-user ul{
	width: 100%;
	margin: 0;
	padding: 10px 15px 10px 25px;
	list-style: none;
	font-size: 20px;
	letter-spacing: 1px;
	position: relative;
	line-height: 35px;
}

.lateral-menu-user ul>span{
	position: absolute;
	left: -33px;
	top: 0;
	color: #fff;
	background: #333;
	font-size: 20px;
	padding: 3px 10px 0 10px;
}

	/* BOX 01 */
.box-01{
    width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    border-bottom: 0px solid #e4e4e4;
    font-weight: bold;
    letter-spacing: 0.5px;
    background: #fff;
    color: #fff;
}

.box-01 div{
	margin: auto 0;
	padding: 0;
}

.dropdown-01 {
	width: 100%;
	position: relative;
	cursor: pointer;
}

.dropdown-01 p{
	color: #000000e0;
	width: 100%;
	background: #c4c4c475;
	margin: 0;
	padding: 8% 0;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 1px;
}

.dropdown-01 ol{
	position: absolute;
	width: 300px;
	margin: 0;
	padding: 0;
	top: 40px;
	left: 0;
	display: none;
	z-index: 5 ;
	background: #fff;
	list-style: none;
	text-align: left;
}

.box-01 ol>li{
	width: 100%;
	padding: 2% 5%;
	font-size: 16px;
	color: #000;
	transition: 0.2s;
}

.box-01 ol>li:hover{
	width: 100%;
	padding: 2% 5%;
	color: #333;
	background-color: #f7f7f7;
	transition: 0.2s;
}

.box-01 ul{
    width: 100%;
    margin: 0;
    padding: 0;
    /* display: flex; */
    /* justify-content: center; */
    list-style: none;
    color: var(--color-header);
    grid-template-columns: 30% 12% 12% 12%;
    display: grid;
    grid-gap: 20px;
}

.box-01 ul>li{
	width: 100%;
	margin: 0;
	padding: 10px 0;
	cursor: pointer;
	font-size: 17px;
	position: relative;
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    letter-spacing: 0;
}
.box-01 ul>li>ion-icon{
	font-size: 1.25em;
}

#menu-down{
	background: #2f72bc;
	color: #fff;
	font-weight: 400;
	width: 100%;
	position: relative;
	align-items: center;
	align-content: center;
	align-self: center;
	display: flex;
	justify-content: center;
	letter-spacing: 0.5px;
}
		
#menu-down #left{
	position: absolute;
	font-size: 1.3em;
	left: 0.5em;
}

#menu-down #right{
	position: absolute;
	font-size: 1.2em;
	right: 0.5em;
	transition: 0.3s;
}

.box-01 ul>li:hover{
	color: #111;
}

.box-01 ul>li>span{
	position: absolute;
    font-size: 0.6em;
    font-weight: bold;
    width: 15px;
    height: 15px;
    background: crimson;
    border-radius: 100%;
    color: #fff;
    right: 0em;
    top: 0.7em;
}
ion-icon{
	font-size: 1.25em;
}

.box-01 ul>li>ol{
	position: absolute;
	width: 150px;
	margin: 0;
	padding: 0;
	top: 42px;
	left: 0;
	display: none;
	z-index: 5 ;
	background: #fff;
	list-style: none;
	text-align: left;

}

.user-on{
	color:#28a745!important;
}

.fav-on{
	color:#ff1414!important;
}

.cart-on{
	color:#2f79c8!important;
}

.category-pc{
    width: 100%;
    display: grid;
    grid-template-columns: 80% 20%;
}

.category-mobil{
	width: 100%;
	display: none;
}

.category-mobil ul{
	width: 100%;
	list-style: none;
	display: flex;
}

.category-mobil ul>li{
	width: 50%;
	display: flex;
	position: relative;
	margin: 0;
	padding: 0;
}

.category-mobil ul>li>p{
	width: 100%;
	font-size: 25px;
	margin: 0;
	padding: 0;
	text-align: right;
}

.category-mobil ul>li>ol{
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #fff;
	color: #333;
	visibility: hidden;
}

/**** DROPDOWN -MENU -CATEGORY *** /
 
/*** dropdown-w-one ***/

.dropdown-w-one{
	position: static;
}

.dropdown-w-one .sub-menu-cat{
    position: absolute;
    width: 850px;
    top: 5px;
    padding: 0;
    margin: 0;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
    transform: translateY(15px);
    border-radius: 4px;
    box-shadow: 0 0 5px rgb(0 0 0 / 25%);
    left: 0;
    z-index: 3;
    background-image: url(../images/material/submenu.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    right: 0;
    margin-left: 101%;
    height: 147%;
}

.dropdown-w-one:hover .sub-menu-cat{
	opacity: 1;
	visibility: visible;
	padding: 0;
	transition: all 0.3s ease 0s;
	transform: translateY(0px);
}
.dropdown-w-one:hover .detail{
	display: block!important;
	opacity: 1!important;
	visibility: visible;
	padding: 0;
	transition: all 0.3s ease 0s;
	transform: translateY(0px);
}
.detail{
	transition: all 0.3s ease 0s;
	transform: translateY(0px);
	display: none!important;
	bottom: 0;
	top: 0;
}
.dropdown-w-one ol{
	display: block;
	margin: 0;
	padding: 5% 0;
	width: 100%;
	background-color: none;
	border-radius: 5px;
	border: none;
}

.dropdown-w-one ol>li{
	width: 100%;
	padding: 5% 10%;
	margin: 0;
	color: #111;
	text-align: left;
	border-radius: 0;
}
#sub-menu{
	display: grid;
	grid-template-columns: 70% 30%;
	padding-top: 3.5em;
}
#sub-menu::after{
	font-family: 'Roboto', sans-serif;
	position: absolute;
    content: attr(data-label);
    left: 0.7em;
    top: 0.5em;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #222;
}
#active-products{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 2% 0;
    padding: 0;
    height: 0;
    align-content: flex-start;
    grid-gap: 10px;
    text-align: left;
}
#active-products li{
	padding: 15px 25px!important;
    align-self: center;
    border: none;
}

#product-random{
	padding: 0;
}
#product-random li{
	padding: 0!important;
}
#product-random li>img{
	width: 100%;
}
#product-random li>p{
	
}

.active-dropdown li:hover{
	color: #111;
	background: #0000;
}

.active-dropdown{
	text-align: center;
}

.active-dropdown p{
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1.5px;
	color: #333;
	width: fit-content;
	background-color: #0000;
	text-align: center;
	margin: auto;
	margin-bottom: 15px;
	padding: 0 10%;
	border-radius: 5px;
	border: 1.5px solid #cfa54bab;
}

/*** SLIDER ***/

.container-section{
	display: grid;
	grid-template-columns: 20% 80%;
	grid-gap: 20px;
	transition: 0.3s;
}

#submenu{
    display: grid;
    grid-template-columns: 69% 29%;
    padding-top: 3.5em;
    grid-gap: 10px;
}
.detail{
	position: relative;
	left: -20px;
	margin: 0 2%!important;
    box-shadow: 0 0.15rem 1.75rem 0 rgb(204 204 204 / 40%);
}
.box-01 div.down-menu-active{
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
}
.down-menu-active{
    background: #fff;
    width: 100%;
    position: relative;
    height: fit-content;
    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
    transition: 0.3s;
}
.down-menu-active ol{
    padding: 0;
    margin: 3% 0 3%;
    position: relative;
    width: 100%;
    height: fit-content;
}
.down-menu-active ol>li{
    list-style: none;
    margin: 0;
    padding: 18px 40px!important;
    font-size: 16.5px;
    color: #333;
    border-bottom: 1px solid #f7f7f7;
    cursor: pointer;
    text-align: left;
}
.down-menu-active ol>li>i{
    position: absolute;
    right: 1.3em;
    padding-top: 1%;
    color: #ddd;
    transform: rotate(90deg);
    transition: 0.3s;
}
.down-menu-active li:hover{
	 transition: 0.3s;
	background: #f7f7f7;;
}

.down-menu-active li:hover i{
	color: #333;
	transition: 0.3s;
	transform: rotate(0deg);
}

.down-menu-active .offers{
	  position: absolute;
    left: 8em;
    background: crimson;
    width: 35%;
    border-radius: 25px;
    color: #eee;
    text-align: center;
    padding: 1% 0;
    font-size: 0.85em;
}
.down-menu-active .offers img{
		width: 20%;
}
.slider-00{
	margin-top: 1em;
	z-index: 0;
}

.slider-copy{
	position: relative;
}

.slider-copy h2{
    font-family: var(--font-primary);
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    padding: 0% 5%;
    height: 100%;
    line-height: 1.4;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    cursor: pointer;
}


.new-size{
	height: 230px!important;
}
.resize{
	width: 246px!important;
}

.slider-01{
	margin: 1.5em 0 4em;
}


.owl-nav{
    width: 100%;
    text-align: end;
    padding: 0;
    font-size: 2em;
    position: absolute;
    top: -15%;
    display: flex;
    justify-content: end;
    align-items: center;
    align-content: center;
    align-self: center;
}
.owl-nav button{
    margin: 0 0.5%;
    width: 30px;
    height: 30px;
    border: 2px solid #2f72bc!important;
    align-items: center;
    align-content: center;
    align-self: center;
    display: flex;
    justify-content: center;
    border-radius: 0;
    background: #2f72bc!important;
    text-decoration: none!important;
    outline: none!important;
    transition: 0.3s;
}
.owl-nav button:hover{
	background: none!important;
	color: #2f72bc!important;
	border: 2px solid #2f72bc!important;
	transition: 0.3s;
}
.owl-nav button>span{
    height: 100%;
    top: -12px;
    position: relative;
    color: #fff;
}
.owl-nav button:hover span{
	color: #2f72bc!important;
	transition: 0.3s;
}
.slider-01 nav{
    width: 500px!important;
    position: relative;
    background: #fffe;
    margin: 3.5em auto;
    box-shadow: 0 6px 10px rgb(179 179 179 / 50%);
    border-radius: 10px 10px 0 0;
}

.slider-01 nav > ul{
	padding: 0;
	display: flex;
	justify-content: space-around;
}
.slider-01 nav>ul>li{
    padding: 0;
    list-style: none;
    border-bottom: 4px solid #eee;
    cursor: pointer;
    width: 100%;
}
.slider-01 nav>ul>li>a{
	font-family: 'Roboto', sans-serif;
	display: block;
    width: 100%;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    color: #121212;
}
.indicator{
}


.slider-01 h2{
	font-family: var(--font-primary);
	margin: auto 0;
	padding: 0;
	font-weight: bold;
	margin-bottom: 1em;
}

.xzoom-source{
	width: 100%!important;
}
.xzoom-preview{
	width: 100%!important;
}

.slider-01 i{
	font-size: 20px;
	margin: auto 25px auto 0;
	cursor: pointer;
}

.slider-01 ol{
    width: 100%;
    padding: 0;
    list-style: none;
    display: grid;
    justify-content: flex-start;
    grid-gap: 20px;
    grid-template-columns: repeat(5, 1fr);
}

.slider-01 .item{
    background: #fff;
    width: 255px;
    height: 380px;
    text-align: center;
    position: relative;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(204 204 204 / 15%);
	padding-bottom: 0.1%;
}

.slider-01 .item div{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

.slider-01 .item div>ul{
	width: fit-content;
	margin: 5%;
	padding: 0;
	position: absolute;
	display: block;
	border: none;
	right: 0;
	top: 0;
	color: #ffffffd9;
	visibility: hidden;
	transform: translateX(10px);
	opacity: 0;
	transition: 0.3s;
}

.slider-01 .item div:hover ul{
	visibility: visible;
	transform: translateX(0px);
	opacity: 1;
	transition: 0.3s;
}
.slider-01 .item div>ul>li{
		display: flex;
		width: 35px;
		height: 35px;
		background: #222;
		margin: 0 0 5px 0;
		border-radius: 5px;
}
#title-promo {
    line-height: normal;
    height: auto;
    position: absolute;
    top: 2%;
    left: 2%;
    width: 110px;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
    text-transform: capitalize;
    color: #fff;
    background: #2f72bc;
    padding: 7px 15px;
    letter-spacing: 0.5px;
    z-index: 1;
    border-radius: 15px;
    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
}
#title-promo img{
	width: 20%!important;
	display: inline!important;
}

/********************************************************************/

.slider-01 .item div>ul>li:hover{
		background: var(--color-gold-p);
		color: #000;
}

.slider-01 .item div>ul>li>i{
		margin: auto;
		font-size: 16px;
}

.slider-01 .item div>img{
	    width: 100%;
	    margin: 0%;
	    padding: 5% 0;
	    cursor: pointer;
	    border: 1px solid #21252900;
	    height: 260px;
	    object-fit: contain;
	    border-bottom: 1px solid #eee;
}

.slider-01 .item h3{
		width: 100%;
		margin: 0%;
		padding: 2% 1%;
		display: flex;
}

.slider-01 .item h3>i{
		font-size: 10px;
		margin-right: 5px;
		color: #FF9800;
}

.slider-01 .item h4{
		font-family: 'Roboto', sans-serif;
	    width: 100%;
	    margin: 0;
	    padding: 15px 10px 50px;
	    font-size: 15px;
	    color: #444;
}

.slider-01 .item p{
	    font-weight: bold;
	    font-size: 17px;
	    letter-spacing: 0.5px;
	    color: crimson;
	    position: absolute;
	    bottom: 0.7em;
	    margin: 0 auto;
	    left: 0;
	    right: 0;
}
.slider-01 .item button{
    border: none;
    padding: 7px;
    background: #2f72bc;
    color: #fff;
    margin: 2% 0;
    border-radius: 4px;
    text-decoration: none;
    outline: none;
}
.slider-01 .item p>small{
	font-weight: bold;
	text-transform: uppercase;
}
.slider-logo{
		margin: 5% 0%; 
}

.slider-logo ul{
		width: 100%;
		margin: 0%;
		padding: 0%;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
}

.slider-logo ul>li{
		width: 25%;
}

	.slider-logo ul>li>img{
		width: 80%;
		margin: 0% 10%;
	}

	.slider-02 ul{
		width: 100%;
		margin: 0% 0% 1% 0%;
		padding: 0% 0% 1% 0%;
		list-style: none;
		display: flex;
		justify-content: space-between;
		border-bottom: 3px solid #000000;
	}

	.slider-02 ul>li{
		display: flex;
	}

	.slider-02 ul>li>h2{
		font-family: var(--font-primary);
		margin: auto 0%;
		padding: 0%;
		font-size: 25px;
		font-weight: bold;
	}

	.slider-02 ul>li>i{
		font-size: 20px;
		margin: auto 25px auto 0px;
		cursor: pointer;
	}

	.slider-02 ol{
		width: 100%;
		padding: 0% 0%;
		list-style: none;
		display: flex;
		justify-content: space-between;
	}

	.slider-02 ol>li{
		background: #0000;
		width: 49%;
		display: flex;
	}

	.slider-02 ol>li>div{
		position: relative;
		width: 100%;
		margin: 0%;
		padding: 0%;
	}

	.slider-02 ol>li>div>ul{
		width: fit-content;
		margin: 5%;
		padding: 0%;
		position: absolute;
		display: block;
		border: none;
		right: 0;
		top: 0;
		color: #ffffffd9;
		visibility: hidden;
		transform: translateX(10px);
		opacity: 0;
		transition: 0.3s;
	}

	.slider-02 ol>li>div:hover ul{
		visibility: visible;
		transform: translateX(0px);
		opacity: 1;
		transition: 0.3s;
	}

	.slider-02 ol>li>div>ul>li{
		display: flex;
		width: 35px;
		height: 35px;
		background: #000;
		margin: 0px 0px 5px 0px;
	}

	.slider-02 ol>li>div>ul>li:hover{
		background: var(--color-gold-p);
	}

	.slider-02 ol>li>div>ul>li>i{
		margin: auto;
		font-size: 18px;
	}

	.slider-02 ol>li>div>img{
		width: 100%;
		margin: 0%;
		padding: 0%;
	}

	.slider-02 ol>li>div>span>h3{
		font-family: var(--font-primary);
		width: 100%;
		margin: 0%;
		padding: 2% 1%;
	}

	.slider-02 ol>li>div>span>h4{
		font-family: var(--font-primary);
		width: 100%;
	    margin: 0px 0px 0px 0px;
	    padding: 5px 1px;
	    font-size: 18px;
	    color: var(--color-gold-p);
	}

	.slider-02 ol>li>div>span>p{
		font-size: 18px;
		letter-spacing: 0.5px;
	}

	.slider-pc{
		display:block;
		width: 100%;
		border-radius: 4px;
		cursor: pointer;
	}

	.slider-mobile{
		display: none;
		cursor: pointer;
	}

/*****PROMOCIONES ***/
.title-promo{
    position: absolute;
    bottom: 0;
    margin: auto;
    display: flex;
    left: 0;
    width: 100%;
    height: 10%;
    padding: 0 45px;
    color: #111;
    text-transform: capitalize;
    background: #ffffffa1;
    font-weight: normal;
    border-radius: 0 0 5px 5px;
}
.title-promo h3{
    margin: auto 0;
    font-size: 18px;
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.title-promo h3>i{
    color: #333;
    font-size: 1.2em;
}

#fixed-b{
	height: 15%;
    padding: 0 15px;
}
#fixed-b h3{
	font-size: 16px;
}
.promotions-content{
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 74.5% 24%;
	grid-gap: 20px;
}
.promotions-content .promo-left{
	position: relative;
	width: 100%;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
}
.promotions-content .promo-left img{
	width: 100%;
	height: 525px;
	cursor: pointer;
}

.promotions-content .promo-right{
	position: relative;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
}
.promotions-content .promo-right img{
	width: 100%;
	height: 252px;
	cursor: pointer;
	object-fit: cover;
}


.card::before {
    position: absolute;
    top: 1.2rem;
    content: "";
    background: #2f72bc;
    height: 28px;
    width: 28px;
    transform: rotate(45deg);
    left: -5.5px;
    z-index: -1;
    display: none;
}

.card::after {
    position: absolute;
    content: attr(data-label);
    top: 3%;
    left: 3%;
    padding: 1% 0;
    width: 6rem;
    background: #2f72bc;
    color: #fff;
    text-align: center;
    font-family: "Roboto", sans-serif;
    box-shadow: 4px 4px 15px rgb(26 35 126 / 20%);
    border-radius: 10px;
    font-size: 14px;
}


/******CATEGORY ITEM ***/

.category-item{
	width: 100%;
	position: relative;
}
.category-item ul{
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 2em 0;
    text-align: center;
    grid-gap: 20px;
    width: 80%;
    margin-right:  auto;
}

.category-item li{
	position: relative;
    list-style: none;
    background: #fff;
    border-radius: 4px;
    padding: 10%;
	cursor: pointer;
	transition: 0.2s;
}

.category-item li::before{
    content: '';
    position: absolute;
    width: 0%;
    height: 5px;
    background: #2f72bc;
    bottom: 0;
    left: 0;
    border-radius: 0px 0px 5px 5px;
    transition: 0.2s;
    margin: 0 auto;
    right: 0;
}
.category-item li:hover:before{
	transition: 0.2s;
 	width: 100%;
}
.category-item li:hover{
	border: none;
	transform: translateY(-10px);
	transition: 0.2s;
	box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
}
	   
.category-item li>img{
	width: 100%;
    list-style: none;
    background: #fff;
    border-radius: 5px;
    padding: 27%;
}
.category-item li>p{
		font-family: 'Roboto', sans-serif;
	font-size: 1em;

}

/*** CONTENTS ***/

	/** CONTENT 01 **/

		.content-01 {
			width: 100%;
			position: relative;
		}

		.content-01 hr{
			left: 0;
		    height: 92px;
		    width: 90%;
		    margin: 0% 5%;
		    background: #333;
		    position: absolute;
		    box-shadow: 0px 0px 8px -1px #333;
		}

		/** box-1 **/

			.box-1 div>ul{
				width: 100%;
			    padding: 2%;
			    margin: -3% 0% 0% 0%;
			    background: #f2f2f2;
			    list-style: none;
			    display: flex;
			    flex-wrap: wrap;
			    justify-content: space-between;	
			}

			.box-1 div>ul>li{
				background: #333;
				width: 49%;		
			}

			.box-1 div>ul>li>img{
				width: 100%;		
			}

			.box-2-2{
				background: #fff;
    			margin: 2em 0;
    			border-radius: .25rem;
    			box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
			}
			.box-2-2 img{
				width: 100%;
    			padding: 0 7%;
    			border-radius: .25rem;
			}
			.box-2 h2{
				font-family: 'Roboto', sans-serif;
				font-size: 1.5em;
				color: #222;
			}
			.box-2 h2>i{
			}

		/** banner-box-2 **/

			.banners-box-2{
				margin: 0;
				width: 100%;
				position: relative;
			}

			.banners-box-2 img{
				width: 100%;
				cursor: pointer;
				position: relative;
			}

			.title-promo-end {
			    position: absolute;
			    bottom: 0;
			    margin: auto;
			    display: flex;
			    left: 0;
			    width: 100%;
			    padding: 0 30%;
			    color: #333;
			    font-weight: normal;
			    z-index: 1;
			    top: 0;
			    right: 0;
			    text-align: center;
			}

			.title-promo-end h3 {
			    margin: auto 0;
			    font-size: 30px;
			    display: flex;
			    width: 100%;
			    justify-content: center;
			}
		/** container-product-1 **/

			.container-product-1{
				width: 100%;
				margin-top: 5%;
				margin-bottom: 5%;
			}

			.container-product-1 h2 {
				width: 100%;
			    font-family: 'Roboto', sans-serif;
			    margin: 0 0 1% 0;
			    padding: 0;
			    font-size: 1.5em;
			    color: #222;
			    font-weight: bold;
			    letter-spacing: 0.5px;
			}

			.container-product-1 ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				list-style: none;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}

			.container-product-1 ul>li{
				width: 49.5%;
				padding: 1%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				border: 1px solid #21252900;
				box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
			}

			.container-product-1 img{
				width: 100%;
				cursor: pointer;
			}

			.container-product-1 ul>li>div>img{
				width: 100%;
				cursor: pointer;
			}

			.container-product-1 ul>li>div>h3{
			    width: 100%;
			    margin: 0%;
			    padding: 5% 0% 5% 5%;
			    font-family: 'Roboto', sans-serif;
			    font-weight: normal;
			    font-size: 19px;
			    color: #333;
			}

			.container-product-1 ul>li>div>h4{
				width: 100%;
			    margin: 0%;
			    padding: 0% 0% 0% 5%;
			    font-size: 12px;
			    color: #FF9800;
			}

			.container-product-1 ul>li>div>h5{
			    width: 100%;
			    margin: 0%;
			    padding: 3% 0% 0% 5%;
			    font-family: var(--font-primary);
			    font-weight: bold;
			    font-size: 24px;
			    color: crimson;
			}

			.container-product-1 ul>li>div>p{
				width: 100%;
			    margin: 0%;
			    padding: 2% 0% 3% 5%;
			    font-family: var(--font-primary);
			    font-weight: bold;
			    letter-spacing: 0.5px;
			    font-size: 20px;
			    color: #333333a3;
			}

			.container-product-1 ul>li>div>ul{
				list-style: none;
				width: 100%;
				display: flex;
				margin: 0%;
				padding: 5% 0% 3% 5%;
				justify-content: space-between;
			}

			.container-product-1 ul>li>div>ul>li{
				border: none;
				box-shadow: none;
			}

			.container-product-1 ul>li>div>ul>li>h6{
				display: flex;
				margin: 0px 10px 0px 0px;
				width: 40px;
				height: 40px;
				color: #fff;
				background: #fff;
				cursor: pointer;
				border-radius: 5px;
				box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 10%);
				border: 1px solid #eee;
			}

			.container-product-1 ul>li>div>ul>li>h6:hover{
				border: 1px solid var(--color-gold-p);
			    color: #fff;
			    transition: 0.3s;
			}
			.container-product-1 ul>li>div>ul>li>h6:hover i{
			    color: var(--color-gold-p);
			    transition: 0.3s;
			}
			.container-product-1 ul>li>div>ul>li>h6>i{
				margin: auto;
				color: #111;
			}

			.container-product-1 ul>li>div>ul>li>button{
			    width: 100%;
			    padding: 2% 1%;
			    background-color: var(--color-gold-p);
			    color: #fff;
			    font-size: 17px;
			    border: none;
			    outline: none;
			    letter-spacing: 0.5px;
			    transition: 0.3s;
			    border-radius: 0px;
			    font-weight: normal;
			}

			.container-product-1 ul>li>div>ul>li>button:hover{
			    background-color: #000;
			    color: #fff;
			    font-weight: normal;
			    letter-spacing: 0.5px;
			    transition: 0.3s;
			}

		/** banner-box-2 **/

			.banners-box-3{
				margin-top: 5%;
				display: flex;
				justify-content: space-between;
				width: 100%;
			}

			.banners-box-3 img{
				width: 49%;
			}

		/** container-product-serch **/

			.container-products-serch{
				width: 100%;
				margin-top: 0%;
				margin-bottom: 2.5%;
				position: relative;
				z-index: 0;
			}

			.container-products-serch ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				list-style: none;
				position: relative;
			}

			.container-products-serch ul>li{
				padding: 0% 1% 1% 1%;
			}

			/* pagination */

				.pagination{
					width: 100%;
					margin: 0% 0% 0% 0%!important;
					padding: 1% 0% 0% 0%!important;
					display: flex;
					justify-content: center;
					border-top: 3px solid var(--color-gold-p);
				}

				.pagination li{
					font-family: var(--font-primary);
					font-size: 18px;
					letter-spacing: 1px;
					margin: 0%;
					padding: 8px 0px!important;
					width: 40px;
					height: 40px;
					cursor: pointer;
					color: #000;
					text-align: center;
					font-weight: bold;
				}

				.pagination li:hover{
					border: 2px solid #2f72bc;
				}

				.pagination-active{
					border: 2px solid #eee;
					background: #fff;
					border-radius: 100%;
					border: none;
					box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 30%);
				}

				.btn_pagination{
					width: 100px!important;
				}

				.btn_pagination-desactive{
					border:none!important;
				}

			/* box category */

				.box-prod-category{
					width: 20%;
					position: absolute;
					left: 0;
					background-color: #0000;
					border-radius: 5px;
					z-index: 3;
				}

				.box-prod-category h2{
					width: 100%;
					font-family: var(--font-primary);
				    margin: 20px 0px 0px 0px;
				    padding: 0px 0px 10px 0px;
				    font-size: 20px;
				    font-weight: bold;
				   	cursor: pointer;
				   	color: #fff;
				   	letter-spacing: 1.8px;
				   	cursor: pointer;
				   	position: relative;
				}

				.box-prod-category h2>i{
					position: absolute;
					right: 5px;
				}

				.title-cat-active {
				    border-bottom: 2px solid #fe0000;
				}

				.box-prod-category ol{
					width: 100%;
					margin: 3% 0% 0% 0%;
					padding-left: 0px;
					list-style: none;
					color: #fff;
				}

				.box-prod-category ol>li{
					font-size: 20px;
					cursor: pointer;
					background: #0000;
					padding: 5px 5px;
					color: #fff;
					border-radius: 5px;
					position: relative;
				}

				.box-prod-category ol>li:hover{
					color: var(--color-gold-p);
					background: #fe0000;
					color: #fff;
				}

				.box-prod-category ol>li>div{
					width: 150%;
				    padding: 4px;
				    left: 97%;
				    top: 0%;
				    position: absolute;
				    background: #fe0000;
				    border-radius: 5px;
				    display: flex;
				    justify-content: flex-start;
				    flex-wrap: wrap;
				}

				.box-prod-category ol>li>div>p{
					width: 33%;
				    margin: 0% 0% 0% 0%;
				    padding: 5px 5px 5px 5px;
				    font-size: 15px;
				    letter-spacing: 0.5px;
				    border-radius: 5px;
				}

				.box-prod-category ol>li>div>p:hover{
					background: #000;
					color: #fff;
				}


			/* box product serch */

				.box-prod-serch{
					width: 79%;
					margin-left: 21%;
					transition: 0.3s;
				}

				.resume_section h2{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px 0;
				    padding: 15px 0;
				    font-size: 30px;
				    font-weight: bold;
				    background: #0000;
				}

				.resume_section h3{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px;
				    padding: 0px 0px;
				    font-size: 20px;
				    font-weight: bold;
				}

				.resume_section h4{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px;
				    padding: 12px 15px;
				    font-size: 45px;
				    font-weight: bold;
				}

				.resume_section p{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 10px 0;
				    padding: 3px 50px 0px 0px;
				    font-size: 17px;
				    font-weight: normal;
				    letter-spacing: 0;
				    color: #333;
				    text-align: justify;
				    line-height: 1.5;
				}
				.resume_section button{
				    margin: 5px 5px;
				    padding: 2% 7%;
				    border: none;
				    background-color: #2f72bc;
				    color: #fff;
				    font-size: 18px;
				    border-radius: 5px;
				}
				.resume_section ul {
				    width: 100%;
				    margin: 0%;
				    padding: 0%;
				    list-style: none;
				    display: flex;
				    flex-wrap: wrap;
				    justify-content: space-between;
				}

				.resume_section ul>li {
					width: 49%;
    				padding: 15px 0px 15px 0px;
				}

				.resume_section img{
					width: 100%;
					margin-bottom: 10px;
					cursor: pointer;
				}

				.resume_section ol{
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin: 0%;
					padding: 0%;
					list-style: none;
				}

				.resume_section ol>li{
					width: 24%;
					text-align: center;
					font-family: var(--font-primary);
				    margin: 30px 0px 0px 0px;
				    padding: 0px 0px;
				    font-size: 20px;
				    font-weight: bold;
				}

				.resume_section ol>li>img{
					width: 35%;
					transition: 0.3s;
				}

				.resume_section ol>li>img:hover{
					transform: scale(1.09);
					transition: 0.3s;
				}

				.box-prod-serch h2{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0px 0px 0px 0px;
				    padding: 12px 15px;
				    font-size: 45px;
				    font-weight: bold;
				    color: #fff;
    				background: #000000;
				}

				.box-prod-serch ol{
					width: 100%;
				    padding: 0% 0%;
				    list-style: none;
				    display: grid;
				    grid-template-columns: repeat(4, 1fr);
				    grid-gap: 20px;
				    margin-bottom: 2.5em;
				    row-gap: 25px;
				}

				.box-prod-serch ol>li{
					position: relative;
				    background: #fff;
				    padding: 1%;
				    width: 100%;
				    margin-bottom: 0em;
				    border: 0px solid #21252900;
				    transition: .4s;
				    border-radius: .25rem;
				}

				.box-prod-serch ol>li:hover{
					transition: .4s;
					box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 25%);
				}

				.box-prod-serch ol>li>div{
				    position: relative;
				    width: 100%;
				    margin: 0%;
				    padding: 0%;
				}

				.box-prod-serch ol>li>div>ul {
				    width: fit-content;
				    margin: 5%;
				    padding: 0%;
				    position: absolute;
				    display: block;
				    border: none;
				    right: 0;
				    top: 0;
				    color: #ffffffd9;
				    visibility: hidden;
				    transform: translateX(10px);
				    opacity: 0;
				    transition: 0.3s;
				}

				.box-prod-serch ol>li>div:hover ul{
					visibility: visible;
					transform: translateX(0px);
					opacity: 1;
					transition: 0.3s;
				}

				.box-prod-serch ol>li>div>ul>li {
				    display: flex;
				    width: 35px;
				    height: 35px;
				    background: #000;
				    margin: 0px 0px 5px 0px;
				    cursor: pointer;
				    border-radius: .25rem;
				}

				.box-prod-serch ol>li>div>ul>li:hover{
					background: var(--color-gold-p);
				}

				.box-prod-serch ol>li>div>ul>li>i{
					margin: auto;
					font-size: 18px;
				}

				.box-prod-serch ol>li>div>img{
					width: 100%;
				    margin: 0px 0px 5px 0px;
				    padding: 0%;
				    cursor: pointer;
				    border-bottom: 1px solid #eee;
				    height: 260px;
				    object-fit: contain;
				}

				.box-prod-serch ol>li>h3{
					width: 100%;
					margin: 0%;
					padding: 2% 1%;
					display: flex;
				}

				.box-prod-serch ol>li>h3>i{
					font-size: 10px;
					margin-right: 5px;
					color: #FF9800;
				}

				.box-prod-serch ol>li>h4{
				    font-family: 'Roboto', sans-serif;
				    width: 100%;
				    margin: 0px 0px 0px 0px;
				    padding: 12px 10px 45px;
				    font-size: 15px;
				    color: #444;
				    text-align: center;
				}

				.box-prod-serch ol>li>p{
					font-family: 'Roboto', sans-serif;
				    font-weight: bold;
				    font-size: 18px;
				    letter-spacing: 0.5px;
				    margin: 0px;
				    color: crimson;
				    text-align: center;
				    position: absolute;
				    bottom: 0.5em;
				    left: 0;
				    right: 0;
				}

				.box-prod-serch ol>li>p>small{
					font-weight: bold;
					text-transform: uppercase;
				}
		/** container-product-detail **/

	.title-all-p{
	    font-family: 'Roboto', sans-serif;
	    position: relative;
	    color: #333;
	    background: #fff;
	    font-size: 1.5em;
	    padding: 1.5% 2%;
	    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
	    border-radius: .25rem;
	    font-weight: bold;
	    letter-spacing: 0.5px;
	    margin: 1em 0 1.5em;
	    border-bottom: 1px solid #ddd;
	}
	.title-all-p small{
		font-size: 17px;
	    letter-spacing: 0;
	    color: #333;
	}
	.title-all-p small>i{
		color: #999;
		margin: 0 1%;
	}
	.title-all-p::after{
	    content: ' ';
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    width: 5px;
	    height: 100%;
	    background: #2f72bc;
	}

			.container-products-detail{
				width: 100%;
				margin-top: 2%;
				margin-bottom: 3%;
				box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
			}
			.container-products-detail ol{
			    width: 100%;
			    padding: 0;
			    display: grid;
			    grid-template-columns: 1fr 1fr;
			    background: #fff;
			    margin-bottom: 0;
			    padding: 1% 2% 0;
			}
			.container-products-detail ol>li{
			    list-style: none;
			    font-size: 1.1em;
			    color: #9a9a9c;
			    cursor: pointer;
			}
			.container-products-detail ol>li:hover{
				color: #333;
			}
			.container-products-detail ol>li>i{
				color: #2f72bc;
			}
			.container-products-detail ul{
				width: 100%;
			    margin: 0%;
			    padding: 1% 1%;
			    list-style: none;
			    display: grid;
			    background: #fff;
			    border-radius: .25rem;
			    grid-template-columns: 50% 49%;
			    grid-gap: 10px;
			}

			.container-products-detail ul>li{
				padding: 1%;
			}

			.not-found{
				position: relative;
			    width: 100%;
			    padding: 15% 15%;
			    background: #fff;
			    border-radius: .25rem;
			    position: relative;
			    top: 1.4em;
			    text-align: center;
			    background-image: url(../images/material/fond.jpg);
			    background-size: cover;
			    z-index: 1;
			    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 10%);
			}
			.not-found img{
			    width: 15%;
			    margin: 2em 0;
			}
			.not-found p{
				font-family: 'Roboto', sans-serif;
			    text-align: center;
			    font-size: 18px;
			    color: #555;
			    letter-spacing: 0.5px;
			}

			.not-found p>b>i{
				margin: 0 1%;
				color: #90b80c;
			}

			.opacity{
				position: absolute;
			    width: 100%;
			    height: 100%;
			    background: #ffffffd1;
			    left: 0;
			    top: 0;
			    z-index: -1;
			}

			.owl-carousel .owl-item {
			  border: none!important;
			}
			.owl-item .cloned {
			  border: none!important;
			}
			/* box-detail-product-img */

				.box-detail-product-img{
					width: 100%;
					padding: 1%;
				}

				/** zoom ***/

					.box-images{
						position: relative;
						width: 100%;
						cursor: none!important;
						text-align: center;
					}

					.box-images img{
						border: 0px solid #00000045;
						border-radius: 5px;
					}

					.content-zoom{
						padding: 4%;								
					}   	

					.content-zoom h2 {
					    font-family: var(--font-primary);
					    width: 100%;
					    margin: 0% 0% 3% 0%;
					    padding: 0% 0% 2% 0%;
					    font-size: 25px;
					    font-weight: bold;
					    color: #000;
					    letter-spacing: 0.5px;
					    border-bottom: 3px solid #000000;
					}

					.img-magnifier-glass {
					    position: absolute;
					    border: 1px solid #000000b0;
					    border-radius: 50%;
					    cursor: none!important;
					    width: 190px;
					    height: 190px;
					}

				/* gallery */

				.img-auto{
					opacity: 0;
					z-index: -2
				}

				.gallery-zoom{
					position: relative;
					cursor: pointer;
					border: 0px solid #9091936b;
				}

				.gallery-zoom span {
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: #0000;
					display: flex;
					visibility: hidden;
					transition: 0.3s;
				}

				.gallery-zoom i{
					margin: auto;
					visibility: hidden;
					font-size: 30px;
					color: #fff;
				}

				.gallery-zoom:hover span{
					background-color: #1111114f;
					z-index: 5;
					visibility: visible;
					transition: 0.3s;
				}

				.gallery-zoom:hover i{
					margin: auto;
					visibility: visible;
				}

				.gallery-zoom img{
					width: 100%;
				}

				.gallery-imgs{
					position: relative;
					width: 100%;
					margin: 0%;
					padding: 0%;
				}

				.gallery-imgs ol{
					width: 100%;
					margin: 0%;
					padding: 2%;
					list-style: none;
					display: flex;
					grid-gap: 30px;
				}

				.gallery-imgs ol>li{
					width: 100px;
					height: 100px;
					cursor: pointer;
					transition: 0.3s;
				}

				.gallery-imgs ol>li>img{
					width: 100%;
					margin: 0%;
					padding: 0%;
				}

				.gallery-imgs ol>li:hover{
					opacity: 0.5;
					transition: 0.3s;
				}

			/* box-detail-product-desc */

				.box-detail-product-desc{
					width: 100%;
					padding: 1%;
				}

				.box-detail-product-desc div{
					background-color: #fff;
					padding: 1%;
					margin: 0%;
					padding-top: 5%;
				}

				.box-detail-product-desc div>h2{
					font-family: var(--font-primary);
				    margin: 3% 0% 2% 0%;
				    padding: 0% 10% 0% 3%;
				    font-size: 30px;
				    font-weight: bold;
				    color: #222;
				}

				.box-detail-product-desc div>h3{
					font-family: var(--font-primary);
				    margin: 3% 0% 5% 0%;
				    padding: 0% 0% 0% 3%;
				    font-size: 28px;
				    font-weight: bold;
				    color: crimson;
				}

				.calification{
					width: 100%;
					margin: 3% 0% 2% 0%!important;
				    padding: 0% 0% 0% 3%!important;
				    color: #0000003b;
				}

				#sku{
					color: #666;
    				font-size: 15px;
    				letter-spacing: 0.5px;
    				position: relative;
				}

				#sku b{
					color: #fff;
				    background: #08f;
				    font-weight: normal;
				    padding: 0.7% 1.5%;
				    border-radius: 10px;
				    font-size: 12px;
				    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
				    position: relative;
				}

				#sku b::before{
					    position: absolute;
					    width: 200px;
					    height: 30px;
					    content: attr(data-label);
					    /* right: 0; */
					    color: #555;
					    left: 130px;
					    margin: 0 auto;
					    font-size: 12px;
					    top: -10px;
				}



				.box-detail-product-desc div>p{
				    width: 100%;
				    margin: 3% 0% 2% 0%;
				    padding: 0% 7% 0% 3%;
				    font-size: 17px;
				    color: #444;
				    position: relative;
				}
				.box-detail-product-desc div>p>br{
					position: relative;
				}

				.box-detail-product-desc div>p>br::before{
					position: absolute;
					content: '';
					left: 0;
				}

				.items-stock{
					width: 100%;
				    margin: 3% 0% 2% 0%!important;
				    padding: 2% 5% 2% 10%!important;
				    color: #ffffff;
				    position: relative;
				    border-radius: 5px;
				    font-size: 16px;
				    background-color: #000000!important;
				}

				.items-stock i{ 
					position: absolute;
				    left: 33px;
				    top: 18px;
				    font-size: 18px;
				}	

				.datasheet{				    
				    margin: 3% 0% 4% 3%!important;
				    padding: 1% 3% 1% 3%!important;
				    color: #222222;
				    cursor: pointer;
				    font-size: 17px;
				    background: #fff!important;
				    width: fit-content;
				    border-radius: 5px;
				    border: 1.5px solid #222222;
				}

				.datasheet:hover{
				}


				.box-detail-product-desc div>form>ul{
					width: 100%;
					margin: 3% 0% 2% 0%!important;
				    padding: 0% 0% 0% 3%!important;
					display: flex;
					justify-content: flex-start;
				}

				.box-detail-product-desc div>form{
					width: 100%;
					margin: 3% 0% 2% 0%;
				    padding: 0% 0% 0% 3%;
					display: flex;
					justify-content: flex-start;
				}

				.box-detail-product-desc div>form>input{
				    margin: auto 10px;
				    width: 40px;
				    height: 40px;
				    text-align: center;
				    border-radius: 5px;
				    border: 1px solid #888;
				    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
				}

				.box-detail-product-desc div>form>button{
					font-family: var(--font-primary);
					margin: auto 10px;
					height: 40px;
					padding: 0% 40px;
					display: flex;
					border: none;
					outline: none;
					font-size: 18px;
					letter-spacing: 1px;
					background-color: #222;
					color: #fff;
					border-radius: 5px;
				}

				.box-detail-product-desc div>form>button:hover{
				}

				.box-detail-product-desc div>form>button>span{
					margin: auto;
				}

				.btn-plus, .btn-minus{
					margin: auto 0%;
				    width: 40px;
				    height: 40px;
				    background-color: #fff;
				    display: flex;
				    cursor: pointer;
				    color: #000;
				    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
				    border: 1px solid #ddd;
				    position: relative;
				}

				.btn-plus>i, .btn-minus>i{
					margin: auto;
				}

				.btn-plus:hover, .btn-minus:hover{
				}

				.btn-plus-resp, .btn-minus-resp{
					margin: auto 0%;
				    width: 40px;
				    height: 40px;
				    background-color: #fff;
				    display: flex;
				    cursor: pointer;
				    color: #000;
				    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
				    border: 1px solid #eee;
				    position: relative;
				}

				.btn-plus-resp>i, .btn-minus-resp>i{
					margin: auto;
				}

				.btn-plus-resp:hover, .btn-minus-resp:hover{
				}


				.coments{
					width: 100%;
					margin: 3% 0% 2% 0%!important;
				    padding: 0% 3% 0% 3%!important;
				}

				.coments h4{
					font-family: var(--font-primary);
				    margin: 3% 0% 0% 0%;
				    padding: 0% 0% 0% 0%;
				    font-size: 22px;
				    font-weight: bold;
				}

				.coments p{
					position: relative;
				    font-family: var(--font-primary);
				    margin: 0% 0% 0% 0%!important;
				    padding: 0% 5% 0% 5%!important;
				    font-size: 16px!important;
				    color: #333!important;
				}
				.coments p::before{
				    font-family: "Font Awesome 5 Free";
				    font-weight: 900;
				    content: "\f105";
				    position: absolute;
				    left: 0.7em;
				    color: #999;
				}


/******* PRODUCTS - DETAIL **** **/

.product-detail{
	font-family: 'Roboto', sans-serif;
	margin: 0 0 2em;
    padding: 0;
    display: grid;
    grid-template-columns: 70% 30%;
    grid-gap: 0px;
    background: #fff;
    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
    border-radius: .25rem;
}
.product-detail .products-left{

}
.product-detail .products-left ul{
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0;
    border-bottom: 1px solid #eee;
    position: relative;
    margin: 0em 0;
}
.product-detail .products-left ul>li{
    list-style: none;
    width: 17.5%;
    padding: 1.5% 2%;
    font-size: 18px;
    position: relative;
    text-align: center;
    transition: .4s;
    cursor: pointer;
    color: #999;
}
.product-detail .products-left h2{
    padding: 0 4%;
    margin: 2em 0 0;
    font-size: 1.4em;
    color: #555;
}
.product-detail .products-left p{
	padding: 2% 4%;
    color: #444;
}
.product-detail .products-left table{
	padding: 0 4%;
}
.product-detail .products-left ul>li:hover{
	transition: .4s;
	background: #eee;
}
.enable-desc{
	transition: .4s;
	color: #222!important;
}
.enable-desc::before{
	content: '';
	position: absolute;
	bottom: -2px;
	width: 100%;
	height: 3px;
	background: #2f72bc;
	left: 0;
	transition: .4s;
}
.products-right{
	border-left: 1px solid #eee;
}

.products-right h3{
	font-family: 'Roboto', sans-serif;
	margin: 0.7em 1em;
    font-size: 21px;
    color: #222;
}
.products-right ul{
	display: grid;
    grid-template-columns: 25% 70%;
    grid-gap: 10px;
    padding: 0 5%;
    position: sticky;
    top: 2%;
}
.products-right ul>li{
	list-style: none;
	margin: auto 0;
	transition: .4s;
}
.products-right ul>li:hover{
	transition: .4s;
}
.products-right ul>li>img{
    width: 100%;
    padding: 20%;
}
.products-table{
	padding: 0 4%;
	margin-top: 2em;
}

.products-right ul>li>h5{
	font-family: 'Roboto', sans-serif;
	color: #222;
}
.products-right ul>li>p{

}
.products-right ul>li>p>b{
 	color: #016db6;
 	cursor: pointer;
 	letter-spacing: 0.5px;
}
.follow{
	position: sticky;
	top: 5%;
}
			/* box-detail-product-promo */

				.box-detail-product-promo {
					width: 20%;
					padding: 1%;
				}

				.box-detail-product-promo img{
					width: 100%;
				}

				.box-detail-product-promo ol{
					width: 100%;
					margin: 0%;
					padding: 0%;
					list-style: none;
				}

				.box-detail-product-promo ol>li{
					margin-bottom: 25px;
				}

		/** container-shoppingcart **/

			.container-shoppingcart{
				width: 100%;
				margin-top: 4%;
				margin-bottom: 5%;
			}

			.container-shoppingcart h2 {
				font-family: var(--font-primary);
			    width: 100%;
			    margin: 0% 0% 2% 0%;
			    padding: 1.5% 1% 1.5% 1%;
			    font-size: 24px;
			    font-weight: bold;
			    border-left: 4px solid #2f72bc;
			    background: #fff;
			    color: #333;
			    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
			}

			/** shopping car **/

				.table-shoppingcart{
					width: 100%;
					margin: 0%;
					padding: 0%;
				}

				.table-shoppingcart table{
					width: 100%;
					margin: 1% 0;
					padding: 0%;
					background: #fff;
				}

				.table-shoppingcart form{
					width: 100%;
					padding: 5px;
				}

				.table-shoppingcart tr{
					width: 100%;
					padding: 0%;
					display: flex;
					justify-content: space-between;
					text-align: left;

				}

				.table-shoppingcart td{
					position: relative;
					width: 16%;
					text-align: center;
					display: flex;
					justify-content: center;
				}

				.table-shoppingcart td>img{
					width: 80%;
					padding: 2%;
				}

				.table-shoppingcart td>p{
					width: 100%;
					padding: 2% 5%;
					margin: auto 0%;
					font-size: 15px;
					letter-spacing: 0.5px;
				}
				.table-shoppingcart td>p>b{
				    background: #08f;
				    font-weight: normal;
				    color: #fff;
				    font-size: 9px;
				    padding: 2% 5%;
				    border-radius: 20px;
				}
				.table-shoppingcart td>p>b::after{
				    content: attr(data-label);
				    position: absolute;
				    bottom: 15%;
				    left: 0;
				    right: 0;
				    color: #111;
				    font-size: 10px;
				}
				.table-shoppingcart td>input{
					width: fit-content;
					padding: 2% 5%;
					margin: auto 0%;
					font-size: 15px;
					letter-spacing: 0.5px;
					text-align: center;
					outline: none;
				}

				.table-shoppingcart-mobile{
					width: 100%;
					background-color: #fff;
				}

				.table-shoppingcart-mobile div{
					width: 100%;
					border-bottom: 1px solid #0003;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;
				}

				.table-shoppingcart-mobile div>img{
					width: 35%;
					padding: 2%;
					height: 100%;
				}

				.table-shoppingcart-mobile div>ul{
					width: 65%;
					padding: 2%;
					margin: 0%;
					list-style: none;
				}

				.table-shoppingcart-mobile div>ul>li{
					font-family: var(--font-primary);
					font-size: 18px;
				}

				.table-shoppingcart-mobile div>ul>li>button{
					width: 50%;
				    margin: 5% 0% 0% 44%;
				    padding: 0px;
				    border: none;
				    outline: none!important;
				    font-size: 17px;
				    background-color: #F44336;
				    border-radius: 5px;
				    color: #fff;
				    letter-spacing: 0.5px;
				}

				.btn-cart-remove{
					margin: 0px;
					padding: 0%;
					border: none;
					outline: none!important;
					font-size: 20px;
					background-color: #0000;
				}

				.btn-cart{
					width: 100%;
					margin: 10px 10px 10px 0;
					padding: 4% 0;
					border: none;
					background-color: #222;
					color: #fff;
					font-size: 17px;
					border-radius: 5px;
				}

				.tr-cart-01{
					font-weight: bold;
					margin: 0px 0px 10px 0px;
	    			border-bottom: 3px solid #000000;
				}

				.tr-cart-02{
					margin: 0px 0px;
					border-bottom: 1px solid #0000002b;
				}

				.tr-cart-03{
					margin: 0px 0px 0px 0px;
	    			border-top: 1px solid #ffc107;
				}

				.table-total{
					width: 30%!important;
					float: right;
				}

				.table-total td{
					width: 50%!important;
					text-align: left;
				}

			/** checkout **/

				.data-checkout{
					width: 100%;
					margin: 0%;
					padding: 0%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
				}

				.data-checkout h3{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0% 0% 2% 0%;
				    padding: 0% 0% 2% 0%;
				    font-size: 20px;
				    font-weight: bold;
				}

				.data-checkout p{
					position: relative;
				    font-family: var(--font-primary);
					width: 100%;
					margin: 0px 0px 5px 0px;
					padding: 5px 0px;
					font-size: 15px;
				}
				.data-checkout p>b{
					color: #fff;
				    background: #08f;
				    font-weight: normal;
				    font-size: 12px;
				    padding: 1% 5%;
				    border-radius: 20px;
				}
				.data-checkout p>b::after{
					content: attr(data-label);
					position: absolute;
					left: 0;
				}
				.data-checkout label{
					font-family: var(--font-primary);
					width: 100%;
					margin: 0px 0px 5px 0px;
					padding:0%;
					font-size: 15px;
				}

				.data-checkout input{
					font-family: var(--font-primary);
				    width: 100%;
				    margin: 0%;
				    padding: 5px 10px;
				    font-size: 18px;
				    border: solid 1.5px #ddd;
				    outline: none!important;
				    color: #111;
				}

				.data-checkout div{
				    width: 49%;
				    margin: 0%;
				    padding: 2%;
				    background-color: #fff;
				    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
				    border-radius: .25rem;
				}

				.data-checkout div>form{
				    width: 100%;
				    padding: 0%;
				    margin: 0%;
				    position: sticky;
				    top: 0;
				}

				.data-checkout div>form>ol{
					width: 100%;
					padding: 0%;
					margin: 0%;
					list-style: none;
				}

				.data-checkout div>form>ol>li{
					width: 100%;
					margin: 0px 0px 15px 0px;
					padding: 0%;
				}

				.data-checkout div>form>ol>li>ul{
					width: 100%;
					margin: 0%;
					padding: 0%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					list-style: none;
				}

				.data-checkout div>form>ol>li>ul>li{
					width: 48%;
				}

				.order-data table{
					width: 100%;
					margin: 0%;
					padding: 0%;
				}

				.order-data td{
					width: 35%;
				}

				.order-row-title{
					border-bottom: 2px solid #eaebeb;
				}
				.order-row-title2{
					border-top: 1px solid #0000006b;
					border-bottom: 1px solid #0000006b;
				}
				.order-row-title3{
					border-top: 1px solid #ddd;
				}

				.order-row-content{
					border-top: 1px solid #00000024;
				}
				.order-row-title3 p{
					margin: 2% 0;
				}
				.order-row-title3 strong{
					font-size: 1.5em;
				    font-weight: normal;
				    letter-spacing: 0.5px;
				}
				.data-checkout button{
					width: 100%;
					margin: 0%;
					padding: 2%;
					border: none;
					background-color: #222;
					color: #fff;
					font-size: 18px;
				}


				.personal-data-user{
					width: 100%!important;
				    margin: 0% 0% 3% 0%!important;
				    padding: 2% 2%!important;
				    background-color: #e4e4e4!important;
				    border-radius: 10px;
				}

				.personal-data-user i{
					font-size: 20px;
					cursor: pointer;
				}

				.personal-data-user h4{
				    font-family: var(--font-primary);
				    width: 100%;
				    margin: 0% 0% 0% 0%;
				    padding: 0% 0% 0% 0%;
				    font-size: 20px;
				    font-weight: bold;
				}

				.personal-data-user h4>i{
					font-size: 20px;
					margin-right: 10px
				}

				.user-data-title{
					width: 100%!important;
					margin: 0%!important;
					padding: 0%!important;
					background-color: #e4e4e4!important;
					display: flex;	
				}

				.user-data-form-01, .user-data-form-02,.user-data-form-03, .user-data-form-04, .user-data-form-05, .user-data-form-06{
					width: 100%!important;
				    margin: 2% 0% 0% 0%!important;
				    padding: 2% 0% 0% 0%!important;
				    border-top: 1.5px solid #2125356b;
				    background-color: #e4e4e4!important;
				    display: none;	
				}

				.user-data-form-active{
					display: block;
				}

				.form-plus-01,.form-plus-02 ,.form-plus-03,.form-plus-04,.form-plus-05,.form-plus-06{
					color: #28a745;
				}

				.form-minus-01,.form-minus-02,.form-minus-03,.form-minus-04,.form-minus-05,.form-minus-06{
					display: none;
					color: #f44336;
				}

		/** container-contact **/

			.container-contact{
			    width: 100%;
			    margin-top: 2.7em;
			    background: #fff;
			    padding: 2%;
			    border-radius: .25rem;
			    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
			}

			.container-contact h2 {
				font-family: var(--font-primary);
			    width: 100%;
			    margin: 0% 0% 2% 0%;
			    padding: 0% 0% 1% 0%;
			    font-size: 30px;
			    font-weight: bold;
			    border-bottom: 1px solid #c1c1c2;
			    letter-spacing: 0.5px;
			    color: #333;
			    position: relative;
			}

			.container-contact h2::after {
				content: ' ';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 120px;
				height: 3px;
				background: #2f72bc;
			}
			.container-contact p{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0px 0px 5px 0px;
				padding: 5px 0px;
				font-size: 15px;
			}

			.container-contact label{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0px 0px 5px 0px;
				padding:0%;
				font-size: 15px;
			}

			.container-contact input,textarea{
			    font-family: var(--font-primary);
			    width: 100%;
			    margin: 0%;
			    padding: 7px 10px;
			    font-size: 16px;
			    border: solid 1.5px #ddd;
			    outline: none!important;
			    border-radius: .25rem;
			}

			.container-contact select{
			    font-family: var(--font-primary);
			    width: 100%;
			    margin: 0%;
			    padding: 7px 10px;
			    font-size: 16px;
			    border: solid 1.5px #ddd;
			    outline: none!important;
			    border-radius: .25rem;
			}

			.data-contact {
				width: 100%;
				margin: 0%;
				padding: 0%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}


			.data-contact div{
				width: 49%;
				margin: 0%;
				padding: 2%;
    			background-color: #f2f2f236;
			}

			.data-contact div>form{
				width: 100%;
				padding: 0%;
				margin: 0%;
			}

			.data-contact div>form>ol{
				width: 100%;
				padding: 0%;
				margin: 0%;
				list-style: none;
			}

			.data-contact div>form>ol>li{
				width: 100%;
				margin: 0px 0px 15px 0px;
				padding: 0%;
			}

			.data-contact div>form>ol>li>ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				list-style: none;
			}

			.data-contact div>form>ol>li>ul>li{
				width: 48%;
			}

			.data-contact div>ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				list-style: none;
			}

			.data-contact div>ul>li{
				margin: 0px 0px 10px 0px;
				padding: 0px 0px 0px 35px;
				position: relative;
				font-size: 18px;
				cursor: pointer;
			}

			.data-contact div>ul>li:hover{
				color: var(--color-gold-p);
			}

			.data-contact div>ul>li>i{
				position: absolute;
				left: 5px;
				top: 5px;
			}

		/** order user **/

			.order-user{
				width: 100%;
			}

			.order-user h5{
				font-family: var(--font-primary);
			    width: 100%;
			    margin: 0% 0% 0% 0%;
			    padding: 0% 0% 0% 0%;
			    font-size: 15px;
			    font-weight: bold;
			    letter-spacing: 0.5px;
			}

	/** CONTENT ADMIN **/

		.principal-content {
			width: 100%;
		    margin: 0%;
		    padding: 0%;
		    position: relative;
		    background-color: #828282;
		}

		/* ASIDE */

		.class-none{
			display: none!important;
		}

			.aside-admin-active{
				left: -18%!important;
				transition: 0.3s;
			}

			.principal-content aside {
				position: fixed;
				transition: 0.3s;
				left: 0%;
			    width: 18%;
			    height: 100%;
			    padding: 1% 1%;
			    background-color: #333;
			    color: #fff;
			    z-index: 
			}

			.principal-content aside>span {
				position: absolute;
			    top: 0px;
			    right: -31px;
			    background-color: #0000;
			    color: #33333391;
			    font-size: 22px;
			    cursor: pointer;
			}

			.principal-content aside>div{
				width: 100%;
			    margin: 0% 0% 5% 0%;
			    padding: 0% 0% 5% 0%;
			    display: flex;
			    border-bottom: 2px solid #84848475;
			    justify-content: flex-start;
			}

			.principal-content aside>div>h1{
				width: 60px;
				height: 60px;
				border-radius: 100px;
				background-image: url('../images/logo/logo_3.jpg');
				background-size: 100% 100%;
				background-position: center;
				margin: auto 0px; 
				padding: 0px;
			}

			.principal-content aside>div>ul{
				margin: auto 0px;
				padding: 0px 0px 0px 15px;
				list-style: none;
			}

			.principal-content aside>div>ul>li{
				width: 100%
			}

			.principal-content aside>div>ul>li>h2{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0%;
				padding: 0%;
				font-size: 22px;
			}


			.principal-content aside>div>ul>li>p{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0%;
				padding: 0%;
			}

			.principal-content aside>ul{
				width: 100%;
				margin: 0%;
				padding: 0%;
				list-style: none;
			}

			.principal-content aside>ul>li{
				width: 100%;
				margin: 0px 0px 10px 0px;
				padding: 0%;
			}

			.principal-content aside>ul>li>div{
				width: 100%;
				margin: 0%;
				padding: 0%;
				background-color: #0000;
				position: relative;
			}

			.principal-content aside>ul>li>div>h3{
				font-family: var(--font-primary);
			    width: 100%;
			    margin: 0%;
			    padding: 0px 0px 0px 35px;
			    font-size: 22px;
			    color: #fff;
			    cursor: pointer;
			    position: relative;
			    letter-spacing:1px;
			}

			.principal-content aside>ul>li>div>h3>i{
				position: absolute;
				left: 5px;
				top: 2px;
				font-size: 20px;
			}

			.principal-content aside>ul>li>div>ol{
				width: 100%;
				height: 0%;
				padding: 0%;
				margin: 0%;
				list-style: none;
				display: none;
			}

			.principal-content aside>button{
				font-family: var(--font-primary);
			    position: absolute;
			    bottom: 2%;
			    width: 80%;
			    margin: 0% 5%;
			    padding: 0%;
			    border: none;
			    outline: none;
			    border-radius: 5px;
			    font-size: 20px;
			    /* font-weight: bold; */
			    letter-spacing: 0.5px;
			    background: #F44336;
			    color: #fff;
			}


		/* SECTION */

			.principal-content section{
				width: 82%;
				float: right;
				list-style: none;
				padding: 1%;
				transition: 0.3s;
				background-image: url(../images/logo/logo-back.png);
			}

			.box-admin-00-active{
				width: 100%!important;
				transition: 0.3s!important;
			}

			.box-admin-00 h2{
				font-family: var(--font-primary);
				width: 100%;
				margin: 0% 0% 0% 0%;
				padding: 1%;
				font-weight: bold;
				letter-spacing: 0.5px;
				transition: 0.3s!important;
			}

			.box-admin-00 h4{
				font-family: var(--font-primary);
			    width: 100%;
			    margin: 0% 0% 0% 0%;
			    padding: 1%;
			    font-weight: bold;
			    letter-spacing: 0.5px;
			    font-size: 18px;
			}

			.box-admin-00 ul{
				width: 100%;
				margin: 0px 0px 15px 0px;
				padding: 0%;
				display: flex;
				justify-content: flex-start;
				list-style: none;
			}

			.box-admin-00 ul>li{
				margin: auto 0px;
				padding: 0px 15px 0px 0px;
				font-size: 18px;
				letter-spacing: 1px;
				font-weight: bold;
				cursor: pointer;
			}

			.box-admin-00 ul>li input{
				margin: 0px 0px;
			    padding: 1px 10px;
			    font-size: 18px;
			    font-weight: normal;
			    letter-spacing: 0.5px;
			    border-radius: 5px;
			    border: 1px solid #333333bd;
			}

			.box-admin-00 ul>li button{
				margin: 0px 0px;
			    padding: 2px 20px;
			    border: none;
			    background-color: #333;
			    border-radius: 5px;
			    font-size: 18px;
			    font-weight: normal;
			    color: #fff;
			    letter-spacing: 0.5px;
			    outline: none;
			}

			.box-admin-00 ul>li>div{
				position: relative;
			}

			.box-admin-00 ul>li>div>h3{
				font-family: var(--font-primary);
				margin: 0px 0px;
			    padding: 5px 20px;
			    border: none;
			    background-color: #333;
			    border-radius: 5px;
			    font-size: 18px;
			    font-weight: normal;
			    color: #fff;
			    letter-spacing: 0.5px;
			    outline: none;
			}

			.box-admin-00 ul>li>div>ol{
				font-family: var(--font-primary);
				position: absolute;
			    left: 0px;
			    top: 40px;
			    background: #333;
			    width: 200px;
			    padding: 0px 0px;
			    list-style: none;
			    letter-spacing: 1px;
			    font-weight: normal;
			    border-radius: 5px;
			    border: 1px solid #333;
			}

			.box-admin-00 ul>li>div>ol>li{
				color: #fff;
				padding: 5px 10px;
				border-radius: 5px;
			}

			.box-admin-00 ul>li>div>ol>li:hover{
				color: #333;
				background-color: #fff;
				font-weight: bold;
			}


			/*table styles*/

			.box-admin-00 table{
				font-family: var(--font-primary);
				width: 100%;
			}

			.box-admin-00 td{
				padding: 5px 10px;
    			border-bottom: 2px solid #00000026;
    			border-left: 1.5px solid #00000026;
    			border-right: 1.5px solid #00000026;
    			border-top: 1.5px solid #00000026;
			}

			.box-admin-00 table img{
				margin: 0px 5px;
				width: 50px;
				height: 50px;
			}

			.non-border{
				border: none!important;
			}

			.table-dashboard{
				width: 100%;
				margin: 0%;
				padding: 0%;
			}

			.table-dashboard ol{
				width: 100%;
			    margin: 0px 0px 10px 0px;
			    padding: 0px;
			    display: flex;
			    justify-content: space-between;
			    flex-wrap: wrap;
			    list-style: none;
			    border-bottom: 2px solid #00000038;
			}

			.table-dashboard ol>li{
				width: 24.5%;
				margin-bottom: 12px;
				padding: 10px 15px;
				cursor: pointer;
				border-radius: 5px;
				display: flex;
				justify-content: flex-start;
			}

			.table-dashboard ol>li>h3{
				font-family: var(--font-primary);
			    width: 100%;
			    margin: auto 0%;
			    padding: 0%;
			    font-size: 25px;
			}

			.table-dashboard ol>li>h3>i{
				margin-right: 5px;
				font-size: 22px;
			}

			.table-dashboard ol>li>p{
				margin: auto 0%;
				padding: 0%;
				font-size: 15px
			}

			.bg-products{
				background-color: #1285b9;
    			color: #fff;
			}

			.bg-user{
				background-color: #469449;
    			color: #fff;
			}

			.bg-billing{
				background-color: #b94925;
    			color: #fff;
			}

			.bg-order{
				background-color: #4a4a4a;
    			color: #fff;
			}

		/* box-promotions */

			.box-promotions{
				width: 100%;
			    padding: 1%;
			    border-radius: 5px;
			    background-color: #fff;
			    border: 2px solid #33333380;
			    margin-bottom: 10px;
			}

			.box-promotions h3{
				font-family: var(--font-primary);
			    width: 100%;
			    display: flex;
			    justify-content: space-between;
			    margin-bottom: 10px;
			    padding-bottom: 10px;
			    border-bottom: 2px solid #ff980045;
			}

			.box-promotions h3>button{
				font-family: var(--font-primary);
				margin: 0px 0px;
			    padding: 2px 20px;
			    border: none;
			    background-color: #333;
			    border-radius: 5px;
			    font-size: 18px;
			    font-weight: normal;
			    color: #fff;
			    letter-spacing: 0.5px;
			    outline: none;
			}

			.box-promotions h3>button>i{
				font-size: 15px;
			}

			.box-promotions ul{
				margin: 0%;
			}

			.box-promotions ul>li{

			}

			.box-promotions ul>li>p{
				margin: 0%;
			}

			.box-promotions ul>li>img{
				border-radius: 5px;
			}

/*** MODAL ***/

	.container-modal{
		font-family: var(--font-primary);
		width: 100%;
		margin: 0%;
		padding: 4%;
		position: relative;
	}

	.container-modal h2{
		font-family: var(--font-primary);
	    width: 100%;
	    margin: 0% 0% 3% 0%;
	    padding: 0% 0% 2% 0%;
	    font-size: 25px;
	    font-weight: bold;
	    color: #000;
	    letter-spacing: 0.5px;
	    border-bottom: 3px solid #000000;
	}

	.container-modal h3{
		font-family: var(--font-primary);
	    width: 100%;
	    margin: 3% 0% 3% 0%;
	    padding: 2% 0% 2% 0%;
	    font-size: 18px;
	    color: #000;
	    letter-spacing: 0.5px;
	    border-top: 1px solid #ffc107;
	}

	.container-modal label{
		width: 100%;
		margin: 0px 0px 5px 0px;
		padding: 0px 0px 0px 0px;
		font-size: 18px;
	}

	.container-modal input{
		width: 100%;
	    margin: 0px 0px 5px 0px;
	    padding: 5px 10px;
	    font-size: 18px;
	    border: 1px solid #0000004f;
	    outline: none;
	}

	.container-modal select{
	    width: 100%;
	    margin: 0px 0px 5px 0px;
	    padding: 5px 10px;
	    font-size: 18px;
	    border: 1px solid #0000004f;
	    outline: none;
	}

	.container-modal img {
		width: 50%;
		margin: 0% 25%;
	}

	.container-modal ol{
		width: 100%;
		margin: 10px 0px;
		padding: 10px 10px 0px 10px;
		border: 1px solid #0000004f;
		list-style: none;
	}

	.container-modal ol>li{
		border: 1.5px solid #ffc1079e;
		margin-bottom: 10px;
	}

	.container-modal ul{
		width: 100%;
		margin: 0%;
		padding: 0%;
		list-style: none;
		display: flex;
	}

	.container-modal ul>li{
		width: 33%;
	}

	.container-modal div{
		width: 100%;
		margin: 2% 0% 3% 0%;
		padding: 0% 0% 0% 0%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.container-modal div>button{
		width: 48%;
	    margin: 0%;
	    padding: 1%;
	    border: none;
	    outline: none;
	    font-size: 18px;
	    letter-spacing: 0.5px;
	}

	.box-category{
		width: 100%!important;
		display: flex!important;
		justify-content: flex-start!important;
		margin: 0px 0px 10px 0px!important;
		padding: 0%!important;
		flex-wrap: nowrap!important;
	}


	.box-category h5{
		width: 49%;
		font-family: var(--font-primary);
	    margin: 0px 0px 0px 0px;
	    padding: 0px 0px;
	    font-size: 15px;
	    cursor: pointer;
	    border-radius: 5px;
	    color: #fff;
	    letter-spacing: 1px;
	    background-color: #000;
	}

	.box-category select{
		width: 49%;
		margin: 0px!important;
		padding: 0px!important;
	}


	.btn-login-acept{
		background: #ffc107;
		color: #343a40;
		font-weight: bold;
	}

	.btn-login-cancel{
		background: #ff3f3f;
    	color: #ffffff;
	}

	.btn-login-register{
		background: #343a40;
		color: #fff;
	}

	.container-modal span{
		padding: 2% 0% 0% 0%;
		cursor: pointer;
	}

	.container-modal span:hover{
		color: #ffc107;
	}

	.container-modal iframe{
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.close-modal{
		position: absolute;
		top: 10px;
		right: 15px;
		font-size: 20px;
		z-index: 5;
		cursor: pointer;
		color: crimson;
	}

.promotion-final{
    width: 100%;
    background: #fff;
    display: grid;
    grid-template-columns: 24.5% 74%;
    grid-gap: 20px;
}		
.promotion-final .promotion-left{
	display: grid;
	grid-template-columns: 1fr;
}
.promotion-final .promotion-right{
	display: grid;
}
/*** FOOTER ***/

	.footer{
		background: #000;
		width: 100%;
		margin: 5% 0 0;
		padding: 3% 0 0.5% 0;
	}
	.footer h2>i{

	}
	.footer div>h2{
		width: 100%;
		font-family: var(--font-primary);
		font-size: 20px;
		color: var(--color-gold-p);
		letter-spacing: 0.5px;
	}

	.footer div>p{
		width: 100%;
		font-family: var(--font-primary);
		font-size: 15px;
		color: #fff;
		letter-spacing: 0.5px;
		cursor: pointer;
		transition: 0.3S;
		letter-spacing: 0.5px;
	}

	.footer div>p:hover{
		color: var(--color-gold-p);
		transition: 0.3S;
	}

	.footer div>ul{
		width: 100%;
		color: #fff;
		list-style: none;
		margin: 0%;
		padding: 0%;
	}

	.footer div>ul>li{
		width: 100%;
	    margin: 0%;
	    padding: 15px 0px 0px 45px;
	    font-size: 15px;
	    cursor: pointer;
	    transition: 0.3S;
	    letter-spacing: 0.5px;
	}

	.footer div>ul>li:hover{
		color: var(--color-gold-p);
		transition: 0.3S;
	}

	.footer div>ul>li>i{
		float: left;
		margin: 5px 0px 0px -25px;  
	}

	.copyright{
		margin: 2% 0% 0% 0%;
		width: 100%;
		text-align: center;
		color: #fff3;
		font-size: 13px;
		letter-spacing: 0.5px;
		cursor: pointer;
		transition: 0.3s;
	}

	.copyright:hover span{
		transition: 0.3s;
		color: #f44336;
	}


	.form-plus-01{
		display: block;
	}

/*** SUPORT ***/

 .suport{
 	width: 100%;
 	margin: 0%;
 	padding: 0%;
 	display: flex;
 }

 .suport div{
 	width: 60%;
    padding: 1%;
    margin: 1% auto;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 20px -6px #333333ba;
 }

 .suport div>h2{
 	font-family: var(--font-primary);
    width: 100%;
    margin: 0px;
    padding: 12px 15px;
    font-size: 45px;
    font-weight: bold;
    background: #ffed00;
 }

 .suport div>p{
 	font-family: var(--font-primary);
    width: 100%;
    margin: 0px;
    padding: 20px 0px 10px 0px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #2b2b2be6;
 }

 .suport div>form{
 	width: 100%;
 	padding: 15px;
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
 }

 .suport div>form>ul{
 	width: 49%;
 	list-style: none;
 	margin: 0%;
 	padding: 0%;
 }

 .suport div>form>ul>li{
 	width: 100%;
 }

 .suport div>form>ul>li>label{
 	font-family: var(--font-primary);
    width: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #2b2b2be6;
 }

 .suport div>form>ul>li>input{
 	font-family: var(--font-primary);
 	width: 100%;
 	margin-bottom: 10px;
 	padding: 2px 4px;
 	font-size: 18px;
 	outline: none;
 	border-radius: 5px;
 	border: 2px solid #00000026;
 	color: #2b2b2be6;
 }

 .suport div>form>ul>li>textarea{
 	font-family: var(--font-primary);
 	width: 100%;
 	margin-bottom: 10px;
 	padding: 2px 4px;
 	font-size: 18px;
 	outline: none;
 	border-radius: 5px;
 	border: 2px solid #00000026;
 	color: #2b2b2be6;
 }

 .suport div>form>ul>li>button{
 	font-family: var(--font-primary);
 	width: 40%;
 	margin: 1% 30%;
 	padding: 10px 0px;
    border: none;
    outline: none;
    font-size: 18px;
    letter-spacing: 1px;
    background-color: #111;
    color: #fff;
    border-radius: 5px;
 }

 .suport button{
 	font-family: var(--font-primary);
 	width: 40%;
 	margin: 1% 30%;
 	padding: 10px 0px;
    border: none;
    outline: none;
    font-size: 18px;
    letter-spacing: 1px;
    background-color: #111;
    color: #fff;
    border-radius: 5px;
 }

.container-products{
	position: relative;
}
#tabled{
    margin-top: 0;
    padding: 0;
    background: #fff;
    padding: 1%;	
}

.lista-vacia{
    width: 100%;
    background: #fff;
    padding: 0 20%;
    text-align: center;
    height: 450px;
    display: flex;
    align-items: center;
    align-content: center;
    align-self: center;
    flex-wrap: wrap;
    justify-content: center;
}
.lista-vacia ion-icon{

}
.lista-vacia h2{
    font-size: 2.7em;
    margin: 0;
    font-weight: bold;	
}
.lista-vacia p{
    font-size: 1.1em;
    margin: 2% 0;
}
.lista-vacia button{
    background: #2f72bc;
    color: #fff;
    border: 1px solid #2f72bc;
    padding: 1% 3%;
    font-size: 17px;
    text-decoration: none;
    outline: none;
    align-items: center;
    display: flex;
}

.container-products ul{
	display: grid;	
	grid-template-columns: repeat(5, 1fr);
	list-style: none;
	width: 100%;
	padding: 0;
}
.container-products ul>li{
	background: #eee;
}
.container-products ul>li>img{
	
}
.container-products ol{
	display: grid;	
	grid-template-columns: repeat(5, 1fr);
	list-style: none;
	width: 100%;
	padding: 0;
}
.container-products ol>li{
	background: #eee;
}
.partners{
	position: relative;
	margin: 0;
    background: #fff;
    padding: 0;
    width: 100%;
    box-shadow: 0 0.15rem 1.75rem 0 rgb(204 204 204 / 15%);
}

.partners img{
    padding: 10% 20%;
    cursor: pointer;
}

#picture{
    width: 30px;
    height: 30px;
    left: 0;
    background: #6dd700;
}
#picture::after{
    position: absolute;
    content: attr(data-label);
    left: 35px;
    top: 5px;
    font-size: 15px;
    color: #111;
    font-weight: normal;
}
#picture img{
    width: 100%;
    position: relative;
    border-radius: 100%;
}


	.card-profile {
		width: 90%;
	    margin: 0% auto;
	    padding: 2%;
	    background-color: #fff;
	    /* box-shadow: 0px 0px 14px -5px #0000008c; */
	    -webkit-box-shadow: 8px 8px 18px 0px rgb(42 67 113 / 10%);
	    position: relative;
	    border-radius: 10px 10px 10px 10px;
	    margin: 2% auto 7% auto;
	    top: 0;
	}

	.card-profile ul{
	    padding: 0;
	    margin: 0;
	    display: grid;
	    grid-template-columns: 30% 70%;
	    position: relative;
	}

	.card-profile ul>li {
		list-style: none;
		position: relative;
		margin: auto 0;
	}

	.card-profile ul>li>h2 {
	    font-size: 1.1rem;
	    text-align: justify;
	    margin: 5% 0% 5%;
	    padding: 0% 10%;
	    letter-spacing: 0;
	    line-height: 1.3;
	}
	.card-profile ul>li>h2>b {
	    color: #999;
	    font-size: 0.8rem;
	    margin: 3% 0;
	    letter-spacing: 0;
	}
	.card-profile ul>li>img {
		height: 100px;
	    width: 100px;
	    border: 1px solid #edeff3;
	    position: relative;
	    box-shadow: 0px 0px 14px -8px #0000008c;
	    border-radius: 100%;
	    object-fit: cover;
	}

	.card-buttons{
		box-shadow: 0px 0px 14px -8px #0000008c;
	    position: relative;
	    background: #fff;
	    padding: 15px 15px;
	    margin: 0 5%;
	}
	.card-buttons ul{
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
	}
	.card-buttons ul>li{
		list-style: none;
		width: 100%;
	}
	.card-buttons ul>li>button{
		width: 100%;
	    border-radius: .25rem;
	    border: 1px solid #2f72bc;
	    font-size: 0.8em;
	    background: #fff;
	    text-decoration: none!important;
	    outline: none!important;
	}

	#enable-prim{
		background: #2f72bc;
    	color: #fff;
	}
	#enable-second{
		color: #96be0c;
	}
	.xzoom-container img{
		width: 100%!important;
	}

	.active_s {
	    border-bottom: 4px solid #2f72bc!important;
	}

/***************** RESPONSIVE DESIGN ******************/

@media(max-width: 2560px){

.box-prod-serch ol {
    grid-template-columns: repeat(4, 1fr);
   }
}

@media(max-width: 1440px){
.box-prod-serch ol {
    grid-template-columns: repeat(3, 1fr);
   }
}
@media(max-width: 1300px){
	.slider-copy h2 {
	    font-size: 35px;
	}
}

@media( max-width: 1024px){

	.box-00{
	padding: 1% 5%;
	}

	.box-prod-serch ol {
	    grid-template-columns: repeat(3, 1fr);
	}

	.max-width{
		padding: 0 5px;
	}
	.down-menu-active ul li {
		padding: 14px 10px!important;
		font-size: 15.5px;
	}
	.slider-copy h2{
		font-size: 45px;
	}
}

@media(max-width: 990px){
	.xzoom-container img{
		width: 100%!important;
	}

	.box-prod-serch ol {
	    grid-template-columns: repeat(1, 1fr);
	 }

	.promotions-content {
		padding: 0 10px;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 10px;
		margin: 5% 0;
	}

	.promotions-content .promo-left img {
    	height: 100%;
	}

	.promotions-content .promo-right {
		grid-gap: 10px;
	}

	.promotions-content .promo-right img {
	    height: 100%;
	}

	.down-menu-active {
		display: none;
		background: #fff;
	    width: 90%;
	    position: relative;
	    height: fit-content;
	    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
	    margin: 0 auto;
	}
	.down-menu-active ul li i {
		right: 3em;
		top: 1.5em;
	}

	.not-found img {
    	width: 45%;
   	}

	.dropdown-w-one {
	    position: relative;
	}
	.dropdown-w-one .sub-menu-cat {
		position: relative;
		width: 100%;
		height: 100%;
		box-shadow: none;
		margin-left: 0;
		display: none;
		background: none;
		margin-top: 1em;
	}

	.down-menu-active ul li {
		position: relative;
		font-size: 15px;
		letter-spacing: 0.5px;
	}

	.down-menu-active ul li ion-icon {
	    position: absolute;
	    left: 0.7em;
	    top: 1em;
	}

	.dropdown-w-one:hover .sub-menu-cat {
		display: block;
	}
	#active-products {
    	grid-template-columns: repeat(1, 1fr);
   	}
	#active-products li {
    	padding: 4px 10px 4px!important;
   	}
	#sub-menu {
		padding: 0;
	    grid-template-columns: 1fr;
	}
	.container-section {
    	display: grid;
    	grid-template-columns: 1fr;
   	}

	.max-width{
		padding: 0 0;
	}
	.container-products-detail ul {
		grid-template-columns: 1fr;
	}
	.product-detail {
		grid-template-columns: 1fr;
	}
	.serch-mobil ul>li>ol:hover li {
		color: #111!important;
	}
	.down-menu-active li:hover {
	    transition: 0.3s;
	    background: #fffe;
	}
	.product-detail .products-left ul>li {
		width: 50%;
	}
	.coments p::before {
		left: 0;
	}
	.product-detail .products-left ul>li{
    	padding: 3% 2%;
	}
	.product-detail .products-left ul>li:hover {
    	background: #fff;
	}
	.row{
		margin-right: 0;
		margin-left: 0;
	}
	.box-detail-product-desc div>h2 {
	    margin: 3% 0;
	    padding: 0 5% 0 3%;
	    font-size: 18px;
	    color: #222;
	}
	#sku{
		font-size: 14px;
		margin: 0;
	}
	.slider-01 {
	    margin: 1.5em 0 1.5em;
	}
	.slider-01 .item {
	    height: 335px;
	}
	.slider-01 .item div>img {
	    height: 225px;
	    padding: 0;
	}
	.slider-01 .item h4 {
	    width: 100%;
	}
	.slider-01 nav {
	    width: 100%!important;
	    margin: 3em 0;
	    border-radius: 0;
	    position: sticky;
	    top: 0%;
	    z-index: 2;
	    background: #fff;
	}
	.slider-01 nav>ul>li>a {
    	width: 100%;
	}

	.down-menu-active .offers {
	    left: 12em;
	    width: 30%;
	    padding: 0;
	    font-size: 0.85em;
	}
	.footer{
		background: #111;
		padding: 5% 0 0% 0;
	}
	.footer div>h2 {
	    padding: 5% 0%;
	    margin: 0 7%;
	    border-bottom: 1px solid #222;
	    font-size: 18px;
	    color: #eeeeeea6;
	    cursor: pointer;
	}
	.footer h2>i {
	    position: absolute;
	    right: 2em;
	}
	.footer h2>ion-icon {
		font-size: 0.9em;
	}
	.footer div>ul {
	    width: 100%;
	    color: #eee;
	    list-style: none;
	    margin: 0%;
	    padding: 2% 2% 5%;
	}
	.rotate-i{
		transition: 0.3s;
		transform: rotate(-180deg);
	}


	.slider-copy h2 {
		width: 100%;
		font-size: 35px;
		padding: 5% 5% 0% 3%;
	}

	.container-shoppingcart h2 {
    	margin: 0% 0% 4% 0%;
    	padding: 3.5% 2% 3.5% 2%;
    	font-size: 18px;
	}
	.data-checkout h3 {
	    margin: 0 0 2% 0;
	    padding: 3% 0 3% 0;
	    font-size: 18px;
	}
}
@media (max-width: 768px){
	.data-checkout div {
    	width: 100%;
	}
	.table-shoppingcart td>p {
		font-size: 13px;
	}
	.slider-copy h2{
		align-items: flex-start;
		font-size: 30px;
	}
	.resume_section p {
	    padding: 3px 0px 0px 0px;
	}	
	.box-2-2 img {
	    padding: 0;
	}
	.table-shoppingcart td>img {
	    width: 100%;
	    padding: 0;
	    object-fit: contain;
	}
	.title-promo-end {
	    bottom: auto;
	    padding: 0 10%;
	    top: 5%;
	    text-align: left;
	}
	.title-promo-end h3 {
	    font-size: 30px;
	    justify-content: unset;
	}
	.title-promo {
    	height: 20%;
    	padding: 0 15px;
	}
	.title-promo h3 {
		font-size: 17px;
    	align-items: center;
	}

	.box-00{
		padding: 1% 5%;
	}

	.box-00 form>input {
		width: 75%;
	}

	.box-00 form>button {
		width: 24%;
	}

	.box-00 ul {
		justify-content: space-between;
	}
	.box-prod-serch ol {
    	grid-template-columns: repeat(3, 1fr);
   	}

	.box-prod-serch {
	    width: 100%;
	    margin-left: 0;
	}

	.container-product-1 ul {
		grid-gap: 15px;
	}
	.container-product-1 ul>li {
    	width: 100%;
	}
	.container-products-detail ul>li {
		text-align: center;
	}
	.box-detail-product-desc {
		text-align: left!important;
	}
	.serch-mobil{
		display: block;
	}
	.serch-pc{
		display: none;
	}
	.category-pc{
		display: none;
	}
	.down-menu-active ul li {
    	padding: 10px 50px!important;
	}
	.category-item ul {
    	padding: 0;
    	display: grid;
    	grid-template-columns: repeat(4, 1fr);
	}
	.slider-01 nav>ul>li>a {
    	width: 100%;
	}
	.lista-vacia{
		padding: 0 5%;
	}
	.products-table{
		display: none;
	}
	#sku b::before {
	    top: 0;
	    width: 150px;
	    left: 120px;
	}
	.table-shoppingcart-mobile div>ul>li {
	    font-size: 15px;
	    position: relative;
	}
	.table-shoppingcart-mobile div>ul>li>p {
	    margin: 0;
	    background: #08f;
	    width: 55%;
	    text-align: center;
	    font-size: 12px;
	    color: #fff;
	    font-weight: normal;
	    border-radius: 20px;
	}
	.table-shoppingcart-mobile div>ul>li>p>b::after{
	    position: absolute;
	    right: 0;
	    content: attr(data-label);
	    color: #222;
	    font-size: 10px;
	    font-weight: normal;

	}
	.data-checkout p {
	    font-size: 13px;
	}
	.data-checkout p>b {
	    font-size: 10px;
	}
	#result ul>li>ol>li {
		justify-content: left;
		width: 100%;
    	height: 100%;
	}
}

@media(max-width: 425px){

	#result ul {
	    grid-template-columns: 1fr;
	}
	#result ul>li{
		width: 100%;
		display: grid;
	}
	#result ul>li>ol>li {
    	font-size: 0.8em;
    	text-align: left;
    	padding: 0 5%;
    	width: 100%;
    	height: 100%;
    	display: grid;
	}

	.find{
		left: 0;
		right: 0;
		width: 100%;
	}
	.search-bar{
		margin-bottom: 0;
		margin: 10px 0;
	}

	.find .content_r{
		height: 100vh!important;
	}

	.resp-desktop{
		display: none!important;
	}

	.resp-mobile{
		display: block!important;
	}

	.promotion-00{
		margin-top: -70px!important;
	}

	.box-prod-serch ol {
		grid-gap: 10px;
    	grid-template-columns: repeat(2, 1fr);
   	}
 	
 	.box-prod-serch ol>li>div>img {
 		height: 190px;
 	}
 	.title-all-p{
	    padding: 3.5% 4%;
	    font-size: 1.1em;
 	}

	.pagination {
		grid-gap: 20px;
	}
	.pagination li{
		font-size: 17px;
	    color: #444;
	    background: #fff;
	    border-radius: .25rem;
	    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 15%);
	}
	.pagination li>i{
		position: relative;
		top: 1px;
	}

	/* BOX 00 */

	.serch-pc{
		display: none;
	}

	.category-pc{
		display: none;
	}

	.category-mobil{
		display: flex;
	}

			.serch-mobil ul>li>img {
			    width: 120px;
			}

			.box-00{
				padding: 1% 5%;
			}

			.box-00 form>input {
	   			width: 75%;
	   		}

	   		.box-00 form>button {
			    width: 24%;
			}

			.box-00 ul {
			    justify-content: space-between;
			}

			.box-1 div>ul>li{
			    width: 100%;
			    box-shadow: 0 0.15rem 1.75rem 0 rgb(31 45 65 / 5%);		
			}

			.banners-box-2 {
			    margin: 2% 0% 8% 0%;
			}

			.container-product-1 {
			    margin-bottom: 5%;
			}

			.container-product-1 ul>li {
			    width: 100%;
			}

			.container-product-1 ul>li>div>h3 {
			    font-size: 16px;
			}

			.container-product-1 ul>li>div>h5 {
			    font-size: 15px;
			}

			.container-product-1 ul>li>div>p {
			    font-size: 15px;
			}

			.container-product-1 ul>li>div>ul>li>h6 {
			    margin: 0px 10px 0px 0px;
			}

			.banners-box-3 img {
			    width: 100%;
			}

			.content-01 {
			    margin: 0;
			}

			.box-prod-serch {
			    width: 100%;
			}

			.box-prod-serch ol>li {
    			width: 100%;
			}

			.box-detail-product-img {
			    width: 100%;
			    margin-bottom: 1%;
			}

			.box-detail-product-desc {
   	 			width: 100%;
   	 		}

   	 		.box-detail-product-desc div>form {
    			justify-content: space-evenly;
    		}

    		.data-contact div{
				width: 100%;
				margin-bottom: 5%;
			}

			.data-checkout div{
				width: 100%;
				margin-bottom: 5%;
			}

			.btn_pagination {
			    width: 49%!important;
			}

			.table-total {
			    width: 100%!important;
			}

		/* slider */

			.slider-00 {
			    margin-top: 0;
			}

			.slider-pc{
				display: none;
			}

			.slider-mobile{
				display: block;
				width: 100%;
			}

			.slider-01 ol>li {
			    width: 100%;
			}

			.slider-logo ul>li {
			    width: 49%;
			}

		/***/

		.resume_section ul>li {
		    width: 100%;
		    padding: 15px 0px 15px 0px;
		}

		.resume_section ol>li{
			width: 49%;
		}

		.box-prod-serch {
		    width: 100%;
		    margin-left: 0%;
		}

	.slider-01 nav>ul>li>a {
    	width: 100%;
	}

	}

@media(max-width: 360px){
	.slider-01 nav>ul>li>a {
	    width: 100%;
	}
	.box-prod-serch ol {
	    grid-gap: 10px;

	}
	.box-prod-serch ol>li>h4 {
    	font-size: 14px;
	}
	.box-prod-serch ol>li>div>img {
    	height: 170px;
	}
	.slider-01 nav>ul>li>a {
	    width: 100%;
	}

}