*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}nav{width:100%;margin:0 2px 0 -6px;overflow:hidden}nav ul{list-style:none;overflow:hidden}nav li a{background-color:#000;border-right:1px solid #fff;color:#fff!important;display:block;float:left;font:400 15px/1.4;padding:10px;text-align:center;text-decoration:none;text-transform:capitalize;width:10%;border:1px solid #fff;letter-spacing:1px;-webkit-transition:background .5s ease;-moz-transition:background .5s ease;-o-transition:background .5s ease;-ms-transition:background .5s ease;transition:background .5s ease}nav li a:hover{background:#222}nav small{font:100 11px/1 Helvetica,Verdana,Arial,sans-serif;text-transform:none;color:#aaa}nav .blue{margin-top:50px}.blue li a{background:#75b1de}.blue small{color:white}.blue li a:hover{background:#444}nav .red{margin-top:50px}.red li a{background:#5c0002}.red small{color:white}.red li a:hover{background:#a60306}@media only screen and (max-width :1220px),only screen and (max-device-width :1220px){nav li a{font:400 18px/1.4;border:1px solid #fff;width:20%}nav small{font:100 10px/1 Helvetica,Verdana,Arial,sans-serif}}@media only screen and (max-width :930px),only screen and (max-device-width :930px){nav li a{width:25%;border:1px solid #fff}nav li:last-child a,nav li:nth-child(4) a{border:1px solid #fff}nav li:nth-child(5) a,nav li:nth-child(6) a,nav li:nth-child(7) a,nav li:nth-child(8) a{border:1px solid #fff}}@media only screen and (max-width :580px),only screen and (max-device-width :580px){nav li a{width:50%;padding-top:12px;padding-bottom:12px}nav li:nth-child(even) a{border:1px solid #fff}nav li:nth-child(5) a,nav li:nth-child(6) a{border:1px solid #fff}}@media only screen and (max-width :320px),only screen and (max-device-width :320px){nav li a{font:400 18px/1.4 'BebasNeueRegular',cursive}}