/*form styles*/
#msform {
	width: 800px;
	margin: 5px auto 30px auto;
	text-align: center;
	position: relative;
}

#msform-sticky {
	width: 99.47%;
	margin-bottom: 20px;
	padding-right: 8px;
	text-align: center;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	background: #fff;
	background-color: #004976; /*rgba(33, 51, 116); rgba(255, 255, 255, 0.849);*/
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);
	z-index:10;
}

#msform-sticky-small {
	width: 110%;
	margin-bottom: 20px;
	margin-left: -20px;
	margin-top: -20px;
	padding-right: 8px;
	text-align: center;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	background: #fff;
	background-color: #004976; /*rgba(33, 51, 116); rgba(255, 255, 255, 0.849);*/
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19);
	z-index:10;
}

/*progressbar*/
#progressbar-3,
#progressbar-4 {
	width: 600px;
	margin: 0 auto 30px auto;
	overflow: hidden;
	padding: 4px 0 4px 0 !important;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar-3 li{
	list-style-type: none;
	color: rgba(220, 220, 220, 0.7);
	text-transform: uppercase;
	font-size: 10px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar-4 li{
	list-style-type: none;
	color: rgba(220, 220, 220, 0.7);
	text-transform: uppercase;
	font-size: 10px;
	width: 25%;
	float: left;
	position: relative;
}

#progressbar-3 li:before,
#progressbar-4 li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: rgba(220, 220, 220, 0.7);
	background: transparent;
    border-radius: 300px;
    border: 4px rgba(105, 132, 157) solid;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar-3 li:after {
	content: '';
	width: 86%;
	height: 2px;
	background: rgba(220, 220, 220, 0.4);
	position: absolute;
	left: -43%;
	top: 14px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar-4 li:after {
	content: '';
	width: 82%;
	height: 2px;
	background: rgba(220, 220, 220, 0.4);
	position: absolute;
	left: -41%;
	top: 14px;
	z-index: -1; /*put it behind the numbers*/
}

/*sub classes*/
#progressbar-3 li:first-child:after,
#progressbar-4 li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}

#progressbar-3 li.active,
#progressbar-4 li.active {
	color: white;
}

#progressbar-3 li.active:before,
#progressbar-4 li.active:before {
    background: transparent;
    border: 4px white solid;
	color: white;
}
#progressbar-3 li.active:after,
#progressbar-4 li.active:after {
    background: white;
	color: rgba(220, 220, 220, 0.7);
}

#progressbar-3 li.finished:before,
#progressbar-4 li.finished:before {
    background: white;
	border: 4px white solid;
	font-weight: 600;
	color: #004976;
}
#progressbar-3 li.finished:after,
#progressbar-4 li.finished:after {
    background: white;
	color: #004976;
}

/*small progressbar*/
#progressbar-3-small,
#progressbar-4-small {
	width: 330px;
	margin: 0 auto 30px auto;
	overflow: hidden;
	padding: 4px 0 4px 0 !important;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar-3-small li{
	list-style-type: none;
	color: rgba(220, 220, 220, 0.7);
	text-transform: uppercase;
	font-size: 8px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar-4-small li{
	list-style-type: none;
	color: rgba(220, 220, 220, 0.7);
	text-transform: uppercase;
	font-size: 8px;
	width: 25%;
	float: left;
	position: relative;
}

#progressbar-3-small li:before,
#progressbar-4-small li:before {
	content: counter(step);
	counter-increment: step;
	width: 18px;
	line-height: 18px;
	display: block;
	font-size: 8px;
	font-weight: 600;
	color: rgba(220, 220, 220, 0.7);
	background: transparent;
    border-radius: 300px;
    border: 2px rgba(105, 132, 157) solid;
	margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar-3-small li:after {
	content: '';
	width: 82%;
	height: 1.5px;
	background: rgba(220, 220, 220, 0.4);
	position: absolute;
	left: -41%;
	top: 10px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar-4-small li:after {
	content: '';
	width: 78%;
	height: 1.5px;
	background: rgba(220, 220, 220, 0.4);
	position: absolute;
	left: -39%;
	top: 10px;
	z-index: -1; /*put it behind the numbers*/
}

/*sub classes*/
#progressbar-3-small li:first-child:after,
#progressbar-4-small li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}

#progressbar-3-small li.active,
#progressbar-4-small li.active{
	color: white;
}

#progressbar-3-small li.active:before,
#progressbar-4-small li.active:before {
    background: transparent;
    border: 2px white solid;
	color: white;
}

#progressbar-3-small li.active:after,
#progressbar-4-small li.active:after{
    background: white;
	color: rgba(220, 220, 220, 0.7);
}

#progressbar-3-small li.finished:before,
#progressbar-4-small li.finished:before{
    background: white;
	border: 2px white solid;
	font-weight: 600;
	color: #004976;
}

#progressbar-3-small li.finished:after,
#progressbar-4-small li.finished:after{
    background: white;
	color: #004976;
}