body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: 'Open Sans', sans-serif;  }
a {text-decoration: none;}



.toggleMenu {
    display:  none;
    background:#878787;
    padding: 10px 15px;
    color: #fff;
	width: 100%;
}

.nav {
    list-style: none;
     *zoom: 1;
}


.nav ul { list-style: none; }

.nav li { position: relative; width:calc(90%/4); float: left; text-align:center;  }

#small { width:10%; }


.active a { display: block; color:#000; background-color:#ffffff; height: 50px; line-height: 50px; width: 100%; font-size: 15px; border-bottom: 2px solid #336699; text-decoration:none; }

.active a:hover { background-color:#ffffff; text-decoration:none; border-bottom: 2px solid #336699;}

.nav li a {display: block; color:#000; height: 50px; line-height: 50px; width: 100%; font-size: 15px; text-decoration:none;border-bottom: 2px solid #ffd900; }

.nav li a:hover { background-color:#ffffff; text-decoration:none; border-bottom: 2px solid #336699; }


.nav li ul { position: absolute; left: -9999px; width: 100%; }

.nav > li.hover > ul { left: 0; width: 100%; text-decoration:none; background-color:#ffd900; }

.nav li li.hover ul { left: 100%; top: 0; }

.nav li li { display: block; width: 100%; }

.nav li li a { display: block; color:#000; width: 100%; height: 50px; line-height: 50px; font-size: 15px; text-decoration:none; background-color:#ffd900; border-bottom: 2px solid #FFF; text-align:center; }

.nav li li a:hover {  background-color:#ffffff; border-bottom: 2px solid #336699; text-decoration:none; }



/* 2 */	
@media (min-width: 1025px) and (max-width: 1280px) {
.active a { display: block; color:#000; background-color:#ffffff; height: 50px; line-height: 50px; width: 100%; font-size: 13px; border-bottom: 2px solid #336699; text-decoration:none; }

.nav li a {display: block; color:#000; height: 50px; line-height: 50px; width: 100%; font-size: 13px; text-decoration:none;border-bottom: 2px solid #ffd900; }

.nav li li a { display: block; color:#000; width: 100%; height: 50px; line-height: 50px; font-size: 13px; text-decoration:none; background-color:#ffd900; border-bottom: 2px solid #FFF; text-align:center; }

}


/* 3 */	
@media (min-width: 769px) and (max-width: 1024px) {
.active a { display: block; color:#000; background-color:#ffffff; height: 50px; line-height: 50px; width: 100%; font-size: 11px; border-bottom: 2px solid #336699; text-decoration:none; }

.nav li a {display: block; color:#000; height: 50px; line-height: 50px; width: 100%; font-size: 11px; text-decoration:none;border-bottom: 2px solid #ffd900; }

.nav li li a { display: block; color:#000; width: 100%; height: 50px; line-height: 50px; font-size: 11px; text-decoration:none; background-color:#ffd900; border-bottom: 2px solid #FFF; text-align:center; }
	
	}
	
	

/* 4 */	
@media (min-width: 481px) and (max-width: 768px) {
    .toggleMenu {
    display:  block;
	}
    .active {
        display: none;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }


	}


/* 5 */
@media screen and (max-width: 480px) {
	.toggleMenu {
    display:  block;
	}
    .active {
        display: none;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}