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

.d-flex{
    display: flex !important;
}
.col-3 {
    flex: 0 0 auto;
    width: 25%;
}
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
.mr-1{
    margin-right: 1rem!important;
}
.ml-1{
    margin-left: 1rem!important;
}
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');


.dropdown-menu{
	box-shadow: 0px 0px 6px 6px rgba(214, 224, 230, 0.6);
}

.dropdown-menu li{
	list-style-type: none;
}
.submenu a{
	color: #799997!important;
}
.submenu a:hover{
	color: #f39323!important;
}
.menu-productos:hover{
	color: #f39323!important;
}

.header-main.stickOnScroll-on{
	top: 43px!important;
}

.sidenav {
	height: 100vh;
	background-color: #ffff; 
	overflow-x: hidden;
	padding-top: 109px;
	margin-left: 0;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	transition: 0.5s;
	width: 0;
}

.ruta{
	text-transform: capitalize;
	cursor: pointer;
}

.header{
	display: flex;

}


.sidenav li, .sidenav a, .dropdown-btn{
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 20px;
	color: #111;
	display: block;
	cursor: pointer;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	outline: none;
	/* padding: 15px 10px; */
    border-top: 1px solid #ececec;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.dropdown-btn{
	width: 100%;
	display: flex!important;
	justify-content: space-between;
	align-items: center;
}
.dropdown-btn i{
	font-weight: 400;
	margin-right: 6px; 
	font-style: normal;
}
.dropdown-btn i::after {
    content: "+";
}
.active i::after{
	content: '-';
}
.dropdown-btn:hover{
	color: #f39323;
}

.submenu-btn{
	font-size: 16.5px;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
	display: none;
	padding-left: 8px;
}

.collapse-menu{
	display: block;
}



/* Optional: Style the caret down icon */
.sidenav a:hover {
	color: #f39323;
}


.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

#main {
	transition: margin-left .5s;
	padding: 4px;
}
.open-nav{
	width : 25%;
}
#sidenav-filtros .closebtn{
	display: none;
}
#filtros-head{
	display: none;
}
@media screen and (max-height: 450px) {
	.sidenav {
		padding-top: 15px;
	}
	
	.sidenav a {font-size: 18px;}
	
}
@media screen and (max-width: 750px) {
	
	body {
		overflow-x: hidden;
	}
	.columns{
		padding: 0;
	}
	.header-top-left{
		width: 8rem;
	}
	.header-top-right {
		width: 37rem;
		float: none;
	}
	.page-header {
		margin: 0!important;
	}
	.sidenav {
		padding-top: 116px;
	}
	.open-nav{
		width: 102vw;
	}
	.title{
		display: none;
		font-family: 'Lexend';
	}
	.top-menu li a {
		padding: 8px 0.4px;
	}

	#sidenav-filtros .closebtn{
		display: flex;
		width: 300px;
		justify-content: end;
		font-size: 25px;
	}
	
	#filtros-head{
		display: flex;
	}
	#sidenav-filtros{
		display:none;
	}
	.content-with-sidebar .sidebar:before {
		content: none;
	}
	.nav-logo img{
		height: 9rem!important;
	}
	.header-banner h4{
		width: 70%;
		font-size: 12px;
	}
	.header-banner i{
		cursor: pointer;
		font-size: 12px;
	}

	#header-banners {
		height: 45x !important;
	}

	.header-banner.mobile{
		display: flex;
	}
	
	.header-banner.dektop:not(.mobile){
		display: none;
	}

	#main{
		padding-left: 2rem;
	}
	.fancy-title.con-margin{
		margin-top: 0;
	}
	.cruz-menu{
		width: -webkit-fill-available;
		text-align: end;
	}

}
.fancy-title.con-margin{
	margin-top: 40px;
}
.hamb-btn{
	opacity: 0;
	transition: 1s;
}
.dropdown-menu{
	background-color: #ffff!important;
	box-shadow: none!important;
}

.header-content{
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	margin: 0 50px 0 0px;
}
.logo{
	/* position: absolute; */
	/* right: 15px; */
	/* margin-top: 5px; */
	/* margin-bottom: 5px; */
}

.btn-shine{
    /* position: absolute;
    top: 50%;
    left: 8rem; */
    transform: translate(-50%,-50%)!important;
    background: linear-gradient(to right, #111 0, #f39323 10%, #111 20%);
    background-position: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s infinite linear;
    animation-fill-mode: forwards;
    -webkit-text-size-adjust: none;
    text-decoration: none;
    white-space: nowrap;
}

.link-shine{
	position:relative; 
	/* padding: 23px 0 23px 10px!important; */
}

.title{
	color: #f39323;
	text-transform: uppercase;
}


@keyframes shine{
	0% {
		background-position: 0;
	}
	
	60% {
		background-position: 150px;
	}
	100% {
		background-position: 300px;
	}
}
.nav-logo{
 	position: absolute;
	top: 0;
	left: 0;
	padding-top: 14px!important;

}
.nav-logo img{
	height: 80px;
}

.wsp-logo{
    position: fixed;
	bottom: 12%;
    right: 0%;
}

.wsp-logo img{
    height: 60px!important;
}


.content-with-sidebar{
    margin-left: 20px;
    margin-right: 20px;
}

.page-header{
    margin: 0 20px 0 20px;
}

.title-sidebar{
	color: black;
}
.title-sidebar:hover{
	color: #f39323;
}


.rounded-promo{
	color: white;
    background-color: #f39323;
	z-index: 999;
    border: 0.5px solid #f39323;
    position: absolute;
    padding: 22px 0px 0 5px;
    margin-top: 5px;
    margin-left: 5px;
    border-radius: 50%;
    height: 7rem;
    width: 7rem;
    font-size: 14px;
	box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
	font-weight: 600;
}

.iconbox.animation.zoomIn{
	display: flex;
	align-items:center;
}

.header-banner {
    width: -webkit-fill-available;
	/* background-color: #dfd018; */
	background-color: #c80f69;
	color: white;
	text-align: center;
	height: 40px ;
	padding-top: .5em;
	padding-bottom: .5em;
	font-family: 'Lexend';
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.header-banner.mobile:not(.desktop){
	display: none;
}



.header-banner h4{
	padding-top: 1rem;
	color: white;
	width: 80%;
}

.header-banner i{
	cursor: pointer
}


#header-banners {
    height: 40px !important;
	position: relative!important;
}

.my-swal{
	z-index: 99999999
}

.btn-orange{
	background: #f39323;
	color: white;
}
.btn-orange:hover{
	color: black;
}
.swal2-popup {
	font-family: 'Lexend';
}



.loader {
  display: none;
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
}
.loader .spinner {
  border: 4px solid rgba(0,0,0,.1);
  border-left-color: #f39323;
  animation: spin 1s linear infinite;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.category-header,.group-header {
    display: table;
    width: 100%;
    background-color: #f8f9fa; /* Color de fondo similar a una celda de tabla */
    border: 1px solid #dee2e6; /* Borde de tabla */
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    text-align: left;
}
.category-header:hover,.group-header:hover {
    background-color: #e9ecef; /* Cambio de color al pasar el mouse */
}
.category-container,.group-container {
    margin-bottom: 5px; /* Espacio entre categorías */
}
.collapse-content {
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 5px;
}