/*--------------------------------------------------------------
# MENUS
--------------------------------------------------------------*/
.header-navigation {
    ul {
        list-style: none;
        @include margin(0);
        @include padding(0);
        @include susy-breakpoint($tablet) {
            text-align: right;
        }
        li {
           *float: left;
	       position: relative;
           display: inline-block;
        }
        a {
            text-decoration: none;
            @include link-colors(lighten($secondary_color,30%), #fff);
            @include padding(1em 0 1em 1em);
            display: block;

        }
    }
}
.main-nav {
    background: #fff;
    clear: both;
    margin:0;
    border-bottom: 1px solid $border_color;
}
.main-navigation { 
    ul { display: none;
        
    }
}
@include susy-breakpoint($tablet) {
.main-navigation {
    ul {
        display: block;
        list-style: none;
        text-align: right;
        @include margin(0);
        @include padding(0);
        a {
	       @include link-colors($primary_color, $secondary_color);
           text-decoration: none;
	       display: block;
	       @include padding(1.55em 0 1.55em 1em);
        }
        li {
	       list-style: none;
	       display: inline-block;
           //fix inline block spacing v
           margin-left:-4px;
	       position: relative;
	       *display: inline;
	       *zoom: 1;
           &:hover > ul,
           &:focus > ul {
               @include transition (all 0.3s ease-out);
	           visibility: visible;
               display: block;
               top:100%;
               margin-top: -1px;
           }
        }
        ul {
	        width: 200px;
	        position: absolute;
            //to align center right:50%
            right:-1em;
	        top: 110%;
            //to align center margin-right:-100px
	        @include margin(0);
            @include padding(0);
            background: #fff;
	        z-index: 999;
	        visibility: hidden;
            display: none;
            border: 1px solid $border_color;
            &:before {
                content: "";
                border-style: solid;
                border-width: 0 9px 9px 9px;
                border-color: transparent transparent $border_color transparent;
                height: 0;
                position: absolute;
                right: 25px;
                top: -9px;
                width: 0;
                cursor: pointer;
            }
            .menu-item-has-children {
               &:before  {
                   font-family: "FontAwesome";
	               content: '\f104';
                   position: absolute;
                   top: 50%;
                   left: 10px;
                   height: 10px;
                   line-height: 10px;
                   margin-top: -5px
                }
              }
            li {
	           float: none;
               display: block;
               margin: 0;
               &:hover > ul,
               &:focus > ul {
                    @include transition (none);
	                position: absolute;
                    right: 100%;
                    top: 0;
                    margin:-1px 0 0 0;
                   
              }
                a {
                    @include padding(1em);
                }
            }
            ul {
                padding: 0;
                &:before { 
                    content: none;
                }
            }
      }
   } 
}
button.menu-toggle {
    display: none;
    }
}
/* Small menu. */
.menu-toggle {
    display: block;
    @include margin (0 0 $base_spacing 0);
}
.header-navigation {
    ul {
        a {
            @include padding(.8em 1em .8em 0); 
        }
    }
}
.main-navigation.toggled {
        ul {
            display: block;
            @include margin (20px 0 $base_spacing 0);
            @include padding (0);
            list-style: none;
            li {
                float: none;
                display: block;
                width: 100%;
                @include padding (0);
                border-top: 1px solid $border_color;
                border-left: 1px solid $border_color;
                border-right: 1px solid $border_color;
                &:last-child {
                    border-bottom: 1px solid $border-color;  
                }
            }
            a {
                display: block;
                text-decoration: none;
                @include padding (10px $base_spacing);
            }
            ul {
                @include margin (0);
                li {
                    background: $light-gray;
                    border-left: none;
                    border-right: none;
                    &:last-child {
                        border-bottom: none;  
                    }
                }
            }
        }
    }