/* 
    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: #fff;
$menu-links-hover-color: #DAA520;
$menu-links-hover-background: #fff;
$menu-button-hover-color: #DAA520;

#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>li>a {
        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;
    }
    #menu-button:hover{
        color: $menu-button-hover-color;
    }
    
    &.menu-main-menu-container {
    width: 80%;
    float: left;
    }
   &.menu-social {
    width: 20%;
    float: right;
        #menu-social-items li{
            display: inline-block;
            float: right;
        }
    }
    &.menu-social {
        height: 48px;
    }
    @media screen and (max-width: 60em) {
            &.menu-main-menu-container {
                width: 100%;
                float: none;
            }
           &.menu-social {
                width: 100%;
                float: none;
                ul {
                    display: block;
                    text-align: center;
                 li {
                        width: 33.33%;
                    }
                }
            }

    }
    &.menu-social li a:before {
    display: inline-block;
    vertical-align: center;
    font-family: 'Fontawesome';
    font-size: 1.4rem;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    content: '\f0c0';
    }
    
    &.menu-social li a:hover:before {
        color: #FFD700;
    }

    &.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*="dribbble.com"]::before { content: '\f17d'; }

    &.menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; }

    &.menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; }

    &.menu-social li a[href*="github.com"]::before { content: '\f09b'; }

    &.menu-social li a[href*="tumblr.com"]::before { content: '\f173'; }

    &.menu-social li a[href*="youtube.com"]::before { content: '\f167'; }

    &.menu-social li a[href*="flickr.com"]::before { content: '\f16e'; }

    &.menu-social li a[href*="vimeo.com"]::before { content: '\f194'; }

    &.menu-social li a[href*="instagram.com"]::before { content: '\f16d'; }

    &.menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; }
}