@charset "utf-8";
/* CSS Document */


.button{
  display: inline-block;
  position: relative;
  border: none;
  /*color: #fff;
  font-size: 18px;
	margin: 20px 30px;
  background: rgba(0,0,0,0.09);
	background: none;
	*/
  cursor: pointer;

}
.button span, .button .span {
  display: block;
  padding: 25px 80px;
}
.button::before, .button::after{
  content:"";
  width: 0;
  height: 4px;
  position: absolute;
  transition: all 0.2s linear;
  background: rgba(163,191,42,1.00);
}

.button span::before, .button span::after, .button .span::before, .button .span::after {
  content:"";
  width:4px;
  height:0;
  position: absolute;
  transition: all 0.2s linear;
  background: rgba(163,191,42,1.00);
}
.button:hover::before, .button:hover::after{
  width: 100%;
}
.button:hover span::before, .button:hover span::after, .button:hover .span::before, .button:hover .span::after{
  height: 100%;
}
/*----- button 1 -----*/
.btn-1::before, .btn-1::after{
  transition-delay: 0.2s;
}
.btn-1 span::before, .btn-1 span::after{
  transition-delay: 0s;
}
.btn-1::before{
  right: 0;
  top: 0;
}
.btn-1::after{
  left: 0;
  bottom: 0;
}
.btn-1 span::before{
  left: 0;
  top: 0;
}
.btn-1 span::after{
  right: 0;
  bottom: 0;
}
.btn-1:hover::before, .btn-1:hover::after{
  transition-delay: 0s;
}
.btn-1:hover span::before, .btn-1:hover span::after{
  transition-delay: 0.2s;
}

/*--- Button 2 -------*/


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


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

.btn-3:hover::after{
  transition-delay: 0s;
}
.btn-3:hover span::after{
  transition-delay: 0.2s;
}
.btn-3:hover::before{
  transition-delay: 0.4s;
}
.btn-3:hover span::before{
  transition-delay: 0.6s;
}

/*----- button 4 -----*/
.btn-4::after{
  right:0;
  bottom: 0;
  transition-duration: 0.4s;
}
.btn-4 span::after{
  right:0;
  bottom: 0;
  transition-duration: 0.4s;
}
.btn-4::before{
  left: 0;
  top: 0;
  transition-duration: 0.4s;
}
.btn-4 span::before{
  left: 0;
  top: 0;
  transition-duration: 0.4s;
}

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

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