/* Never display the parent theme navigation */
#navigation,
#navigation-left-side,
#navigation-right-side {
    display: none !important;
}

/* Hide custom menu on smaller screens */
.menu-container {
    display: none;
}

/* Show menu if screen is 959px wide or more - parent theme show mobile menu at 960px */
@media only screen and (min-width: 959px) {

    /* Hide the default header */
    #header {
        display: none !important;
    }

    .menu-container {
    display: inline-block;
      box-sizing: border-box;
    }
    .menu-container *,
    .menu-container *:before,
    .menu-container *:after {
      box-sizing: inherit;
    }

    .menu-container {
        /*background: pink;*/
        width: 400px;
        margin-bottom: 100px;

        display: inline-block;

        position: absolute;
        top: 0;
        left: 0;
    }

    /* Push down menu if showing admin bar */
    .admin-bar .menu-container {
        top: 32px;
    }

    .branded-menu {
        /*padding-top: 24px;*/
        /*padding-left: 20px;*/
        /*background: yellow;*/
        display: inline-block;
        font-family: 'GothamMedium', sans-serif;
        font-weight: 400;
        font-size: 32px;
        position: relative;
        padding: 24px 0 24px 20px;

        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
        z-index: 20;
    }



    /* Element inserted via JS */
    .branded-menu-background {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -10;
        /* @TODO: better z-index */
            /* Dev */
            /*background: rgba(255, 255, 255, 0.6);*/
    }

    /* Element inserted via JS */
    .branded-menu-background-bottom {
        /*height: 40px;*/
        /*background: red;*/
        position: absolute;
        /*top: 574px; */
        left: 0;
        right: 0;
        bottom: 0;
    }

    .branded-menu:hover {
        cursor: pointer;
    }

    .branded-menu:hover .branded-menu-background {
        background: rgba(255, 255, 255, 0.6);
    }

    .branded-menu:hover .branded-menu-background-bottom {
        background: #f1f2f2;
    }

    .branded-menu .branding a {
        opacity: 1;
    }
    .branded-menu a {
        opacity: 0;
            /* Dev... */
            /*opacity: 1;*/
    }
    .branded-menu a span {
        opacity: 0;
        /*font-family: 'GothamBook', sans-serif;*/
        /*font-family: 'GothamMedium', sans-serif;*/
        font-size: 20px;
            /* Dev... */
            /*opacity: 1;*/
        /*color: red;*/
    }

    .branded-menu .branding a span {
        font-size: 26px;
    }

    .branded-menu a:hover span {
        opacity: 1;
    }
    .branded-menu:hover a,
    .branded-menu:hover .branding span {
        opacity: 1;
    }
    /*.branded-menu:hover .branding:before {
        opacity: 0;
    }*/
    /*
    .branded-menu:hover {
        background: rgba(255, 255, 255, 0.4);
    }
    */


    .branded-menu .no-bullets {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .branded-menu .branding,
    .branded-menu .menu li {
        margin: 0;
    }


    .branded-menu .branding a,
    .branded-menu .menu li a {
        /*line-height: 90px;   circle width - border */
        line-height: 80px;
        text-decoration: none;
        display: inline-block;
        margin: 6px 0;

        position: relative; /* added for after */
    }

    .branded-menu a,
    .branded-menu .branding a:before {
        color: #393d7b;
        /* Dev... */
        /*color: red;*/
    }
    .branded-menu a:before,
    .branded-menu .branding a {
        color: #fff;
        /* Dev... */
        /*color: red;*/
    }

    .branded-menu a:hover {
        /*color: #393d7b;*/
        color: #fff;
    }

    .branded-menu .branding a:before,
    .branded-menu .menu a:before,
    .branded-menu .menu a:after {
        content:'re';
        text-align: right;
        display: inline-block;
        padding-right: 4px;

        background: #9E9E9E;
        width: 98px;
        height: 98px;
        border-radius: 49px;
        border: 10px solid #d8dd2b;
        /*border: 10px solid #c9d74e;*/
        margin-right: 2px;
        /* Dev... */
        /*border-color: red;*/

    }

    .branded-menu .menu a:before,
    .branded-menu .menu a:after {
        color: transparent;
    }

    .branded-menu .menu a:after {
        position: absolute;
        top: 10px;
        left: 10px;
        border: none;
        width: 78px;
        height: 78px;
        background: transparent;
        opacity: 0;
    }
    .branded-menu .menu a:hover:after {
        content:'re';
        background: #000;
        color: #fff;
        opacity: 1;
    }


    .branded-menu .branding a:before {
        /*background: #393d7b;*/
        background: rgba(255, 255, 255, 0.75);
        /* Dev... */
        /*opacity: .5;*/
    }

    .branded-menu .branding a:hover:before {
        background: #393d7b;
        color: #fff;
    }

    .branded-menu .menu a:hover:before {
        background: #757575;
        border-color: transparent;
    }

    /* Tweak for better bg break between branding words
     * Doesn't work in Safari
     * @TODO: Consider moving to JS
     */
    .branding_word_build {
        margin-left: 1px;
    }
}