@charset "UTF-8";
@font-face {
  font-family: Head;
  font-weight: 100;
  src: local(※), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/wayfarer-regular-webfont.woff) format("woff");
}

body .wrapper {
	position: absolute;width: 100%;left: 0;height: 100%;
  -webkit-perspective: 800px;
          perspective: 800px;
}
body .wrapper .container {
  display: block;
  width: 100%;
  position: absolute;
  height: 100%;
  z-index: 1;
  border-radius: 10px;
}
body .wrapper .container .topfold {
  position: relative;
  z-index: 2;
}
body .wrapper .container .letter {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 3;
    background: url(../img/paper1.png) no-repeat;
    background-size: 100% 100%;
    top: 40px;
}
body .wrapper .container .letter form {
  position: absolute;
  width: auto;
  bottom: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1;
}
body .wrapper .container .letter form input[type="text"] {
  font-size: 1.2em;
  padding: 5px;
  border: 0px solid;
  background: transparent;
  border-bottom: 5px solid #ce0010;
}
body .wrapper .container .letter form input[type="text"]:focus {
  -webkit-outline: none;
  outline: none;
  border-bottom: 5px solid #0000ff;
}
body .wrapper .container .letter form .submitwrap {
  display: table;
  padding: 5px;
  margin: 15px auto 0px;
  background: #0000ff;
}
body .wrapper .container .letter form .submitwrap:hover {
  background: -webkit-repeating-linear-gradient(45deg, #ce0010, #ce0010 5px, #ffffff 5px, #ffffff 10px, #0000ff 10px, #0000ff 15px, #ffffff 15px, #ffffff 15px);
  background: repeating-linear-gradient(45deg, #ce0010, #ce0010 5px, #ffffff 5px, #ffffff 10px, #0000ff 10px, #0000ff 15px, #ffffff 15px, #ffffff 15px);
  -webkit-animation: animatedBackground 40s linear infinite;
          animation: animatedBackground 40s linear infinite;
}
body .wrapper .container .letter form .submitwrap:hover input {
  color: #ce0010;
}
@-webkit-keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 500px 0;
  }
}
@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 500px 0;
  }
}
body .wrapper .container .letter form input[type="submit"] {
  color: #0000ff;
  background: #fff;
  font-family: head;
  border: 0px solid;
  padding: 5px 10px;
  font-size: 1.2em;
  display: block;
  margin: 0px auto 0;
}
/*body .wrapper .container .letter:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: -webkit-repeating-linear-gradient(45deg, #ce0010, #ce0010 5px, #ffffff 5px, #ffffff 10px, #0000ff 10px, #0000ff 15px, #ffffff 15px, #ffffff 15px);
  background: repeating-linear-gradient(45deg, #ce0010, #ce0010 5px, #ffffff 5px, #ffffff 10px, #0000ff 10px, #0000ff 15px, #ffffff 15px, #ffffff 15px);
}*/
body .wrapper .container .letter .upper {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: -100%;
  background: url(../img/envelope-content.png) no-repeat;
  background-size: 100% 100%;
  z-index: 2;
}
body .wrapper .container .letter .upper .back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  top: 100%;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/*body .wrapper .container .letter .upper .front {
  position: absolute;
  display: block;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.05), inset 0px -25px 50px -25px rgba(0, 0, 0, 0.16);
  background: #fff;
  width: 100%;
  height: 100%;
  top: 100%;
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
body .wrapper .container .letter .upper .front:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: -webkit-repeating-linear-gradient(45deg, #ce0010, #ce0010 5px, #ffffff 5px, #ffffff 10px, #0000ff 10px, #0000ff 15px, #ffffff 15px, #ffffff 15px);
  background: repeating-linear-gradient(45deg, #ce0010, #ce0010 5px, #ffffff 5px, #ffffff 10px, #0000ff 10px, #0000ff 15px, #ffffff 15px, #ffffff 15px);
}*/
body .wrapper .container .letter .upper h1 {
  color: #ce0010;
  font-family: head;
  padding: 0px 20px;
  margin-bottom: 0px;
  line-height: 1;
}
body .wrapper .container .letter .upper p {
  padding: 0px 35px;
  margin-top: 0px;
  color: #0000ff;
  font-weight: 800;
  font-size: 1.2em;
}
body .wrapper svg {
  max-width: 100%;
  position: relative;
  z-index: 0;
  bottom: 0;
  box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.25);
}