/* ========== MAIN DIV THAT HOLDS THE ENTIRE MENU ========== */
.menu_container {
    width: 100%;
    height: 67px;
    background: transparent;
    overflow: hidden;
}

.menu {
    height: 36px;
    background: transparent;
}
    /* ========== DIV THAT HOLDS MAIN LINKS ========== */
    .menu ul {
        margin: 0;
        padding: 0;
        position: relative;
        float: left;
        list-style: none;
    }
        /* ========== MAIN LINKS ========== */
        .menu ul li {
            float: left;
        }

            .menu ul li a {
                display: block;
                height: 36px;
                padding: 0 13px;
                font: 19px/37px "Titillium Web";
                color: #FFF;
                text-decoration: none;
                border-right: solid 1px #efefef;
                -webkit-transition: color 170ms linear 20ms, background 170ms linear 20ms;
                -moz-transition: color 170ms linear 20ms, background 170ms linear 20ms;
                -ms-transition: color 170ms linear 20ms, background 170ms linear 20ms;
                -o-transition: color 170ms linear 20ms, background 170ms linear 20ms;
                transition: color 170ms linear 20ms, background 170ms linear 20ms;
            }

    /* ========== MAIN LINKS ON MOUSEOVER ========== */
    .menu > ul:hover > li.active > a {
        color: #FFF;
        background: transparent;
    }

    .menu ul li.active > a, .menu > ul > li.active:hover > a, .menu > ul > li:hover > a {
        color: #fff;
        background: #efefef;
    }
    /* ========== MAIN LINKS ON MOUSE CLICK ========== */
    .menu ul li a:active, .menu > ul > li.active > a:active {
        background: #efefef;
    }
    /* ========== SUBMENU ========== */
    .menu ul ul {
        width: 100%;
        height: 31px;
        position: absolute;
        left: 0;
        visibility: hidden;
        opacity: 0;
        margin-top: 31px;
        -webkit-transition: all 300ms ease-out;
        -moz-transition: all 300ms ease-out;
        -ms-transition: all 300ms ease-out;
        -o-transition: all 300ms ease-out;
        transition: all 300ms ease-out;
    }

    .menu ul:hover li.active ul {
        visibility: hidden;
        opacity: 0;
        margin-top: 31px;
    }

    .menu ul li.active ul, .menu ul li.active:hover ul, .menu ul li:hover ul {
        visibility: visible;
        opacity: 1;
        margin-top: 0;
    }
    /* ========== LINKS IN SUBMENU ========== */

    .menu ul ul li {
        height: 100%;
    }

        .menu ul ul li a {
            height: 100%;
            padding: 0 10px;
            font-size: 16px;
            color: #fff;
            line-height: 34px;
            border-right: none;
            -webkit-transition: color 190ms ease-in-out 10ms, background 190ms ease-in-out 10ms;
            -moz-transition: color 190ms ease-in-out 10ms, background 190ms ease-in-out 10ms;
            -ms-transition: color 190ms ease-in-out 10ms, background 190ms ease-in-out 10ms;
            -o-transition: color 190ms ease-in-out 10ms, background 190ms ease-in-out 10ms;
            transition: color 190ms ease-in-out 10ms, background 190ms ease-in-out 10ms;
        }

        .menu ul ul li:first-child a {
            padding-left: 13px;
        }
        /* ========== LINKS ON MOUSEOVER IN SUBMENU ========== */
        .menu ul ul li.active a {
            color: #FFF;
            background: #efefef;
        }

        .menu ul ul li:hover a {
            color: #FFF;
        }
        /* ========== LINKS ON MOUSE CLICK IN SUBMENU ========== */
        .menu ul ul li a:active {
            background: #efefef;
        }
    /* ========== SOCIAL ICONS ========== */
    .menu .social {
        float: right;
    }

        .menu .social li a {
            padding: 0 8px;
            font-size: 16px;
            color: #fff;
            border-right: none;
        }

.social li a i {
    line-height: 40px;
}

.menu .social li:hover a {
    color: #FFF;
}

.menu .social li a:active {
    color: #fff;
}