.btncontainer {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px;
  text-align: center; }
  @media (min-width: 600px) {
    .btncontainer {
      flex-direction: row;
      justify-content: space-between; } }

btncontainer a {
  background: rgba(139, 0, 0, 0);
  border-bottom: 1px solid;
  color: darkred;
  padding: 5px;
  text-decoration: none; }
  btncontainer a:hover {
    background: darkred;
    color: #E1332D; }

.btn {
  color: #000;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 0 2em;
  padding: 10px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  min-width: 180px; }
  @media (min-width: 600px) {
    .btn {
      margin: 0 1em 2em; } }
  .btn:hover {
    text-decoration: none; }

.btn-1 {
  background: #e02c26;
  font-weight: 100; }
  .btn-1 svg {
    height: 45px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }
  .btn-1 rect {
    fill: none;
    stroke: darkred;
    stroke-width: 2;
    stroke-dasharray: 222, 0;
    transition: all 0.65s linear;
    height: 35px; }

.btn-1:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900; }
  .btn-1:hover rect {
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 48;
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); }

.btn-2 {
  letter-spacing: 0; }

.btn-2:hover,
.btn-2:active {
  letter-spacing: 5px; }

.btn-2:after,
.btn-2:before {
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0);
  bottom: 0px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  transition: all 280ms ease-in-out;
  width: 0; }

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  border-color: #fff;
  transition: width 350ms ease-in-out;
  width: 70%; }

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 70%; }

.btn-3 {
  background: #e3403a;
  border: 1px solid #da251f;
  box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
  font-weight: 900;
  letter-spacing: 1px;
  transition: all 150ms linear; }

.btn-3:hover {
  background: #e02c26;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
  color: #ec817d;
  text-decoration: none;
  text-shadow: -1px -1px 0 #c2211c;
  transition: all 250ms linear; }

.btn-4 {
  border: 1px solid;
  border-color: cyan;
  overflow: hidden;
  position: relative;
  min-width: 200px; }
  .btn-4 span {
    z-index: 20; }
  .btn-4:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10; }

.btn-4:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); }

.btn-5 {
  border: 1pt solid #1c959c;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  margin: 5px;
  vertical-align: middle;
  height: 30px; }

.btn-5:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388; }

.btn-teal {
  background: #427b77;
  font-weight: 100; }
  .btn-teal svg {
    height: 45px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }
  .btn-teal rect {
    fill: none;
    stroke: #3ce8dd;
    stroke-width: 2;
    stroke-dasharray: 222, 0;
    transition: all 0.65s linear;
    height: 35px; }

.btn-teal:hover {
  background: rgba(60, 232, 221, 0);
  font-weight: 900; }
  .btn-teal:hover rect {
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 48;
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); }

.btn-tiny {
  background: #427b77;
  font-weight: 100;
  width: 25px;
  height: 25px; }
  .btn-tiny svg {
    height: 25px;
    width: 25px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }
  .btn-tiny rect {
    fill: none;
    stroke: #45807c;
    stroke-width: 2;
    stroke-dasharray: 222, 0;
    transition: all 0.65s linear;
    height: 25px; }

.btn-tiny:hover {
  background: rgba(225, 51, 45, 0);
  font-weight: 900; }
  .btn-tiny:hover rect {
    stroke-width: 5;
    stroke-dasharray: 15, 310;
    stroke-dashoffset: 48;
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); }