.active h1 {
	display: block;
	background: transparent;
	text-align: center;
	width: 100%;
	padding: 0 !important;
	line-height: 20px;
	box-sizing: border-box;
	color: rgb(39, 39, 47);
	font-size: 17px !important;
	margin: 0 auto;
	position: relative;
	bottom: 26px;
	top: 45px !important;
}
.header-slider {
	width: 100%;
	height: 8px;
	margin-bottom: 100px;
	margin-top: 30px;
	background: transparent;
	display: flex;
}
.header-slider.four_steps .header-slider1, .header-slider.four_steps .header-slider2, .header-slider.four_steps .header-slider3, .header-slider.four_steps .header-slider4 {
	width: 25% !important;
	height: 8px !important;
	box-sizing: border-box;
	display: inline-block;
	text-align: center;
}
.header-slider.three_steps .header-slider1, .header-slider.three_steps .header-slider2, .header-slider.three_steps .header-slider3, .header-slider.three_steps .header-slider4 {
	width: 34% !important;
	height: 8px !important;
	box-sizing: border-box;
	display: inline-block;
	text-align: center;
}
.header-slider.three_steps .header-slider3::before {
	content: "\f003";
	font-family: "fontawesome";
}
.page-e-send .header-slider.three_steps .header-slider3::before {
	content: "\f00c";
	font-family: "fontawesome";
}
/*----------------------------- ACTIVE KROK1 ----------------------------*/
.header-slider1.active {
	background: linear-gradient(to right, rgb(0, 255, 255) 0%, rgb(255, 153, 204) 35%);
	position: relative;
}
.header-slider1.active::before {
	width: 50% !important;
	height: 8px !important;
	content: "";
	position: absolute;
	pointer-events: none;
	margin-top: -1px;
	bottom: 0;
	font-weight: bold;
	right: 0;
	display: none;
	line-height: 41px;
	background: rgb(237, 237, 237);
}
.header-slider1.active::after {
	content: "\f291";
	font-family: "fontawesome";
}
.header-slider1.active::after {
	width: 60px !important;
	height: 60px !important;
	position: relative;
	pointer-events: none;
	margin-top: -1px;
	color: rgb(39, 39, 47);
	font-size: 31px;
	bottom: 49px;
	font-weight: bold;
	margin: 0 auto;
	left: 0;
	display: block;
	text-align: center;
	line-height: 60px;
	box-shadow: inset 0px 0px 0px 7px rgb(255, 153, 204);
	background: rgb(255, 255, 255);
	border-radius: 50%;
}
/*----------------------------- KONEC ACTIVE KROK1 ----------------------------*/

/*----------------------------- NONE ACTIVE KROK1 ---------------------------- */

.page-e-finish .header-slider1, .page-e-confirm .header-slider1, .page-e-send .header-slider1 {
	background: linear-gradient(to right, rgb(0, 255, 255) 100%, rgb(255, 153, 204) 100%);
	position: relative;
}
.page-e-finish .header-slider1::before, .page-e-confirm .header-slider1::before, .page-e-send .header-slider1::before {
	content: "\f00c";
	font-family: "fontawesome";
	color: #00ffff !important;
}
.page-e-finish .header-slider1.active {
	background: linear-gradient(to right, rgb(0, 255, 255) 0%, rgb(255, 153, 204) 35%) !important;
}
.page-e-finish .header-slider1.active::before {
	display: none !important;
}
.page-e-finish .header-slider1::before, .page-e-confirm .header-slider1::before, .page-e-send .header-slider1::before {
	background: rgb(255, 255, 255);
	height: 50px;
	font-family: "fontawesome";
	font-size: 24px;
	width: 50px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	box-shadow: inset 0px 0px 0px 7px rgb(0, 255, 255);
	display: inline-block;
	line-height: 50px !important;
	top: -21px;
	text-align: center !important;
	font-weight: bold;
	transition: all 0.1s;
	border-radius: 50%;
}
/*----------------------------- KONEC NONE ACTIVE KROK1 ----------------------------*/

/*----------------------------- ACTIVE KROK2 ----------------------------*/

.header-slider2.active {
	background: linear-gradient(to right, rgb(0, 255, 255) 0%, rgb(255, 153, 204) 35%);
	position: relative;
}
.header-slider2.active::before {
	width: 50% !important;
	height: 8px !important;
	content: "";
	position: absolute;
	pointer-events: none;
	margin-top: -1px;
	bottom: 0;
	font-weight: bold;
	right: 0;
	display: none;
	line-height: 41px;
	background: rgb(237, 237, 237);
}
.header-slider2.active::after {
	content: "\f2b7";
	font-family: "fontawesome";
}
.header-slider2.active::after {
	width: 60px !important;
	height: 60px !important;
	position: relative;
	pointer-events: none;
	margin-top: -1px;
	color: rgb(39, 39, 47);
	font-size: 31px;
	bottom: 49px;
	font-weight: bold;
	margin: 0 auto;
	left: 0;
	display: block;
	text-align: center;
	line-height: 60px;
	box-shadow: inset 0px 0px 0px 7px rgb(255, 153, 204);
	background: rgb(255, 255, 255);
	border-radius: 50%;
}
/*----------------------------- KONEC ACTIVE KROK2 ----------------------------*/

/*----------------------------- NONE ACTIVE KROK2 ----------------------------*/
.page-e-confirm .header-slider2, .page-e-send .header-slider2 {
	background: linear-gradient(to right, rgb(0, 255, 255) 100%, rgb(255, 153, 204) 100%);
	position: relative;
}
.page-e-confirm .header-slider2::before, .page-e-send .header-slider2::before {
	content: "\f00c";
	font-family: "fontawesome";
	color: #00ffff !important;
}
.page-e-confirm .header-slider2::before, .page-e-send .header-slider2::before {
	background: rgb(255, 255, 255);
	height: 50px;
	font-family: "fontawesome";
	font-size: 24px;
	width: 50px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	box-shadow: inset 0px 0px 0px 7px rgb(0, 255, 255);
	display: inline-block;
	line-height: 50px !important;
	top: -21px;
	text-align: center !important;
	font-weight: bold;
	transition: all 0.1s;
	border-radius: 50%;
}
/*----------------------------- KONEC NONE ACTIVE KROK2 ----------------------------*/

/*----------------------------- ACTIVE KROK3 ----------------------------*/
.header-slider3.active {
	background: linear-gradient(to right, rgb(0, 255, 255) 0%, rgb(255, 153, 204) 35%);
	position: relative;
}
.header-slider3.active::before {
	width: 50% !important;
	height: 8px !important;
	content: "";
	position: absolute;
	pointer-events: none;
	margin-top: -1px;
	bottom: 0;
	font-weight: bold;
	right: 0;
	display: none;
	line-height: 41px;
	background: rgb(237, 237, 237);
}
.header-slider3.active::after {
	content: "\f06e";
	font-family: "fontawesome";
}
.header-slider3.active::after {
	width: 60px !important;
	height: 60px !important;
	position: relative;
	pointer-events: none;
	margin-top: -1px;
	color: rgb(39, 39, 47);
	font-size: 31px;
	bottom: 49px;
	font-weight: bold;
	margin: 0 auto;
	left: 0;
	display: block;
	text-align: center;
	line-height: 60px;
	box-shadow: inset 0px 0px 0px 7px rgb(255, 153, 204);
	background: rgb(255, 255, 255);
	border-radius: 50%;
}
/*----------------------------- KONEC ACTIVE KROK3 ----------------------------*/

/*----------------------------- NONE ACTIVE KROK3 ----------------------------*/
.page-e-send .header-slider3::before {
	content: "\f00c";
	font-family: "fontawesome";
	color: #00ffff !important;
}
.page-e-send .header-slider3 {
	background: linear-gradient(to right, rgb(0, 255, 255) 100%, rgb(255, 153, 204) 100%);
	position: relative;
}
.page-e-send .header-slider3::before {
	background: rgb(255, 255, 255);
	height: 50px;
	font-family: "fontawesome";
	font-size: 24px;
	width: 50px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	box-shadow: inset 0px 0px 0px 7px rgb(0, 255, 255);
	display: inline-block;
	line-height: 50px !important;
	top: -21px;
	text-align: center !important;
	font-weight: bold;
	transition: all 0.1s;
	border-radius: 50%;
}
/*----------------------------- KONEC NONE ACTIVE KROK3 ----------------------------*/

/*----------------------------- NONE ACTIVE KROK4 ----------------------------*/
.page-e-send .header-slider4::before {
	content: "\f00c";
	font-family: "fontawesome";
	color: #00ffff !important;
}
.page-e-send .header-slider4 {
	background: linear-gradient(to right, rgb(0, 255, 255) 100%, rgb(255, 153, 204) 100%);
	position: relative;
}
.page-e-send .header-slider4::before {
	background: rgb(255, 255, 255);
	height: 50px;
	font-family: "fontawesome";
	font-size: 24px;
	width: 50px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	box-shadow: inset 0px 0px 0px 7px rgb(0, 255, 255);
	display: inline-block;
	line-height: 50px !important;
	top: -21px;
	text-align: center !important;
	font-weight: bold;
	transition: all 0.1s;
	border-radius: 50%;
}
/*----------------------------- KONEC NONE ACTIVE KROK4 ----------------------------*/

.header-slider1::before {
	content: "\f291";
	font-family: "fontawesome";
}
.header-slider1::before {
	background: rgb(255, 255, 255);
	height: 50px;
	color: RGB(128, 128, 128);
	width: 50px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	box-shadow: inset 0px 0px 0px 7px rgb(237, 237, 237);
	display: inline-block;
	font-size: 21px;
	line-height: 50px !important;
	top: -21px;
	text-align: center !important;
	font-weight: bold;
	border-radius: 50%;
}
.header-slider2::before {
	content: "\f2b7";
	font-family: "fontawesome";
}
.header-slider2::before {
	background: rgb(255, 255, 255);
	height: 50px;
	color: RGB(128, 128, 128);
	width: 50px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	box-shadow: inset 0px 0px 0px 7px rgb(237, 237, 237);
	display: inline-block;
	font-size: 21px;
	line-height: 50px !important;
	top: -21px;
	text-align: center !important;
	font-weight: bold;
	border-radius: 50%;
}
.header-slider3::before {
	content: "\f06e";
	font-family: "fontawesome";
}
.header-slider3::before {
	background: rgb(255, 255, 255);
	height: 50px;
	color: RGB(128, 128, 128);
	width: 50px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	box-shadow: inset 0px 0px 0px 7px rgb(237, 237, 237);
	display: inline-block;
	font-size: 21px;
	line-height: 50px !important;
	top: -21px;
	text-align: center !important;
	font-weight: bold;
	border-radius: 50%;
}
.header-slider4::before {
	content: "\f003";
	font-family: "fontawesome";
}
.header-slider4::before {
	background: rgb(255, 255, 255);
	height: 50px;
	color: RGB(128, 128, 128);
	width: 50px;
	text-align: center;
	margin: 0 auto;
	position: relative;
	box-shadow: inset 0px 0px 0px 7px rgb(237, 237, 237);
	display: inline-block;
	font-size: 21px;
	line-height: 50px !important;
	top: -21px;
	text-align: center !important;
	font-weight: bold;
	border-radius: 50%;
}
.header-slider-heading {
	display: block;
	color: rgb(146, 126, 126);
	font-size: 16px!important;
	font-weight: bold;
	position: relative;
	text-align: center;
	top: -75px;
	padding-top: 71px;
	text-decoration: none;
}

@media only screen and (max-width: 767px) {
	.header-slider span {
		display: none;
	}
	.header-slider1.active::after, .header-slider2.active::after, .header-slider3.active::after, .header-slider4.active::after {
		width: 60px !important;
		height: 60px !important;
		position: relative;
		pointer-events: none;
		margin-top: -1px;
		color: rgb(39, 39, 47);
		font-size: 31px;
		bottom: 27px;
		font-weight: bold;
		margin: 0 auto;
		left: 0;
		display: block;
		text-align: center;
		line-height: 60px;
		box-shadow: inset 0px 0px 0px 7px rgb(255, 153, 204);
		background: rgb(255, 255, 255);
		border-radius: 50%;
	}
	.header-slider-heading {
		display: none !important;
	}
	.header-slider {
		width: 100%;
		height: 8px;
		margin-bottom: 55px !important;
		margin-top: 30px;
		background: rgb(237, 237, 237);
		display: flex;
	}
}
.header-slider ul.order-steps li.active-step div.step-icon-container {
	background: transparent;
}

html .header-slider ul.order-steps li > div {
	color: #2B49BD;
}


html .header-slider ul.order-steps li.completed-step div.step-icon-circle, html .header-slider ul.order-steps li.active-step div.step-icon-circle {
	border-color: #5B79ED;
	background-color: #5B79ED;
}

html .header-slider .steps-progress .progress-indicator {
	height: 100%;
	font-size: 12px;
	line-height: 20px;
	float: left;
	width: 0;

	color: #6772E5;
	background: white;
}

html .header-slider ul.order-steps li .step-title {
	padding-top: 6px;
	font-size: 19px;
	font-family: Montserrat;
	font-weight: normal;
	color: white;
}
.header-slider .steps-progress {
	position: relative;
	top: 40px;
	height: 4px;
	background: white;
}
.page-e-basket .header-slider.four_steps .steps-progress .progress-indicator {
	width: 15%;
	background: #5B79ED;
}

.header-slider ul.order-steps li.active-step .step-title {
	color: #5B79ED;
}

html .header-slider {
	background: transparent;
}
html .header-slider.three_steps, .header-slider.four_steps {
	height: 90px;
	display: block;
}

html .header-slider ul.order-steps li > div {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding: 0;
	margin: 0 auto;
	color: black;
	position: relative;
	top: 3px;
	display: flex;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-positive: 1;
	flex-grow: 1;
}

html .header-slider .steps-progress .progress-indicator {
	color: #6772E5;
	background: #6772E5;
}

.header-slider ul.order-steps li i.step-icon.icon-1::before {
	content: "\f291";
}