/* adds some margin below the link sets  */
        .navbar .dropdown-menu div[class*="col"] {
           margin-bottom:1rem;
        }

        .navbar .dropdown-menu {
          border:none;
          width: 600px !important;
          color: #000;
          /*background-color:#0060c8!important;*/
        }

        /* breakpoint and up - mega dropdown styles */
        @media screen and (min-width: 992px) {
          
          /* remove the padding from the navbar so the dropdown hover state is not broken */
        .navbar {
          padding-top:0px;
          padding-bottom:0px;
        }

        /* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
        .navbar .nav-item {
          padding: .5rem .5rem .5rem .0rem;
          margin:0.rem;
          color: #000 !important;
        }

        /* makes the dropdown full width  */
        .navbar .dropdown {position:static;}

        .navbar .dropdown-menu {
          width:100%;
          left:0;
          right:0;
        /*  height of nav-item  */
          top:45px;
          
          display:block;
          visibility: hidden;
          opacity: 0;
          transition: visibility 0s, opacity 0.3s linear;
          
        }
          
         

          
          /* shows the dropdown menu on hover */
        .navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
          display:block;
          visibility: visible;
          opacity: 1;
          transition: visibility 0s, opacity 0.3s linear;
        }
          
          .navbar .dropdown-menu {
            border: 1px solid rgba(0,0,0,.15);
            background-color: #fff;
          }

        }