/* 
    MENU STYLES
*/

$menu-background: #000;
$menu-background-opacity: 0.85;
$menu-links-font-size: 1.4rem;
$menu-links-font-size-level-2: 1.3rem;
$menu-font-weight: 700;
$menu-links-text-transform: uppercase;
$menu-links-color: #959595;
$menu-links-hover-color: black;
$menu-links-hover-background: white;
$menu-button-hover-color: #fff;

/* The Cssmenu */

#site-navigation #cssmenu {
    background: $menu-background;
    /*opacity: $menu-background-opacity;*/
    font-family: $font-headings; //declared in _fonts.scss
    font-weight: $menu-font-weight;
    text-transform: $menu-links-text-transform;
    ul {
        max-width: 1100px;
        margin: 0 auto;
    }
    ul>li>a {
        color: $menu-links-color;
        font-size: $menu-links-font-size;
        text-transform: $menu-links-text-transform;
    }
    ul>li>ul>li>a {
        font-size: $menu-links-font-size-level-2;
        font-weight: $menu-font-weight;
        text-transform: $menu-links-text-transform;
    }
    ul > li:hover > a, ul > li > ul > li:hover > a {
      color: $menu-links-hover-color;
    }
    ul > li:hover, ul > li > ul > li:hover, ul > li:hover > a{
      color: $menu-links-hover-color;
      background: $menu-links-hover-background;    
    }
    
    //Overwriting the colors of the arrow
    ul > li.has-sub > a:before {
        border-top-color: black;
    }
    
    ul li ul li:hover:after, #cssmenu ul li ul li.active:after {
        background: black;
    }
    
    #menu-button:hover{
        color: $menu-button-hover-color;
    }

}

/*--------------------------------------------------------------
5.2.X Social Menu
--------------------------------------------------------------*/
/* Font Awesome Icons */

#menu-social ul li a {
    float:left;
    margin-left: 10px;
}

#menu-social ul li a:before {
    font-family: 'FontAwesome';
    font-size: 2.5px;
    font-size: 2.5rem;
    content: '\f0d4';
    color: #2f3633;
}

/* Menu uses Font Awesome icons */
#menu-social li a[href*="facebook.com"]::before { content: '\f09a'; }
#menu-social li a[href*="twitter.com"]::before { content: '\f099'; }
#menu-social li a[href*="github.com"]::before { content: '\f09b'; }
#menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; }
#menu-social li a[href*="wordpress.com"]::before, 
#menu-social li a[href*="wordpress.org"]::before { content: '\f19a'; }
#menu-social li a[href*="tumblr.com"]::before { content: '\f173'; }
#menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; }
#menu-social li a[href*="dribbble.com"]::before { content: '\f17d'; }
#menu-social li a[href*="instagram.com"]::before { content: '\f16d'; }
#menu-social li a[href*="vimeo.com"]::before { content: '\f194'; }
#menu-social li a[href*="youtube.com"]::before { content: '\f167'; }
#menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; }
#menu-social li a[href*="flickr.com"]::before { content: '\f16e'; }
#menu-social li a[href*="bitbucket.com"]::before { content: '\f171'; }
#menu-social li a[href*="digg.com"]::before { content: '\f1a6'; }
#menu-social li a[href*="reddit.com"]::before { content: '\f1a1'; }
#menu-social li a[href*="codepen.io"]::before { content: '\f1cb'; }
#menu-social li a[href*="behance.com"]::before { content: '\f1b4'; }
#menu-social li a[href*="slideshare.net"]::before { content: '\f1e7'; }
#menu-social li a[href*="/feed"]::before { content: '\f413'; }

#menu-social ul li {
    padding: 0 10px;
}
#menu-social, #menu-social-items {
    padding: 0;
    @include clearfix();
}

#menu-social-items {
    margin: 0;
}

#menu-social {
    margin-top: 20px;
}



