/* Border Effect */

.boef a{
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  /* margin: 20px 30px; */
}
.boef span{
  display: block;
  padding: 2px;
}
.boef a::before,
.boef a::after{
  content:"";
  width: 0;
  height: 2px;
  position: absolute;
  transition: all 0.2s linear;
  background: #971C3D; /* bkz */
}

.boef span::before,
.boef span::after{
  content:"";
  width:2px;
  height:0;
  position: absolute;
  transition: all 0.2s linear;
  background: #971C3D; /* bkz */
}
.boef a:hover::before,
.boef a:hover::after{
  width: 100%;
}
.boef a:hover span::before,
.boef a:hover span::after{
  height: 100%;
}


/*----- effect 1 -----*/
.boef-1::before,
.boef-1::after{
  transition-delay: 0.2s;
}
.boef-1 span::before,
.boef-1 span::after{
  transition-delay: 0s;
}
.boef-1::before{
  right: 0;
  top: 0;
}
.boef-1::after{
  left: 0;
  bottom: 0;
}
.boef-1 span::before{
  left: 0;
  top: 0;
}
.boef-1 span::after{
  right: 0;
  bottom: 0;
}
.boef-1:hover::before,
.boef-1:hover::after{
  transition-delay: 0s;
}
.boef-1:hover span::before,
.boef-1:hover span::after{
  transition-delay: 0.2s;
}


/*--- effect 2 -------*/
.boef-2::before,
.boef-2::after{
  transition-delay: 0s;
}
.boef-2 span::before,
.boef-2 span::after{
  transition-delay: 0.2s;
}
.boef-2::before{
  right: 0;
  top: 0;
}
.boef-2::after{
  left: 0;
  bottom: 0;
}
.boef-2 span::before{
  left: 0;
  top: 0;
}
.boef-2 span::after{
  right: 0;
  bottom: 0;
}
.boef-2:hover::before,
.boef-2:hover::after{
  transition-delay: 0.2s;
}
.boef-2:hover span::before,
.boef-2:hover span::after{
  transition-delay: 0s;
}


/*----- effect 3 -----*/
.boef-3::after{
  left: 0;
  bottom: 0;
  transition-delay: 0.6s;
}
.boef-3 span::after{
  transition-delay: 0.4s;
  right: 0;
  bottom: 0
}
.boef-3::before{
  right: 0;
  top: 0;
  transition-delay: 0.2s;
}
.boef-3 span::before{
  transition-delay: 0s;
  left: 0;
  top: 0;
}
.boef-3:hover::after{
  transition-delay: 0s;
}
.boef-3:hover span::after{
  transition-delay: 0.2s;
}
.boef-3:hover::before{
  transition-delay: 0.4s;
}
.boef-3:hover span::before{
  transition-delay: 0.6s;
}


/*----- effect 4 -----*/
.boef-4::after{
  right: 0;
  bottom: 0;
  transition-duration: 0.2s;
}
.boef-4 span::after{
  right: 0;
  bottom: 0;
  transition-duration: 0.2s;
}
.boef-4::before{
  left: 0;
  top: 0;
  transition-duration: 0.2s;
}
.boef-4 span::before{
  left: 0;
  top: 0;
  transition-duration: 0.2s;
}


/*----- effect 5 -----*/
.boef-5::after{
  left:0;
  bottom: 0;
  transition-duration: 0.4s;
}
.boef-5 span::after{
  right:0;
  top: 0;
  transition-duration: 0.4s;
}
.boef-5::before{
  right: 0;
  top: 0;
  transition-duration: 0.4s;
}
.boef-5 span::before{
  left: 0;
  bottom: 0;
  transition-duration: 0.4s;
}


/*----- effect 6 -----*/
.boef-6::before{
  left: 50%;
  top: 0;
  transition-duration: 0.4s;
}
.boef-6::after{
  left: 50%;
  bottom: 0;
  transition-duration: 0.4s;
}
.boef-6 span::before{
  left: 0;
  top: 50%;
  transition-duration: 0.4s;
}
.boef-6 span::after{
  right: 0;
  top: 50%;
  transition-duration: 0.4s;
}
.boef-6:hover::before,
.boef-6:hover::after{
  left: 0;
}
.boef-6:hover span::before,
.boef-6:hover span::after{
  top: 0;
}