// Button Style
.btn-one {
  font-weight: 500;
  color: $color-one;
  padding: 0 25px;
  min-width: 130px;
  text-align: center;
  line-height: 53px;
  border: 1px solid $color-one;
  border-radius: 10px;
  @include transition (0.3s);
  i {
      margin-right: 5px;
  }
  &:hover, &:focus {
    background: #000;
    border-color: #000;
    color: #fff;
  }
}
.btn-two {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #fff;
  padding: 0 22px;
  min-width: 160px;
  text-align: center;
  line-height: 53px;
  border: 1px solid $color-two;
  background: $color-one;
  border-radius: 10px;
  @include transition (0.3s);
  i {
    font-size: 1.5em;
    margin-left: 15px;
  }
  &:hover, &:focus {
    background: $color-two;
    color: #fff;
  }
  &.text-uppercase {
    font-size: 16px;
    letter-spacing: 1px;
  }
}
.btn-three {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: $text-dark;
  @include transition (0.3s);
  i {
    font-size: 1.2em;
    margin-left: 5px;
  }
  &:hover, &:focus {
    color: $color-two;
    span {
      text-decoration: underline;
    }
  }
}
.btn-four {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0C0C0C;
  color: #fff;
  font-size: 1.3em;
  @include transition (0.3s);
  &:hover, &:focus {
    background: $color-one;
  }
  &.inverse {
    background: $color-one;
    &:hover, &:focus {
      background: #0C0C0C;
    }
  }
}
.btn-five {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #fff;
  padding: 0 40px;
  min-width: 150px;
  text-align: center;
  line-height: 55px;
  border-radius: 10px;
  background: #000;
  @include transition (0.3s);
  &.text-uppercase {
    font-size: 16px;
    letter-spacing: 1px;
  }
  &:hover, &:focus {
    background: $color-one;
  }
  &.sm {
    font-size: 14px;
    padding: 0 30px;
  }
  &.md {
    padding: 0 26px;
  }
  i {
    font-size: 1.3em;
    margin-left: 12px;
  }
}
.btn-six {
  font-weight: 500;
  color: #fff;
  padding: 0 35px;
  min-width: 160px;
  text-align: center;
  line-height: 55px;
  background: $color-one;
  border-radius: 40px;
  @include transition (0.3s);
  &:hover, &:focus {
    background: $color-two;
    color: #fff;
  }
}
.btn-seven {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #030303;
  padding: 0 25px;
  min-width: 160px;
  text-align: center;
  line-height: 58px;
  border: 1px solid #000;
  @include transition (0.3s);
  i {
    font-size: 1.3em;
    margin-left: 15px;
  }
  &:hover, &:focus {
    background: $color-two;
    border-color: $color-two;
    color: #fff;
  }
}
.btn-eight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 18px;
  color: #030303;
  padding: 0 22px;
  min-width: 160px;
  text-align: center;
  line-height: 51px;
  border: 1px solid #000;
  @include transition (0.3s);
  i {
    font-size: 1.1em;
    margin-left: 12px;
  }
  &.inverse {
    border-color: #fff;
    color: #fff;
    text-transform: initial;
    font-size: 18px;
    letter-spacing: 0;
    font-weight: normal;
    background: transparent;
    i {
      font-size: 1.3em;
      margin-left: 12px;
    }
  }
  &:hover, &:focus {
    background: $color-two;
    border-color: $color-two;
    color: #fff;
  }
  &.sm {
    font-size: 14px;
    letter-spacing: 1px;
  }
}
.btn-nine {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  color: #fff;
  padding: 0 35px;
  min-width: 160px;
  text-align: center;
  line-height: 55px;
  background: $color-one;
  @include transition (0.3s);
  &:hover, &:focus {
    background: $color-two;
    color: #fff;
  }
}
.btn-ten {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #000;
  padding: 0 22px;
  min-width: 160px;
  text-align: center;
  line-height: 53px;
  border: 1px solid #000;
  border-radius: 50px;
  @include transition (0.3s);
  i {
    font-size: 1.3em;
    margin-left: 15px;
  }
  &:hover, &:focus {
    background: $color-two;
    border-color: $color-two;
    color: #fff;
  }
}
.btn-eleven {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #000;
  position: relative;
  font-size: 16px;
  padding-bottom: 5px;
  @include transition (0.3s);
  i {
    font-weight: 900;
    font-size: 0.8em;
    margin-left: 2px;
  }
  &:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 97%;
    background: #000;
    @include transition (0.3s);
  }
  &:hover, &:focus {
    color: $color-two;
  }
  &:hover:before, &:focus:before {
    background: $color-two;
  }
  &.white-vr {
    color: #fff;
    &:before {
      background: #fff;
    }
    &:hover, &:focus {
      color: $color-two;
    }
    &:hover:before, &:focus:before {
      background: $color-two;
    }
  }
}
.btn-twelve {
  font-weight: 500;
  font-size: 18px;
  color: #030303;
  padding: 0 25px;
  min-width: 170px;
  text-align: center;
  line-height: 48px;
  border: 1px solid #000;
  border-radius: 10px;
  @include transition (0.3s);
  &.sm {
    font-size: 16px;
    min-width: 160px;
  }
  &:hover, &:focus {
    background: $color-one;
    border-color: $color-one;
    color: #fff;
  }
}
.btn-thirteen {
  width: 70px;
  height: 70px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 1.5em;
  @include transition (0.3s);
  &:hover, &:focus {
    background: $color-one;
    border-color: $color-one;
    color: #fff;
  }
}