/*---------------------
     HOME SECTION
-----------------------*/

*{
    margin:0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body{
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
}



/*--------   INICIO DE LOS ESTILOS DEL MENÚ------------*/

.containerMenu{max-width:1150px;margin:auto;overflow: hidden;}
.row{display: flex;flex-wrap: wrap;}
.v-center{align-items: center;}
ul{list-style: none;margin:0;padding:0;}
a{text-decoration: none;}


/* HEADER */
.header{
	display: block;
	width: 100%;
	position: relative;
	z-index: 99;    padding: 8px 10px;
	background-color: var(--white); /*--CONTROLAR COLOR--*/
/*	position: fixed; */
	border-bottom:solid 1px #f9f9f9;
}

.pre-menu{height:0px;overflow:hidden;}


.header .item-left{
	flex:0 0 17%;
	display:flex;
	justify-content:left;
	align-items:center;
}

.header .logo{
	width:100px;margin-top:5px;
}


.header .item-center{
	flex:0 0 66%;
}
.header .item-right{
	flex:0 0 17%;
	display: flex;
	margin-top:-5px;
	justify-content: flex-end;
}
.header .item-right a{ 
     text-decoration: none;
     font-size: 22px;
	 color:var(--black); /*--CONTROLAR COLOR--*/
     display: inline-block;
     margin-left:25px;
     transition: color 0.3s ease;
}

.header .item-right a span{
	margin-left:8px;
	background-color:var(--principal); /*--CONTROLAR COLOR--*/
	color:var(--white);	 /*--CONTROLAR COLOR--*/
	font-size:12px;
	padding:5px 8px;height:5px;
	border-radius:50%;
}


.header .menu{
	background-color:var(--white); /*--CONTROLAR COLOR--*/
}


.header .menu > ul > li{
	display: inline-block;
	line-height: 50px;
	margin-left: 50px;
}



.header .menu > ul > li > a{
	font-size: 18px;
	font-weight: bold;
	color:var(--black); /*--CONTROLAR COLOR--*/
	letter-spacing:1px;
	position: relative;
	text-transform:none;
	transition: color 0.3s ease;
}




.header .menu > ul > li > a .icon{
	font-size:8px;
}


.header .menu > ul > li .sub-menu{
	position: absolute;
	z-index: 500;
	background-color:var(--white); /*--CONTROLAR COLOR--*/
	padding: 20px 30px;
	transition: all 0.5s ease;
	margin-top:25px;
	opacity:0;
	visibility: hidden;
}


.widthMaxSpan{
	background-color:transparent; 
	width:100%;
	height:auto;
	text-align:center;
	margin-bottom:30px;
}

.widthMaxSpan span{
	font-weight:bold;
	font-size:30px;}



/*----- ESTILOS RESPONSIVE - VISTA ESCRITORIO APARTIR DEL 992PX EN ADELANTE -----*/

@media(min-width: 992px){

	.header{
		background-color: var(--white);
	}

	.header .menu{
		background-color:var(--white);
	}

	.header .menu > ul > li > a{
		color:var(--black);
		font-size:13px;
		font-weight:700;
		text-transform:uppercase;
	}

	


	.inverseColor{
		margin-top:-38.5px;
		background-color: var(--white); /*--CONTROLAR COLOR--*/
		position:fixed;
		border-bottom:1px solid var(--silverLight); /*--CONTROLAR COLOR--*/
		color:var(--black); /*--CONTROLAR COLOR--*/
	}
	

	.inverseColor .efectBottom:before{
		background-color:var(--black); /*--CONTROLAR COLOR--*/
	}
	.inverseColor .efectBottomactive:before{
		background-color:var(--black); /*--CONTROLAR COLOR--*/
	}

	.inverseColor .menu > ul > li > a{color:var(--black);} /*--CONTROLAR COLOR--*/
	.inverseColor .item-right a{color:var(--black);} /*--CONTROLAR COLOR--*/
	.inverseColor .item-right a span{background-color:var(--black);} /*--CONTROLAR COLOR--*/
	
	
	
	
/* PRE MENU */
	
	.pre-menu{
		width:100%;
		height:auto;
		background-color:var(--black); /*--CONTROLAR COLOR--*/
		color:var(--white); /*--CONTROLAR COLOR--*/
	}
	
	.containerPreMenu{
		width:100%;
		max-width:1200px;
		height:auto;
		margin:auto;
		padding:8px 20px;
		display:flex;
		justify-content:right;
		font-size:12px;
	}
	
	.contactPreMenu{
	 display:flex;
	 justify-content: center;
	 align-items:center;
	}
	
	.callContactPreMenu{
		display:flex;
		align-items:center;
		padding-right:25px;
		color:var(--white); /*--CONTROLAR COLOR--*/
	}
	
	.callContactPreMenu i{
		font-size:18px;
		padding-right:10px;
	}
	
	.contactPreMenu p{
		font-size:11px;
		color:var(--white); /*--CONTROLAR COLOR--*/
		letter-spacing:1px;
	}
	
	.contactPreMenu p:hover{
		color:var(--white); /*--CONTROLAR COLOR--*/
	}
	
	
	.rdsPreMenu{
		display:flex;
	}
	
	.rdsPreMenu a{
		color: var(--white); /*--CONTROLAR COLOR--*/
		font-size:15px;
		padding-left:18px;
		transition:all ease .3s
	}

	.rdsPreMenu a:hover{
		transform:scale(1.1); /*--CONTROLAR COLOR--*/
	}
	
/* PRE MENU OK */
	

.header .menu > ul > li.menu-item-has-children:hover .sub-menu{
	margin-top: 0;
	visibility: visible;
	opacity: 1;
}

.ulCentered{
	display:flex;
	justify-content:center;
	width: 100%;
}

.ulCentered li a i{
	background-color:var(--black); /*--CONTROLAR COLOR--*/
}


}
.header .menu > ul > li .sub-menu > ul > li{
	line-height: 1;
}
.header .menu > ul > li .sub-menu > ul > li > a{
	display: inline-block;
	padding: 8px 0px;
	font-size: 15px;
	color: var(--black);  /*--CONTROLAR COLOR--*/
	transition: color 0.3s ease;
	text-decoration: none;
	text-transform: capitalize;
}

.header .menu > ul > li .sub-menu > ul > li:hover > a{
	color:var(--principal);
}



.list-item ul li{
	line-height:0px;
	padding:15px 0px;
}

.list-item ul li a{
	font-size:14px;
	font-weight:400;
	color:var(--black); /*--CONTROLAR COLOR--*/
	transition:all ease .3s;
}





/*SUBMENU*/

.menu-item-has-children a span{
    display:flex;
	position:relative;
	left:95%;
    justify-content:center;
	align-items:center;
    width:5px;
	height:1px;
	background-color:transparent;
}

.menu-item-has-children a span::after,.menu-item-has-children a span::before{
    content:"";
	margin-left:5px;
    position:absolute;
	width:100%;
	height:1px;
    display:flex;
	transition:all ease .3s;
    background-color:var(--black); /*--CONTROLAR COLOR--*/
}

.inverseColor .menu-item-has-children a span::after, .inverseColor .menu-item-has-children a span::before{
	background-color:var(--black); /*--CONTROLAR COLOR--*/
}


.menu-item-has-children a span::after{top:-25px;transform:rotate(40deg);transition:all ease .3s;}
.menu-item-has-children a span::before{top:-25px;left:2px;transform:rotate(-40deg);transition:all ease .3s;}


/*HOVER*/
.menu-item-has-children a span::after{margin-left:14px;}
.menu-item-has-children a span::before{margin-left:8.5px;}

.menu-item-has-children a:hover span::after{
	background-color:var(--black); /*--CONTROLAR COLOR--*/
	top:-25px;
	transform:rotate(-40deg)
}
.menu-item-has-children a:hover span::before{
	background-color:var(--black); /*--CONTROLAR COLOR--*/
	top:-25px;
	transform:rotate(40deg)
}
.inverseColor .menu-item-has-children a:hover span::after, .inverseColor .menu-item-has-children a span::before{
	background-color:var(--black); /*--CONTROLAR COLOR--*/
}


.menu-item-has-children:hover a span::after{
	background-color:var(--black); /*--CONTROLAR COLOR--*/
	top:-25px;
	transform:rotate(-40deg)
}

.menu-item-has-children:hover a span::before{
	background-color:var(--black); /*--CONTROLAR COLOR--*/
	top:-25px;
	transform:rotate(40deg)
}

.inverseColor .menu-item-has-children:hover a span::after, .inverseColor .menu-item-has-children:hover a span::before{
	background-color:var(--black); /*--CONTROLAR COLOR--*/
}

/*Ocultado el icono angle por defecto para mostrar el span before*/
.menu-item-has-children i{
	display:none;
}

/*Ocultado los iconos de redes sociales*/
.rdsInMenuMobile{
	display:none;

}

.mobile-menu-head,
.mobile-menu-trigger{
	display: none;
}



.header-item a i:hover{
	color:var(--principal); /*--CONTROLAR COLOR--*/
}


.efectBottom:before{
	content:'';
	position:absolute;
	width:0px;transition:all ease .8s;
	margin-top:35px;margin-left:0%;
	overflow:hidden;
	height:2px;
	background-color:var(--black); /*--CONTROLAR COLOR--*/
}
nav ul li:hover .efectBottom:before{
	width:100%;}

.efectBottomactive:before{
	content:'';
	position:absolute;
	width:100%;margin-top:25px;margin-left:0%;
	height:2px;
	background-color:var(--black); /*--CONTROLAR COLOR--*/
}





/*---- ESTILOS RESPONSIVE ----*/

@media(max-width:1145px){

	.ulCentered{
		display:block;
	}

	.ulCentered li a i{background-color:transparent;}
	.header .menu > ul > li > a{font-weight:bold;font-size: 18px;    text-transform: none;}

	.efectBottom:before{
		background-color:var(--white); /*--CONTROLAR COLOR--*/
	}
	
	
	.efectBottomactive:before{
		background-color:var(--white); /*--CONTROLAR COLOR--*/
	}

	.header .item-center{
		order:3;
		flex:0 0 100%;
	}
	.header .item-left,
	.header .item-right{
		flex:0 0 auto;
	}
	.v-center{
		justify-content: space-between;
	}
	.header .mobile-menu-trigger{
		display: flex;
		height: 30px;
		width: 30px;
		margin-right:15px;
		cursor: pointer;
		align-items: center;
		justify-content: center;
	}
	.header .mobile-menu-trigger span{
		display: block;
		height: 2px;
		background-color: #333333; /*--CONTROLAR COLOR--*/
		width: 24px;
		position: relative;
	}
	.header .mobile-menu-trigger span:before,
	.header .mobile-menu-trigger span:after{
		content: '';
		position: absolute;
		left:0;
		width: 100%;
		height: 100%;
		background-color: #333333; /*--CONTROLAR COLOR--*/
	}
	.header .mobile-menu-trigger span:before{
		top:-8px;
	}
	.header .mobile-menu-trigger span:after{
		top:8px;
	}
	.header .item-right{
		align-items: center;
	}

	.header .menu{
		position: fixed;
		width: 320px;
		left:0;
		top:0;
		height: 100%;
		overflow: hidden;
		transform: translate(-100%);
		transition: all 0.5s ease;
		z-index: 1099;
	}
	.header .menu.active{
	   transform: translate(0%);	
	}


	.header .menu > ul > li{
		line-height: 1;
		margin:0;
		display: block;
	}
	.header .menu > ul > li > a{
		line-height: 50px;
		height: 50px;
		padding:0 50px 0 15px;
		display: block;
	}
	.header .menu > ul > li > a i{
		position: absolute;
		height: 50px;
		width: 50px;
		top:0;
		right: 0;
		text-align: center;
		line-height: 50px;
		transform: rotate(-180deg);
	}

	.header .item-right a{
		color:var(--black); /*--CONTROLAR COLOR--*/
	}

	.header .menu > ul > li .sub-menu.mega-menu > .containerItemsList .list-item > ul > li > a:hover,
	.header .menu > ul > li .sub-menu > ul > li > a:hover,
	.header .item-right a:hover,
	.header .menu > ul > li:hover > a{
		color:var(--principal); /*--CONTROLAR COLOR--*/
	}

	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .containerItemsList .list-item{
		flex:0 0 100%;
	  }


	.header .menu .mobile-menu-head{
		display: flex;
		height: 50px;
		margin-bottom:20px;
		/*border-bottom: 1px solid rgba(0,0,0,0.1);*/
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 501;
		position: sticky;
		background-color: var(--white); /*--CONTROLAR COLOR--*/
		top:0;
	}
	.header .menu .mobile-menu-head .go-back{
		height: 50px;
		width: 50px;
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:var(--black); /*--CONTROLAR COLOR--*/
		font-size: 16px;
		display: none;
	}
	.header .menu .mobile-menu-head.active .go-back{
		display: block;
	}
	.header .menu .mobile-menu-head .current-menu-title{
		font-size: 15px;
		font-weight: bold;
		color:var(--black); /*--CONTROLAR COLOR--*/
	}
	.header .menu .mobile-menu-head .mobile-menu-close{
	    height:40px;
		width: 40px;
		margin:10px;
		cursor: pointer;
		line-height: 38.5px;
		text-align: center;
		color:var(--black); /*--CONTROLAR COLOR--*/
		font-size: 25px;
		transition: all ease .3s;
	}
	
	.header .menu .mobile-menu-head .mobile-menu-close:hover{
		color:var(--white);
		border-radius:50%;
		background-color:var(--black); /*--CONTROLAR COLOR--*/
	}

	.header .menu .menu-main{
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.header .menu > ul > li .sub-menu.mega-menu,
	.header .menu > ul > li .sub-menu{
		visibility: visible;
		opacity: 1;
		position: absolute;
		box-shadow: none;
		margin:0;
		padding:15px;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		padding-top: 65px;
		max-width: none;
		min-width: auto;
		display: none;
		transform: translateX(0%);
		overflow-y: auto;
	}
.header .menu > ul > li .sub-menu.active{
	display: block;
}

.containerTwoProductos{
	display:block;
	max-width:100%;
	min-width:100%
}

.flexPricesInMenu{
	margin-top:0px;
}



/*SUBMENU*/
.menu-item-has-children a span{
	display:none;
}

.menu-item-has-children i{
	display:block;
}


/*Iconos de redes sociales para cuando el menu está en responsive*/
.rdsInMenuMobile{
	display:flex;
	justify-content:left;
	align-items:end;
	padding:15px;
}


.rdsInMenuMobile a{
	color:var(--black); /*--CONTROLAR COLOR--*/
	font-size:18px;
	margin-right:20px;
}





@keyframes slideLeft{
	0%{
		opacity:0;
		transform: translateX(100%);
	}
	100%{
	    opacity:1;
		transform: translateX(0%);	
	}
}
@keyframes slideRight{
	0%{
		opacity:1;
		transform: translateX(0%);
	}
	100%{
	    opacity:0;
		transform: translateX(100%);	
	}
}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img{
		margin-top:0;
	}

	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
		flex: 0 0 100%;
        padding: 0px;
	}
	.header .menu > ul > li .sub-menu > ul > li > a,
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
		display: block;
	}
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul {
		margin-bottom: 15px;
	}
	.menu-overlay{
		position: fixed;
		background-color: rgba(0,0,0,0.5);  /*--CONTROLAR COLOR--*/
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		z-index: 1098;
		visibility: hidden;
		opacity:0;
		transition: all 0.5s ease;
	}
	.menu-overlay.active{
	  visibility: visible;
	  opacity:1;	
	}
}





/*------- ESTILOS PARA EL BUSCADOR -------*/

.buscadorModal{
    width:100%;height:auto;
	z-index:1000;
    transition:all ease .5s;
    position:absolute;
	top:0;
    position:fixed;
	display:none;
    background-color:rgba(54, 54, 54, 0.335);  /*--CONTROLAR COLOR--*/
}

.overlayCloseBuscador{
	margin-top:70px;
	background-color: rgba(0,0,0,.6);  /*--CONTROLAR COLOR--*/
	width:100%;
	height:100vh;
}

.abrirBuscador{
    animation-name: slideSearch; 
	animation-duration:0.25s;
	display:flex;margin-top:0px;
}


/* EFECTO CSS QUE FUNCIONA CON JS AL PULSAR EL ICONODE BUSCAR */
@keyframes slideSearch{
	from{
		margin-top:-200px;
	}
	to{
		margin-top:0px;
	}
}


.containerBuscador{
    width:100%;
    background-color:var(--white); /*--CONTROLAR COLOR--*/
    height:auto;max-height:210px;
}

.iconCloseBuscador{
    width:50px;
	height:50px;
    border-radius:50%;
	position:relative;
    display:flex;
	justify-content:center;
	background-color:var(--white);  /*--CONTROLAR COLOR--*/
    align-items:center;
	margin-left:94%;
    color:var(--white);  /*--CONTROLAR COLOR--*/
	transition:all ease .2s;cursor:pointer;
}

.iconCloseBuscador:hover{
    transform:rotate(360deg);
}
.iconCloseBuscador::after,.iconCloseBuscador::before{
    content:'';
    position:absolute;
    height:2px;
	width:50%;
    background-color:var(--black); /*--CONTROLAR COLOR--*/
}

.iconCloseBuscador::after{
	transform:rotate(45deg);
	transition:all ease .3s;
}

.iconCloseBuscador::before{
	transform:rotate(-45deg);
	transition:all ease .3s;
}

.iconCloseBuscador:hover.iconCloseBuscador::after{transform:rotate(-45deg);}
.iconCloseBuscador:hover.iconCloseBuscador::before{transform:rotate(45deg);}

.containerBuscador form{
    margin:auto;
	max-width:1200px;
	width:90%;
    background-color:var(--white); /*--CONTROLAR COLOR--*/
}

.containerBuscador form p{
    color:var(--white);  /*--CONTROLAR COLOR--*/
    font-size:20px;
	margin-bottom:5px;
}
.containerBuscador .FlexBuscadorModal{
    display:flex;
	margin-top:20px;
	margin-bottom:40px;
    justify-content: center;
    background-color: var(--white);  /*--CONTROLAR COLOR--*/
    height:auto;
}
.containerBuscador .FlexBuscadorModal input{
    padding:15px;
	outline:none;
	border:none;
	color:var(--black); /*--CONTROLAR COLOR--*/
    width:100%;
	max-width:1100px;
	font-size:18px;
    border-bottom:2px solid  var(--silverDark); /*--CONTROLAR COLOR--*/
	transition:all ease .3s;
}


.clearValInput{
    width:55px;
	cursor:pointer;
	border-bottom:2px solid var(--silverDark);  /*--CONTROLAR COLOR DE BORDE--*/
	display:flex;
	background-color:transparent;
	justify-content:center;
	align-items:center;
}

.clearValInput .icon{
	font-size:15px;
	opacity:0;
	transition:all ease .3s;
}




.containerBuscador .FlexBuscadorModal button{
    padding:5px;outline:none;
	border:none;
	cursor:pointer;
    width:60px;
	color:var(--black);
	background-color:transparent;
	border-bottom:2px solid var(--silverDark); /*--CONTROLAR COLOR--*/
	transition:all ease .3s;
}
.containerBuscador .FlexBuscadorModal input::placeholder{
	font-size:14px;
	color:var(--silver); /*--CONTROLAR COLOR--*/
}

.containerBuscador .FlexBuscadorModal button:hover{
	position:relative;
	color:var(--principal); /*--CONTROLAR COLOR--*/
}

.containerBuscador .FlexBuscadorModal:hover button{
	border-bottom:2px solid  var(--silver); /*--CONTROLAR COLOR--*/
}

.containerBuscador .FlexBuscadorModal button i{
	font-size:20px;
}

.containerBuscador .FlexBuscadorModal:hover input{
	border-bottom:2px solid  var(--silver); /*--CONTROLAR COLOR--*/
}

.containerBuscador .FlexBuscadorModal:hover .clearValInput{
	border-bottom:2px solid  var(--silver); /*--CONTROLAR COLOR--*/
}

.containerBuscador .FlexBuscadorModal:hover .clearValInput .icon{opacity:1;}

.ocultResponss{font-size:14px;}

/*---- ESTILOS RESPONSIVE ----*/
@media(max-width:1000px){.flexResultadosBusqueda .infoResultadoBusqueda{width:500px;}}
@media(max-width:768px){.iconCloseBuscador{margin-left:90%;}}
@media(max-width:480px) {.header .menu{width:300px;}.iconCloseBuscador{margin-left:85%;}}
@media(max-width:350px) {.header .menu{width:280px;}}