button { padding: 0.5rem 1rem; border-radius: 0.25rem; background-color: rgba(78, 94, 114, 0.9); color: white; font-size: 1rem;
       -webkit-transition: background-color 0.2s; transition: background-color 0.2s;   }
button:hover,button :focus { outline: none; background-color: rgba(78, 94, 114, 1);  }
/**************************************************************************/
/* Layout of form size and design. side 1 is top half. side2 is bottom half. must be equal size.
/* input/textarea design can be done independently in regular style sheet
/**************************************************************************/
.letter { width:90%; margin:auto; -webkit-perspective:60rem; perspective:60rem;   }
.side {  height:16rem; text-align:left; background:#fcfcf8; padding:2rem 1rem;}
.side:nth-of-type(1) { border-radius:1rem 1rem 0 0;  border:1px solid black; border-bottom:0;/*box-shadow:inset 0 0.75rem 2rem rgba(229, 225, 187, 0.5);*/  }
.side:nth-of-type(2) { border-radius: 0 0 1rem 1rem; border:1px solid black; border-top:0;/*box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.05), inset 0 -0.57rem 2rem rgba(229, 225, 187, 0.5); */ }
/******************************************************************/
/* Envelope that appears after clicking the send button. All envelope definitions below design the closed envelope after clicking send button
/* Envelope shape is created by making 2 rectangles and then rotating to make left, right and top triangle envelope shapes. Overflow:hidden
/* hides the rectangle parts that extend beyond a containing box to square the outside envelope edges.
/******************************************************************/
/* initial envlope setup - can't really move without affecting the final envelope shape. Not sure why */
.envelope { position:absolute; left:0; right:0; top:0; margin:auto;   }

/* inside envelope in front of letter */
.envelope.front { width:100%; height:22rem; z-index:999; opacity:0; background:url(../img/envelope-front.png) no-repeat center center; background-size:100% 100%;     }

/* creates a box to contain envelope shapes. must be same height and width of 'envelope.back::before' for top tip of envelope to center correctly */
/* overflow:hidden hides parts of ::before rectangle to create correct envelope shape */
.envelope.back { width:100%; height:22rem;  z-index: -998; opacity:0; background:url(../img/envelope-back.png) no-repeat center center; background-size:100% 100%;   }


/***************************************************************************/
/* When sent button is clicked, the .sent class is added to the body (all items) and animation runs */
/***************************************************************************/
.sent .letter { -webkit-animation: scaleLetter 1s forwards ease-in;  animation: scaleLetter 1s forwards ease-in;  }
.sent .envelope { -webkit-animation: fadeInEnvelope 0.5s 1.33s forwards ease-out; animation: fadeInEnvelope 0.5s 1.33s forwards ease-out;  }

/* moves origin so letter folds top half of paper on bottom half. */
.sent .side:nth-of-type(1) { -webkit-transform-origin: 0 100%; transform-origin: 0 100%;
    -webkit-animation: closeLetter 0.66s forwards ease-in; animation: closeLetter 0.66s forwards ease-in;  }

/* hides all the text so not visible when letter in envelope */
.sent .side h1,
.sent .side:nth-of-type(1) label, .sent .side:nth-of-type(2) label,
.sent .side:nth-of-type(1) input, .sent .side:nth-of-type(2) input,
.sent .side:nth-of-type(1) textarea, .sent .side:nth-of-type(2) textarea
{ -webkit-animation: fadeOutText 0.66s forwards linear;  animation: fadeOutText 0.66s forwards linear; border:0;  }

.sent button { background-color: rgba(78, 94, 114, 0.2);  }

/*********************************/
/* folds top half of paper down on top of bottom half */
/*********************************/
@-webkit-keyframes closeLetter {
   50% {-webkit-transform: rotateX(-90deg);transform: rotateX(-90deg);}
   100% {-webkit-transform: rotateX(-180deg);transform: rotateX(-180deg);}
}
@keyframes closeLetter {
   50% {-webkit-transform: rotateX(-90deg);transform: rotateX(-90deg);}
   100% {-webkit-transform: rotateX(-180deg);transform: rotateX(-180deg);}
}
/*********************************/
/* fade out any text */
/*********************************/
@-webkit-keyframes fadeOutText {
   49% {opacity: 1;}
   50% {opacity: 0;}
   100% {opacity: 0;}
}
@keyframes fadeOutText {
   49% {opacity: 1;}
   50% {opacity: 0;}
   100% {opacity: 0;}
}
/*********************************/
/* fade envelope in from bottom to top. */
/*********************************/
@-webkit-keyframes fadeInEnvelope {
  0% {opacity: 0; -webkit-transform: translateY(22rem); transform: translateY(22rem);}
  100% {opacity: 1; -webkit-transform: translateY(10rem); transform: translateY(10rem);}
}
@keyframes fadeInEnvelope {
  0% {opacity: 0; -webkit-transform: translateY(22rem); transform: translateY(22rem);}
  100% {opacity: 1; -webkit-transform: translateY(10rem); transform: translateY(10rem);}
}

/*********************************/
/* translatey is vertical location of paper after fold and insert into envelope */
/* scale is (width, height) of folded paper in envelope */
/*********************************/
@-webkit-keyframes scaleLetter {
  66% {-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
  75% {-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
  90% {-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
  97% {-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
  100%{-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
}
@keyframes scaleLetter {
  66% {-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
  75% {-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
  90% {-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
  97% {-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
  100%{-webkit-transform: translateY(-10rem) scale(.7, 0.7);transform: translateY(-10rem) scale(.7, 0.7);}
}

/*********************************/
/* call to iframe allows php send email code to run and display success message without refreshing the page */
/* success message fades in. */
/*********************************/
.iframe { width:100%; height:2rem;  opacity: 0;
  -webkit-transition: all 0.3s 2s; transition: all 0.3s 2s; }
.sent .iframe { opacity: 1; }