/* ########################################################### */
/* #################### RUBY MEGA MENU   ##################### */
/* ######################## V 1.0 ############################ */

/* ################## RESPONSIVE STYLES ###################### */

/* MEDIA QUERY --> EXTRA SMALL DEVICES */
@media(max-width:991px){

  div.ruby-wrapper .hidden-xs {
    visibility: hidden;
    display: none;
  }

  div.ruby-wrapper {
    position: fixed;
    width: 95%;
   top: 0px;
   background: #9e4686 !important;
  -webkit-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
  }

  .ruby-wrapper .visible-xs {
    visibility: visible;
    position: fixed;
    left: 1.6%;
    top: 0px;
    -webkit-border-radius: 6px;
border-radius: 6px;
    z-index: 80011;
   background: #7a1878 !important;

  }

  /* RUBY 1ST LEVEL */
  div.ruby-wrapper > ul {
    position: fixed;
    top: 52px;
    width: 95%;
     background: #bf79b3;
     -webkit-box-shadow: 0 3px 5px 2px rgba(191,121,179,0.75);
box-shadow: 0 3px 5px 2px rgba(191,121,179,0.75);
  }
 @media(max-width:769px){
   .ruby-wrapper .visible-xs{
   left:38px;
 }
 div.ruby-wrapper, div.ruby-wrapper > ul     {  width: 687px !important; }

  }
  ul.ruby-menu {

  }
 @media(max-width:369px){
 .ruby-wrapper .visible-xs {
      left:1px !important;
 }
 }


  ul.ruby-menu > li,
  ul.ruby-menu > li.ruby-menu-right {
    float: none;
  }

  ul.ruby-menu > li > a {
    padding: 0 65px;
    background: #19ad86;
  }

  ul.ruby-menu > li > a:only-child {
    padding: 0 65px;
  }

  ul.ruby-menu > li > a:hover,
  ul.ruby-menu > li:hover > a,
  ul.ruby-menu > li.ruby-active-menu-item > a:hover {
    background: #127e61;
  }

  ul.ruby-menu > li.ruby-active-menu-item > a {
    background: #159572;
  }

  ul.ruby-menu > li.ruby-menu-social > a > span {
    display: block;
  }

  /* RUBY 2ND LEVEL */
  ul.ruby-menu > li > ul,
  ul.ruby-menu > li > ul > li > ul,
  ul.ruby-menu > li > ul > li > ul > li > ul {
    position: relative;
    width: 100%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-top: none;
  }

  ul.ruby-menu > li,
  ul.ruby-menu > li > ul > li,
  ul.ruby-menu > li > ul > li > ul > li,
  ul.ruby-menu > li > ul > li > ul > li > ul > li {
    position: relative;
  }

  ul.ruby-menu > li > ul > li > a,
  ul.ruby-menu > li > ul > li > ul > li > a,
  ul.ruby-menu > li > ul > li > ul > li > ul > li > a {
    width: 100%;
    line-height: 50px;
    padding: 0 80px;
    background: #d1d1d1;
  }

  ul.ruby-menu > li > ul > li:hover > a,
  ul.ruby-menu > li > ul > li > a:hover,
  ul.ruby-menu > li > ul > li > ul > li:hover > a,
  ul.ruby-menu > li > ul > li > ul > li > a:hover,
  ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > a,
  ul.ruby-menu > li > ul > li > ul > li > ul > li > a:hover {
    background: #d9d9d9;
    color: #111;
  }

  /* RUBY 3RD & 4TH LEVEL SPECIFIC */
  ul.ruby-menu > li > ul > li > ul,
  ul.ruby-menu > li > ul > li > ul > li > ul {
    left: auto;
    top: auto;
    z-index: auto;
  }

  ul.ruby-menu > li > ul > li.ruby-open-to-left > ul,
  ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left > ul {
    left: auto;
    right: auto;
  }

  ul.ruby-menu > li > ul > li > ul > li > a {
    background: #e5e5e5;
    padding: 0 95px;
  }

  ul.ruby-menu > li > ul > li > ul > li:hover > a,
  ul.ruby-menu > li > ul > li > ul > li > a:hover {
    background: #e1e1e1;
  }

  ul.ruby-menu > li > ul > li > ul > li > ul > li > a {
    background: #efefef;
    padding: 0 110px;
  }

  ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > a,
  ul.ruby-menu > li > ul > li > ul > li > ul > li > a:hover {
    background: #fff;
  }





  ul.ruby-menu > li.ruby-menu-social > a {
    border: none;
  }



















  /* RUBY MENU MEGA */
  ul.ruby-menu > li.ruby-menu-mega,
  ul.ruby-menu > li.ruby-menu-mega-blog,
  ul.ruby-menu > li.ruby-menu-mega-shop {
    position: relative;
  }

  ul.ruby-menu > li.ruby-menu-mega > div,
  ul.ruby-menu > li.ruby-menu-mega-blog > div,
  ul.ruby-menu > li.ruby-menu-mega-shop > div {
    position: relative;
    top: auto;
    left: auto;
    border-top: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  /* RUBY MENU MEGA BLOG */
  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav {
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
  }

  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li {
    position: relative;
  }

  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a {
    line-height: 50px;
    padding: 0 75px;
    background: #d1d1d1;
    color: #222;
  }

  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li.ruby-active-menu-item > a {
    background: #bcbcbc;
  }

  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div {
    position: relative;
    width: 100%;
    min-height: auto;
    left: auto;
    top: auto;
    z-index: auto;
  }

  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li:hover > a {
    background: #d9d9d9;
  }


























  /* RUBY MENU MEGA SHOP */
  ul.ruby-menu > li.ruby-menu-mega-shop > div {
    position: relative;
    text-align: left;
  }
  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul {
    position: relative;
    border: none;
    font-size: 14px;
    margin-bottom: -1px; /* bug-fix */
  }

  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li {
    position: relative;
    display: block;
    margin-top: -1px; /* bug-fix */
  }

  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a {
    padding: 0px 80px;
    line-height: 50px;
    max-height: 50px;
    text-transform: none;
    font-weight: normal;
    background: #d1d1d1;
    color: #222;
    border: none;
  }

  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li.ruby-active-menu-item > a {
    background: #bcbcbc;
  }

  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li:hover > a,
  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:hover,
  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li.ruby-active-menu-item > a {
    background: #d9d9d9;
  }

  /* RUBY MENU MEGA SHOP - UPPERLINE UNDERLINE EFFECT */
  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a {
    display: block;
  }

  /* RUBY MENU MEGA SHOP - CONTENT */
  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div {
    position: relative;
    top: 0;
    z-index: 9999;
    margin: 0;
  }

  /* RUBY MENU SOCIAL ICONS */
  ul.ruby-menu > li.ruby-menu-social img {
    display: inline-table;
    position: absolute;
    top: 15px;
  }

  ul.ruby-menu > li.ruby-menu-social > a {
    width: 100%;
  }

  ul.ruby-menu > li.ruby-menu-social .fa {
    position: absolute;
    top: 17px;
  }

  ul.ruby-menu > li.ruby-menu-social span {
    line-height: 50px;
    padding: 0 25px;
  }







  /* RUBY MENU DROPDOWN TOGGLE - MOBILE */
	span.ruby-dropdown-toggle {
    position: absolute;
		width: 50px;
		height: 50px;
    max-width: 50px;
    max-height: 50px;
		left: 0;
		top: 0;
		padding: 10px 17px;
		z-index: 1000000;
		cursor: pointer;
        display: none;
        -webkit-border-radius: 6px;
border-radius: 6px;
	}
ul.ruby-menu > li {

  text-align: left;
}
	span.ruby-dropdown-toggle:after {
		/* css down-arrows if has child item */
		font-family: "FontAwesome";
		text-decoration: none;
		content: '\f107';
		color: #fff;
		font-size: 25px;
		right: 0;
	}

	span.ruby-dropdown-toggle.ruby-dropdown-toggle-rotate {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}

  ul.ruby-menu > li > a:before,
  ul.ruby-menu > li > ul > li > a:before,
  ul.ruby-menu > li > ul > li > ul > li > a:before,
  ul.ruby-menu > li > ul > li > ul > li > ul > li > a:before,
  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a:before,
  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before {
    content: "";
    width: 50px;
    height: 50px;
    background: transparent;
    position: absolute;
    left: 0;
    top: 0;
  }

  ul.ruby-menu > li > ul > li > a:before,
  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a:before,
  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before {
    background: #555;
  }
  ul.ruby-menu > li > ul > li > ul > li > a:before {
    background: #777;
  }
  ul.ruby-menu > li > ul > li > ul > li > ul > li > a:before {
    background: #999;
  }

  /* RUBY MENU HIDE/SHOW SUBMENUS - MOBILE */
  ul.ruby-menu > li > ul > li > ul > li > ul,
  ul.ruby-menu > li > ul > li > ul,
  ul.ruby-menu > li > ul,
  ul.ruby-menu,
  ul.ruby-menu > li.ruby-menu-mega > div,
  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div,
  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div,
  ul.ruby-menu > li.ruby-menu-mega-blog > div,
  ul.ruby-menu > li.ruby-menu-mega-shop > div {
      max-height: 0;
      transform: scaleY(0);
      overflow: hidden;
  }

  ul.ruby-menu > li > ul.ruby-mobile-sublevel-show,
  ul.ruby-menu > li > ul > li > ul.ruby-mobile-sublevel-show,
  ul.ruby-menu > li > ul > li > ul > li > ul.ruby-mobile-sublevel-show,
  ul.ruby-menu.ruby-mobile-sublevel-show,
  ul.ruby-menu > li.ruby-menu-mega > div.ruby-mobile-sublevel-show,
  ul.ruby-menu > li.ruby-menu-mega-blog > div.ruby-mobile-sublevel-show,
  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div.ruby-mobile-sublevel-show,
  ul.ruby-menu > li.ruby-menu-mega-shop > div.ruby-mobile-sublevel-show,
  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div.ruby-mobile-sublevel-show {
    max-height: 20000px;
    transform: scaleY(1) ;
       -webkit-transition: 0.25s ease-in;
    -moz-transition: 0.25s ease-in;
    -o-transition: 0.25s ease-in;
    transition: 0.25s ease-in;
     margin-top:-8px;
  }














  /* RUBY CONTENT GRID */
  div.ruby-grid > div.ruby-row div.ruby-row [class^="ruby-col"] {
    margin-top: 0;
  }

  div.ruby-grid > div.ruby-row div.ruby-row:first-of-type [class^="ruby-col"] {
    margin-top: 0;
  }

  div.ruby-grid.ruby-grid-lined > div.ruby-row:after {
    height: 0;
  }

  div.ruby-grid > div.ruby-row > [class^="ruby-col"] {
    padding: 0;
  }

  div.ruby-grid > div.ruby-row > [class^="ruby-col"] [class^="ruby-col"] {
    padding-left: 0;
  }

  div.ruby-grid > div.ruby-row > [class^="ruby-col"] [class^="ruby-col"]:first-of-type {
    padding-left: 0;
  }

  div.ruby-grid > div.ruby-row div.ruby-col-1,
  div.ruby-grid > div.ruby-row div.ruby-col-2,
  div.ruby-grid > div.ruby-row div.ruby-col-3,
  div.ruby-grid > div.ruby-row div.ruby-col-4,
  div.ruby-grid > div.ruby-row div.ruby-col-5,
  div.ruby-grid > div.ruby-row div.ruby-col-6,
  div.ruby-grid > div.ruby-row div.ruby-col-7,
  div.ruby-grid > div.ruby-row div.ruby-col-8,
  div.ruby-grid > div.ruby-row div.ruby-col-9,
  div.ruby-grid > div.ruby-row div.ruby-col-10,
  div.ruby-grid > div.ruby-row div.ruby-col-11,
  div.ruby-grid > div.ruby-row div.ruby-col-12 {
    width: 100%;
    padding: 20px 30px;
  }

  div.ruby-grid.ruby-grid-lined > div.ruby-row > div[class^="ruby-col"]:after {
    width: 0px;
  }

  div.ruby-grid img {
    position: relative;
    max-width: 100%;
    height: auto;
    display: block;
  }

  div.ruby-grid > div.ruby-row::after {
  	content: "";
  	display: table;
  	clear: both;
  }

  /* Hamburger icon - mobile */
  .c-hamburger {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 44px;
    font-size: 0;
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    -webkit-transition: background 0.3s;
            transition: background 0.3s;
  }

  .c-hamburger:focus {
    outline: none;
  }

  .c-hamburger span {
    display: block;
    position: absolute;
    top: 20px;
    left: 8px;
    right: 8px;
    height: 3px;
    background: white;
  }

  .c-hamburger span::before,
  .c-hamburger span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    content: "";
  }

  .c-hamburger span::before {
    top: -10px;
  }

  .c-hamburger span::after {
    bottom: -10px;
  }

  /**
   * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
   * down to center and transform into an "x".
   */
  .c-hamburger--htx {
     background-color: #6f2974;

  }

  .c-hamburger--htx span {
    -webkit-transition: background 0s 0.3s;
            transition: background 0s 0.3s;
  }

  .c-hamburger--htx span::before,
  .c-hamburger--htx span::after {
    -webkit-transition-duration: 0.3s, 0.3s;
            transition-duration: 0.3s, 0.3s;
    -webkit-transition-delay: 0.3s, 0s;
            transition-delay: 0.3s, 0s;
  }

  .c-hamburger--htx span::before {
    -webkit-transition-property: top, -webkit-transform;
            transition-property: top, transform;
  }

  .c-hamburger--htx span::after {
    -webkit-transition-property: bottom, -webkit-transform;
            transition-property: bottom, transform;
  }

  /* active state, i.e. menu open */
  .c-hamburger--htx.is-active {
    background-color: #bf79b3;
  }

  .c-hamburger--htx.is-active span {
    background: none;
  }

  .c-hamburger--htx.is-active span::before {
    top: 0;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }

  .c-hamburger--htx.is-active span::after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

  .c-hamburger--htx.is-active span::before,
  .c-hamburger--htx.is-active span::after {
    -webkit-transition-delay: 0s, 0.3s;
            transition-delay: 0s, 0.3s;
  }

  /* Hide Ruby Dividers on Mobile */
  ul.ruby-menu.ruby-menu-dividers > li,
  ul.ruby-menu.ruby-menu-dividers > li > a,
  ul.ruby-menu.ruby-menu-dividers > li.ruby-menu-social > a,
  ul.ruby-menu.ruby-menu-dividers > li > a:hover,
  ul.ruby-menu.ruby-menu-dividers > li:hover > a {
    border: none;
  }

  /* Reset transparent menu active menu item padding */
  div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-active-menu-item > a {
    padding-left: 45px;
  }

  /* Hide search in mobile */
  ul.ruby-menu > li.ruby-menu-social.ruby-menu-search > a {
    display: none;
  }










}

/* MEDIA QUERY --> SMALL DEVICES */
@media(min-width:768px) and (max-width:991px){
  .ruby-wrapper .hidden-md {
    visibility: hidden;
    display: none;
  }

  div.ruby-wrapper {
    width: 100%;
  }

  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav {
    width: 170px;
  }

  ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div {
    width: 590px;
    left: 170px;
  }

  /* RUBY MENU MEGA - VERTICAL MENU */
  ul.ruby-menu.ruby-vertical > li.ruby-menu-mega > div,
  ul.ruby-menu.ruby-vertical > li.ruby-menu-mega-blog > div,
  ul.ruby-menu.ruby-vertical > li.ruby-menu-mega-shop > div {
    width: 560px; /* since 1st level ul width is 200px (i.e. 980-200)*/
  }

  ul.ruby-menu.ruby-vertical > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div {
    width: 360px; /* since 1st level ul width is 200px (i.e. 780-200)*/
  }

  span.ruby-c-date {
    display: none;
    visibility: hidden;
    opacity: 0;
  }

  div.ruby-grid > div.ruby-row div.ruby-col-3-md {
    width: 25%;
  }

  div.ruby-grid > div.ruby-row div.ruby-col-4-md {
    width: 33.33%;
  }

  div.ruby-grid > div.ruby-row div.ruby-col-6-md {
    width: 50%;
  }

  div.ruby-grid > div.ruby-row div.ruby-col-12-md {
    width: 100%;
  }

  div.ruby-grid.ruby-grid-lined > div.ruby-row:after,
  div.ruby-grid.ruby-grid-lined > div.ruby-row > div[class^="ruby-col"]:after {
    background: none;
  }

  ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a {
    padding: 20px 5px;
    font-size: 12px;
    font-stretch: condensed;
    color: #666;
  }




}

/* MEDIA QUERY --> MEDIUM DEVICES */
@media(min-width:992px) and (max-width:1199px){

}

/* MEDIA QUERY --> LARGE DEVICES */
@media(min-width:1200px){

}