/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11-jul-2019, 10:34:49
    Author     : Tatiana

web:Jobe
*/


@mixin menuCategoriasHamburguesa(){
	.megamenu{
		position:relative;
		padding:0px;
		&:hover{
			.v-megamenu-title{
				background-color: $v-megamenu-title-bacground-hover;
				h3 {
					color: $v-megamenu-title-hCategoria-hover;
				}
				&:before {
					color: $v-megamenu-title-hCategoria-icono-hover;
				}
				.icon-align-justify {
					color: $blanco;
				}
				.icon-align-justify {
					color: $v-megamenu-title-hCategoria-icono;
					font-size: 18px;
				}
			}
		}
		.v-megamenu-container {
			margin: 0;
			position: relative;
			display: block;
			cursor:pointer;
			i {
				margin-right: 10px;
				font-size: 18px;
				width: 20px;
				text-align: center;
			}
			.v-megamenu-title {
				margin: 0;
				border: 0;
				font: inherit;
				font-size: 100%;
				vertical-align: baseline;
				background: none repeat scroll 0 0 $v-megamenu-title-bacground;
				border-left: 1px solid $grisTexto;
				border-right: 1px solid $grisTexto;
				padding: 3px 12px 4px 16px;
				line-height:48px;
				text-align: left;
				background-color: $v-megamenu-title-bacground;
				transition: all 0.3s ease-in-out 0s;
				-webkit-transition: all 0.3s ease-in-out 0s;
				-moz-transition: all 0.3s ease-in-out 0s;
				h3 {
					color: $v-megamenu-title-hCategoria;
					display: inline-block;
					font-size: 16px;
					margin: 0;
					font-weight: bold;
					line-height: 20px;
					text-transform: uppercase;
					transition: all 0.3s ease-in-out 0s;
					-webkit-transition: all 0.3s ease-in-out 0s;
					-moz-transition: all 0.3s ease-in-out 0s;
				}
				&:before {
					color: $v-megamenu-title-hCategoria-icono;
					content: "\f415";
					font-family: $fuente_iconos;
					font-size: 29px;
					font-weight: bold;
					line-height: 1.5em;
					position: absolute;
					right: 16px;
					transition: all 0.3s ease-in-out 0s;
					-webkit-transition: all 0.3s ease-in-out 0s;
					-moz-transition: all 0.3s ease-in-out 0s;
				}
				.icon-align-justify {
					color: $v-megamenu-title-hCategoria-icono;
					font-size: 18px;
					overflow: hidden;
					transition: all 0.3s ease-in-out 0s;
					-webkit-transition: all 0.3s ease-in-out 0s;
					-moz-transition: all 0.3s ease-in-out 0s;
					vertical-align:middle;
					&:before {
						content: "\f35c";
						font-family: $fuente_iconos;
						font-size: 34px;
						line-height: 18px;
					}
				}
			}
		}
		.dropdown-menu{
			padding: 0;
			a{
				padding:15px 0 11px 20px;
				&:hover{
					background: $gris;;
				}
			}
			.submenu{
				a:hover{
					background: none;
					color:$primario;
				}
			}
		}
		.v-megamenu{
			margin-left:15px;
			width:90%;
			ul {
				list-style: none;
				position: relative;
				width: 100%;
				padding:0px;
				li a {
					display: block;
					@media (max-width: 991px){
						width:85%;
						font-size:14px !important;
					}
				}
			}
			& > ul > li {
				text-transform: uppercase;
				padding-bottom: 0;
				position:relative;
				text-align: left;
				background: $blanco;
				&.nivel_1:hover .submenu{
					display:block !important;
					box-shadow: -9px 6px 14px 1px #b9b9b9;
					-webkit-box-shadow: 10px 4px 16px 0px #15131a8c;
					-moz-box-shadow: -9px 6px 14px 1px #b9b9b9;
					-ms-box-shadow: -9px 6px 14px 1px #b9b9b9;
					-o-box-shadow: -9px 6px 14px 1px #b9b9b9;
				}
				@media (max-width: 991px){
					&:hover{
						&a.opener:before{
							display:none;
						}
					}
				}
				& > a{
					color: $gris_chocolate;
					display: block;
					font-size: 12px;
					font-weight: normal;
					line-height: 1;
					padding: 17px 0 6px 20px;
					text-transform: capitalize;
				}
				div.submenu {
					border-left-color: $submenu_borde_left;
					left: 100%;
					display: none;
					top: 0;
					width: auto;
					z-index: 99999;
					position: absolute;
					background-color: $gris;
					background-position: 100% 100%;
					background-repeat: no-repeat;
					-webkit-animation-duration: .6s;
					animation-duration: .6s;
					-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
					@media (min-width: 992px){
						box-shadow: 1px 1px #f0f0f0;
						border-left: 3px solid $submenu_borde_left;
						border-top: 1px solid #f0f0f0;
						-webkit-box-shadow: 1px 1px #f0f0f0;
						-ms-box-shadow: 1px 1px #f0f0f0;
					}

					&.full-width {
						width: 600px;
						.section-indent {
							padding: 15px 15px 15px 12px;
						}
					}
					@media (max-width: 991px){
						position:initial;
						top:0px;
						&.full-width {
							width:100%;
							border-top: 1px solid #f0f0f0;
							border-bottom: 1px solid #f0f0f0;
						}
					}
				}

			}
			.v-megamenuitem .submenu {
				z-index: 32 !important;
			}
			.v-megamenuitem a.opener {
				height: 40px;
				margin: -2px 0 0;
				padding: 0;
				position: absolute;
				right: 0;
				text-align: center;
				top: 50%;
				width: 40px;
				box-shadow: none;
				border: 0;
			}
			.v-megamenuitem a.opener:before {
				content: "\F142";
				font-family: $fuente_iconos;
				font-size: 13px;
				text-transform: none;
				@media (max-width: 991px){
					content: "\f415";
					font-size: 18px;
					&:hover{
						content: "\2212";
					}
				}
			}
			.v-main-section {
				width: 100%;
				float: left;
				min-height: 20px;
			}
			.section-indent {
				padding: 18px 0 15px 12px;
				overflow: hidden;
			}
			.v-main-section-links > li {
				padding: 0 15px;
				margin-bottom: 8px;
				&  a{
					color: $megamenu_submenu_fuente_color;
					font-family: $fuente;
					font-size: 12px;
					font-weight: bold;
					line-height: 12px;
					margin: 12px 0 0;
					padding: 0 0 7px;
					text-transform: uppercase;
				}
			}
			ul li a {
				display: block;
			}
			.v-main-section-sublinks li {
				padding: 6px 0;
				position: relative;
				transition: all 0.3s ease-in-out 0s;
				-webkit-transition: all 0.3s ease-in-out 0s;
				-ms-transition: all 0.3s ease-in-out 0s;
				&:hover{
					a{
						margin-left: 8px;
					}
				}
				a{
					color: $gris_chocolate;
					font-size: 12px;
					font-weight: normal;
					line-height: 12px;
					text-transform: capitalize;
				}
			}
		}
	}
	
	.header-megamenu{
		&.col-sm-12{
			background-color: $menuSup_fondo;
			nav{
				background-color: $menuSup_fondo;
				ul{
					background-color: $menuSup_fondo;
				}
			}
		}
		#fieldmegamenu-main{
			&.fieldmegamenu{
				& > ul {
					height: 50px;
					text-align: left;
					display: block;
					position: relative;
					clear: both;
					margin: 0;
					display: flex;
					& > li{
						display: inline-block;
						font-size: 14px;
						float: left;
						text-align: left;
						position: relative;
						flex: 1 1;
						a {
							color: $menuSup_enlace;
							letter-spacing: 1px;
							padding:21px 30px;
							margin: 0;
							display: inline-block;
							font-weight: bold;
							line-height:1em;
							border:none;
							.mdi{
								display: none;
							}
							&:hover{
								background:$menuSup_enlace_backgroung_hover;
								color:$menuSup_enlace_hover;
							}
						}
					}
					li.lupa{
						display:none;
					}
				}
				@media(max-width: 400px){
					text-align: left;
					.fieldmegamenu>ul>li a{
						padding: 16px 12px;
					}
				}
				.root-item.no-description {
					line-height: 56px;
					padding: 0;
				}
				.root-item {
					float: left;
					cursor: pointer;
					overflow: hidden;
					padding: 10px 0;
					white-space: nowrap;
				}
				.root .root-item.no-description > a .title.title_font:before {
					content: "";
					width: 0;
					height: 0;
					position: absolute;
					border-bottom: 2px solid $blanco;
					bottom: 15px;
					left: 0;
					transition: all 0.3s ease-in-out 0s;
					-webkit-transition: all 0.3s ease-in-out 0s;
					-ms-transition: all 0.3s ease-in-out 0s;
				}
			}
		}
	}
	
	@media(max-width: 767px){
		.header-megamenu{
			padding: 0px;
			#fieldmegamenu-main{
				&.fieldmegamenu{
					text-align: center;
					& > ul {
						text-align: center;
						& > li{
							float:none;
							text-align: center;
							a{
								padding: 20px 36px;
								.title{
									.mdi{
										display: inline-block !important;
										vertical-align: middle;
										font-size: 30px;
									}
									.title-text{
										display: none;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
	@media (max-width: 600px){
        .megamenu {
            width: 100%;
        }
        .header-megamenu {
            width: 100%;
        }
    }
	
	@media(max-width: 463px){
        .header-megamenu #fieldmegamenu-main.fieldmegamenu>ul>li a{
            padding:18px 25px;
        }
    }
}