/* ========= INFORMATION ============================
	- document:  WP Coder!
	- author:    Dmytro Lobov 
	- url:       https://wow-estore.com/
==================================================== */
.step1heading{
    text-align:center;
    font-weight: 900;
    font-size: 29px;
    line-height: 1.1em;
    letter-spacing: -1.2px
}

.step2heading{
    text-align:center;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1em;
    letter-spacing: -0.6px
}
.step3heading{
    text-align:center;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.1em
}
.subtext{
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    line-height: 1.3em;
    letter-spacing: 0px
}

	/* Style the form */
#regForm {
  width: 100%;
  font-family: "Lato", Sans-serif;
}
#countinue, #pricefirst, #priceSecond, #pricethird, #pricefourth, #nextBtn, #nextBtnlast{
	font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 2px 1px 0px rgba(0,0,0,0.3);
    fill: #FFFFFF;
    color: #FFFFFF;
    background: url(../images/button-arrow.png) no-repeat 91% 50% #355796;
	border:0px;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 2px 3px 0px 0px #213b6b;
    display: block;
    line-height: 1;
    padding: 12px 60px 12px 24px;
    text-align: center;
    transition: all .3s;
	margin:0 auto;
	width:100%
}
#countinue:hover, #pricefirst:hover, #priceSecond:hover, #pricethird:hover, #pricefourth:hover, #nextBtn:hover, #nextBtnlast:hover{
	background-color: #538fbe;
}
#nextBtn{
	font-size:20px;
	opacity:0;
	position: absolute;
	top :-100px;
	display: none;
}
#pricefirst, #priceSecond, #pricethird, #pricefourth{
	font-size: 22px;
	margin-bottom:10px
}

.arrowup{
	margin:10px auto 0 auto;
	display:block;
}
/* Style the input fields */
input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

#nextBtn .btn_disable {
    cursor: default;
    background: #bfbfbf;
    color: #ffffff;
    box-shadow: none;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

/* Mark the active step: */
.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #4CAF50;
}

.form-field{
	margin-left:0
}

/* -- FROM CUSTOMIZE --*/

.radio-toolbar {
  margin: 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 2px 1px 0px rgba(0,0,0,0.3);
    fill: #FFFFFF;
    color: #FFFFFF;
    background: url(../images/button-arrow.png) no-repeat 91% 50% #355796;
	border:0px;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 2px 3px 0px 0px #213b6b;
    display: block;
    line-height: 1;
    padding: 20px 50px 20px 14px;
    text-align: center;
    transition: all .3s;
    margin: 0 auto 20px;
    width: 100%;
	cursor:pointer;
}
.radio-toolbar label:hover {
  background-color: #538fbe;
  }

.form-field {
    margin-bottom: 15px;
}
.form-field .inputField, .form-field .indicator{display:inline-block;vertical-align: middle;}
.form-field .inputField {
    width: 89%;
	    margin: 5px 0;
}
.form-field .indicator {
    position: absolute;
	margin-top:16px;
	margin-left:6px;
}
.check {
    background-image: url("../images/check.png");
	width: 47px;
    height: 22px;
    background-repeat: no-repeat;
}
label.error {
    color: #D9291C;
	font-size:11px;
	font-weight:bold
}
.arrow-required{
	-webkit-animation-name: arrow;
	-webkit-animation-duration: 800ms;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: arrow;
	-moz-animation-duration: 800ms;
	-moz-animation-iteration-count: infinite;
	-ms-animation-name: arrow;
	-ms-animation-duration: 800ms;
	-ms-animation-iteration-count: infinite;
	-o-animation-name: arrow;
	-o-animation-duration: 800ms;
	-o-animation-iteration-count: infinite;
	animation-name: arrow;
	animation-duration: 800ms;
	animation-iteration-count: infinite;
}
@keyframes arrow {
    0% {padding-left:0;}
    50% {padding-left:5px;}
	100% {padding-left:0;}
}
@-webkit-keyframes arrow {
    0% {padding-left:0;}
    50% {padding-left:5px;}
	100% {padding-left:0;}
}
@-moz-keyframes arrow {
    0% {padding-left:0;}
    50% {padding-left:5px;}
	100% {padding-left:0;}
}
@-ms-keyframes arrow {
    0% {padding-left:0;}
    50% {padding-left:5px;}
	100% {padding-left:0;}
}
@-o-keyframes arrow {
    0% {padding-left:0;}
    50% {padding-left:5px;}
	100% {padding-left:0;}
}
.infemail {
    display: none;
}
@media screen and (max-width: 767px) {
body #regForm{width: 100%;}
.form-field .inputField {
    width: 89%;}
	.form-field {
    position: relative;
}
#nextBtnlast{
	font-size:25px;
}
.check {
	background-image: none;
	position: absolute;}
.check:after{
	background-image: url("../images/tick-mark.png");
	content: "";
    display: inline-block;
    background-size: cover;
    width: 25px;
    height: 24px;}
.infemail {
    display: block;
}
}

/* user infor show css ----------------------*/
.step_four{
    width: 100%;
}
.person_info_ul{
    padding: 0;
}
.person_info_ul li{
    display: flex;
    justify-content: space-between;
    list-style: none;
}
.person_info_ul li h6:nth-child(2){
    font-weight: bold;
}