* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

nav {
    width: 99%;
    margin: 2px auto;
    overflow: hidden;
}

nav ul {
    list-style: none;
    overflow: hidden;
}

nav li a {
    background-color:#b323af;
    border-right: 1px solid #fff;
    color: #fff;
    display: block;
    float: left;
    font: 400 18px/1.4 'Oleo Script', cursive;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    padding: 9px 108px;
    -webkit-transition: background 0.5s ease;
    -moz-transition: background 0.5s ease;
    -o-transition: background 0.5s ease;
    -ms-transition: background 0.5s ease;
    transition: background 0.5s ease;
}

@media(min-width:768px) and (max-width:989px){
    nav li a{
        border-right: none;
        border-bottom: none;
        line-height: 29px !important;
    }

        .navbar-nav>li>a {
            font-size: 16px !important;
            padding: 10px 15px !important;
        }

                .navbar .navbar-collapse.in {
                    border: none;
                }
}

@media(max-width:767px){
    nav li a {
        border-bottom: 1px solid #fff;
        }
}


nav li a:hover {
    background: #222;
}


/*SMALL*/

nav small {
    font: 100 11px/1 Helvetica, Verdana, Arial, sans-serif;
    text-transform: none;
    color: #aaa;
}


/*BORDER FIX*/

nav li:last-child a {
    border: none;
}


/*BLUE MENU*/

nav .blue {
    margin-top: 50px;
}

.blue li a {
    background: #75b1de;
}

.blue small {
    color: white;
}

.blue li a:hover {
    background: #444;
}


/*RED MENU*/

nav .red {
    margin-top: 50px;
}

.red li a {
    background: #5C0002;
}

.red small {
    color: white;
}

.red li a:hover {
    background: #a60306;
}


/* MEDIA QUERIES*/

@media only screen and (max-width: 1220px),
only screen and (max-device-width: 1220px) {
    nav li a {
        font: 400 18px/1.4 'Oleo Script', cursive;
    }
    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%;
        
        font: 400 16px/1.4 'Oleo Script', cursive;
    }
    nav li:last-child a,
    nav li:nth-child(4) a {
        border-right: none;
    }
    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-bottom: none;
    }
}

@media only screen and (max-width: 580px),
only screen and (max-device-width: 580px) {
    nav li a {
        width: 50%;
        font: 400 18px/1.4 'Oleo Script', cursive;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    nav li:nth-child(even) a {
        border-right: none;
    }
    nav li:nth-child(5) a,
    nav li:nth-child(6) a {
        border-bottom: 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 'Oleo Script', cursive;
    }
}