@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i&display=swap');

body{background-image:url(../image/bg_pay.jpg);background-size:100% 100%;background-attachment:fixed;font-size:18px;font-family: 'Poppins', sans-serif;}
.transition{-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}

div.page{max-width:600px;margin:0 auto;display:flex;align-content:center;justify-content:center;flex-wrap:wrap;height:100%;}
div.logo{text-align:center;position:static;border:1px solid #eeeeee;top:-40px;left:calc((100% - 135px) / 2);border-radius:5px;background:#eeeeee;box-sizing:border-box;padding:8px 0px;}
div.logo img{max-height:70px;}

div.payment{position:relative;margin-top:0px;background:#ffffff;border-radius:4px;-webkit-box-shadow: 0px 0px 6px 4px rgba(0,0,0,0.32);
-moz-box-shadow: 0px 0px 6px 4px rgba(0,0,0,0.32);
box-shadow: 0px 0px 6px 4px rgba(0,0,0,0.32);}
div.field{display:flex;width:100%;justify-content:space-between;flex-wrap:wrap;padding:30px;box-sizing:border-box;}
div.el{width:49%;margin-bottom:20px;}
div.el:last-child{margin-bottom:0px;}
div.el.full{width:100%;}
div.el label{margin-bottom:5px;display:block;width:100%;}
div.el input{width:100%;padding:10px;border:1px solid #dfdfdf;border-radius:4px;outline:0;}
div.el input.short{width:49%;float:left;margin-right:1%;}
div.el input.short:nth-child(1){float:right;margin:0px;}
div.reason{font-size:22px;text-align:center;font-style:italic;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;}
div.reason span.product{display:block;width:100%;text-align:center;}
div.cta{margin:0px 0px 0px 0px;width:100%;}
div.cta button{width:100%;padding:20px;/*background:#12AE3A;*/background:#5469D4;color:#ffffff;font-size:24px;border:0px;border-radius:0px;outline:0;cursor:pointer;position:relative;}
div.cta button:hover{background:#1fd64e;}
div.cta span.loading{display:none;}
div.cta span.loading svg{height:25px;}
form{margin:0px;}

div.label-payment{width:100%;display:flex;align-items:center;justify-content:space-between;}
div.label-payment div{width:49%;}
div.label-payment div:nth-child(2){text-align:right}
div.label-payment span.cvc{margin:0px 15px 0px 5px;}

.CardField-cvc{border-left:1px solid #000;}

span.confirm{display:none;}
div.confirm{padding:30px;width:100%;display:none;align-items:center;justify-content:center;flex-wrap:wrap;box-sizing:border-box;text-align:center;font-size:20px;}
div.confirm svg{margin-bottom:20px;}

@media screen and (max-width:700px){
	div.field{padding:20px 30px;}
	div.el{margin-bottom:10px;width:100%;}
	div.el label{font-size:16px;}
	div.cta button{padding:20px;}
}

@media screen and (max-width:400px){
	div.page{height:auto;}
}

.icon {
  width: 25px;
  height: 25px;
  display: block;
  border-radius: 50%;
  stroke: #ffffff;
  margin: 0px auto;
  -webkit-animation: bounceIcon .17s ease-in-out;
  animation: bounceIcon .17s ease-in-out;
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
}

.circle {
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  stroke-width: 9;
  stroke: #ffffff;
  fill: none;
  -webkit-animation: drawCircle .2s linear;
  animation: drawCircle .2s linear;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.check {
  stroke-width: 7;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  -webkit-animation: drawCheckmark .2s cubic-bezier(.89,.09,.91,.67);
  animation: drawCheckmark .2s cubic-bezier(.89,.09,.91,.67) forwards;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;

}

@keyframes drawCircle {
 100% {
    stroke-dashoffset: 0;
  }
}

@keyframes drawCheckmark {
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes bounceIcon {
  0% {
    transform: none;
  }
  50% {
    transform: scale3D(.9, .9, 1);
  }
  100% {
    transform: none;
  }
}