ul.gva-nav-menu{
  	margin-bottom: 0;
  	padding: 0;
  	> li{
	 	margin: 0;
	 	padding: 0;
	 	position: relative;
	 	list-style: none;
	 	float: left;
	 	display: inline-block;
	 	padding: 0 14px;
	 	@media(max-width: 1390px){
	 		padding: 0 12px; 
	 	}
	 	> a {
			font-size: 16px; 
			font-weight: 500;
			height: auto;
			position: relative;
			display: inline-block;
			color: $body-color;
			padding: 25px 0;
			.caret{
			  	margin-left: 3px;
			  	top: 3px;
			  	position: relative;
			  	display: inline-block;
            mask-image: url("data:image/svg+xml,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.978478 0.313439C1.15599 0.135928 1.43376 0.11979 1.62951 0.265027L1.68558 0.313439L5.9987 4.62632L10.3118 0.313439C10.4893 0.135928 10.7671 0.11979 10.9628 0.265027L11.0189 0.313439C11.1964 0.49095 11.2126 0.768726 11.0673 0.964466L11.0189 1.02055L6.35225 5.68721C6.17474 5.86472 5.89697 5.88086 5.70122 5.73562L5.64514 5.68721L0.978478 1.02055C0.783216 0.825283 0.783216 0.508701 0.978478 0.313439Z' fill='currentColor'/%3E%3C/svg%3E");
            mask-size: 10px;
            width: 12px;
            height: 14px;
            mask-repeat: no-repeat;
            mask-position: center;
            line-height: 15px;
            font-size: 12px;
            font-weight: 700;
            background: $body-color;
            transition: all 0.35s;
			}
	 	}
	 	&:hover, &:active, &:focus, &.current_page_parent{
			> a{
		  		color: $theme-color;
            .caret{
               background: $theme-color;
            }
			}   
	 	}
	 	> .submenu-inner{
			&:after{
			  	content: '';
			  	position: absolute;
			  	bottom: 100%;
			  	left: 0;
			  	width: 100%;
			  	height: 20px;
			  	display: block;
			  	background: transparent;
			  	@media(max-width: 1024px){
			  		display: none;
			  	}
			}
	 	}
	 	.submenu-inner, ul.submenu-inner{
			@include opacity(0);
			visibility: hidden;
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 99;
			@include box-shadow(0 0 20px 0 rgba(62, 28, 131, 0.1));
			@include transition(all 0.39s);
			transition-delay: 0.1s;
			border-radius: 6px; 
			min-width: 260px;
			padding: 2px 20px;
			background: $white;
			list-style-type: none;
			transform: rotateX(-90deg);
			transform-origin: 0 0;
			&.megamenu-wrap-inner{
				padding: 18px 20px 12px;
			}
			li{
			  	background: $nocolor;
			  	position: relative;
			  	text-align: left;
			  	border-bottom: 1px solid $border-color;
			  	padding: 6px 0;
		  		@include media-breakpoint-down(md){ 
			 		border-bottom: 0;
		  		}
		  		&:last-child{
			 		border-bottom: none;
		  		}
		  		a{
			 		display: block;
				 	line-height: 1.4;
				 	padding: 8px 0;
				 	font-size: 15px;
				 	font-weight: 500;
				 	text-transform: capitalize;
				 	position: relative;
				 	color: $body-color;
				 	font-family: $headings-font-family;
			 		.caret{ 
						top: 18px;
						position: absolute;
						right: 0;
						height: 8px;
						width: 10px;
						display: inline-block;
						&:after{
						  	content: '\f054';
						  	position: absolute;
						  	left: 0;
						  	top: 50%;
						  	margin-top: -8px;
						  	z-index: 1;
						  	font-family: $font-icon-awesome;
						  	line-height: 1;
						  	font-size: 12px;
						  	font-weight: 700;
						}
			 		}
			 		&:hover, &:focus, &:active{
						color: $theme-color;
					}
		  		}
		  		ul.submenu-inner{
			 		position: absolute;
			 		left: 90%;
			 		top: 0;
		  		}
		  		&:hover{
			 		> ul.submenu-inner {
						display: block;
						@include opacity(1);
						visibility: visible;
						-webkit-transform: rotateX(0);
						-moz-transform: rotateX(0);
						-ms-transform: rotateX(0);
						-o-transform: rotateX(0);
						transform: rotateX(0);
			 		}
		 	 	}
			} 
	 	}
	 &:hover{
		>.submenu-inner{
		  top: 100%;
		  @include opacity(1);
		  visibility: visible;
		  height: auto;
		  @include opacity(1);
		  display: block;
		  -webkit-transform: rotateX(0);
		  -moz-transform: rotateX(0);
		  -ms-transform: rotateX(0);
		  -o-transform: rotateX(0);
		  transform: rotateX(0);
		}
	 }
	 @media(max-width: 1600px){
		&:last-child, &:nth-last-child(2){
		  ul.submenu-inner li ul.submenu-inner{
			 right: 100%;
			 left: auto;
		  }
		}
	 }
	 &.megamenu-main{
		.megamenu-wrap-inner{
		  max-width: 1170px!important;
		  background: $white;
		  left: 0;
		  -webkit-transform: rotateX(-90deg);
		  -moz-transform: rotateX(-90deg);
		  -ms-transform: rotateX(-90deg);
		  -o-transform: rotateX(-90deg);
		  transform: rotateX(-90deg);
		  -webkit-transform-origin: 0 0;
		  -moz-transform-origin: 0 0;
		  -ms-transform-origin: 0 0;
		  -o-transform-origin: 0 0;
		  transform-origin: 0 0;
		  ul.megamenu-sub{
			 padding: 0;
			 list-style-type: none;
			 &.megamenu-columns-6 > li{
				width: (100% / 6);
			 }
			 &.megamenu-columns-5 > li{
				  width: (100% / 5);
			 }
			 &.megamenu-columns-4 > li{
				  width: (100% / 4);
			 }
			 &.megamenu-columns-3 > li{
				width: (100% / 3);
			 }
			 &.megamenu-columns-2 > li{
				width: (100% / 2);
			 }
			 &.megamenu-columns-1 > li{
				width: 100%;
			 }
			 > li{
				border: none;
				list-style: none;
				float: left;
				padding-left: 10px;
				padding-right: 10px;
				> a{
				  border-bottom: 1px solid $border-color;
				  padding: 0 0 10px;
				  margin: 0 0 5px;
				  display: block;
				  color: $black!important;
				  font-weight: 600;
				  .caret{
					 display: none;
				  }
				  @include media-breakpoint-down(md){
					 margin-top: 6px;
				  }
				}
				.submenu-inner{
				  background: $nocolor!important;
				  @include box-shadow(none);
				  display: block;
				  position: static;
				  padding: 0;
				  min-width: 100%;
				  @include opacity(1);
				  @include scale(1);
				  visibility: visible;
				  max-width: 100%!important;
				  min-width: 10px!important;
				  li{ 
					 list-style: none;
					 border: none;
					 padding: 0;
					 &:last-child{
						border: none;
					 }
					 &.menu-item-has-children > a{
						font-weight: 600;
					 }
					 .submenu-inner{
						padding-left: 20px!important;
						display: block;
					 } 
				  }
				}
			 }
		  }
		  &.megamenu-align-left{
			 left: 0;
			 right: auto;
		  }
		  &.megamenu-align-right{
			 right: 0;
			 left: auto;
		  }
		  &.megamenu-align-center{
			 left: 50%;
			 transform: rotateX(-90deg) translateX(-50%)!important;
			 &:after{
				bottom: 100%;
				left: 50%;
				margin-left: -6px;
			 }
		  }
		}
		&:hover{
		  .megamenu-wrap-inner{
			 transform: rotateX(0) translateX(-50%)!important;
		  }
		}
	 } 
  } 
}

.menu-skin-white{
  #mega-menu-main-menu{
	 > li{
		> a{
		  text-transform: uppercase;
		  font-style: normal!important;
		  color: $white!important;
		  &:hover, &:focus, &:active{
			 color: $black!important;
		  }
		}   
	 }
  }
}

.gavias-off-canvas-toggle{
	font-size: 24px;
	float: right;
	margin-right: -1px;
	border-left: 1px solid rgba(0, 0, 0, 0.1);
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
	@include size(36px, 36px);
	@include border-radius(4px);
	background: $theme-color;
	color: $white;
	line-height: 1.5;
	margin-bottom: 10px;
	&:hover, &:focus{
		background: $black;
		color: $white;
	}
}

.gavias-off-canvas-overlay{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	display: block;
}
#gavias-off-canvas{
	 @include box-shadow(0 0 5px rgba(0, 0, 0, 0.5));
	 background:#fff;
	 height: 100%;
	 left: -75%;
	 position: fixed;
	 top: 0;
	 @include transition(all 0.35s);
	 width: 70%;
	 z-index: 99998;
	 bottom: 0;
	 &.active{
		  left: 0;    
	 } 
	 .navbar-collapse{
		padding-left: 0!important;
	 }
	 ul {
		padding-left: 25px;
	 }
	 .off-canvas-top {
		height: 35px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		 .top-social{
			> a{
				line-height: 35px;
				@include transition(background 0.35s);
				padding: 0 15px;
				display: block;
				border-left: 1px solid rgba(0, 0, 0, 0.1);
				float: left;
				&:last-child{
					border-right: 1px solid rgba(0, 0, 0, 0.1);
				}
				&:hover{
					background: $theme-color;
					color: $white;
					border-color: $theme-color;
				}
			}
		}
		.gavias-off-canvas-close{
			float: right;
			margin-right: 35px;
			line-height: 35px;
			border-left: 1px solid rgba(0, 0, 0, 0.1);
			border-right: 1px solid rgba(0, 0, 0, 0.1);
			padding: 0 15px;
			color: $black;
			&:hover{
				cursor: pointer;
				background: $theme-color;
				color: $white;
			}
		}
	}	
  ul#menu-main-menu{
	width: 100%;
	margin: 0;
	padding: 0;
	> li{
		list-style: none;
		display: block;
		width: 100%;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		overflow: hidden;
		padding: 10px 20px;
		>a {
			@include transition(all 0.35s);
			font-weight: 600;
			text-transform: uppercase;
			padding: 0;
			&:hover, &:focus{
				background: $nocolor;
			}
			&.active > a{
				color: $theme-color;
				background: $nocolor;
			}
		}
		.submenu-inner.dropdown-menu{
			position: relative;
			display: block;
			width: 100%;
			@include box-shadow(none);
			padding: 0;
			padding-left: 15px;
			border: none;
			li {
				a{
					@include transition(all 0.35s);
					padding: 4px 0;
					&:hover, &:focus{
						color: $theme-color;
						background: $nocolor;
					}
				}
				&.active > a{
					color: $theme-color;
					background: $nocolor;
				}
			}
		}
	}
	.caret{
		float: right;
		margin-top: 5px;
	} 
  }
}

#mega-menu-wrap-primary{
  position: static!important;
  .mega-menu-horizontal{
	 position: static!important;
  }
}
 
 // Menu mobile =================
.menu-bar, .menu-bar-close {
   display: inline-block;
   height: 32px;
   width: 30px;
   cursor: pointer;
   position: relative;
   span {
      display: block;
      width: 30px;
      height: 2px;
      background-color: $theme-color;
      position: absolute;
      right: 0;
      margin: auto;
      transition: all 0.5s;
      &.one {
         top: 6px;
      }
      &.two {
         top: 0;
         bottom: 0;
      }
      &.three {
         bottom: 6px;
      }
   }
}

.menu-bar:hover{
   .one{
      transform: rotate(28deg);
      width: 22px;
      transform-origin: 16% 100%;
   }
   .three{
      transform: rotate(-28deg);
      transform-origin: 16% 100%;
      width: 22px;
      right: -1px;
   }
}

.menu-mobile-open{
   .menu-bar{
      .one{
         transform: rotate(28deg);
         width: 22px;
         transform-origin: 16% 100%;
      }
      .three{
         transform: rotate(-28deg);
         transform-origin: 16% 100%;
         width: 22px;
         right: -1px;
      }
   }
}

.menu-bar-close{
   transition: all 0.35s;
   span.one{
      transform: rotate(45deg);
      top: 0;
      bottom: 0;
   }
   span.two{
      opacity: 0;
   }
   span.three{
      transform: rotate(-45deg);
      left: 0;
      top: 0;
      bottom: 0;
   }
   &:hover{
      transform: scale(1.2);
   }
}

.gva-offcanvas-content{
   position: fixed;
   left: -520px;
   width: 520px;     
   max-width: 100%;
   top: 0;
   bottom: 0;
   z-index: 9999;
   visibility: hidden;
   @include box-shadow(0 0 5px rgba(0, 0, 0, 0.3));
   @include opacity(0);
   transition: all 680ms cubic-bezier(0,.42,.69,.99);
   background: $white;
   .first-layer, .second-layer{
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: $theme-color;
      opacity: 0.9;
      top: 0;
      left: 100%;
      right: auto;
      bottom: 0;
      width: 0;
      margin-left: 0;
      transition: width 0.5s ease-out;
   }
   .second-layer{
      opacity: 0.9;
      background: $theme-color-2;
      transition: width 0.5s ease-out;
   }
   &.open{
      //right: 0;
      transform: translate3d(0%, 0, 0);
      .first-layer{
         width: 100vw;
      }
      .second-layer{
         width: calc(100vw - 500px);
      }
   }
   a{
      color: $black;
      &:hover{
         color: $theme-color;
      }
   }
   .top-canvas{
      width: 100%;
      z-index: 9;
      @include clearfix();
      padding: 30px 25px 20px;
      .logo-mm{
         float: left;
         display: inline-block;
         line-height: 1;
         img{
            max-width: 180px;
         }
      }
      .control-close-mm{
         display: inline-block;
         text-align: center;
         float: right;
         font-size: 30px;
         &:hover{
            cursor: pointer;
         }
      }
   }
   .mobile-menu-footer{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 12px 30px 8px;
      border-top: 1px solid $theme-color;
      text-align: left;
      background: $black;
      z-index: 11;
      a{
         display: inline-block;
         font-size: 16px;
         margin: 0 10px;
         color: $white;
         &:hover{
            color: $theme-color;
         }
         &:first-child{
            margin-left: 0;
         }
      }
   }
   .wp-sidebar .widget{
      padding-top: 20px;
      margin-top: 20px;
      padding: 20px 30px;

      &:last-child{
         border-bottom: 0;
      }
      .widget-title{
         color: $white;
         text-align: center;
         span{
            font-size: 18px;
            color: $black;
         }
         &:before{
           left: 50%;
           margin-left: -40px;
         }
         &:after{
           left: 50%;
           margin-left: -25px;
         }
      }
   }

   .wp-sidebar{
      //overflow: hidden;
      height: calc(100% - 120px);
      padding: 10px 30px 60px;
      position: relative;
      z-index: 9;
      @media(max-width: 678px){
         padding: 10px 20px 60px;
      }
   }
   #gva-mobile-menu{
      padding: 0;
      ul.gva-mobile-menu{
         width: 100%;
         margin: 0;
         padding: 0;
         overflow: hidden;
         > li{
           position: relative!important;
           border-bottom: 1px solid rgba(0, 0, 0, 0.1);
           display: block;
           width: 100%;
           padding: 0;
           text-align: left;
           &:after{
               display: none!important;
            }
            > .submenu-inner{
               padding-bottom: 15px!important;
               @include transition(0s);
               li{
                  border: none;
                  padding: 0!important;
               }
            }
            a{
               padding: 12px 0 12px;
               font-size: 15px;
               color: $headings-color;
               font-weight: 600;
               position: relative;
               z-index: 11;
               .caret{
                  display: none;
               }
               &:after{
                  display: none;
               }
               &:hover{
                  color: $theme-color;
               }
            }
            &.menu-item-has-children{
               .caret{
                  border: none;
                  position: absolute;
                  top: 20px;
                  margin-top: -10px;
                  right: 0;
                  @include size(150px, 35px); 
                  z-index: 9;
                  color: $black;
                  mask-image: url('#{$image-theme-path-base}plus.png');
                  mask-repeat: no-repeat;
                  mask-position: center right;
                  background: $headings-color;
                  &:after{
                    display: none;
                  }
                  &:hover{
                    cursor: pointer;
                    color: $theme-color;
                  }
               }
               &.menu-active{
                  .caret{
                     mask-image: url('#{$image-theme-path-base}minium.png');
                  }
               }
            }
            > a{
               display: inline-block;
            }
            > ul{ 
               display: none;
            }
            ul.submenu-inner, div.submenu-inner{
               @include clearfix();
               position: relative;
               @include scale(1);
               @include opacity(1);
               visibility: visible!important;
               background: none;
               left: auto;
               top: auto;
               padding: 0;
               border: none!important;
               @include box-shadow(none);
               display: none;
               max-width: 100%!important;
               @include clearfix();
               transform: rotateX(0)!important;
               .caret{
                  display: none;
               }
               li{
                  a{
                     padding: 8px 0;
                     font-weight: 400;
                     text-transform: none;
                     font-size: 15px;
                     color: $body-color;
                     &:hover{
                        color: $theme-color;
                     }
                  }
               }
               ul{
                  width: 100%;
                  padding-left: 15px;
                  display: block!important;
                  > li{
                    padding: 3px 0;
                    display: block;
                    width: 100%;
                  }
               }
            }
            ul.submenu-inner{
               padding-left: 20px;
            }
         }
      }
      .megamenu-sub{
         > li{
            > a{
               font-weight: 700!important;
               font-size: 15px!important;
               opacity: 0.8;
            }
            .submenu-inner{
               padding: 8px 20px 5px!important;
               > li{
                  padding: 0!important;
               }
            }
            &:last-child{
               .submenu-inner{
                  padding-bottom: 10px!important;
                  li{
                     margin-bottom: 3px;
                  }
               }
            }
         }
      }
   }
   &.open{
      left: 0;
      @include opacity(1);
      visibility: visible;
   }
}

.megamenu-main{
  .megamenu-wrap-inner{
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
  }
  .widget{
     text-align: left;
     color: $link-color;
    .widget-title,
    .widgettitle{
      font-size: 16px;
      text-align: left;
      text-transform: uppercase;
      font-weight: 600;
      line-height: 20px;
      padding: 0;
      border: none;
    }
    ul{
      list-style: none;
      padding: 0;

    }
    &.widget-html{
      ul{
        li{
          line-height: 32px;
          padding: 5px 0;
          strong{
            color: $theme-color;
            font-weight: 600;
          }
        }
      }
    }
    .product-block {
        margin-bottom: 10px;
    }
  }
}

ul.gva-user-menu{
  li{
    a{
      font-size: 15px;
    }
  }
}

body.admin-bar{
   .gva-offcanvas-content.mobile{
      padding-top: 32px;
      @media(max-width: 782px){
         padding-top: 46px;
      }
   }
}