@import url(http://fonts.googleapis.com/css?family=Varela+Round);
body{
  zoom:1;
}
.nav-list{
  list-style:none; 
}

.nav-list a{
  text-decoration:none;
  transition:color 0.3s ease-out;
  color:inherit;
}

.nav-list li{
  position:relative;
  display:inline-block;
  margin:30px;
  letter-spacing:-1px;
  
}


.home:after, 
.home:before,
.home a:after, 
.home a:before{
  background-color:#CEDD3E;
}

.home:hover{
  color:#CEDD3E
}

.aboutus:after, 
.aboutus:before,
.aboutus a:after, 
.aboutus a:before{
  background-color:#F27132;
}

.aboutus:hover{
  color:#F27132;
}

.career:after, 
.career:before,
.career a:after, 
.career a:before{
  background-color:#85C3E9;
}

.career:hover{
  color:#85C3E9;
}

.blog:after, 
.blog:before,
.blog a:after, 
.blog a:before{
  background-color:#FDBE2A;
}

.blog:hover{
  color:#FDBE2A;
}

.nav-list li:after, 
.nav-list li:before, 
.nav-list  a:before, 
.nav-list  a:after{
  position:absolute;
  content:'';
  border-radius:4px;
}

.nav-list li:after,
.nav-list li:before{
  bottom:-4px;
  height:4px;
}

.nav-list li:not(.selected):before{
  left:0;
  right:-2px;
}

.nav-list li.selected:after{
  left:0;
  right:39px; 
}

.nav-list li.selected:before{
  right:-2px;
  width:13px;
}


.nav-list .selected a:before{
  height:22px;
  width:4px;
  bottom:-22px;
  right:7px;
}

.nav-list .selected a:after{
  height:4px;
  width:40px;
  bottom:-13px;
  right:5px;
  transform:rotate(30deg);
}