@keyframes opacityback {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#stripediv {
	display: block;
	left: 0px;
	position: fixed;
	backface-visibility: hidden;
	z-index: 199999;
	top: 0px;
	background: rgba(0,0,0,.6);
	width: 100%;
	height: 100%;
	display: table;
	animation: opacityback 0.1s ease-in;
}

#card-form {
	max-width: 450px;
	margin: auto auto;
	vertical-align: middle;
	position: relative;
	border-radius: 6px;
	padding: 40px;
	padding-top: 36px;
	padding-bottom: 36px;
	position: relative;
	background-color: #f5f5f7;
	box-shadow: 0 12px 30px 0 rgba(0,0,0,.5),inset 0 1px 0 0 hsla(0,0%,100%,.65);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	text-align: center;
	animation: slide-up 0.2s ease-out;
}

.stripeHeader-logoWrap {
	position: absolute;
	top: -38px;
	right: 0;
	left: 0;
	width: 70px;
	height: 70px;
	margin: 0 auto;
	box-sizing: border-box;
}
.stripeHeader-logoBevel {
	border: 1px solid rgba(0,0,0,.2);
	width: 64px;
	height: 64px;
	border-radius: 100%;
	box-shadow: inset 0 1px 0 0 hsla(0,0%,100%,.1);
	position: absolute;
	top: 3px;
	left: 3px;
	box-sizing: border-box;
}

.stripeHeader-logoBorder {
	border: 3px solid #fff;
	width: 70px;
	height: 70px;
	border-radius: 100%;
	box-shadow: 0 0 0 1px rgba(0,0,0,.18),0 2px 2px 0 rgba(0,0,0,.08);
	position: absolute;
	top: 0;
	left: 0;
	box-sizing: border-box;
}
.stripeHeader-logoImage {
	width: 64px;
	height: 64px;
	margin: 3px;
	border-radius: 100%;
	background: #fff;
	    background-position-x: 0%;
	    background-position-y: 0%;
	    background-image: none;
	    background-size: auto;
	background-position: 50% 50%;
	background-size: cover;
	display: inline-block;
	box-sizing: border-box;
}

.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid #6e758742;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

#card-errors {
    height: 25px;
    padding: 4px 0;
    color: #fa755a;
    color: #f73d18;
    font-size:16px;
}

#card-button {
	position: relative;
	border-radius: 4px;
	background-color: #3ea8e5;
	background-image: linear-gradient(-180deg,#44b1e8,#3098de);
	box-shadow: 0 1px 0 0 rgba(46,86,153,.15),inset 0 1px 0 0 rgba(46,86,153,.1),inset 0 -1px 0 0 rgba(46,86,153,.4);
	font-size: 17px;
	line-height: 21px;
	height: 37px;
	font-weight: 700;
	text-shadow: 0 -1px 0 rgba(0,0,0,.12);
	color: #fff;
	cursor: pointer;
	border:0px;
	transition: all .2s ease-in-out;
	font-family:Segoe UI,Roboto,sans-serif;
	width:100%;
	transition: all .3s ease-in-out;
}
#card-button::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 1px solid rgba(46,86,153,.1);
	border-radius: inherit;
}
#card-button:active {
	background-image:linear-gradient(180deg,#328ac3,#277bbe);
	transition:all .3s ease-in-out
}
.card-details-email::before {
	content: "";
	display: block;
	position: relative;
	height: 1px;
	top: -1px;
	background-image: radial-gradient(circle,rgba(0,0,0,.07),transparent);
	margin-bottom: 10px;
}
.card-details-email {
	color:#919199;
	font-weight: 500;
	margin-top: 5px;
}