#nav-trigger {
  display: none;
  text-align: left; }

  #nav-trigger span {
    width:100%;
    display: inline-block;
    padding: 12px 30px;
    background-color: #f8f8f8;
    color: #000;
    cursor: pointer;
    font-weight:bold;
    text-transform: uppercase;
    border-top: 1px solid #343c3f;
    border-bottom: 1px solid #343c3f;
    }

    #nav-trigger span:after {
    float:right;
    content: "|||";
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    /* IE 9 */
    -webkit-transform: rotate(-90deg);
     -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    /* Safari and Chrome */
    display: inline-block;
  }

     #nav-trigger span:hover {
      background-color: #f8f8f8 }

    #nav-trigger span.open:after {
         content: "✖";
        /* content: "X"; */
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    }

nav {
  font-size: 22px;
  line-height: 1.4;
  }

  nav#nav-main ul li {
   background-color: #f8f8f8;
   width:20%;
   display: inline-block;
   border: 1px solid #343c3f;
   float:left;
   text-align: center;
   }

  nav#nav-main li:nth-child(1), nav#nav-main li:nth-child(2), nav#nav-main li:nth-child(3), nav#nav-main li:nth-child(4), nav#nav-main li:nth-child(5) {
      border-right: none; }

  nav#nav-main li:first-child {
      border-left: none; }

  nav#nav-main a {
    display: block;
    color: #343c3f;
    padding: 13px 0px;
    text-transform:uppercase;
    }

    nav#nav-main a:hover{
      width:100%!important;
      background-color: #fff;
      color: #000;
      -webkit-transition: all 0.4s ease-in-out;
      -moz-transition: all 0.4s ease-in-out;
      -ms-transition: all 0.4s ease-in-out;
      -o-transition: all 0.4s ease-in-out;
     }
 
    nav#nav-mobile {
    position: relative;
    display: none; }

  nav#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #f8f8f8; }

  nav#nav-mobile li {
    display: block;
    padding: 5px 0;
    margin: 0 5px;
    border-bottom: solid 1px #f8f8f8;
    }

    nav#nav-mobile li:last-child {
    border-bottom: none; }

  nav#nav-mobile a {
    display: block;
    color: #343c3f;
    padding: 10px 30px; }

    nav#nav-mobile a:hover {
      background-color: #fff;
      color: #000; }

/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 1200px) {
  #nav-trigger {
  display: block;
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.8;
 }

  nav#nav-main {
    display: none; }

  nav#nav-mobile {
    display: block; z-index:100; } }

/* Submenu
-------------------------------------------------------------- */
.about {
position: relative;
cursor:pointer;
}

.about>a:after {
    content: '';
    position: relative;
    left: 10px;
    top: 17px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000;
    clear: both;
}

.about ul.hiders
{   padding: 2px 2px!important;
    display:none;
    position:absolute;
    z-index:100;
    top:58px;
    left:-2px;
    background-color:#f8f8f8;
    text-align:left!important;
   /*-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.2);*/
}
 .about ul.hiders li {
  border:0!important;
  text-align:left!important;
  min-width:225px!important;
  }
  ul.hiders li a {
      text-transform:none!important;
      width:100%!important;
      padding: 12px!important;
      padding-left: 30px!important;
  }

  ul.hiders li a:hover {
      color:#fff!important;
      background-color:#343c3f!important
  }

  @media all and (max-width: 1200px) {
   ul.hiders li a {
   text-align:center; padding-left: 10px!important; }
 }