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

body{background-image:url(../img/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 20px auto;display:flex;align-content:center;justify-content:center;flex-wrap:wrap;}
div.logo{text-align:center;position:static;top:-40px;left:calc((100% - 135px) / 2);border-radius:5px;background:#fff;box-sizing:border-box;padding:8px 0px;}
div.logo img{max-height:100px;max-width:95%;}

div.payment{position:relative;margin-top:0px;background:#ffffff;border-radius:8px;overflow:hidden;-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.payment div.title{padding:20px 30px 0px 30px;text-align:center;}
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{align-items:center;margin-bottom:5px;display:flex;width:100%;-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */}
								
label.el_corso{border-bottom:1px solid #eaeaea;padding:8px 0px;margin:0px;margin-bottom:0px!important;}
div.el label div.content{width:100%;}
div.el label span.dida{display:block;width:100%;font-size:13px;font-style:italic;}
div.el input,div.el select{width:100%;padding:10px;border:1px solid #dfdfdf;border-radius:4px;outline:0;box-shadow:0px;}
div.el input.short{width:49%;float:left;margin-right:1%;}
div.el input.short:nth-child(1){float:right;margin:0px;}
div.el label.checkbox{display:flex;margin-top:3px;}
div.el input[type="checkbox"]{width:20px;height:20px;margin:0px 5px 0px 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:#FE7D3D;color:#ffffff;font-size:24px;border:0px;border-radius:0px;outline:0;cursor:pointer;position:relative;margin:0px;}
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:100%;}
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 22px;}
	div.el{margin-bottom:10px;width:100%;}
	div.el label{font-size:16px;}
	div.cta button{padding:20px;}
	div.el:last-child{margin-top:5px;}
	
	label.priv{display:block!important;}
	label.priv input{position:relative;top:5px;}
	
}

.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;
  }
}