* {
	outline: none;
}

/* THE DONKEY */

.sp-menu-item-label {
	font-weight: bold;
	text-transform: none;
}

#sp-cookie-banner {
  z-index: 100000;
}

.sp-modal {
  z-index: 10000;
}


.banner-primary{
	z-index: 25300;
}

.banner-alert{
	z-index: 25300;
}

body, html {
	background: #fafafa;
	font-size: 14px;
	font-family: Bitter, sans-serif;
	overflow: auto;
}

header {		
	padding: 0 calc(30px*5) 15px;
	z-index: 10000;
	color: #fafafa;
	width: 100%;
	box-sizing: border-box;
	height: calc(30px*2.5);
	border-bottom: 1px solid #fafafa;
	position: fixed;
	margin-top: 60px;
}

.sp-sitebar {
	height: 45px;
	padding: 15px 0 0;
	width: 100%;
	z-index: 10000;
	position: fixed;
}

.sp-logo-container {
	margin-top: -15px;
}

.sp-shipping-title {
	font-size: 3em;
	color: #fafafa;
	text-shadow: 3px 2px 0 #2b3990;
	width: 100%;
	font-weight: bold;
	margin-top: 19%;
}

.sp-main-icon-intro {
	background: #e3e4f0;
}

.sp-main-content-intro {
	background: #fafafa;
	padding: calc(30px*2) calc(30px*5);
}

.sp-main-content-intro .sp-intro{
	width: 100%;
}

.fen-helper {
	color: #2b3990;
	font-style: italic;
}

.sp-shipping {
	z-index: 9999;	
	background: #fafafa;
	/*border-radius: 5px;*/
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	width: 50%;
	position: relative;
	top: -10%;
}

.sp-content-image-top {
  height: calc(30px*12) !important;
}

.sp-content-text-top, .sp-content-text-top-sub {
  top: 65% !important;
}

.sp-shipping-donkey-container {
	position: absolute;
	left: calc(-15px*12);
	width: calc(15px*18);
	height: calc(15px*18);
	background: #fafafa;
	border-radius: 100%;
	top: 50%;
	transform: translateY(-50%);
	box-sizing: border-box;
	padding: 5px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.sp-shipping-donkey-container img{
	height: 65%;
}

.sp-shipping-header {
	background: #2b3990;
	color: #fafafa;
	padding: calc( 5px*2 );
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-size: 1.3em;
	/*
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	*/
	box-sizing: border-box;
}

.shipping-prices {	
	margin: calc(30px*6) calc(30px*8);
}

.sp-products-result .sp-button {
	font-size: 1em;
}

.sp-products-result {
	background: #e3e4f0;
	padding: calc( 15px * 4 ) calc( 15px * 6 ) calc( 15px * 4 ) calc( 15px * 10 );
	border-radius: 30px;
	width: 60%;
	margin: auto;
	box-sizing: border-box;
}

.parcel-product-price-start {
	font-size: 0.8rem;
	color: #000000;
}

.parcel-product-price{
	font-size: 1.4rem;	
	font-weight: bold;
}

.parcel-product-name {
	color: #2b3990;
	margin-bottom: 5px;
	font-size: 1.2em;
}

.parcel-product {
	background: #fafafa;
	border: 1px solid #fafafa;
	padding: 15px;
	padding-left: 30px;
	position: relative;
}

.parcel-product:not(:last-child){
	margin-bottom: calc( 30px * 2 );
}

.parcel-product-handle {
	position: absolute;
	left: calc(-5px*18);
	width: calc(15px*8);
	height: calc(15px*8);
	background: #fafafa;
	border-radius: 100%;
	top: 50%;
	transform: translateY(-50%);
	box-sizing: border-box;
	padding: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;	
}

.sp-italic {
	font-style: italic;
}

.sp-dialog-header {
	background: #2b3990;
	padding: 5px 15px;
	font-weight: bold;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.sp-shipping-zones{	
	width: 100%;
	padding: 30px;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	justify-content: space-around;
	align-items: center;
}

.sphere-dialog {
	border-radius: 15px;
	border: 2px solid #2b3990;
	top: 3% !important;
	z-index:99999;
}

.parcel-product-courier-logo {
	max-width: 100%;
	max-height: 70px;	
}

.sp-donkey-border {
	border: 1px solid #2b3990;
	border-radius: 15px;
	box-sizing: border-box;
	padding: 15px;
	margin-top: 30px;	
}

.fen-label, .main-fen-label {
	font-weight: bold;
	color: #000000;
}

.sp-parcels-dimensions .fen {
	padding: 0 15px;
	box-sizing: border-box;
}

/****/


.sp-shipping-login-box {
	width: 100%;
	background: none;
	box-shadow: none;
	padding: calc(15px*2) 0;
}

hr {
	border: none;
	border-top: 1px solid;
	height: 1px;
}

.sp-shipping-total {
	font-size: 1.2em;
}

.sp-shipping-box {
	padding: calc(15px*3) 0;
	background: url('/static/images/4.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-wrap: wrap;
	height: 58vh;
	justify-content: center;
	align-items: flex-start;
	position: relative;
}

.sp-shipping-box-ov {
	position: absolute;
	left: 0;
	top: 0;
	background: #000;
	opacity: 0.3;
	height: 100%;
	width: 100%;
	z-index: 999;
}

.sp-shipping-titles {	
	color: #fafafa;
	z-index: 9999;
	width: 60%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	text-shadow: 0 2px 1px rgba(0,0,0,0.4);
}

.sp-shipping-midtitle {
	font-size: 1.5em;
	line-height: 1.5em;
	width: 100%;
}

.sp-shipping-header {
	text-shadow: 0 2px 1px rgba(0,0,0,0.4);	
}

.sp-shipping-pickup {
	width: 40%;
}


.sp-shipping-resume {
	width: 30%;
}

.sp-shipping-from {
	
}

.sp-shipping-to {
	
}


.force-1-1 {
	width: 100% !important;
}

.sp-parcel-address {
	padding: 15px;
	width: 100%;
}

.sp-box {
	border: 1px solid #ededed;
}

.fen-radio {
	top: 0;
}

.ups-dropoff-points {
	font-size: 0.8em;	
	padding-left: 15px;
}

.the-donkey {
	padding-left: 15px;
	font-size: 1.5em;
	font-weight: bold;
	color: #fafafa;
}

.sp-margin{
	margin: 30px 0;
}

.sp-main-icon-intro {
	padding: calc(30px*2);
}

.sp-main-icon-box-icon {
	font-size: 3em;
	color: #479fdf;
}

.sp-main-icon-box-title {
	color: #000000;
	margin-top: 5px;
}

h3.sp-intro {
	text-transform: none !important;
}

.resume-box {
	border: 1px solid #ededed;
}

.sp-cart-total {
	font-size: 1.5em;
	color: #2b3990;
	font-weight: bold;
	text-align: right;
	margin: 0 0 30px 0;
}

.sp-parcel-sitebar{
	height: calc(30px*1.5);
	border-bottom: 1px solid rgba(255,255,255,0.2);
}

.sp-parcel-sitebar a{
	color: #fafafa;
}

.sp-parcel-sitebar > *{
	height: 100%;
}

.sp-parcel-sitebar > * >*{
	padding: 0 calc(30px*5);
}

header, #sp-sitebar, .sp-sitebar {
	background: #2b3990;	
	background: -webkit-linear-gradient(90deg, #2b3990 80%, #479fdf 100%) !important;
	background: linear-gradient(90deg, #2b3990 80%, #479fdf 100%) !important;
}

.sp-main-content img {
	max-width: 100%;
}

footer {
	font-size: 0.9rem;
	line-height: 1.2rem;
	background: #191c2f;
	color: #fafafa;
	padding: calc(15px*3) calc(30px*5);	
}

footer a{
	color: #fafafa;
}

.sp-parcel-main-box {
	background: #fafafa;
	margin: calc(30px*3);
	padding: 30px;
	border-radius: calc( 5px/3);
	box-sizing: border-box;	
}

.sp-parcel {
	
}

.pointer {
	cursor: pointer;
}

.sp-parcel-conf {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 30px;
}

.sp-shipping-data {
	width: 100%;
	padding: 15px;
	background: #fff;
	display: flex;
	justify-content: space-between;
	margin: 30px 0 0;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.sp-shipping-info {
	margin-top: 30px;
}

.sp-box {
	padding: 15px;
	color: #000000;
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0,0,0,0.2);
}

.sp-shipping-resume-box {
	width: 25%;
	padding: 15px;
	color: #000000;
	background: #fff;
	display: flex;
	justify-content: space-between;
	box-shadow: 0 1px 4px rgba( 0,0,0,0.2)
}

.sp-shipping-resume-box h3 {
	color: #2b3990;
}

.sp-shipping-resume {
	width: 100%;
}

.sp-shipping-resume-section {
	font-size: 1em;
	margin: 30px 0 5px;
	font-weight: bold;
}

.sp-shipping-resume {
	line-height: 1.8em;
}

.shipping-resume {
    width: 60%;
    padding: 30px;
    color: #000000;
	background: #fff;
	justify-content: space-between;
	box-shadow: 0 1px 4px rgba( 0,0,0,0.2);
}

.sp-flex-align-start {
	align-items: flex-start;
}

.sp-flex-space-evenly {
	justify-content: space-evenly;
}

.sp-parcel-conf-pc {
	margin-left: 15px;
}

.sp-footer-menu-item {
	width: 100%;
}

p {
	margin: 0 0 15px 0;
}

.sp-logo {
	max-height: calc(30px*2);
}

.sp-logo-icon {
	font-size: 5em;
	color: #fafafa;
	filter: drop-shadow(2px 2px 4px #e3e4f0);
}

.sp-menu-item {	
	margin: 0 15px;
	color: #fafafa;
}

.sp-menu-item:last-child {
	margin-right: 0;
}

.sp-menu-item-icon {
	margin-right: calc(15px/3);
}

.sp-footer-logo {
	max-height: 3rem;
	padding-bottom: 15px;
}

.sp-footer-content {
	min-width: calc(30px*5);
	box-sizing: border-box;
}


.sp-footer-l {
	padding-left: 0;
}

.sp-footer-r {
	padding-right: 0;
}

.sp-footer-terms {
	margin-left: 15px;
	color: #fafafa;
}

.sp-footer-bottom {
	width: 100%;
}

.sp-footer-bottom-l {
	width: 50%;
}

.sp-footer-bottom-r {
	width: 50%;
	text-align: right;
}

hr, .sp-hr {
	width: 100%;
	margin: 15px 0;
}

.sp-hr {
	height: 1px;
	background: #fafafa;
	box-shadow: 0px 0px 2px;
}

h1 {
	margin: 0 0 30px 0;
}

h2, h3 {
	margin: 0 0 15px 0;
}

h3.sp-intro{
	margin: 0 0 15px;
	font-size: 2em;
	text-transform: uppercase;
}

b {
	color: #2b3990;
}

.sp-main-content-content{
	padding: calc(30px*3) calc(30px*10);
	font-size: 1.2rem;
}

.sp-main-content-bottom-content {
	padding: 0 calc(30px*10);
}

.sp-main-content-bottom-content .sp-padding {
	padding: 0;
}

.sp-main-content-bottom-content .fen {
	font-size: 1.2rem;
	line-height: 1.5rem;
}

.sp-main-content-content h2{
	margin-bottom: calc(30px*2);
}

.sp-main-content-top {
	text-align: center;	
	padding: calc(30px*6) calc(30px*5) calc(30px*3);
	font-size: 1.2rem;
	line-height: 2.5rem;
}

.sp-main-content-bottom{
	padding: 15px calc(30px*5);
}

.sp-main-content-top-title {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 2.5rem;
	line-height: 2.5rem;
}

.sp-main-content-middle-title {
	width: 100%;
	font-size: 2rem;
	line-height: 2.5rem;
}

.sp-footer-title{
	font-size: 1.5rem;
	margin-bottom: 15px;
}

.sp-button{
	-moz-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	background: #2b3990;
	color: #fafafa;
	border: 1px solid #2b3990;
	position: relative;
	font-size:1.2rem;
	line-height: 1;
	padding: 15px calc(15px*2);
	cursor: pointer;
	transition: 0.6s ease all;
	outline: none;
	border-radius: calc(5px/2);
	margin: 2px;
}

.sp-button:hover, .sp-button:active {
	background: #fafafa;
	color: #2b3990;
	border: 1px solid #2b3990;
	transform: none;
}

.sp-button:before,.sp-button:after {	
	display: none;
}

.sp-main-content-box, .sp-contact-box {
	width: 20%;
	box-sizing: border-box;
	background: #fafafa;
	font-size: 1rem;
	cursor: default;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	padding: 30px;
	border-radius: calc(5px/2);
	position: relative;
}

.sp-contact-box {
	width: auto;
	flex-grow: 1;
	flex-basis: 0;
}

.sp-main-content-box-title {
	color: #2b3990;
	padding: 5px 0;
	text-transform: uppercase;
	font-size: 1.2rem;
	margin-top: calc(5px*2);
	font-weight: bold;
}

.sp-main-content-box-text h1{
	margin: 0;
	font-weight: normal;
}

.sp-main-content-box-content {
	padding: 15px;
}

.sp-main-content-middle-content {
	margin-bottom: 30px;
}

.sp-main-content-box-img {
	width: 20%;
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

.sp-main-content-box-icon {
	font-size: 2rem;
	padding: 15px;
	color: #fafafa;
	background-color: #2b3990;
	position: absolute;
	top: -30px;
	border-radius: 100%;
	width: 30px;
	height: 30px;
}


::selection{
	color: #fafafa;
	background-color: #2b3990;
}

.sp-parallax{
	background-image: url('/static/images/parallax.jpg');
	background-attachment: fixed;
	background-position: right;
	background-repeat: no-repeat;
	background-size: cover;
}

.slides {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.slide{
	transition: all 0.5s ease-in;
	display: none;
}

.slide:first-child{
	display: block;
}

.slide img{
	position: absolute;
	width: 100%;
}

.sp-slide-title{
	font-weight: bold;
	font-size: 3.5rem;
	position: absolute;
	left: calc(30px*5);
	top: 25%;
	transform: translate(0%,-50%);
	text-transform: uppercase;
	color: #fafafa;
	padding: 5px calc(5px*2);
	text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
	transition:  all 0.5s ease;
}

.sp-slide-intro{
	font-size: 2rem;
	position: absolute;
	top: 35%;
	left: calc(30px*5);
	transform: translate(0%,-50%);
	color: #fafafa;
	padding: 5px calc(5px*2);
	text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
	transition:  all 0.5s ease;
}

.slide-nav-panel{
	position: absolute;
	font-size: 1.5rem;
	color: #fafafa;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
}

.slide-nav-panel *{
	opacity: 0;
	margin: 0 5px;
	transition:  all 0.5s ease;
	cursor: pointer;
}

.slide-nav-panel *.active{
	color: #2b3990;
}

.slides:hover .slide-nav-panel *{
	opacity: 0.6;
}

.slide-nav-panel *:hover{
	opacity: 1 !important;
}

.slide-nav{
	position: absolute;
	font-size: 3rem;
	color: #fafafa;
	height: 100%;
	width: 6rem;
}

.slide-nav:nth-child(odd){
	left: 0;
}

.slide-nav:nth-child(even){
	right:0;
}

.slide-nav *{
	cursor: pointer;
	transition:  all 0.5s ease;
	opacity: 0;
}

.slide-nav:hover *{
	opacity: 1;
}

.slider *{
	cursor: pointer;
}

.sp-footer-menu-item > *:first-child{
	min-width: 10%;
}

.sp-footer-menu-item *{
	color: #fafafa;
}

.sp-footer-menu-icon{
	font-size: 2rem;
	margin-right: 15px;
}

.sp-footer-menu-icon:last-child{
	margin-right: 0;
}

.sp-user-home {
	padding: calc(30px*2.5) calc(30px*5);
}

.sp-1-1 {
	width: 100%;
}

.sp-2-3 {
	width: 66.6%;
}

.sp-1-3 {
	width: 33.3%;
}

.sp-1-4 {
	width: 25%;
}

.sp-home-grid{
	/*
	padding: calc( (30px*2.5 ) - 15px ) calc( (30px*5) - 15px);
	*/
}

.sp-home-grid > *{
	padding: 0 15px;
}

.sp-home-grid > * > *{
	background: #ffffff;
	font-size: 1rem;
	cursor: default;
	box-shadow: 0 2px 8px #00000040;
	padding: 15px;
	border-radius: calc(5px/2);
	position: relative;
	margin: 15px 0;
}

.sp-home-grid-title{
	color: #2b3990;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-size: 1.2rem;
	font-weight: bold;
}

.sp-home-grid > *:nth-child(1){
	flex-grow: 2;
	flex-basis: 0;
}

.sp-home-grid > *:nth-child(2){
	flex-grow: 1;
	flex-basis: 0;
}

.sp-home-grid .sp-main-content-box-icon{
	left: 0;
	right: 0;
	margin: 0 auto;
}

.sp-home-grid-side > *{
	margin: 30px 0;
}
.sp-home-grid-side > *:nth-child(1){
	margin-top: 15px;
}

.sp-home-grid-side .sp-home-grid-title{
}

.sp-home-grid-side .des{
	/*
	margin-top: 15px;
	*/
}

.sp-home-grid-side .fen, .sp-home-grid .fen{
	font-size: 1rem;
	margin: 0 0 15px;
	padding: 0;
}

.sp-home-grid .fen{
	font-size: 1.2rem;
}

.sp-fen-view .fen{
	font-size: 1.2rem;
}

.sp-home-grid-content .sp-button{
	font-size: 1rem;
	padding: calc(5px*2);
}

.sp-home-grid-side .sp-button{
	font-size: 1rem;
	padding: calc(5px*2);
}

.sphere-dialog .sp-button{
	padding: calc(5px*2);
	font-size: 1rem;
}

.insurance-area {
	padding: 0 30px;
}

.insurance-area-link {
	color: #2b3990;
	width: 100%;
	margin: 0 0 15px 0;
}

.border-box {
	box-sizing: border-box;
}

.sp-user-home .sp-button {
	padding: calc(5px*2) 15px;
}

.user-area .sp-main-content-box-title {
	margin-bottom: 15px;
	padding: 0 5px;
}

.user-area .des * {
	font-size: 1.2rem;
}

.sp-sitebar a{
	color: #fafafa;
}

.sp-sitebar > *{
	height: 100%;
}

.sp-sitebar > * >*{
	padding: 0 calc(30px*5);
}

.sp-content-image-top{
	height: calc(30px*6);
	position: relative;
	width: 100%;
	overflow: hidden;
}

.sp-content-image-top img{
	position: absolute;
}

.sp-content-text-top, .sp-content-text-top-sub{
	position: absolute;
	color: #fafafa;
	top: 50%;
	transform: translateY(-50%);
	left: calc(30px*5);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 3.5rem;
	text-shadow: 0px 2px 2px rgba(0,0,0,0.5);
	transition: all 0.5s ease;
}

.sp-content-text-top-sub{
	top: 70%;
	font-size: 1.8rem;
	padding-left: 3px;
}

.sp-boxed-item{
	position: relative;
	background: #fafafa;
	box-sizing: border-box;
	width: 90%;
	margin-bottom: calc(30px*2);
	padding: 30px;
	box-shadow: 0 0 4px #2b3990cc;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
	border-radius: calc(5px/2);
	cursor: default;
}

.sp-boxed-item-icon{
	font-size: 30px;
	padding: 15px;
	color: #fafafa;
	background-color: #2b3990;
	position: absolute;
	top: -33px;
	border-radius: 100%;
	width: 36px;
	height: 36px;
}

.sp-contacts{
	margin: 30px calc(30px*4);
}

.sp-table-outro {
	font-style: italic;
}

.spherecpass {
	width: 100%;
}

.sphere-dialog-content{
	font-size: 1.1rem;
}

.sp-login-title {
	font-weight: bold;
	color: #2b3990;
}

.sp-teaser {
	flex-grow: 1;
	flex-basis: 0;
	min-width: 35%;
	max-width: 45%;
	position: relative;
	margin-bottom: calc(30px*3);
}
.sp-teaser:nth-last-child(-n+2){
	margin-bottom: 0;
}

.sp-teaser .sp-teaser-img img{
	border-radius: calc(SMALL-UNIT]/2);
	box-shadow: 0 2px 4px
}

.sp-teaser .sp-teaser-text {
	width: 45%;
	background: -moz-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0) 100%);
	padding: 15px;
	color: #ffffff;
	text-shadow: 0 2px 2px #4e4f4fcc;
	position: absolute;
	top: 10%;
	right: 6%;
	transition: all 0.5s ease;
}

.sp-teaser a, .sp-teaser b {
	color: #fff;
}

.sp-res-menu-container {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.sp-res-menu-container {
  padding: calc(30px*5) 15px 0;
}

.sp-res-menu {
	background: #ffffff;
	font-size: 1rem;
	line-height: 1rem;
	cursor: default;
	box-shadow: 0 2px 8px #00000040;
	padding: 15px;
	border-radius: calc(5px/2);
	position: relative;
	margin: calc(5px*5) 0;
}

.sp-res-menu-title > h1 {
	margin: 0;
	text-transform: uppercase;
	font-size: 2rem;
	line-height: 2rem;
	color: #2b3990;
}

.sp-res-menu-title {
	flex-grow: 1;
	flex-basis: 0;
}

.sp-res-menu-items {
	flex-grow: 3;
	flex-basis: 0;
}

.sp-res-menu-item {
	margin: 0 5px;
}

.sp-res-menu-item-title {
	text-transform: uppercase;
	margin-top: 5px;
}

.sp-res-menu-item-icon{
	color: #2b3990;
}

.sp-parcel-measures .fen {
	width: auto;
}

.sp-parcel-flag svg {
	width: 20px;
	height: 13px;
	margin: 0 5px;
}

.sp-button {
	padding: calc(5px*2);	
}

.sp-parcel-price-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.steps {
	width: 100%;
	border: none;
	box-shadow: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 30px;	
	opacity: 0.8;
}

.steps .step {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: 200px;	
}

.step-icon-container::before, .step-icon-container::after {
	background: #939ac9;
	height: 1px;
	flex-grow: 1;
	content: "";
}

.step-icon-container, .step-label {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.step-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(15px);
	height: calc(15px);
	padding: calc(15px/2);
	border: 1px solid #939ac9;
	color: #939ac9;
	border-radius: 100%;
	font-size: 1.2rem;
}
/*
.step-icon::after {
    content: '';
    position: absolute;
    left: 45%;
    top: 46%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #887a70;
    clear: both;
}
*/
.step-label {
	font-size: 1rem;
	text-transform: uppercase;
	color: #939ac9;
	margin-top: 5px;
	justify-content: center !important;
	height: calc(15px*2);
	line-height:  15px;
	text-align: center;	
}

.step-separator-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(15px*8);
	position: absolute;
	right: 0;
	width: 118px;
	right: -64px;
	top: 23px;
}

.step-separator {
	height: 0px;
	width: 100%;
	border: 1px solid #939ac9;
}

.step:first-child .step-icon-container::before {
	height: 0;
}

.step:first-child .step-label {
	justify-content: flex-start;
}

.step:last-child .step-label {
	justify-content: flex-end;
}

.step:last-child .step-icon-container::after {
	height: 0;
}
.step.completed + .step .step-icon-container::before {
	background-color: #479fdf;
	border-color: #479fdf;
	height: 3px;
	opacity: 1;
}

.step.completed .step-label {
	color: #479fdf;
	opacity: 1;
}

.step.completed .step-icon{
	opacity: 1;
	background-color: #479fdf;
	border-color: #479fdf;
	color: #fafafa;
}

.step.completed .step-icon-container::after {
	background-color: #479fdf;
	border-color: #479fdf;
	height: 3px;
	opacity: 1;
}

.step.completed:first-child .step-icon-container::before {
	height: 0px;
}

.step.completed:last-child .step-icon-container::after {
	height: 0px;
}

.sp-top-menu-item{
  height: 14px;
  border-radius: 8px;
}

.sp-login {
	padding: calc( 30px*13) calc( 30px*10) calc( 30px*10);
}

.step.current, .step.completed {
	opacity: 1;	
}

.step.completed {
	cursor: pointer;
}

.step.current .step-icon {
	color: #fafafa;
	border-color: #479fdf;
	background: #2b3990;
	box-shadow: 0 0px 1px rgba(0,0,0,0.8);
	opacity: 1;
}

.step.current .step-icon-container::before {
	color: #2b3990;
	opacity: 1;
}

.step.current .step-label {
	color: #2b3990;
	font-weight: bold;
	opacity: 1;
}

.step.current .step-label::before {
	content: "";
	height: 5px;
	width: 5px;
	margin-right: 5px;
	background: #2b3990;
}

.step.incomplete .step-icon {
	background-color: #ef0000;
	border-color: #ef0000;
	color: #fafafa;
}

.step.incomplete .step-label {
	color: #ef0000;
	opacity: 1;
}


@media only screen and (max-width: 600px) {

	header {
		padding: 15px;
		position: fixed;
		margin-top:30px;
		height:auto;
	}

	.sp-sitebar {
		padding: calc(5px*2) 0 0;
		font-size: .6rem;
		width: 100%;
		z-index: 99999;
		height: 20px;
		position: fixed;
	}

	.sp-shipping-titles {
		width: 95%;
		font-size: 60%;
	}

	.sp-shipping-box {
		padding: 0px;
		height: 100vh;
	}

	.sp-shipping {
		width: 90%;
		top: 6%;
	}

	.sp-shipping-donkey-container {
		left: 33%;
		width: calc(15px*7);
		height: calc(15px*7);
		top: -15%;
	}

	.sp-menu {
		justify-content: space-between;
	}

	.sp-shipping-title {
		margin-top: 65%;
	}

	.sp-menu-item {
		margin: 3px 5px;
	}

	.sp-menu-item:first-child {
		margin-left: 5px;
	}

	.sp-sitebar > * >*{
		padding: 0 5px;
	}

	.sp-main-icon-box-title {
		margin: 5px 0px 15px;
	}

	.sp-main-icon-intro {
		padding: 30px;
	}

	.sp-main-content-intro {
		padding: 30px;
	}

	.sp-main-content-box, .sp-contact-box {
		width: 100%;
	}

	.sp-main-content-content {
		padding: 30px;
	}

	.sp-main-content-content h2 {
		margin-bottom: calc(30px*1);
	}

	footer {
		padding: 30px;
	}

	.sp-main-content-top-title {
		font-size: 2rem;
	}

	.sp-login {
		height: auto;
	}

	.sp-login-box {
		margin-top: calc(30px*7);
		padding: 20px;
	}

	.sp-home-grid {
		width: auto;
	}

	.sp-table-filters {
		margin: 5px;
	}

	.sp-dropdown {
		width: 100%;
	}

	.sp-res-menu-container {
		padding-top: calc(30px*6);
	}

	.sp-res-menu {
		font-size: 0.9rem;
		padding: 12px;
		text-align: center;
	}

	.sp-res-menu-title {
		margin-bottom: 10px;
	}

	.sp-home-grid-content .sp-button {
		padding: calc(5px*1);
	}

	.sp-table-filters {
		margin: 5px 0px;
		font-size: 0.8rem;
	}

	.sp-home-grid > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
		width: fit-content;
	}

	.sp-main-content-box-icon {
		top: -40px;
		width: 25px;
		height: 25px;
	}

	.sp-home-grid > :nth-child(2) {
		margin-top: 30px;
	}

	.shipping-prices {
		margin: calc(30px*8) 0 0;
	}

	.steps .step {
		width: 15%;
	}

	.step-label {
		color: transparent;
	}

	.steps {
		margin-bottom: unset;
	}

	.shipping-prices {
		margin: calc(30px*8) 0 0;
	}

	.sp-shipping-data {
		display:unset;
		height: 100%;
	}

	.sp-shipping-data > div {
		margin-bottom: 5px;
	}

	div.sp-scale:nth-child(7) {
		width: fit-content;
	}

	.sphere-dialog {
		width: 90% !important;
	}

	.des .sp-button {
		width: 100%;
		margin: 2px;
	}

	.sp-shipping-data {
		margin: 15px;
	}

	.sp-shipping-info {
		margin: 30px;
	}

	.sp-products-result {
		padding: 15px calc(15px*11);
		margin: 15px;
	}

	.parcel-product:not(:last-child) {
		margin-bottom: 25px;
	}

	.parcel-product-handle {
		left: unset;
		transform: unset;
		right: calc(30px*1.4);
		width: calc(15px*7);
		height: calc(15px*7);
		top: 25%;
		padding: 15px;
	}

	.parcel-product {
		border: unset;
		padding: 0px;
		background: transparent;
		margin-left: -25px;
	}

	.parcel-product-price{
		margin-top: 33%;
	}

	div.parcel-product:nth-child(2) > div:nth-child(3) {
		margin-bottom: unset;
		margin-left: -25px;
		height: 120px;
	}

	.step.completed .step-label {
		opacity: 0;
	}

	.sp-flex-space-evenly {
		display: unset;
	}

	.sp-shipping-pickup {
		width: auto;
		padding: 15px;
	}

	.sp-shipping-resume-box {
		width: auto;
		margin: 15px;
	}

	.sp-1-1 > div:nth-child(1) > div:nth-child(2) {
		margin-left: 10px;
	}

	.sp-content-image-top {
		margin-top: calc(30px*6);
	}

	.sp-content-text-top, .sp-content-text-top-sub {
		left: calc(30px*1);
		font-size: 2.5rem;
		text-align: left;
	}
}
/*(min-width: 1099px) and (max-width: 1954px)*/
@media (min-width: 1440px) and (max-width: 2560px) {

	.sp-shipping-title {
		margin-top: 10%;
	}

	.sp-shipping {
		top: -2%;
	}

	.sp-main-content-content {
		padding: calc(30px*3) calc(30px*5);
	}

	.sp-main-content-intro {
		padding: calc(30px*2) calc(30px*2);
	}

	.sp-login {
		padding: calc(30px*13) calc(30px*5) calc(30px*11);
	}

	#sp-main-content {
		margin-top: calc(30px*4);
	}

	.shipping-prices {
		margin-top: calc(30px*6);
	}

	.sp-res-menu-container {
		padding: 6px 15px 0;
    margin-top: calc(30px*4);
	}
}

@media (min-width: 1025px) and (max-width: 1920px) {

	#sp-main-content {
		margin-top: calc(30px*1);
	}

	.sp-shipping-title {
		margin-top: 11%;
	}

	.sp-content-image-top {
		margin-top: calc(30px*4);
	}

	.sp-res-menu-container {
		margin-top: calc(30px*4);
	}
}

@media (min-width: 720px) and (max-width: 1280px) {

	.sp-sitebar {
		height: 30px;
	}

	header {
		padding: 0 calc(30px*2) 15px;
		z-index: 100000;
		margin-top: 45px;
		font-size: 1rem;
	}

	.sp-sitebar > * > * {
		padding: 0 calc(30px*2);
	}

	.sp-shipping-title {
		margin-top: 12%;
	}

	.sp-shipping {
		top: -5%;
	}

	.sp-shipping-donkey-container {
		width: calc(15px*16);
		height: calc(15px*16);
	}

	.sp-main-content-intro {
		padding: calc(30px*2) calc(30px*1);
	}

	.sp-main-content-content {
		padding: calc(30px*3) calc(30px*2);
	}

	footer {
		padding: calc(15px*3) calc(30px*2);
	}

	header.sp-flex > div:nth-child(1) {
		text-align: center;
	}

	#sp-main-content {
		margin-top: calc(30px*5);
	}

	.shipping-prices {
		margin: calc(30px*2) calc(30px*1);
	}
}


@media only screen and (min-device-width: 956px) and (max-device-width: 1470px) {

	.sp-main-content-content {
		padding: calc(30px*3) calc(30px*3);
	}

	header {
		padding: 0 calc(30px*3) 15px;
	}

	.sp-sitebar > * > * {
		padding: 0 calc(30px*3);
	}

	.sp-content-text-top, .sp-content-text-top-sub {
		left: calc(30px*3);
	}

	.shipping-prices {
		margin: calc(30px*6) calc(30px*1) calc(30px*3);
	}
}


/*
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	header{
		padding: 30px;
	}
	header > *{
		width: auto;
		display: block;
	}
	header > *:first-child{
		width: auto;
		display: block;
		margin-bottom: 0;
	}
	.sp-content-text-top{
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		font-size: 2.5rem;
		text-align: center;
	}
	.slides{
		height: 200px;
	}
	.sp-slide-title{
		font-size: 2.5rem;
		left: 5%;
		top: 40%;
		transform: translateY(-50%);
	}
	.sp-slide-intro{
		left: 5%;
		top: 60%;
		transform: translateY(-50%);
		line-height: 2rem;
	}
	.sp-menu-item{
		margin: 0 5px;
	}
	.sp-menu-item:first-child{
		margin-left: 0;
	}
	.sp-menu-item:last-child{
		margin-right: 0;
	}
	.sp-main-content-intro{
		padding: 30px;
	}
	.sp-main-content-top{
		padding: 30px;
		font-size: 1.2rem;
		line-height: 2.4rem;
	}
	.sp-main-content-content{
		padding: 30px calc(30px*2);
		font-size: 1.2rem;
		line-height: 2.4rem;
	}
	.sp-main-content-box, .sp-contact-box{
		width: 30%;
	}
	.sp-main-content-bottom{
		padding: 5px;
	}
	footer{
		padding: 30px;
	}
	footer .sp-flex-cross-center{
		align-items: flex-start;
	}
	.sp-footer-content{
		margin: 15px 0;
		min-width: auto;
	}
	.sp-footer-content:first-child{
		margin-top: 0;
	}
	.sp-footer-content:last-child{
		margin-bottom: 0;
	}
	.sp-login-box{
		width: auto;
	}
	.sp-login-buttons{
		width: auto;
	}
	.sp-login-description{
		text-align: center;
	}
	.sphere-app{
		padding: 0;
	}
	.sp-home-grid .fen{
		font-size: 1rem;
	}

	.sp-home-grid > *, .sp-home-grid > * > *{
		width: 100%;
		box-sizing: border-box;
	}
	.sphere-dialog{
		width: 90%;
	}
	
	.sp-main-content-bottom {
		flex-wrap: wrap;
	}
	
	.sp-main-content-bottom img {
		width: 90%;
		padding: calc(5px*2);
		box-sizing: border-box;
		margin: auto;
	}		
}

@media only screen and (min-width: 1024px) and (max-width: 1199px ) {
	.sp-main-content-bottom img {
		max-width: 75%;
	}
	.sp-main-content-content {
		padding: calc(15px*3) calc(15px*10);
	}
	.slides {
		height: 380px;
	}

	.sp-sitebar > * >* {
		padding: 0 calc(30px*2);
	}
	
	header {
		padding: 15px calc(30px*2);
	}

	.sp-slide-title {
		left: calc(30px*2);
	}

	.sp-slide-intro {
		top: 45%;
		left: calc(30px*2);
	}

	.sp-main-content-box {
		width: 40%;
	}

	.sp-home-grid > * > * {
		margin: 30px 0;
	}

	.sphere-dialog {
		width: 60%;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1023px){
	
	.sp-sitebar > * >* {
		padding: 0 30px;
	}
	
	.sp-slide-title {
		top: 35%;
	}
	
	.sp-slide-intro {
		top: 65%;
	}
	
	.sp-main-content-box {
		width: 40%;
	}
	
	.sp-home-grid > * > * {
		margin: 30px 0;
	}
	
	.sp-home-grid-title {
		padding: 5px;
	}
	
	.sp-dialog .sp-button .sp-margin-bs.disable-selection {
		margin-left: 5px;
	}
}
*/


@media only screen and (min-device-width: 375px) and (max-device-width: 767px){

	body, html {
		font-size: 13px;
	}	
	
	.sp-sitebar {
		height: 30px;	
	}
	
	.sp-menu {
		width: 100%;
		padding: calc(5px*2);
		font-size: 1rem;
	}

	.sp-main-content-box {
		width: 100%;
		padding: 15px;
	}
	
	.sp-main-content-box-text {
		font-size: 1rem;
	}

	.sp-main-content-intro {
		padding: 15px;
	}
	
	.sp-main-content-top-title {
		font-size: 1.7rem;
	}
	
	.sp-main-content-content h2 {
		margin-bottom: calc(15px*1);
	}

	.sp-main-content-content {
		font-size: 1rem;
	}

	.sp-shipping-title {
		font-size: 2rem;
	}

	.sp-shipping-pickup {
		padding: 30px;
	}

	.des .sp-button {
		width: auto;
	}

	p {
		line-height: 140% !important;
	}
	
	.sp-res-menu-container {
		padding-top: calc(30px*6.5);
	}
	.sp-home-grid-content .sp-button {
		padding: calc(5px*2);
		padding: auto;
	}
}