@import url(https://fonts.googleapis.com/css?family=Open+Sans:800,400);
.mail-btn {
  margin:0;
  padding:0;
  box-sizing:border-box;
  position:relative;
  top:35%;
  display:inline-block;
  padding:0.5rem 1rem;
  border:2px solid rgba(153, 60, 167, 0.5);
  background:none;
  outline:none;
  -webkit-appearance: none;
  font-size:2rem;
  color:rgba(153, 60, 167, 0.7);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.5rem;
  text-indent:0.5rem;
  cursor:pointer;
  transition:
    color 1.5s .5s,
    border 3s 1s;
  
}
.mail-btn:before,
.mail-btn:after {
  content:'';
  position:absolute;
  opacity:0;
  backface-visibility:visible;
  transform-style:preserve-3d;
  perspective:400px;
  transform-origin:50% -50%;
  transform:rotateX(360deg) rotateY(0) translateX(-50%) translateY(0) scale(0.2);
  transition:all 0.5s;
}
.mail-btn:before {
  top:5px;
  left:50%;
  height:1.5rem;
  background:rgb(11, 130, 38);;
  border-top:2rem solid white;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
  box-sizing: content-box;
}
.mail-btn:after {
  top:0;
  left:50%;
  border-top:2rem solid rgb(11, 130, 38);;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
  box-sizing: content-box;
}
.mail-btn:hover {
  color:rgba(11, 130, 38,0);
  border:2px solid rgba(11, 130, 38,0);
  transition:
    color .25s,
    border .25s;
}
.mail-btn:hover:before,
.mail-btn:hover:after {
  opacity:1;
  transform:rotateX(0) rotateY(-10deg) translateX(-50%) translateY(0) scale(1);
}
.fly {
  box-sizing:border-box;
  color:rgba(0,0,0,0);
  border:2px solid rgba(11, 130, 38,0);
  animation:sended 4s 0.8s forwards;
}
@keyframes sended {
  0% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid rgb(11, 130, 38);;
    border-left:10px solid rgb(11, 130, 38);;
    opacity:0;
    transform:rotate(-45deg) translateX(300%) translateY(-500%);
  }
  5% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid rgb(11, 130, 38);;
    border-left:10px solid rgb(11, 130, 38);;
    opacity:1;
    transform:rotate(-45deg) translateX(0) translateY(0);
  }
  78% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid rgb(11, 130, 38);;
    border-left:10px solid rgb(11, 130, 38);;
    opacity:1;
    transform:rotate(-45deg) translateX(0) translateY(0);
  }
  79% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid rgb(11, 130, 38);;
    border-left:10px solid rgb(11, 130, 38);;
    opacity:0;
    transform:rotate(-45deg) translateX(0) translateY(0);
  }
  80% {
    height:auto;
    width:auto;
    color:rgba(11, 130, 38, 0);
    border:2px solid rgba(11, 130, 38, 0);
    opacity:0;
    transform:rotate(0) translateX(0) translateY(0);
  }
  100% {
    height:auto;
    width:auto;
    color:rgba(11, 130, 38, 1);
    border:2px solid rgba(11, 130, 38, 0.5);
    opacity:1;
    transform:rotate(0) translateX(0) translateY(0);
  }
}
.fly:before,
.fly:after {animation:flyout .6s forwards;}
@keyframes flyout {
  0% {
    opacity:1;
    transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
  }
  33% {
    opacity:0.66;
    transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
  }
  100% {
    opacity:0;
    transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .mail-btn {
    font-size:1.5rem;
  }
}