*, *:before, *:after {
  margin:0;
  padding:0;
  -webkit-box-sizing:border-box;
          box-sizing:border-box;
}
/* html,
body {
  width:100%;
  height:100%;
}
body {
  overflow-x:hidden;
  text-align:center;
  background:transparent;
  font-family: 'Open Sans', sans-serif;
} */
.mail-btn {
  position:relative;
  top:35%;
  display:inline-block;
  padding:0.5rem 0.5rem;
  border:10px solid #263e5f;
  background:none;
  width: 300px;
  height: 80px;
  outline:none;
  -webkit-appearance: none;
  font-size:1.5rem;
  font-style: bold;
  color:#263e5f;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.5rem;
  text-indent:0.5rem;
  cursor:pointer;
  -webkit-transition:
    color 1.5s .5s,
    border 2s 1s;
  transition:
    color 1.5s .5s,
    border 2s 1s;
  
}
.mail-btn:before,
.mail-btn:after {
  content:'';
  position:absolute;
  opacity:0;
  -webkit-backface-visibility:visible;
          backface-visibility:visible;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
  -webkit-perspective:800px;
          perspective:800px;
  -webkit-transform-origin:50% -50%;
          transform-origin:50% -50%;
  -webkit-transform:rotateX(360deg) rotateY(0) translateX(-50%) translateY(0) scale(0.2);
          transform:rotateX(360deg) rotateY(0) translateX(-50%) translateY(0) scale(0.2);
  -webkit-transition:all 0.5s;
  transition:all 0.5s;
}
.mail-btn:before {
  top:5px;
  left:50%;
  height:3rem;
  background:#f2d4a2;
  border-top:2rem solid #263e5f;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.mail-btn:after {
  top:0;
  left:50%;
  border-top:2rem solid #f2d4a2;
  border-right:3rem solid transparent;
  border-left:3rem solid transparent;
}
.mail-btn:hover {
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  -webkit-transition:
    color .25s,
    border .25s;
  transition:
    color .25s,
    border .25s;
}
.mail-btn:hover:before,
.mail-btn:hover:after {
  opacity:1;
  -webkit-transform:rotateX(0) rotateY(-10deg) translateX(-50%) translateY(0) scale(1);
          transform:rotateX(0) rotateY(-10deg) translateX(-50%) translateY(0) scale(1);
}
.fly {
  color:rgba(255,255,255,0);
  border:2px solid rgba(255,255,255,0);
  -webkit-animation:sended 4s 0.8s forwards;
          animation:sended 4s 0.8s forwards;
}
@-webkit-keyframes sended {
  0% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid #f2d4a2;
    border-left:10px solid #f2d4a2;
    opacity:0;
    -webkit-transform:rotate(-45deg) translateX(300%) translateY(-500%);
            transform:rotate(-45deg) translateX(300%) translateY(-500%);
  }
  5% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid #f2d4a2;
    border-left:10px solid#f2d4a2;
    opacity:1;
    -webkit-transform:rotate(-45deg) translateX(0) translateY(0);
            transform:rotate(-45deg) translateX(0) translateY(0);
  }
  78% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid #f2d4a2;
    border-left:10px solid #f2d4a2;
    opacity:1;
    -webkit-transform:rotate(-45deg) translateX(0) translateY(0);
            transform:rotate(-45deg) translateX(0) translateY(0);
  }
  79% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid #f2d4a2;
    border-left:10px solid#f2d4a2;
    opacity:0;
    -webkit-transform:rotate(-45deg) translateX(0) translateY(0);
            transform:rotate(-45deg) translateX(0) translateY(0);
  }
  80% {
    height:auto;
    width:auto;
    color:rgba(255,255,255,0);
    border:2px solid rgba(255,255,255,0);
    opacity:0;
    -webkit-transform:rotate(0) translateX(0) translateY(0);
            transform:rotate(0) translateX(0) translateY(0);
  }
  100% {
    height:auto;
    width:auto;
    color:#f2d4a2;
    border:2px solid rgba(255,255,255,0.5);
    opacity:1;
    -webkit-transform:rotate(0) translateX(0) translateY(0);
            transform:rotate(0) translateX(0) translateY(0);
  }
}
@keyframes sended {
  0% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid rgb(58, 233, 24);
    border-left:10px solid rgb(58, 233, 24);;
    opacity:0;
    -webkit-transform:rotate(-45deg) translateX(300%) translateY(-500%);
            transform:rotate(-45deg) translateX(300%) translateY(-500%);
  }
  5% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid rgb(58, 233, 24);;
    border-left:10px solid rgb(58, 233, 24);;
    opacity:1;
    -webkit-transform:rotate(-45deg) translateX(0) translateY(0);
            transform:rotate(-45deg) translateX(0) translateY(0);
  }
  78% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid rgb(58, 233, 24);;
    border-left:10px solid rgb(58, 233, 24);;
    opacity:1;
    -webkit-transform:rotate(-45deg) translateX(0) translateY(0);
            transform:rotate(-45deg) translateX(0) translateY(0);
  }
  79% {
    height:2rem;
    width:3.5rem;
    border-top:0;
    border-right:0;
    border-bottom:10px solid rgb(58, 233, 24);;
    border-left:10px solid rgb(58, 233, 24);;
    opacity:0;
    -webkit-transform:rotate(-45deg) translateX(0) translateY(0);
            transform:rotate(-45deg) translateX(0) translateY(0);
  }
  80% {
    height:auto;
    width:auto;
    color:rgba(255,255,255,0);
    border:2px solid rgba(255,255,255,0);
    opacity:0;
    -webkit-transform:rotate(0) translateX(0) translateY(0);
            transform:rotate(0) translateX(0) translateY(0);
  }
  100% {
    border:15px solid #263e5f;
  color: #263e5f;
  width: 300px;
  height: 100px;
    opacity:1;
    -webkit-transform:rotate(0) translateX(0) translateY(0);
            transform:rotate(0) translateX(0) translateY(0);
  }
}
.fly:before,
.fly:after {-webkit-animation:flyout .6s forwards;animation:flyout .6s forwards;}
@-webkit-keyframes flyout {
  0% {
    opacity:1;
    -webkit-transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
            transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
  }
  33% {
    opacity:0.66;
    -webkit-transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
            transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
  }
  100% {
    opacity:0;
    -webkit-transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
            transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
  }
}
@keyframes flyout {
  0% {
    opacity:1;
    -webkit-transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
            transform:rotateX(0) rotateZ(0) translateX(-50%) translateY(0) scale(1);
  }
  33% {
    opacity:0.66;
    -webkit-transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
            transform:rotateX(0) rotateZ(-5deg) translateX(-100%) translateY(0) scale(1);
  }
  100% {
    opacity:0;
    -webkit-transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
            transform:rotateX(0) rotateZ(0) translateX(1000%) translateY(0) scale(1);
  }
}