/**

* Vertical Menu
*/

.menu {

margin: 0;
list-style-type: none;
width: 100%;
display: block;
text-align: right;

}

.menu > li {

font-size: 1.5em !important;
text-transform: uppercase;

}

.menu > li > a {

line-height: 1;
padding: 0.7rem 1rem;
display: block;

}

.menu > li > a:hover {

color: $navbar-hover-color;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);

}

.menu .active > a {

background: $navbar-active-color;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);

}

.menu>li.dropdown {

-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
transform: scale(1.0);

}

.menu>.dropdown a {

color: $header-link-color;

}

// Submenus .menu .dropdown ul {

    z-index: 2;
    display: block;
    position: absolute;
margin-left: 100%;
margin-top: -20%;
    opacity: 0;
    background: $navbar-color;
    cursor: pointer;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    -webkit-transition: opacity .22s ease-in;
    -ms-transition: opacity .22s ease-in;
    -moz-transition: opacity .22s ease-in;
    -o-transition: opacity .22s ease-in;
    transition: opacity .22s ease-in;

}

.menu .dropdown ul li {

display: block;
position: relative;
line-height: 20px;
-webkit-transition: height .15s ease-in;
-ms-transition: height .15s ease-in;
-moz-transition: height .15s ease-in;
-o-transition: height .15s ease-in;
transition: height .15s ease-in;

}

// Dropdown menu arrow .menu>.dropdown>a::after {

padding-left: .5em;
content: "\25B8";

}

// Hide Submenus .menu .dropdown .dropdown-child {

display: none;
position: absolute;
top: 100%;
left: 5px;
z-index: 520;
width: auto;

}

// Show Submenu when its parent is hovered .menu>li.dropdown:hover>ul {

display: block;
opacity: 1;

}

// Submenu links .menu .dropdown ul li a {

    /* Layout */
    display: block;
    padding: 10px 0px 10px 0px;
    width: 200px;
text-align: center;
border-bottom: 1px solid lighten($navbar-color, 10%);

    /* Typography */
    font-family: $navbar-font-family;
    font-size: ($navbar-font-size * .92);
    text-decoration: none;
    color: #fefefe;
    font-weight: 400;

    /* Background & effects */
    background: $navbar-color;
    -webkit-transition: color .2s ease-in, border-left-color .2s ease-in;;
    -ms-transition: color .2s ease-in, border-left-color .2s ease-in;;
    -moz-transition: color .2s ease-in, border-left-color .2s ease-in;;
    -o-transition: color .2s ease-in, border-left-color .2s ease-in;;
    transition: color .2s ease-in, border-left-color .2s ease-in;;

}

// Change the link color on hover .menu .dropdown ul li:hover>a {

    color: $navbar-hover-color;
background: lighten($navbar-color, 10%);

}