li.dropdown > ul.dropdown-menu {
    position: relative;
}

nav.navbar-principal ul.container {
    padding: 0px;
    margin: 0px;
}

nav.navbar-principal {
    overflow: none;
    background-color: transparent;
    border-bottom: 4px solid #101010 !important;
    border-left: none;
    border-right: none;
    padding: 0px;
    margin: 0px;
    margin-bottom: 15px;
    font-weight: bold;
}

nav.navbar-principal > div {
    padding-left: 0px;
}

div.nav-menu-principal >ul.navbar-nav>li>a {
    color: #333;
}
div.nav-menu-principal >ul.navbar-nav>li {
    border-right: 1px solid #d4d3d3;
}

div.nav-menu-principal {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

nav.navbar-principal a:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    transition-duration: 1s;
    color: white !important;
    font-weight: bold;
    
}

div.nav-menu-principal ul.navbar-nav > li.dropdown > a.dropdown-toggle >span {
    float: right;
    margin-left:  50px;
}

input.form-control {
    color: #333;
    background: rgba(242, 242, 242, 0.25);
    border: none;
    font-weight: normal;
}

#custom-search-input {
    margin: 0;
    margin-top: 10px;
    padding: 0;
    width: 250px;
    height: 30%;
    float: right;
}

#custom-search-input .search-query {
    padding-right: 3px;
    padding-right: 4px \9;
    padding-left: 3px;
    padding-left: 4px \9;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#custom-search-input button {
    border: 0;
    background: none;
    /** belows styles are working good */
    padding: 2px 5px;
    margin-top: 2px;
    position: relative;
    left: -28px;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #333;
    z-index: 3;
}

@media (max-width: 408px) {
    #custom-search-input {
        /* barra de busqueda  */
        margin: 0;
        margin-top: 10px;
        padding: 0;
        width: 100px;
        height: 30%;
        float: right;
    }
}



@media (min-width: 1200px) {
    li.dropdown > ul.dropdown-menu {
        position: absolute;
        width: 800px;
        height: auto;
        left: -150px;
        background-color: rgba(0, 0, 0, 0.81);
        
    }
     li.dropdown > ul.dropdown-menu li {
         width: 45%;
        height: 50px;
        display: inline-block;
         color: white;
         margin-left:  4%;
         padding-top: 2%;
         

    }
     li.dropdown > ul.dropdown-menu >li >a {
        width: auto;
        height: auto;
       
         color: rgba(255, 254, 254, 0.83);
    }
    li.dropdown > ul.dropdown-menu >li.active>a{
        background-color: white;
        color:black;
        font-weight: bold;
    }
    
}

@media (max-width: 1200px) {
    li.dropdown > ul.dropdown-menu {
        position: relative;
        width: 100%;
        box-shadow: none;
    }
    li.dropdown > ul.dropdown-menu >li >a {
       
        align-content: center;
        padding-left: 20%;
        padding-top: .7%;
    }
    li.dropdown > ul.dropdown-menu >li.active>a{
        background-color: #777;
        color:black;
        font-weight: bold;
    }
    div.container >nav.navbar-default >.navbar-header {
        float: none;
    }
    div.container >nav.navbar >div.navbar-header> button.navbar-toggle {
        display: block !important;
    }
    div.container >nav.navbar >div.navbar-header {
        display: inline-block!important;
    }
    div.container >nav.navbar-default >.navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    nav.navbar-default >.navbar-collapse.collapse {
        display: none!important;
    }
    nav.navbar-default >div.navbar-collapse > ul.navbar-nav {
        float: none!important;
        margin-top: 7.5px;
        height: auto ;
    }
    nav.navbar-default >div.navbar-collapse >.navbar-nav>li {
        float: none;
    }
    nav.navbar-default >div.navbar-collapse >.navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    nav.navbar-default >.collapse.in {
        display: block !important;
    }
    nav.navbar-default >.navbar-collapse.in {
        overflow-y: auto !important;
    }
    div.nav-menu-principal >ul.navbar-nav > li.dropdown > a.dropdown-toggle >span {
        visibility: visible;
    }
}