* {
  box-sizing: border-box;
}

h1{
  font-size:1em;
  text-align:center;
  color:#eee;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px rgba(200, 225, 247, 0.9);
  padding: 20px;
}
.nav-container {
  width: 100%;
  box-shadow: 0px 1px 10px rgba(235, 235, 235, 0.9);
  transition: all 0.5s linear;
}
.nav-sub {
  list-style-type: none;
  margin:0;
  padding:0;
}
.nav-sub li{
  height: 50px;
  position:relative;
  background:#ffffff;
  font-family: 'Roboto', sans-serif !important;
}
.nav-sub a {
  border-top: 1px solid rgb(239 239 239, 1);
  border-bottom: 1px solid rgba(223, 223, 223, 1);
  text-decoration: none;
  display:block;
  height:100%;
  width:100%;
  line-height:50px;
  color:#555555;
  text-transform: uppercase;
  font-weight: 800;
  padding-left:10px;
  border-left: 5px solid transparent;
  /*letter-spacing: 1px;*/
  transition:all 0.3s linear;
  font-family: 'Roboto', sans-serif !important;
  font-size:12px !important;
}
.nav-sub > .text {
  transition: all .4s linear;
}
.nav-sub li:hover .text{
 margin-left:20px
}
.nav-sub > .active a {
  color: #ffffff;
  /* border-left:1px solid #ffffff;*/
  background-color: #00415f;
  outline:0;
}
.nav-sub li:not(.active):hover a{
  color: #eee;
  
  background-color: #00415f;
}

.nav-sub span[class ^= "icon"]{
  position:absolute;
  left:20px;
  font-size:1.5em;
  transition: all 0.3s linear;
}

@media only screen and (max-width : 860px){
  .text{
    display:none;
  }
  .nav-container, a {
    width: 70px;
  }
  a:hover{
    width: 200px;
    z-index:1;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid black;
    box-shadow: 0 0 1px 1px black;
  }
  a:hover .text {
    display:block;
    padding-left: 30%;    
  }
  
}
@media only screen and (max-width: 480px){
  .nav-container, a{ width:50px; }
  span[class ^= "icon"]{left:8px;}
}