body {
	background-color: #f05133;
	color: #efaa9d;
	text-align: center;
	font-family: Lato, Tahoma, sans-serif;
}

h1, h2, h3, h4, h5 {
  font-weight: normal;
}

p a {
  color: #f4f2ca;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255, .2);
	padding: .2em 0;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	transition: all .2s linear;
}
p a:hover {
	color: #f4f2ca;
	opacity: .6;
}

/* style input field text */
::-webkit-input-placeholder {
   color: #f4f2ca;
   opacity: .8;
}

/* Input field that looks like a button */
.email-field {
	width: 80px;
	display: inline-block;
	color: #f4f2ca;
	text-align: center;
	background-color: #d8492e;
	padding: .9em 1.8em;
	border: none;
	cursor: pointer;
	outline: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear;
	transition: all .1s linear;
}
.email-field:hover {
	background-color: #d0432a;
}

/* after button is clicked */
.email-field.active {
	width: 200px;
	outline: none;
	color: #efaa9d;
	text-align: center;
	cursor: inherit;
}

/* Email submit button */
#subscribe-button {
	width: 35px;
	height: 35px;
	border: none;
	text-indent: -9999px;
  opacity: .25;
	background: url(http://helixpowered.com/assets/img/arrow-circle-on-right.svg) no-repeat;
	background-size: 13px;
	background-position: 0 1px;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	transition: all .2s linear;
  
	cursor: pointer; /* for demo only */

	display: none;
}
#subscribe-button:hover {
	opacity: .33;
}

#subscribe-button.show {
	display: inline-block;
	background-size: 33px;
}

/* vertically position everything for effect */
@media screen and (min-width: 480px) {
	
	.middle {
		width: 100%;
		position: relative;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
  }
  
  
  .wrapper {
  position: relative;
  perspective: 40em;
  display: grid;
  transform-style: preserve-3d;
}

.card {
  grid-area: 1 / 1;
  height: 200px;
  width: 500px;
  transform: translateX(10px) rotateY(25deg) rotateX(10deg);
  background: rgba(249, 198, 26, 0.0);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
  margin-right:40px;
  margin-left:40px;
  color: #000;
  font-size: 60px;
  font-weight: 700;
  backface-visibility: hidden;
  box-shadow: 0 10px 30px -3px rgba(0,0,0,.1);
}



.card .enclosed {
  background: rgba(249, 249, 249, 0);;
  line-height: 1;
  color: #000; 
  padding: 0 5px;
  font-weight: 700;
  display: inline-block;
  transform: translate(-1px, 1px) scale(0.75);
  transform-origin: right center;
}

.wrapper:before {
  --bw: 5px;
  grid-area: 1 / 1;
  content: '';
  backface-visibility: hidden;
  height: 100%;
  width: 100%;
  margin-top: calc(-1 * var(--bw));
  margin-left: calc(-1 * var(--bw));
  background: transparent;
  transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03);
  pointer-events: none;
  border: var(--bw) solid #000;
  box-sizing: content-box;
}


.wrapper:hover > div,
.wrapper:hover:before {
  transform: none;
}


.wrapper > div,
.wrapper:before {
  will-change: transform;
  transition: .3s transform cubic-bezier(.25,.33,.45,1);
}


body {
  display: grid;
  place-items: center;
  background:
    linear-gradient(to bottom right, #3C4BBD 15%, transparent),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.2) 10%, transparent 20%) center center / 15px 15px,
    linear-gradient(to bottom right, #3C4BBD, #57ADD8);
}