* {box-sizing:border-box}
body {
  background: #00674F;
   font-family: "Instrument Sans", sans-serif;
  display:flex;
  line-height:2;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #00674F 0%, #004d3a 100%);
  height:100svh;
}
.envelope_form_wrap {max-width:100%;
width:500px;}
#envelope_form {width:100%;}
.env_wrap {
  position:relative;
overflow:hidden;
  padding-top:110%;
background: rgb(255,255,255);
background: linear-gradient(0deg, #c7c2c5 0%, #c7c2c5 55%, rgba(255,255,255,0) 55%, rgba(255,255,255,0) 100%);
  width:100%;
}
.env_top {
    filter: drop-shadow(0px 6px 3px rgba(50, 50, 0, 0.1));
  position:absolute;
width:100%;
height:33%;
  top:45%;
  z-index:99;
  transition:all 0.6s ease-in-out;
transform-origin:top;
}
.env_top:before {content:'';
  position:absolute;
  transform-origin:top;
  width:100%;
  height:100%;
background:white;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transition:all 0.6s ease-in-out;
}

#envelope_form.opened .env_top {-ms-transform: rotatex(-180deg);
  -webkit-transform: rotatex(-180deg);
  transform: rotatex(-180deg);
}
.env_bottom_wrap {
  height:55%;
  width:100%;
  z-index:2;
  bottom:0;
position:absolute;
     filter: drop-shadow(0px -6px 3px rgba(50, 50, 0, 0.1));
}
.env_bottom {
  clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);
  background:white;
width:100%;
  height:100%;
}
.env_bottom:before, .env_bottom:after {
  content:'';
  position:absolute;
  background:#f8f6f7;
  width:50%;
  height:100%;
}
.env_bottom:before {clip-path: polygon(100% 50%, 0 0, 0 100%);}
.env_bottom:after{
  right:0;
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.env_form_wrap {
  width:calc(100% - 2rem);
  left:1rem;
  padding:0.5rem;
background:#0A3C30;
  color:white;
position:absolute;
height:68%;
z-index:2;
  transition:all 0.8s ease-in-out 0.6s;
top:55%;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
padding-top:0.5rem;
  border-radius:4px;
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3))
          drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.2));
}

.card-title {
  margin:0;
  padding:0.5rem 0;
  font-size:1.5rem;
  color:white;
  width:100%;
  text-align:center;
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.env_form_wrap video {
  width:100%;
  height:auto;
  border-radius:4px;
  display:block;
  margin:0;
}
#envelope_form.opened .env_form_wrap {
  top:0%;
}
.env_top {transition-delay:0s}
#envelope_form.opened .env_top {z-index:1;
transition-delay: 0s}
input {width:100%;
padding:1rem;}
.submit {width:100%;
padding:1rem;
background:#23a0d9;
border:none;
color:white;
font-size:18px;
  position:relative;
  z-index:99;
margin-top:10px;
cursor:pointer;}
h3 {line-height:1.5;
font-size:1.5rem;}


#envelope_form.sent .env_form_wrap {top:100%!important}
#envelope_form.sent .env_top {
  transition-delay:.2s;
  transform:none;
z-index:99;}

.fly { animation: flyAway .5s linear forwards}
@keyframes flyAway {
  50% {transform:translate(-50px, -50px) rotate(40deg) scale(.5)}
  100% {transform:translate(1000px, -100px) rotate(-40deg) scale(.3)}
}

.thank_you {color:white;
position:absolute;
top:50%;
left:50%;
transform:translatex(-50%)}

.envelope_seal {
  position:absolute;
  top:75%;
  left:50%;
  transform:translate(-50%, -50%);
  height:80px;
  z-index:100;
  transition:opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  pointer-events:none;
}

#envelope_form.opened .envelope_seal {
  opacity:0;
  transform:translate(-50%, -50%) scale(0.5);
}