AnonymousFox

/home/develito/www/templates/jsn_epic2_pro/scss/joomla/_megamenu.scss

ul.sunfw-tpl-menu {
  // Menu Description
  .menudescription {
    display: block;
    font-size: 12px;
    text-transform: initial;
  }
  // Menu icon
  li > a > i {
    @include rtl-padding-right(5px);
  }
  > li {
    position: relative;
    &.megamenu{
      position: static;
    }
    &.right {
      > ul {
        @include rtl-right(0);
      }
    }
    &.left {
      > ul {
        @include rtl-left(0);
      }
    }
    &.center {
      > ul {
        @include rtl-left(50%);
        @include rtl-translateX(-50%);
      }
      
    }
    &.full-width {
      position: static;
      > ul {
        @include rtl-left(0);
      }
    }
    > ul {
      z-index: 1;
    }
  }
  //Megamenu
  > li.megamenu {
    ul.sunfw-megamenu-sub-menu {
      position: absolute;
      box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.15);
		border-top: 1px solid #000;
      width: 100%;
      z-index: 999;
	  padding: 0;
	  background: #282828;
		> .grid {
			padding: 0 15px;
		}
      .modulecontainer {        
        h3.module-title {
			clear: both;
			color: #fff;
			font-size: 12px;
			margin-top: 17px;
			padding: 0;
			margin-bottom: 10px;
			text-transform: uppercase;
			+ ul.nav.menu {
				padding: 0 0 9px;
			}
        }
        > ul > li {
          padding: 0;
          list-style: none;
            ul{
              opacity: 0;
              position: absolute;
              width: 100%;
              display: none;
              left: 100%;
              top: 0;
              list-style: none;
              background: #282828;
			  box-shadow: inset 1px 0px 0px 0 rgba(255, 255, 255, 0.15);
				border-left: 1px solid #000;
              padding: 0 15px;
				li {
					padding: 0;
				}
            }
            &:hover ul{
              opacity: 1;
              display: block;
              z-index: 9;
            }  
            a{
              padding: 4px 0;
    color: rgba(255, 255, 255, 0.5);
            }  
        }
        li.parent > a > span.caret{
          @include rtl-right(5px);      
        }
        #login-form {
          padding-top: 15px;
          #form-login-remember, .checkbox {
            margin-bottom: 5px;
          }
          ul.unstyled {
            display: none;
            position: relative;
            opacity: 1;
          }
        }
      }
      ul{
        max-width: 100%;
      }
      .sunfw-item, .sunfw-item .module-style > div {
        > ul {
          display: block;
          position: relative;
          width: 100%;
          right: 0;
		  padding: 0;
          ul {
            position: absolute;
            width: 100%;
			left: 100%;
			top: 0;
          }
          li:hover > ul {
            display: block;     
            a {
              width: 100%;
              display: block;
            }
          }
        }
      }
      .sunfw-social {
        ul {
          position: relative;
          left: 0;
        }
      }
      li a:hover{
        background: transparent;
      }
    }
  }

}
.sw-col-border {
	padding-right: 19px;
	padding-left: 19px;
	&:after {
		content: '';
		width: 2px;
		height: inherit;
		position: absolute;
		box-shadow: inset 1px 0px 0px 0 rgba(255, 255, 255, 0.15);
		border-left: 1px solid #000;
		right: 0;
		top: 0;
		bottom: 0;
		//margin: -16px 0 -13px;
	}
}
ul.sunfw-tpl-menu > li.megamenu ul.sunfw-megamenu-sub-menu {
	.grid > .sunfw-mega-menu > .row {
		display: flex;
	}
}
// Menu Responsive
@media (max-width: 1024px) {
  ul.sunfw-tpl-menu .sunfw-submenu-flipback .sunfw-mega-menu ul {
    @include rtl-right(0);
  }
}
@media (max-width: 767px) {
  ul.sunfw-tpl-menu {
    > li.megamenu {
      position: relative;
      ul.sunfw-megamenu-sub-menu {
        width: 100% !important;
        border: none;
		background: transparent;
        .modulecontainer ul .menuShow{
          border: none;
          padding: 0 15px;
          background: transparent;
          display: block !important;
          left: 0 !important;
          opacity: 1;
			box-shadow: none;
        }
      }
      .sunfw-mega-menu {
        [class*="col-xs-"] {
          width: 100%;
          padding: 0;
		  &:last-child {
			.modulecontainer h3.module-title + ul.nav.menu {
				padding-bottom: 10px;
			}
		  }
        }
        .row {
          margin: 0;
        }
        ul {
          display: block !important;
          &.unstyled {
            display: none !important;
          }
        }
        h3 {
          margin-top: 0;
          padding: 10px 15px;
        }
      }
    }
    
    li {
      &:last-child {
        border-bottom: none;
      }
    }
    .caret {
      border: none;
      width: 40px;
      top: 0;
      position: absolute;
      @include rtl-right(0);
      height: 100%;
      text-align: center;
      margin-top: 0;
      &:before {
        content: "\f067";
        font-family: "FontAwesome";
        color: #fff;
        font-size: 14px;
        vertical-align: middle;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        display: block;
      }
      &.open:before {
        content: "\f068" !important;
      }
    } 
  }
  //  Fixed Menu
  .sunfw-menu-head.navbar-default .navbar-nav > li > a {
    padding: 10px 15px;
  }
ul.sunfw-tpl-menu > li.megamenu ul.sunfw-megamenu-sub-menu .grid > .sunfw-mega-menu > .row {
	flex-direction: column;
}
  // RTL
  .sunfw-direction-rtl{
    ul.sunfw-tpl-menu .caret:before{
      content: "\f104";
    }
  }
  
}