/*------------------------------------
Printer
-------------------------------------*/

button.print-button {
    width: 100px;
    height: 100px;
  }
  span.print-icon, span.print-icon::before, span.print-icon::after, button.print-button.animated .print-icon::after {
    border: solid 4px #333;
  }
  span.print-icon::after {
    border-width: 2px;
  }
  
  button.print-button {
    position: relative;
    padding: 0;
    border: 0;
    
    border: none;
    background: transparent;
  }
  
  span.print-icon, span.print-icon::before, span.print-icon::after, button.print-button.animated .print-icon::after {
    box-sizing: border-box;
    background-color: #fff;
  }
  
  span.print-icon {
    position: relative;
    display: inline-block;  
    padding: 0;
    margin-top: 20%;
  
    width: 60%;
    height: 35%;
    background: #fff;
    border-radius: 20% 20% 0 0;
  }
  
  span.print-icon::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 12%;
    right: 12%;
    height: 110%;
  
    transition: height .2s .15s;
  }
  
  span.print-icon::after {
    content: "";
    position: absolute;
    top: 55%;
    left: 12%;
    right: 12%;
    height: 0%;
    background: #fff;
    background-repeat: no-repeat;
    background-size: 70% 90%;
    background-position: center;
    background-image: linear-gradient(
      to top,
      #fff 0, #fff 14%,
      #333 14%, #333 28%,
      #fff 28%, #fff 42%,
      #333 42%, #333 56%,
      #fff 56%, #fff 70%,
      #333 70%, #333 84%,
      #fff 84%, #fff 100%
    );
  
    transition: height .2s, border-width 0s .2s, width 0s .2s;
  }
  
  button.print-button.animated {
    cursor: pointer;
  }
  
  button.print-button.animated .print-icon::before {
    height:0px;
    transition: height .2s;
  }
  button.print-button.animated .print-icon::after {
    height:120%;
    transition: height .2s .15s, border-width 0s .16s;
  }
  

/*------------------------------------
Paper plane
-------------------------------------*/


  @keyframes rotate-the-funk {
    0% {
      transform: rotate(360deg);
    }
    50% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  @keyframes shadow {
    0% {
      transform: scale(1) translate(-20%, -10%);
    }
    25% {
      transform: scale(0.5) translate(-20%, -10%);
    }
    50% {
      transform: scale(1) translate(-20%, -10%);
    }
    75% {
      transform: scale(0.5) translate(-20%, -10%);
    }
    100% {
      transform: scale(1) translate(-20%, -10%);
    }
  }
  .plane-send {
    font-size: 2.85rem;
    border: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: 1s border, 0.75s transform;
    width: 150px;
    height: 200px;
    background: none;
  }
  .plane-send .material-icons {
    transform: rotate(360deg);
    position: relative;
    color: black;
    position: relative;
    font-size: 50px;
    transform-origin: top center;
  }
  .plane-send .material-icons:before {
    content: attr(data-content);
    position: absolute;
    color: grey;
    left: 50%;
    top: 50%;
    transform: scale(1) translate(-20%, -10%);
    z-index: -1;
    transform-origin: bottom center;
  }

  .plane-send.animated .material-icons {
    animation: rotate-the-funk 3s forwards;
  }
  .plane-send.animated .material-icons:before {
    animation: shadow 3s forwards;
  }