/* ************************************************************************
 * Top navigation header bar                                              *
 * ********************************************************************** */
.wrapper-sticky {
    height: 65px !important;
}
 
#navigation {
    background-color: #4d4d4d;
    z-index: 100;
}

    #navigation .logo {
        background: url('https://cdn-cx-images.dynamite.myharmony.com/mh/ssv2/headerfooter/harmonylogo-117x32-wht-v2.png') no-repeat;
        display: block;
        width: 117px;
        height: 32px;
        text-indent: -9999px;
        float: left;
        border: 0;
    }

    #navigation form input[type=text] {
        color: #a7a6a9;
        font-size: 11px;
        padding:  0 0 0 10px;
        height: 21px;
        width: 140px;
        border: 0;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        background-color: #FFFFFF;
        opacity: .5;
        -webkit-transition: 150ms ease-in-out;
        -moz-transition: 150ms ease-in-out;
        -o-transition: 150ms ease-in-out;
        -ms-transition: 150ms ease-in-out;
        transition: 150ms ease-in-out;
        float: left;
    }
    
    #navigation form input[type=submit] {
        background: url('https://cdn-cx-images.dynamite.myharmony.com/mh/ssv2/headerfooter/icon-search-15x15-wht-v1.png') no-repeat center center;
        text-indent: -9999px;
        width: 30px;
        height: 21px;
        border: 0;
        margin-left: 1px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        -webkit-transition: 150ms ease-in-out;
        -moz-transition: 150ms ease-in-out;
        -o-transition: 150ms ease-in-out;
        -ms-transition: 150ms ease-in-out;
        transition: 150ms ease-in-out;
    }
    
        #navigation form input[type=text]:hover, #navigation form input[type=text]:focus, #navigation form input[type=submit]:hover,
        #navigation form input[type=text]:hover + input[type=submit], #navigation form input[type=text]:focus + input[type=submit]  {
            opacity: 1 !important;
        }
                    
            #navigation form input[type=text]:focus {
                width: 300px;
            }

/* DESKTOP NAV (move to responsive.css) */
#navigation:not(.mobile) .container {
    height: 78px;
}

    #navigation:not(.mobile) .logo {
        margin: 26px 10px 0 10px;
    }

    #navigation:not(.mobile) ul.menu {
        display: block;
        text-align: center;
        list-style: none;
        margin: 0 0 0 20px;
        padding: 0;
    }
    
        #navigation:not(.mobile) ul.menu li {
            font-size: 14px;
            color: #dbdbdb;
            display: inline-block;
            margin: 40px 10px 0 10px;
            line-height: 17px;
        }
        
            #navigation:not(.mobile) ul.menu li:last-child:before {
                content: ' |';
                padding-right: 25px;
                color: #abaaad;
                font-size: 12px;
            }
            
            #navigation:not(.mobile) ul.menu li:last-child {
                color: #10d1ab;
            }
            
            #navigation:not(.mobile) ul.menu li:hover {
                color: #fff;
            }
    
    #navigation:not(.mobile) .right {
        float: right;
        margin: 36px 10px 0 0;
    }
    
        #navigation:not(.mobile) .right .mobilehamburger {
            display: none;
        }
            
        #navigation:not(.mobile) form input[type=submit] {
            float: left;
            -webkit-transition: 150ms ease-in-out;
            -moz-transition: 150ms ease-in-out;
            -o-transition: 150ms ease-in-out;
            -ms-transition: 150ms ease-in-out;
            transition: 150ms ease-in-out;
        }
    
/* MOBILE NAV */
#navigation.mobile .container {
    height: 60px;
}

    #navigation.mobile .logo {
        margin: 15px 10px 0 10px;
    }

    #navigation.mobile .right {
        float: right;
        position: absolute;
        right: 25px;
        top: 20px;
    }
    
        #navigation .right .mobilehamburger {
            float: right;
            text-indent: -9999px;
            background: url('https://cdn-cx-images.dynamite.myharmony.com/mh/ssv2/headerfooter/icon-hamburger-16x15-wht-v1.png') no-repeat;
            margin: 6px 0 0 0;
            width: 16px;
            height: 15px;
        }
        
            #navigation .right .mobilehamburger:hover {
                cursor: hand; cursor: pointer;
            }
        
        #navigation.mobile form {
            float: right;
            margin: 0 20px 0 0;
        }
        
            #navigation.mobile form input[type=text] {
                display: none;
            }
    
    #navigation.mobile ul.menu:not(.reveal) {
        display: none;
    }
    
    #navigation.mobile ul.menu.reveal {
        float: left;
        width: 100%;
        list-style: none;
        margin: 13px 0 0 0;
        clear: both;
        padding: 0;
        border-top: 2px solid #a6a6a6;
    }
    
        #navigation.mobile ul.menu li {
            padding: 15px 0 5px 10px;
            height: 45px;
            color: #abaaad;
            background-color: #6b6965;
            border-top: 1px solid #a6a6a6;
        }
        
            #navigation.mobile ul.menu li:hover {
                background-color: #4d4d4d;
                cursor: hand; cursor: pointer;
                color: #FFFFFF;
            }









/* ************************************************************************
 * Bottom page footer                                                     *
 * ********************************************************************** */
#footer {
    background-color: #252a2c;
}

#footer p {
    font-size: 11px;
    line-height: 18px;
    color: #808080;
}

#footer h3 {
    font-size: 12px;
    line-height: 12px;
    color: #abaaad;
    margin: 0;
    padding: 0;
    border-width: 0;
}

#footer .panel {
    padding: 20px 5px 0 10px;
}

#footer .panel .panel {
    padding: 0;
}

#footer ul {
    display: block;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer li {
    font-size: 11px;
    line-height: 18px;
    list-style: none;
    color: #808080;
}

#footer li a {
    font-size: 11px;
    line-height: 18px;
    list-style: none;
    color: #808080 !important;
    text-decoration: none;
}

#footer li a:hover {
    color: #abaaad;
}

#footer li:first-child {
    display: inline-block;
    color: #abaaad;
}

#footer .social-button {
    margin-top: 5px;
}

#footer .footDetail {
    font-size: 11px;
    line-height: 18px;
    margin: 0 7px;
}

#footer a, #footer a:visited, #footer a:active {
    text-decoration: none;
    color: #abaaad;
}

#footer a:hover {
    color: #fff;
}