.btn.btn-border-1 {
  position: relative;
  background: #ffffff;
  border: 3px solid white;
  transition: ease-out 0.5s;
  -webkit-transition: ease-out 0.5s;
  -moz-transition: ease-out 0.5s;
  border-radius: 0;
}

.btn.btn-border-2 {
  position: relative;
  border: 3px solid var(--secondary-color);
  color: var(--primary-color) !important;
  transition: ease-out 0.5s;
  -webkit-transition: ease-out 0.5s;
  -moz-transition: ease-out 0.5s;
  border-radius: 0;
}

.btn.btn-border-3 {
  border: 3px solid var(--secondary-color);
  color: var(--tprimary-bg-color) !important;
  transition: ease-out 0.5s;
  -webkit-transition: ease-out 0.5s;
  -moz-transition: ease-out 0.5s;
  border-radius: 0;
}

.btn.btn-border-1::after, .btn.btn-border-1::before, .btn.btn-border-2::after, .btn.btn-border-2::before, .btn.btn-border-3::after, .btn.btn-border-3::before {
  position: absolute;
  content: "";
  width: 0%;
  height: 0%;
  visibility: hidden;
}

.btn.btn-border-1::after {
  bottom: -3px;
  right: -3px;
  border-left: 3px solid var(--tprimary-bg-color);
  border-bottom: 3px solid var(--tprimary-bg-color);
  transition: width .1s ease .1s, height .1s ease, visibility 0s .2s;
}

.btn.btn-border-2::after {
  bottom: -3px;
  right: -3px;
  border-left: 3px solid var(--primary-color);
  border-bottom: 3px solid var(--primary-color);
  transition: width .1s ease .1s, height .1s ease, visibility 0s .2s;
}

.btn.btn-border-3::after {
  bottom: -3px;
  right: -3px;
  border-left: 3px solid var(--tprimary-bg-color);
  border-bottom: 3px solid var(--tprimary-bg-color);
  transition: width .1s ease .1s, height .1s ease, visibility 0s .2s;
}

.btn.btn-border-1::before {
  top: -3px;
  left: -3px;
  border-top: 3px solid var(--tprimary-bg-color);
  border-right: 3px solid var(--tprimary-bg-color);
  transition: width .1s ease .3s, height .1s ease .2s, visibility 0s .4s;
}

.btn.btn-border-2::before {
  top: -3px;
  left: -3px;
  border-top: 3px solid var(--primary-color);
  border-right: 3px solid var(--primary-color);
  transition: width .1s ease .3s, height .1s ease .2s, visibility 0s .4s;
}

.btn.btn-border-3::before {
  top: -3px;
  left: -3px;
  border-top: 3px solid var(--tprimary-bg-color);
  border-right: 3px solid var(--tprimary-bg-color);
  transition: width .1s ease .3s, height .1s ease .2s, visibility 0s .4s;
}

.btn.btn-border-1:hover, .btn.btn-border-2:hover, .btn.btn-border-3:hover {
  animation: pulse 1s ease-out .4s;
  color: var(--tprimary-bg-color);
}

.btn.btn-border-1:hover::after, .btn.btn-border-1:hover::before, .btn.btn-border-2:hover::after, .btn.btn-border-2:hover::before, .btn.btn-border-3:hover::after, .btn.btn-border-3:hover::before {
  width: calc(100% + 6px);
  height: calc(100% + 3px);
  visibility: visible;
  transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn.btn-border-1:hover::after, .btn.btn-border-2:hover::after, .btn.btn-border-3:hover::after {
  transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn.btn-border-1:hover::before, .btn.btn-border-2:hover::before, .btn.btn-border-3:hover::before {
  transition: width .1s ease, height .1s ease .1s;
}

.btn.focus, .btn:focus {
  color: white !important;
  height: 120px !important;
}

.btn.focus, .btn:focus, .btn:hover {
  color: white !important;
}

.btn.btn-border-2.focus, .btn.btn-border-2:focus, .btn.btn-border-2:hover, .btn.btn-border-3.focus, .btn.btn-border-3:focus, .btn.btn-border-3:hover {
  color: var(--secondary-color) !IMPORTANT;
}

.btn:focus, .form-control:focus {
  box-shadow: none;
}

.btn.focus, .btn:focus {
  color: white !important;
  height: 120px !important;
}

.btn.focus, .btn:focus, .btn:hover {
  color: white !important;
}

.btn.focus, .btn:focus {
  color: white !important;
  height: 120px !important;
}

.btn.focus, .btn:focus, .btn:hover {
  color: white !important;
}

.btn:focus, .form-control:focus {
  box-shadow: none;
}

.border-btn {
  padding: 15px 20px;
  border-style: solid;
  border-color: white;
}

.border-btn:hover {
  transition: .5s;
  background: white;
}