/* position and dimensions of the navigator */
.navi {
    width: 100%;
    z-index: 100;
    padding-top:50px;
    float:left;
    clear:both;
}


    /* items inside navigator */
    .navi a {
        width: 15px;
        height: 15px;
        float: left;
        margin: 5px;
        /*background:url(../Img/navegador.jpg) 0 0 no-repeat;*/
        background-color: #003f74;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        display: block;
        -moz-transition: all ease-in .1s;
        -o-transition: all ease-in .1s;
        -webkit-transition: all ease-in .1s;
        transition: all ease-in .1s;
        cursor: pointer;
    }

        /* mouseover state */
        .navi a:hover {
            background-color: #3d87c4;
        }

        /* active state (current page state) */
        .navi a.active {
            background-color: #3d87c4;
            transform: scale(1.5);
        }

@media screen and (max-width:580px) {
    .navi{
        float:none;
        padding-top:0;
        display:block;
        margin:0 auto;
        width:40%;
        display:none;
    }

    .navi a{
        text-align:center;
    }
}


@media screen and (max-width:480px){
    .navi{
        width:200px;
    }
}