#navigation-main{width:1014px;
background-color:#FFFFFF;
border-bottom:10px solid #ccc;
margin:auto;
}

.nav{width:1014px;
margin:auto;
background:#fff;
color:#282828
}
.nav ul{margin:0;
padding:0
}

.nav ul li {
list-style: none;
float:left
}

.nav ul li a {
line-height: 60px;
height:50px;
padding:0px 7px 0 7px;
color: #282828;
font-size:11px;
font-weight:520;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
.nav li:nth-child(1) a {
border-bottom: 4px solid #f15f2e;

}
.nav li:nth-child(2) a {
border-bottom: 4px solid #0077d3;
}
.nav li:nth-child(3) a {
border-bottom: 4px solid #25c447;
}
.nav li:nth-child(4) a {
border-bottom: 4px solid #609491;
}
.nav li:nth-child(5) a {
border-bottom: 4px solid #cf1919;
}

.nav li:nth-child(6) a {
border-bottom: 4px solid #02b4c9;
}

.nav li:nth-child(7) a {
border-bottom: 4px solid #8789d7;
}

.nav li:nth-child(8) a {
border-bottom: 4px solid  #c7088f;
}

.nav li:nth-child(9) a {
border-bottom: 4px solid  #996633;
}

.nav li:nth-child(10) a {
border-bottom: 4px solid  #3366CC;
}

.nav li:nth-child(11) a {
border-bottom: 4px solid  #009900;
}

.nav li:nth-child(12) a {
border-bottom: 4px solid  #CC99CC;
}

.nav li:nth-child(13) a {
border-bottom: 4px solid  #CC9900;
}


.nav li:nth-child(1) a:hover {
border-bottom: 55px solid #f15f2e;
color:#420000;
height: 9px;
}
.nav li:nth-child(2) a:hover {
border-bottom: 55px solid #0077d3;
color:#420000;
height: 9px;
}
.nav li:nth-child(3) a:hover {
border-bottom: 55px solid #04b722;
color:#420000;
height: 9px;
}
.nav li:nth-child(4) a:hover {
border-bottom: 55px solid #609491;
height: 9px;
color:#420000;
}
.nav li:nth-child(5) a:hover {
border-bottom: 55px solid #cf1919;
color:#420000;
height: 9px;
}

.nav li:nth-child(6) a:hover {
border-bottom: 55px solid #02b4c9;
color:#420000;
height: 9px;
}

.nav li:nth-child(7) a:hover {
border-bottom: 55px solid #8789d7;
color:#420000;
height: 9px;
}

.nav li:nth-child(8) a:hover {
border-bottom: 55px solid #c7088f;
color:#420000;
height: 9px;
}

.nav li:nth-child(9) a:hover {
border-bottom: 55px solid #996633;
color:#420000;
height: 9px;
}

.nav li:nth-child(10) a:hover {
border-bottom: 55px solid #3366CC;
color:#420000;
height: 9px;
}

.nav li:nth-child(11) a:hover {
border-bottom: 55px solid #009900;
color:#420000;
height: 9px;
}


.nav li:nth-child(12) a:hover {
border-bottom: 55px solid #CC99CC;
color:#420000;
height: 9px;
}


.nav li:nth-child(13) a:hover {
border-bottom: 55px solid #CC9900;
color:#420000;;
height: 9px;
}

@media screen and (min-width: 320px) and (max-width: 768px) {
   #navigation-main {
        width: 100%;
        background-color: #FFFFFF;
        height: auto;
        border-bottom: 10px solid #ccc;
        margin: auto;
    }

    .nav {
        width: 100%;
        height: auto;
        padding-top: 10px;
        margin: auto;
        background: #fff;
        color: #282828;
    }


.nav ul li a {
    padding: 0;
}
.nav ul li a {
    line-height: 20px;
    height: auto;
    padding: 5px;
    color: #282828;
    font-size: 14px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.nav li:nth-child(1) a {
border-bottom: none;

}
.nav li:nth-child(2) a {
border-bottom: none;
}
.nav li:nth-child(3) a {
border-bottom: none;
}
.nav li:nth-child(4) a {
border-bottom: none;
}
.nav li:nth-child(5) a {
border-bottom: none;
}

.nav li:nth-child(6) a {
border-bottom: none;
}

.nav li:nth-child(7) a {
border-bottom: none;
}

.nav li:nth-child(8) a {
border-bottom: none;
}

.nav li:nth-child(9) a {
border-bottom: none;
}

.nav li:nth-child(10) a {
border-bottom: none;
}

.nav li:nth-child(11) a {
border-bottom: none;
}

.nav li:nth-child(12) a {
border-bottom: none;
}

.nav li:nth-child(13) a {
border-bottom: none;
}
.nav li:nth-child(1) a:hover {
border-bottom: none
}
.nav li:nth-child(2) a:hover {
border-bottom: none
}
.nav li:nth-child(3) a:hover {
border-bottom: none
}
.nav li:nth-child(4) a:hover {
border-bottom: none
}
.nav li:nth-child(5) a:hover {
border-bottom: none
}

.nav li:nth-child(6) a:hover {
border-bottom: none
}

.nav li:nth-child(7) a:hover {
border-bottom: none
}

.nav li:nth-child(8) a:hover {
border-bottom: none
}

.nav li:nth-child(9) a:hover {
border-bottom: none
}

.nav li:nth-child(10) a:hover {
border-bottom: none
}

.nav li:nth-child(11) a:hover {
border-bottom: none
}


.nav li:nth-child(12) a:hover {
border-bottom: none
}


.nav li:nth-child(13) a:hover {
border-bottom: none
}


}