@import url(https://fonts.googleapis.com/css?family=Montserrat);
 * {
	 margin: 0;
	 padding: 0;
}
 html {
	 height: 100%;
	 background: rgb(194, 194, 194) ;
	 /* background: white */
}
 body {
	 font-family: montserrat, arial, verdana;
	 background: rgb(194, 194, 194) ;
}

.name{
	text-align: left;
}

.required{
	color:red;
}

#container{
	margin-top: 10px;
}

#professionalamount, #basicamount , #enterpriseamount{
	size: 40px;
}
#plansdiv{
	height: 20px;
	/*border:1px solid red;*/
	box-sizing: content-box;
	margin-bottom: 20px;
}

.details{
	height:32%;
	/*overflow-y:scroll;*/
}

input[name=plan]{
	width: 25px !important;
	height: 20px;

}
 #multistepsform {
	/* width: 400px; */
	width: 60%;
	 margin: 50px auto;
	 text-align: center;
	 position: relative;
}

 #multistepsform fieldset {
	 background: #ffffff9a;
	 border: 0 none;
	 border-radius: 3px;
	 box-shadow: 0 0 8px 1px #696969d5;
	 padding: 20px 30px;
	 box-sizing: border-box;
	 width: 80%;
	 margin: 0 10%;
	 position: relative;
}
 #multistepsform fieldset:not(:first-of-type) {
	 display: none;
}
 #multistepsform input, #multistepsform textarea, #multistepsform select {
	 padding: 15px;
	 border: 1px solid #0B768D;
	 border-radius: 3px;
	 margin-bottom: 10px;
	 width: 100%;
	 box-sizing: border-box;
	 font-family: montserrat;
	 color: #2c3e50;
	 font-size: 13px;
}
 #multistepsform input:focus, #multistepsform textarea:focus {
	 border-color: #9ff3f3;
	 outline: none;
	 color: #637373;
}
 #multistepsform .action-button {
	 width: 100px;
	 background: #0B768D;
	 font-weight: bold;
	 color: #fff;
	 transition: 150ms;
	 border: 0 none;
	 border-radius: 1px;
	 cursor: pointer;
	 padding: 10px 5px;
	 margin: 10px 5px;
}
 #multistepsform .action-button:hover, #multistepsform .action-button:focus {
	 box-shadow: 0 0 0 2px #0B768D, 0 0 0 3px #ff9 76;
	 color: #fff;
}
 #multistepsform .fs-title {
	 font-size: 15px;
	 text-transform: uppercase;
	 color: #0B768D;
	 margin-bottom: 10px;
}
 #multistepsform .fs-subtitle {
	 font-weight: normal;
	 font-size: 13px;
	 color: #666;
	 margin-bottom: 20px;
}
 #multistepsform #progressbar {
	 margin-bottom: 30px;
	 overflow: hidden;
	 counter-reset: step;
}
 #multistepsform #progressbar li {
	 list-style-type: none;
	 color: #87bbbb;
	 text-transform: uppercase;
	 font-size: 9px;
	 width: 33.33%;
	 float: left;
	 position: relative;
}
 #multistepsform #progressbar li:before {
	 content: counter(step);
	 counter-increment: step;
	 width: 20px;
	 line-height: 20px;
	 display: block;
	 font-size: 10px;
	 color: rgb(95, 95, 95);
	 background: #9ff3f3;
	 border-radius: 3px;
	 margin: 0 auto 5px auto;
}
 #multistepsform #progressbar li:after {
	 content: "";
	 width: 100%;
	 height: 2px;
	 background: #9ff3f3;
	 position: absolute;
	 left: -50%;
	 top: 9px;
	 z-index: -1;
}
 #multistepsform #progressbar li:first-child:after {
	 content: none;
}
 #multistepsform #progressbar li.active {
	 color: #0B768D;
}
 #multistepsform #progressbar li.active:before, #multistepsform #progressbar li.active:after {
	 background: #0B768D;
	 color: white;
}
 
.error{
	color:red;
	margin-top: 10px;
	margin-bottom: 0px;
	display: none;
	font-size: small;

}

.error.active{
	display: block;
}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans",sans-serif;
  text-decoration: none;
  list-style: none;
}

/*
body{
   background-color: #30336b;
  min-height: 100vh;
  display: flex;
  align-items: center;
} */

.pricing-table{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: min(1600px, 100%);
  margin: auto;
}
.price{
	color: #0B768D;
}

.pricing-card{
 display: inline;
  max-width: 30%;
  background-color: #fff;
  margin: 0px 0px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  color: #2d2d2d;
  transition: .3s linear;
  width: 90%;
  box-shadow: 1px 1px 8px rgba(168, 168, 168, 0.637);
  border-radius: 10px;
}

.pricing-card-header{
  background-color: #0B768D;
  display: inline-block;
  color: #fff;
  padding: 12px 30px;
  border-radius: 0 0 20px 20px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  transition: .4s linear;
  box-shadow: 1px 1px 14px #2c3e50;
  
  width: 80%;
}


.pricing-card-header.title{
	padding: 10px 10px;
	margin-top: 40px;
}

.pricing-card:hover .pricing-card-header:hover{
  box-shadow: 0 0 0 26em #0fbcf9;
  color:white !important;
}

.price{
  /*font-size: 70px;*/
  color: #0fbcf9;
  margin: 10px 0;
  transition: .2s linear;
}

.price sup, .price span{
  font-size: 22px;
  font-weight: 700;
}

.pricing-card li{
  font-size: 10px;
  padding: 7px 0;
  text-transform: uppercase;
}

  
.order-btn{
  display: inline-block;
  margin-bottom: 40px;
  /*margin-top: 80px;*/
  border: 2px solid #0fbcf9;
  color: #0fbcf9;
  padding: 8px 20px;
  border-radius: 8px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
  transition: .3s linear;
}
.btn2{
	margin-top: -2px;
}

.order-btn:hover{
  background-color: #0fbcf9;
  color: #fff;
}

@media screen and (max-width:1100px){
	.pricing-card{
	  width: 50%;
	}
  }

@media screen and (max-width:768){
	.pricing-card{
	  width: 50%;
	  display: block;
	}
  }
	


.mark{
	width: 30px;
	height: 30px;
}		

@media(max-width:900px){
	#multistepsform{
		/* margin-top: -70rem; */
		width: 100%;
	}
	.pricing-table{
		width: 100%;
		display: block;
		margin-top: 50px;
		border-top: 1px solid white;
	}
	#particles-js{
		height: 120vh;
	}
	#progressbar{
		/* margin-left: -130px; */
	}
  }
  @media(max-width:550px){

	#progressbar{
		/* margin-left: -130px; */
	}
  }