:root {
    --Color1: #1770aa;
    --Color2: #143a5f;
    --Color3: #4688ba;
    --Color4: #72a2ca;
}


.navbar-inverse {
    background-color: var(--Color1) !important;
    border-color: var(--Color1) !important;
    color: #ffffff;
}

    .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
        color: #ffffff;
        background-color: var(--Color2);
    }

    .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
        color: #fff;
        background-color: var(--Color3);
    }

    .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
        color: #fff;
        background-color: var(--Color4);
    }

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: white !important;
    background-color: var(--Color1) !important;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    color: #fff;
    text-decoration: none;
    background-color: var(--Color3);
    outline: 0;
}

@media only screen and (max-width: 1200px) {
    .dropdown-menu > li {
        color: white !important;
        background-color: white;
    }

    .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
        color: #fff;
        text-decoration: none;
        background-color: var(--Color3) !important;
        outline: 0;
    }

    .menu-item.dropdown.dropdown-submenu > .dropdown-menu {
        margin-left: 50px !important;
    }
}

.BotonLogin {
    background-color: var(--Color1) !important;
}

    .BotonLogin:hover {
        background-color: var(--Color2) !important;
    }