.wrapper{
  display: inline-block;
}

.navbar-container a,.navbar-container a:visited,.navbar-container a:hover,.navbar-container a:active{
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
	position:relative;
  transition:0.5s color ease;
	text-decoration:none;
	color:black;
	font-size:17px;
}
.navbar-container a:hover{
	color:black;
}
.navbar-container a.before:before,.navbar-container a.after:after{
  content: "";
  transition:0.5s all ease;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:absolute;
}
.navbar-container a.before:before{
  top:-0.25em;
}
.navbar-container a.after:after{
  bottom:-0.25em;
}
.navbar-container a.before:before,.navbar-container a.after:after{
  height:0.2rem;
  width:0;
  background:black;
}

.navbar-container .square{
  position:relative;
  font-size:17px;
  overflow:hidden;
  margin-right: 10px;
}
.navbar-container .square a{
  position:static;
  font-size:17px;
}
.navbar-container .square:before,.navbar-container .square:after{
  content: "";
  transition:0.25s all ease;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:absolute;
  width:0.2rem;
  height:0;
  background:black;
}
.navbar-container .square:before{
  left:0;
  bottom:-0.2em;
}
.navbar-container .square.individual:before{
  transition-delay:0.6s;
}
.navbar-container .square:after{
  right:0;
  top:-0.2em;
}
.navbar-container .square.individual:after{
  transition-delay:0.2s;
}
.navbar-container .square a:before{
  left:0;
  transition:0.25s all ease;
}
.navbar-container .square a:after{
  right:0;
  transition:0.25s all ease;
}
.navbar-container .square.individual a:after{
  transition:0.25s all ease 0.4s;
}
.navbar-container .square:hover:before,.navbar-container .square:hover:after{
  height:calc(100% + 0.4em);
}
.navbar-container .square:hover a:before,.navbar-container .square:hover a:after{
  width:100%;
}