/**
 * Specific css for only the navbar on the top
 */

/**
 * Meun Color:
 *
 * Deep Pink #f7725b
 * Light Pink #f68572
 *
 * Orange #f98f4f
 * Light Orange #f9a94a
 *
 * Yellow #fabd2f
 * Light Yellow #fdce62
 *
 * Deep purple #605ca8
 * Light purple #928edf
 *
 * Deep Blue #00aeef
 * Light Blue #77ccec
 *
 * Blue #0069aa
 *
 * Green #8bc53d
 *
 * Red #eb1d4b
 */


/**
 * Position to relative for nav:after to refer
 */
nav {
    position: fixed;
    z-index: 9999;
    width: 1220px;
    top:65px;
    background: #FFFFFF;
    height: 45px;
    z-index    : 9000;

}

/**
 * The top gradient bar
 */
nav:after{
    content: '';
    position: absolute;
    height: 3px;
    width: 100%;
    top: 0;
    left: 0;

    background:
    -webkit-linear-gradient(
            left,
            #f7725b,
            transparent 340px, transparent 885px,
            #00aeef
    );

    background:
    -moz-linear-gradient(
            left,
            #f7725b,
            transparent 340px, transparent 885px,
            #00aeef
    );

    background:
    linear-gradient(
            left,
            #f7725b,
            transparent 340px, transparent 885px,
            #00aeef
    );
}

/**
 * for navigation bar's center align
 */
nav:before {
    content: '';
    position: relative;
    left: 0;
    height: 1px;
    float: left;
    width: 100px;
}

/**
 * normalize the nav bar content
 */

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    /*overflow: hidden;*/
    list-style: none;
    padding-left: 0;
    margin: 0 auto;
    position: relative;
    display: inline-table;
}


nav ul:after {
    content: ""; clear: both; display: block;
}

nav ul li {
    float: left;
}
nav ul li:hover {
    background: #ffffff;
}
nav ul li:hover > a,
nav ul li.active > a
{

}

nav ul li a {
    display: block;
    color: #9d9d9d;
    text-decoration: none;
}

nav ul ul li {
    float: none;
    position: relative;
}
nav ul ul li a {
    color: #9d9d9d;
    background: #ffffff;
    font-size: 13px;
    text-align: left;
    padding: 10px 20px;
    line-height: 1.2em;
    text-transform: capitalize;
}
nav ul ul li a:hover {

}

nav ul ul {

    padding: 0;


}


nav ul ul ul {
    position: absolute; left: 100%; top:0;
}







/**
 * becuase inline-block has some gutters, so chose float:left as the layout
 */
nav li {
    float: left;
    width: 180px;
    /*height: 45px;*/
    line-height: 35px;
}

/**
 * every anchor link should fill the li in the nav bar
 */
nav li > a {
    text-transform: uppercase;
    display: block;
    width: 100%;
    -webkit-transition: all ease .3s;
    -o-transition: all ease .3s;
    transition: all ease .3s;
}
/**
 * normalize the anchor style
 * @type {[type]}
 */
nav li > a:link,
nav li > a:hover,
nav li > a:active,
nav li > a:visited {
    text-decoration: none;
    color: #9d9d9d;
}

nav li > a:hover{
    color: white;
}







/**
 * different nav bars has different background color uppon hover
 */
#nav__home {
    border-top: 10px solid #f7725b;
}
#nav__home > a:hover,
#nav__home.active > a
{
    background: #f68572;
    color: #ffffff ;
}

#nav__company {
    border-top: 10px solid #f98f4f;
}
#nav__company  a:hover,
#nav__company.active > a
{
    background: #f9a94a;
    color: #ffffff ;
}

#nav__solutions {
    border-top: 10px solid #fabd2f;
}
#nav__solutions  a:hover,
#nav__solutions.active > a
{
    background: #fdce62;
    color: #ffffff ;
}

#nav__resources {
    border-top: 10px solid #605ca8;
}
#nav__resources  a:hover,
#nav__resources.active > a
{
    background: #928edf;
    color: #ffffff ;
}

#nav__contact-us {
    border-top: 10px solid #00aeef;
}
#nav__contact-us  a:hover ,
#nav__contact-us.active > a
{
    background: #77ccec;
    color: #ffffff ;
}