.has-sub > a::before {

        position: absolute;
        right: 0px;
        font-family: FontAwesome;
        content: "\f107";
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }

    .topbar {
      /* background: #f0f0f0!important; */
      background: #693b9d !important;
      color: white;
      padding-left: 0;
      border-radius: 2px;
      position: fixed;
      top: 60px;

      width: 100%;
      /* margin-left: auto; */
      /* margin-right: auto; */
      z-index: 50;
      transition: top 0.2s;
      /* border-top: solid 1px rgba(0,0,0,0.1); */

      transform: translate(0);
box-shadow: 0 1px 3px rgba(0,0,0,.25);
  }

  .topbar span
  {
    color : white !important ;
  }
    #mainnav {
      display: table;
      background: white !important;
       text-align: center;
    height : 60px;
 border-radius: 2px;
 margin-left: auto;
 margin-right: auto;
    /* margin-top : 75px; */
    text-transform : uppercase;



    z-index: 200;
    }

    #mainnav ul {
      margin: 0;
      padding: 0;
      list-style: none;

    }

    #mainnav ul li
    {
      height : 50px;
      text-align : center;
      padding: 13px 10px;
      border-bottom: 4px solid transparent;
      /* transition: all linear 0.25s; */
    }
    #mainnav ul li:hover {
      border-top: 4px solid #0FB8B5;
      padding-top: 9px;
  }

  #mainnav ul li.active {
    border-top: 4px solid #0FB8B5;
    padding-top: 9px;
  }
    #mainnav ul li a
    {
      margin-top: 5px;
      
      color: #400 !important;
      font-size: 16px;

    }

    #mainnav ul ul li a
    {
        /* transition: all 0.2s; */
    margin-top: 0;

    }


    #mainnav ul ul li
    {
    z-index: 200;

    }

    #mainnav ul li:before
    {
    position: absolute;

    right: 2px;

    top: 9px;
    color: rgba(255,255,255,0.15);

    font-family: FontAwesome;

    content: "|";
    }

    #mainnav ul ul {
      opacity: 0;
      position: absolute;
      top: 160%;
      visibility: hidden;
      transition: all .4s ease;
      -webkit-transition: all .4s ease;
    }

    #mainnav ul ul ul {
      top: 0%;
      left: 160%;
    }

    #mainnav ul ul li:hover > ul {
      top: 0%;
      left: 100%;
      opacity: 1;
      visibility: visible;
    }

    #mainnav ul li:hover > ul {
      opacity: 1;
      top: 100%;
      visibility: visible;
    }

    #mainnav ul li {
      float: left;
      position: relative;
    }

    #mainnav ul ul li { float: none;
    min-width : 500px;
    }

    #mainnav ul li {

      cursor: pointer;
    }
    #mainnav ul ul a {
       min-width : 400px;
    text-align : left;
    }
    #mainnav ul a {

      text-decoration: none;
      display: block;
      color: #FFF;


 
    font-size: 16px;
      text-align: center;

      text-shadow: 0px -1px 0px rgba(0,0,0,.2);
    }

    #mainnav ul li:hover {
        /* background-color: #007373;  */
        color: black;
    }

    #mainnav ul li a:hover {
         /* background-color: #007373;  */
         color: black;
        }