.container_menu {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    width: 100%;
    float:left;
    border-bottom: 5px solid #3286c4;
    /* border-bottom: 5px solid #000080; */
    background-color: #f5f5f5;
}

/* common and top level styles */
#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #F5F5F5;
    float: left;
    position: relative;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 0.9em;
    line-height: 37px;
    padding: 0 8px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #3286c4;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

a.menu {
    color: #777777;
    line-height: 17px;
    font-size: 0.7em;
    /*margin-bottom: 10px;*/
    text-transform: uppercase;
}
a.menu:visited {
    color: #777777;
}
a.menu:hover {
    color: #3286c4;
}

#nav ul li a:hover {
    color: #3286c4;
}
/* responsive rules */
@media all and (max-width : 980px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
}
/*******************************************************************************************/
#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
    color: #333333;
    display: none;
    /*left: 0;*/
    padding: 2%;
    position: absolute;
    top: 42px;
    width: auto;
    z-index:999;
}
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    /*display: inline-block;*/
    float: none;
    padding: 2px;
    vertical-align: top;
    width: 100%;
}
#nav ul.subs > li a {
    /*color: #777777;*/
    line-height: 20px;
}
#nav ul.subs > li > a {
    font-size: 0.7em;
    /*margin-bottom: 10px;*/
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    /*padding-left: 15px;*/
}

/* responsive rules */
@media all and (max-width : 980px) {
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s0:target + ul.subs,
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs,
    #nav li #s3:target + ul.subs,
    #nav li #s4:target + ul.subs,
    #nav li #s5:target + ul.subs,
    #nav li #s6:target + ul.subs,
    #nav li #s7:target + ul.subs,
    #nav li #s8:target + ul.subs,
    #nav li #s9:target + ul.subs,
    #nav li #s10:target + ul.subs,
    #nav li #s11:target + ul.subs,
    #nav li #s12:target + ul.subs,
    #nav li #s13:target + ul.subs,
    #nav li #s14:target + ul.subs,
    #nav li #s15:target + ul.subs,
    #nav li #s16:target + ul.subs,
    #nav li #s17:target + ul.subs,
    #nav li #s18:target + ul.subs,
    #nav li #s19:target + ul.subs,
    #nav li #s20:target + ul.subs {
        display: block;
    }

    #nav ul.subs > li {
        display: block;
        width: auto;
    }
}
/*******************************************************************************************/
ul.subs2 {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
    color: #333333;
    display: none;
    left: 40px;
    padding: 2%;
    position: absolute;
    top: 20px;
    width: auto;
    z-index:999;
}
li li:hover ul.subs2 {
    display: block;
}
ul.subs2 > li {
    /*display: inline-block;*/
    float: none;
    padding: 1%;
    vertical-align: top;
    width: 100%;
}
ul.subs2 > li a {
    color: #777777;
    line-height: 20px;
}

ul.subs2 > li > a {
    font-size: 0.7em;
    /*margin-bottom: 10px;*/
    text-transform: uppercase;
}
ul.subs2 > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
ul.subs2 > li li:hover {
    /*padding-left: 20px;*/
}

/* responsive rules */
@media all and (max-width : 980px) {
    ul.subs2 {
        position: absolute;
        top: 20px;
    }
    li:hover ul.subs2 {
        /*display: none;*/
    }
    li #s1:target + ul.subs2,
    li #s2:target + ul.subs2,
    li #s3:target + ul.subs2,
    li #s4:target + ul.subs2,
    li #s5:target + ul.subs2,
    li #s6:target + ul.subs2,
    li #s7:target + ul.subs2,
    li #s8:target + ul.subs2,
    li #s9:target + ul.subs2,
    li #s10:target + ul.subs2,
    li #s11:target + ul.subs2,
    li #s12:target + ul.subs2,
    li #s13:target + ul.subs2,
    li #s14:target + ul.subs2,
    li #s15:target + ul.subs2,
    li #s16:target + ul.subs2,
    li #s17:target + ul.subs2,
    li #s18:target + ul.subs2,
    li #s19:target + ul.subs2,
    li #s20:target + ul.subs2 {
        display: block;
    }

    ul.subs2 > li {
        display: block;
        width: auto;
    }
}