/*****************************************************************
############################# HEADER #############################
******************************************************************/
#header{
	min-width:320px;
	max-width:1280px;
	margin:0 auto;
}

.noScrollBody {
	position: fixed;
	width: 100%;
	height: 100%;
}

.stickyheader {
	position:fixed;
	width:100%;
	top:0;
	left:0;
	right: 0;
	z-index: 9999;
	background-color: #fff;
	min-width: 320px;
	max-width: 1280px;
	margin: 0 auto;
}

[data-checkout-overlay="active"] .stickyheader {
	z-index: 9;
}

#content.content-adjustment {
	margin: 150px auto 0 auto;
}

.line {
	height:0;
	position: relative;
	left:0;
	width:100%;
	border-bottom: 1px solid #CCCCCC;
}

.searchBox #multiSearchBox {
	border-top: 1px solid #CCCCCC;
}

.searchBoxWrapper .searchTypeSelected.sparicons.multi {
	border-right: none;
}
/*****************************************************************
############################# TOP HEADER ########################
******************************************************************/

#header .middleHeader{
	background:white;
}
#header .myAccountSticky, #header .loginSticky {
	display: none;
}
.h1SEO{
	padding:0;
	margin:auto;
}


#header .myAccountSticky.logged.employee .myAccountUrl:before{
	content: "\a051";
	color: #007a4f;
	font-size: 27px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#header .myAccountSticky.logged .myAccountUrl:before{
	content:"\a058";/*ico-user_logged*/
	color: #e30613;
	font-size: 27px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

}

#header .stickyheader .headerAccount, .stickyheader .advertisement, .advertisement {
	display: none;
}

@media(max-width: 991px) {
  #header .stickyheader .searchBoxWrapper {
    display: none;
  }
}

@media(min-width:992px){

	#header .stickyheader .myAccountSticky .myAccountUrl{
		display: inline-block;
		width: 100%;
		height: 84px;
	}

	#header .stickyheader .bottomHeader, #header .stickyheader .searchBoxWrapper {
		height: 84px;
	}

	#header .stickyheader .myAccountSticky, #header .stickyheader .loginSticky {
		display: block;
		width: 10%;
		height: 84px;
		position: relative;
		float: left;
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
	}

	#header .stickyheader, #header .stickyheader .searchBoxWrapper {
		height: 84px;
		border-bottom: 1px solid #CCCCCC;
	}

	.stickyheader .searchBoxWrapper .searchBox .searchType .searchTypeSelected,
	.stickyheader .searchBoxWrapper .searchBox .searchType .searchTypeValue.multi,
	.stickyheader .searchBoxWrapper .searchBox .searchType .searchTypeValue.single
	{
		color: transparent;
	}

	#header .stickyheader .headerAccount .headerAccountUserInfo label,
	#header .stickyheader .headerAccount .headerAccountUserInfo label strong {
		display: none;
	}
}

@media(min-width:1280px){

	.stickyheader {
		-webkit-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.stickyheader.show {
		transition: all .3s ease-in-out;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}

	#header .stickyheader .myAccountSticky .myAccountUrl{
		display: inline-block;
		width: 90px;
		height: 84px;
	}

	#header .stickyheader .myAccountSticky, #header .stickyheader .loginSticky {
		width: 90px;
		height: 84px;
		border-bottom: none;
	}

	.stickyheader .searchBoxWrapper .searchBox .siteSearchInput {
		width: 448px;
	}

	.stickyheader .searchBoxWrapper .searchBox .searchType {
		width: 70px;
	}

	.stickyheader .searchBoxWrapper .searchBox .searchType:after {
		left: auto;
		right: 15px;
	}

}


/*****************************************************************
####################################################################
####################################################################
############################# MIDDLE HEADER ########################
####################################################################
####################################################################
******************************************************************/

#header .headerEntry{
	float:left;
	height:61px;
	width:20%;
	border-bottom:1px solid #cccccc;
}

#header .headerEntry.logo{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	background: #e0001a;
}

#header .headerEntry.logo img{
	display:block;
}

#header .headerEntry.logo > a, #header .headerEntry.logo > .h1SEO {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 64px;
	flex: 0 0 64px;
	margin: auto;
}

#header .headerCategoryMobile,
#header .headerAccount,
#header .headerTimeSlot{
	position:relative;
	border-right:1px solid #cccccc;
}

#header .headerTimeSlot:hover{
	background:#f8f8f8;
}

#header .headerCategoryMobile:before{
	content:"\a021";/*ico-categories*/
	color:#808080;
	font-size:28px;
	position:absolute;
	top:50%;margin-top:-14px;
	left:50%;margin-left:-14px;
}

#header .headerAccount.logged:before{
	font-size:24px;
	color:#e30613;
	position:absolute;
	top:50%;margin-top:-12px;
	left:50%;margin-left:-12px;
}

#header .headerAccount .ico-user, #header .stickyheader .loginSticky .ico-user {
	position:absolute;
	color:#808080;
	font-size:24px;
	top:50%;margin-top:-13px;
	left:50%;margin-left:-12px;
}

#header .headerAccount.logged:before{
	content:"\a058";/*ico-user_logged*/
}

#header .headerAccount.logged.employee:before{
	content:"\a051";/*ico-spar_logo*/
	color:#007a4f;
	font-size:27px;
	margin-top:-14.5px;
	margin-left:-13.5px;
}


#header .headerTimeSlot.ico-pickup:before {
	content: "\a042"; /*ico-pickup*/
}

#header .headerTimeSlot.ico-shipping:before {
	content: "\a047"; /*ico-shipping*/
	font-size: 35px;
	}


#header .headerTimeSlot.booked:before{
	color:#e30613;
}

#header .headerCategoryMobile.open:before,
#header .headerAccount.logged.open:before,
#header .headerTimeSlot.booked.open:before{
	content:"\a068";/*ico-x_sharp_thin*/
	font-size:24px;
	margin-top:-12px;margin-left:-12px;
}

#header .headerAccount.logged.open:before,
#header .headerTimeSlot.booked.open:before{
	color:#808080;
}

#header .headerCategoryMobile.open,
#header .headerAccount.logged.open,
#header .headerTimeSlot.booked.open{
	background:#f8f8f8;
	border-bottom-color:#f8f8f8;
}

#header .headerAccountMenu{
	width:100%;
	min-width:320px;
	max-width:767px;
	height:auto;
	position:absolute;
	background:#262626;
	z-index:5;
}

.page-cartPage #header .headerAccountMenu {
	z-index: 11;
}

#header .headerAccountMenu .headerAccountItem{
	background:#3b3b3b;
	min-height:50px;line-height:50px;
	border-bottom:1px solid #262626;
	cursor:pointer;
}

#header .headerAccountMenu .headerAccountItem:last-child{
	border:0;
}

#header .headerAccountMenu .headerAccountItem,
#header .headerAccountMenu .headerAccountItem a,
#header .headerAccountMenu .headerAccountItem label,
#header .headerAccountMenu .headerAccountItem span{
	font-family:MuseoSans;
	font-size:12px;
	font-weight:700;
	color:#ffffff;
	text-transform:uppercase;
	display:block;
	position:relative;
}

#header .headerAccountMenu .headerAccountItem i,
#header .flyoutMenuContainer .headerAccountItem i{
	margin-left:32px; /*32/320*/
	width:27px;
	display:inline-block;
	text-align:center;
	position:relative;
}

#header .flyoutMenuContainer .headerAccountItem i:not(.ico-sign_out){
	margin-left:10%;
	width:8.4375%;
}

#header .flyoutMenuContainer .headerAccountItem .ico-user{
	font-size:27px;
	color:#808080;
}

#header .flyoutMenuContainer .headerAccountItem .icoMobileLogout i{
	margin-left:0;
}

#header .headerAccountMenu .headerAccountItem span,
#header .flyoutMenuContainer .headerAccountItem span{
	display:inline-block;
	text-indent:31px;
	cursor:pointer;
	width:81.5625%;/*261/320*/
}

#header .flyoutMenuContainer .headerAccountItem span{
	text-indent:0;
}

#header .headerAccountMenu .headerAccountItem.headerAccountItemMyList span:before,
#header .headerAccountMenu .headerAccountItem.headerAccountItemMyList.open span:before{
	content:"\a006";/*ico-arrow_round_down*/
	font-size:9px;
	color:#919191;
	position:absolute;
	top:50%;margin-top:-3px;
	right:30px;
}

#header .headerAccountMenu .headerAccountItem.headerAccountItemMyList.open{
	background:#505050;
}

#header .headerAccountMenu .headerAccountItem.headerAccountItemMyList.open span:before{
	content:"\a009";/*ico-arrow_round_up*/
}

#header .headerAccountMenu .headerAccountItem.headerAccountUserInfo,
#header .flyoutMenuContainer .headerAccountItem.headerAccountUserInfo{
	position:relative;
	background:#f8f8f8;
	height:84px;line-height:normal;
	padding:0;
}

#header .headerAccountMenu .headerAccountItem.headerAccountUserInfo label,
#header .flyoutMenuContainer .headerAccountItem.headerAccountUserInfo label{
	font-family:MuseoSans;
	font-weight:500;
	font-size:12px;
	text-transform:uppercase;
	color:#3b3b3b;
	padding:27px 0 27px 31px;
	text-indent:0;
	display:inline-block;
}

#header .flyoutMenuContainer .headerAccountItem.headerAccountUserInfo label{
	width:61.5625%;
	padding-right:3%;
}

#header .flyoutMenuContainer .headerAccountItem.headerAccountUserInfo label span{
	text-decoration:underline;
}

#header .headerAccountMenu .headerAccountItem.headerAccountUserInfo label strong,
#header .flyoutMenuContainer .headerAccountItem.headerAccountUserInfo label strong{
	font-weight:700;
}

#header .headerAccountMenu .headerAccountItem.headerAccountUserInfo .ico-user_logged,
#header .flyoutMenuContainer .headerAccountItem.headerAccountUserInfo .ico-user_logged{
	color:#e30613;
	font-size:24px;
}

#header .headerAccountMenu .headerAccountItem.headerAccountUserInfo .ico-spar_logo,
#header .flyoutMenuContainer .headerAccountItem.headerAccountUserInfo .ico-spar_logo{
	color:#007a4f;
	font-size:27px;
}

#header .headerAccountMenu .headerAccountItem .ico-gear{
	font-size:24px;
	top:6px;
}

#header .headerAccountMenu .headerAccountItem .ico-heart_empty,
#header .headerAccountMenu .headerAccountItem .ico-list{
	font-size:22px;
	top:4.25px;
}

#header .headerAccountMenu .headerAccountItem .ico-orders{
	font-size:23px;
	top:5.75px;
}

#header .headerAccountMenu .headerAccountItem .ico-sign_out{
	font-size:22px;
	top:5.5px;
}

#header .flyoutMenuContainer .headerAccountItem .icoMobileLogout{
    display: inline-block;
    width: 20%;
    text-align: center;
    border-left: 1px solid #ccc;
}

#header .flyoutMenuContainer .headerAccountItem .icoMobileLogout .ico-sign_out{
	font-size:25px;
	color:#808080;
	padding:10px 0;
}

#header .headerAccountMenu .headerAccountItem.headerAccountItemMyList .headerMyListEntries{
	background:#505050;
}

#header .headerAccountMenu .headerAccountItem.headerAccountItemMyList .headerMyListEntries .headerMyListEntry{
	font-family:MuseoSans;
	font-size:12px;
	font-weight:700;
	color:#eaeaea;
	text-indent:27.1875%; /*87/320*/
	text-indent:90.5px;
	text-transform:capitalize;
	padding-right: 15px;
}

#header .headerAccountMenu .headerAccountItem.headerAccountItemMyList .headerMyListEntries .headerMyListEntry.linkToMyLists a{
	font-weight:300;
	text-decoration:underline;
	text-transform:uppercase;
}

#header .headerAccount .headerAccountUserInfo{
	height:84px;
	line-height:normal;

	font-family:MuseoSans;
	font-size:12px;

	padding-left:27.1875%;

	display:table;
	vertical-align:middle;
	width:100%;
}

#header .headerAccount .headerAccountUserInfo label{
	text-indent:0;
	font-weight:500;
	color:#4c4c4c;

	display:table-cell;
	vertical-align:middle;
	width:100%;
	height:84px;
}

#header .headerAccount .headerAccountUserInfo label .user{
	display:inline-block;
	max-width:130px;
}

#header .headerAccount .headerAccountUserInfo label strong{
	font-weight:700;
	color:#3b3b3b;
}

#header .headerEntry.headerCart{
	position:relative;
}

#header .headerEntry.headerCart .ico-shopping_cart{
	position:absolute;
	font-size:31px;
	color:#808080;
	top:50%;margin-top:-15.5px;
	left:50%;margin-left:-16.5px;
}

#header .headerEntry.headerCart .cartEntries{
	position:absolute;
	width:20px;height:20px;line-height:20px;
	border-radius:50%;
	background:#009640;

	font-family:MuseoSans;
	font-weight:700;
	font-size:12px;
	color:#ffffff;
	text-align:center;

	top:15%;
	left:50%;
	margin-left:2px;
}

/* #header .headerEntry.headerMenuMobile{ */
/* 	background:#e0001a; */
/* } */

#header .headerEntry.headerMenuMobile{
	position:relative;
	border-left:1px solid #cccccc;
}

#header .headerEntry.headerMenuMobile.open{
	background:#f8f8f8;
	border-bottom:1px solid #f8f8f8;
}

#header .headerEntry.headerMenuMobile span{
	top:29px;
	left:50%;
	margin-left:-10px;
}

#header .headerEntry.headerMenuMobile span,
#header .headerEntry.headerMenuMobile span:before,
#header .headerEntry.headerMenuMobile span:after {
  cursor: pointer;
  height:2px;
  width:20px;
  background:#8d8d8d;
  position:absolute;
  display:block;
  content:'';
}
#header .headerEntry.headerMenuMobile span:before {
  top: -7px;
}
#header .headerEntry.headerMenuMobile span:after {
  bottom: -7px;
}

#header .headerEntry.headerMenuMobile span,
#header .headerEntry.headerMenuMobile span:before,
#header .headerEntry.headerMenuMobile span:after {
	-webkit-transition:all 200ms ease-in-out;
		-moz-transition:all 200ms ease-in-out;
		  -o-transition:all 200ms ease-in-out;
  			  transition:all 200ms ease-in-out;
}

#header .headerEntry.headerMenuMobile.open span{background-color:transparent;margin-left:-14.5px;}
#header .headerEntry.headerMenuMobile.open span:before{
	top:0;
	-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		 -ms-transform:rotate(45deg);
			  transform:rotate(45deg);
}
#header .headerEntry.headerMenuMobile.open span:after{
	top:0;
	-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		 -ms-transform:rotate(-45deg);
			  transform:rotate(-45deg);
}

#header .headerEntry.headerMenuMobile.open span{
	background:transparent;
}

#header .headerEntry.headerMenuMobile.open span:before,
#header .headerEntry.headerMenuMobile.open span:after {
	height:2.8px;
	width:32px;
	background:#808080;
	border-radius: 5px;
}

@media(min-width:992px){
	#header .headerAccount:hover,
	#header .headerEntry.headerCart:hover{
		background:#f8f8f8;
	}
	#header .headerAccountMenu .headerAccountItem.headerAccountUserInfo{
		border-left:1px solid #cccccc;
	}
	#header .headerAccountMenu .headerAccountItem.headerAccountUserInfo i{
		margin-left:31px;
	}

}

/*****************************************************************
############################# FLYOUT MENU ########################
******************************************************************/
@media (max-width:991px) {
  #header .flyoutMenuContainer.open {
    position: fixed;
    top: 61px;
    bottom: 0;
    overflow: scroll;
    background-color: #E0001A;
  }
}


#header .flyoutMenuWrapper{
	position:relative;
}

#header .flyoutMenuContainer{
	position: absolute;
	background: transparent;
	width:100%;
	z-index:99999;
  display:none;
}

#header .flyoutMenuContainer.open,
#header .flyoutMenuContainer.active{
	display:block;
}

#header .flyoutMenuContainer .flyoutMenu{
	background:#b00511;
	padding:0;
	display:none;
}

#header .flyoutMenuContainer .flyoutMenu.open,
#header .flyoutMenuContainer .flyoutMenu.active{
	display:block;
}

#header .flyoutMenuContainer .flyoutHeadline{
	margin:0;padding:0;
	height:60px;line-height:60px;
	border-bottom:1px solid #b00511;
	cursor:pointer;
	text-transform:uppercase;
	background:#E0001A;
}

#header .flyoutMenuContainer .flyoutHeadline,
#header .flyoutMenuContainer .flyoutHeadline a,
#header .flyoutMenuContainer .flyoutMenu li a{
	display:block;
	font-family:MuseoSans;
	font-weight:700;
	font-size:14px;
	color:#ffffff;
	text-align:right;
	padding-right:20px;
	text-decoration:none;
	outline:none;
}

#header .flyoutMenuContainer .flyoutHeadline a{
	padding-right:0;
}

#header .flyoutMenuContainer .flyoutHeadline:focus,
#header .flyoutMenuContainer .flyoutHeadline a:focus{
	outline:none;
}

.flyoutMenuContainer .flyoutMenu li a{
	display:block;
	line-height:50px;
}


/*********************TIMESLOT*******************************/
#header .timeslotBookedContainer{
	position:relative;
}
#header .timeslotBookedContainer .timeslotBooked{
	position:absolute;
	z-index:4;
	background:#f8f8f8;
	width:100%;
	border-bottom:1px solid #ccc;
}

#header .timeslotBookedContainer .timeslotBooked .slotSelected{
	width:300px;
	margin:10px auto 0 auto;
	padding: 9px 5px;
	background-color: #C90613;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}


#header .timeslotBookedContainer .timeslotBooked .slotSelected .deliverySelected,
#header .timeslotBookedContainer .timeslotBooked .slotSelected .timeSlotSelected{
	font-family:MuseoSans;
	font-weight:700;
	font-size:10px;
	color:#ffffff;
	text-align:center;
	text-transform:uppercase;
	margin:0;
}

#header .noTimeSlot {
	font-family:MuseoSans;
	font-weight:700;
	font-size:13px;
	color:#ffffff;
	text-align:center;
	text-transform:uppercase;
	margin: 0.8em 0 0;
	display: none;
}

#header .no-timeslots .noTimeSlot {
	display: block;
}

.no-timeslots .slotSelected__content-wrapper {
	display: none;
}


#header .timeslotBookedContainer .timeslotBooked .slotSelected .timeSlotSelected{
	font-weight:500;
	font-size:18px;
	text-transform:capitalize;
}

#header .timeslotBookedContainer .timeslotBooked .timeLeft{
	position:relative;
	width:300px;
	background-color:#96050e;
	text-align:center;
	margin:0 auto 10px auto;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	padding:9px 5px;
}

#header .timeslotBookedContainer .timeslotBooked .timeLeft:before{
	position: absolute;
	content: '\a054'; /* ico-timeslot */
	color:#ffffff;
	font-size:22px;
	top:50%;margin-top:-11px;
	opacity:0.7;
	left: 15%;
}

#header .timeslotBookedContainer .timeslotBooked .timeLeft .timeLeftLbl,
#header .timeslotBookedContainer .timeslotBooked .timeLeft .onboardingLink{
	color:#ffffff;
	opacity:0.7;
	font-family:MuseoSans;
	margin:0;padding:0;
}

#header .timeslotBookedContainer .timeslotBooked .timeLeft .onboardingLink{
	border:0;outline:0;background:none;
	text-transform:uppercase;
	text-decoration:underline;
	margin:0;padding:0;
}

#header .flyoutMenuContainer.flyoutMenuFixed {
	position: fixed;
	top: 61px;
}


/******************** END TIMESLOT **********************/

@media(min-width:992px){

	#header .headerEntry{
		height:84px;
	}

	#header .headerEntry.logo{
		width:110px;
		-webkit-box-flex:0;
		-ms-flex:0 0 110px;
		flex:0 0 110px;
	}

	.stickyheader .searchBoxWrapper .searchBox .searchType {
		width: 15%;
	}

	.stickyheader .searchBoxWrapper .searchBox .siteSearchInput {
		width: 65%;
	}
	.stickyheader .searchBoxWrapper .searchBox .searchBtn {
		width: 20%;
	}
	#header .headerEntry.logo > a, #header .headerEntry.logo > .h1SEO {
		-webkit-box-flex:0;
		-ms-flex:0 0 110px;
		flex:0 0 110px;
	}

	#header .headerLinks{
		width: calc(70% - 110px);/*391/768*/
		cursor:default;
	}

	#header .headerLinks .headerLinksList .headerLink{
		float:left;
	}

	#header .headerLinks .headerLinksList .headerLink label,
	#header .headerLinks .headerLinksList .headerLink a{
		font-family:MuseoSans;
		font-size:14px;
		font-weight:700;
		color:#333333;
		line-height:84px;
		margin-right:25px;
		position:relative;
		text-transform:uppercase;
		cursor:pointer;
	}

	#header .headerLinks .headerLinksList .headerLink label,
	#header .headerLinks .headerLinksList .headerLink a{
		margin-left:5%;
	}

	#header .headerLinks .headerLinksList .headerLink:first-child label{
		margin-left:25px;
	}

	#header .headerLinks .headerLinksList .headerLink label:hover:after,
	#header .headerLinks .headerLinksList .headerLink label.open:after,
	#header .headerLinks .headerLinksList .headerLink label.active:after,
	#header .headerLinks .headerLinksList .headerLink a:hover:after{
		content:"";
		position:absolute;
		border-bottom:2px solid #000;
		width:100%;
		left:0;
		bottom:-5px;
	}

	#header .headerAccount,
	#header .headerCart,
	#header .headerEntry.headerTimeSlot{
		width:10%;/*89/768*/
	}

	#header .headerAccount{
		border-width:0 1px 1px 1px;
		border-style:solid;
		border-color:#cccccc;
	}

	#header .headerAccountMenu{
		width:41.6666666667%;/*320/768*/
		max-width:445.5px;
		right:0;
		left:auto;
		margin-left:0;
	}

	#header .headerCart{
		border-right:1px solid #cccccc;
	}

	#header .headerEntry.headerCart .cartEntries{
		top:25%;
		left:50%;
		margin-left:2px;
	}

	/*****************************************************************
	############################# FLYOUT MENU ########################
	******************************************************************/
	#header .flyoutMenuContainer,
	#header .flyoutMenuContainer .flyoutMenu{
		background:#262626;
	}

	#header .flyoutMenuContainer .flyoutMenu{
		padding:15px 3.515625%;/*27/768*/
		position:relative;
		top:-1px;
	}

	#header .flyoutMenuContainer .flyoutMenu li{
		float:left;
		width:33.8541666667%;/*260/768*/
		width:36.4145658263%;/*260/714*/
		text-align:left;
		line-height:normal;
		padding:10px 0 10px 1.5%;
		color:#cccccc;
	}

	#header .flyoutMenuContainer .flyoutMenu li:nth-child(3n){
		width:32.2916666667%;
		width:27.1708683473%;/*260/714*/
	}

	#header .flyoutMenuContainer .flyoutMenu li a{
		display:inline-block;
		width:100%;
		text-align:left;
		padding:0;
		line-height:normal;

		font-family:MuseoSans;
		font-weight:500;
		font-size:12px;
		color:#cccccc;
	}

	#header .flyoutMenuContainer .flyoutMenu li a:hover{
		color:#ec1c23;
	}

	#header .closeFlyoutMenuBar{
		background:#1a1a1a;
		height:40px;line-height:40px;
		text-align:right;
		padding-right:20px;
	}
	#header .closeFlyoutMenuBar label{
		font-family:MuseoSans;
		font-weight:700;
		font-size:12px;
		color:#4d4d4d;
		text-transform:uppercase;
		cursor:pointer;
	}


	/*TIMESLOT*/
	#header .timeslotBookedContainer .timeslotBooked{
		width:320px;
		right:0;
		border-left:1px solid #ccc;
		border-bottom:1px solid #ccc;
	}

}


@media(min-width:1280px){

	#header .middleHeader{
		border-bottom:1px solid #cccccc;
	}

	#header .headerEntry{
		border-bottom:0;
	}

	#header .headerEntry.logo{
		width:8.59375%;/*110/1280*/
	}

	#header .headerLinks{
		width:66.40625%;/*850/1280*/
		width:59.375%;/*760/1280*/
	}

	#header .headerLinks .headerLinksList .headerLink label,
	#header .headerLinks .headerLinksList .headerLink a{
		margin-left:25px;
	}

	#header .headerLinks.bookedTimeslot{
		width:48.671875%;/*623/1280*/
	}

	#header .stickyheader .headerLinks.bookedTimeslot{
		width:763px;
	}

	#header .headerAccount{
		width:7.03125%;/*90/1280*/
		margin-left:10.9375%;/*140/1280*/
	}

	#header .headerAccount.logged{
		width:17.96875%;/*230/1280*/
		margin-left:0;
		text-align:left;
	}

	#header .stickyheader .headerAccount.logged{
		width: 90px;
	}

	#header .headerAccount .headerAccountUserInfo{
		padding-left:36.9565217391%;/*85/230*/
		padding-left:90px;
		text-transform:uppercase;
		color:#4c4c4c;
	}

	#header .headerAccount:before,
	#header .headerAccount.logged:before,
	#header .headerAccount.logged.employee:before{
		left:0;
		margin-left:32px;
	}

	#header .headerAccount.logged.open:before{
		content:"\a058";/*ico-user_logged*/
		color:#e30613;
		left:0;
		margin-left:32px;
	}

	#header .headerAccount.logged.open.employee:before{
		content:"\a051";/*ico-spar_logo*/
		color:#007a4f;
		font-size:27px;
		margin-top:-14.5px;
	}

	#header .headerAccount .headerAccountUserInfo label{
		font-family:MuseoSans;
		font-weight:500;
		font-size:12px;
		color:#4c4c4c;
	}

	#header .headerAccount .headerAccountUserInfo strong{
		font-weight:700;
		color:#3b3b3b;
	}

	#header .headerAccount.open .headerAccountUserInfo{
		border-bottom:0;
	}

	#header .headerAccountUserInfo label{
		cursor:pointer;
	}

	#header .headerCart,
	#header .headerEntry.headerTimeSlot{
		width:7.03125%;/*90/1280*/
	}

	#header .headerAccountMenuWrapper{
		position:relative;
		max-width:1280px;
		clear:both;
	}

	#header .headerAccountMenu{
		max-width: 320px;
		right:7.03125%;
	}

	#header .headerAccountMenu.bookedTimeslot{
		right:17.734375%;
	}


	/*****************************************************************
	############################# FLYOUT MENU ########################
	******************************************************************/

	#header .flyoutMenuContainer .flyoutMenu{
		float:left;
		width:66.875%;/*856/1280*/
	}

	#header .flyoutMenuContainer .relatedImageContainer{
		float:left;
		width:33.125%;/*424/1280*/
		min-height:166px;
		position:relative;
	}

	#header .flyoutMenuContainer .relatedImageContainer img{
		width:100%;
		max-width:100%;
		position:absolute;
		top:0;
	}


	/*TIMESLOT*/
	#header .headerEntry.headerTimeSlot{
		background:#b00511;
		border:0;
	}


	#header .headerTimeSlot::before,
	#header .headerTimeSlot.booked::before{
		color:#ffffff;
	}

	#header .headerTimeSlot.booked{
		width:17.734375%;/*227/1280*/
		cursor:auto;
	}

	#header .headerTimeSlot.booked::before {
		margin-left:18px;
		left:auto;
	}

	#header .headerTimeSlot.booked .slotSelected{
		padding:26px 20px 0 63px;
		vertical-align:middle;
		color:#fff;
		font-size:10px;
		font-weight:700;
	}

	#header .headerTimeSlot.booked .slotSelected .deliverySelected{
		text-transform:uppercase;
	}

	#header .headerTimeSlot.booked .slotSelected .timeSlotSelected{
		font-size:12px;
		text-decoration:underline;
		cursor:pointer;
	}

	#header .headerTimeSlot.booked .slotSelected .timeLeftLbl{
		font-size:10px;
		font-weight:500;
	}


}

#header .headerTimeSlot .slotSelected p{
	margin-bottom:5px;
}

/*****************************************************************
############################# BOTTOM HEADER ########################
******************************************************************/

@media(min-width:768px){

	#header .bottomHeader{
		height:85px;
		background:#f8f8f8;
		border-bottom:1px solid #cccccc;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	#header .bottomHeader .searchBoxWrapper {
		width: 100%;
	}
}

@media(min-width: 992px){
	#header .stickyheader .bottomHeader .searchBoxWrapper {
		border-right: 1px solid #CCCCCC;
		float:left;
		width:calc(70% - 250px);
	}
	#header .bottomHeader .searchBoxWrapper {
		border-right: 1px solid #CCCCCC;
		float:left;
		width: calc(100% - 250px);
	}
}

@media(min-width:1280px){

	#header .bottomHeader{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: relative;
  }

	#header .bottomHeader .searchBoxWrapper{
		width:804px;/*960/1280*/
		border-right:1px solid #cccccc;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}

	#header .stickyheader .bottomHeader .searchBoxWrapper {
		width: calc(100% - 140px);
	}

	.advertisement {
		display: block;
		width: 226px;
		border-right: 1px solid #ccc;
		float: left;
		height: 100%;
		text-align: center;
	}

	.advertisement_Icon_text {
        display: block;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
	}

	.iconAdvertisement {
		font-size: 24px;
		color: #c90613;
		vertical-align: middle;
		display: inline-block;
		line-height: 1.5;

	}
	.advertisement__text {
		font-size: 14px;
		color: rgb(176,5,17);
		font-weight: bold;
		padding-left: 10px;
		display: inline-block;
		width: 70%;
		vertical-align: middle;
		line-height: 1.3;
		text-transform: uppercase;
	}
}

/****************************************************************************
############################# CHECKOUT MIDDLE HEADER ########################
*****************************************************************************/
#header .checkoutHeader{
	border-bottom:1px solid #cccccc;
}

#header .checkoutHeader .headerEntry{
	border-bottom:0;
}

#header .headerEntry.headerPhoneCheckout{
	position:relative;
	float:right;
	border-right:1px solid #cccccc;
	border-left:1px solid #cccccc;
}

#header .headerEntry.headerPhoneCheckout .ico-phone{
	color:#DA0219;
	position:absolute;
	top:50%;margin-top:-14.5px;
	left:50%;margin-left:-14.5px;
	font-size:29px;
}

#header .headerEntry.headerLogoutCheckout{
	position:relative;
	float:right;
}

#header .headerEntry.headerLogoutCheckout .ico-sign_out{
	position:absolute;
	font-size:22px;
	top:50%;margin-top:-11px;
	left:50%;margin-left:-11px;
	color:#808080;
}

#header .headerLogoutCheckout{
	width:19.6875%;/*63/320*/
}

#header .checkoutCallCenterInfo{
	float:right;
	width:380px;height:84px;
	padding-top:15px;
	padding-left:60px;
	font-family:MuseoSans;
	font-weight:300;
	font-size:12px;
	color:#232323;
	position:relative;
}

#header .checkoutCallCenterInfo:before{
	content:"\a041";/*ico-phone*/
	color:#da0219;
	font-size:38px;
	position:absolute;
	top:50%;margin-top:-19px;
	left:0;
}

#header .checkoutCallCenterInfo span.red{
	font-family:MuseoSans;
	font-weight:300;
	font-size:12px;
	font-weight:700;
	color:#e30613;
}

@media(min-width:992px){
	#header .headerLogoutCheckout{
		width:11.5885416667%;/*89/768*/
		border-left:1px solid #cccccc;
	}
}

@media(min-width:1280px){
	#header .headerLogoutCheckout{
		width:7.03125%;/*90/1280*/
		border-right:1px solid #cccccc;
	}
}



/*TOP HEADER 2.0*/
.header-top__wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background-color: #262626;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.header-top__wrapper a {
  font-family: MuseoSans;
  font-size: 11px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  padding: 9px 20px;
}

.header-top__wrapper .header-top__left,
.header-top__wrapper .header-top__right {
  position: relative;
  width: 220px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 5px 0 0;
}

.header-top__wrapper .header-top__right {
  width: calc(100% - 220px);
  background-color: #1f1f1f;
  justify-content: flex-end;
}

.header-top__wrapper .header-top__left .header-top__cta {
  color: #adadad;
  padding:9px 20px;
  width: 100%;
  position: relative;
  cursor: pointer;
	font-size: 12px;
}

.header-top__wrapper .header-top__left .header-top__cta::before {
  content: '\a010';
  font-family: sparicons;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  right: 5px;
}

.header-top__wrapper .header-top__left .header-top__cta.is-open::before {
  transform: translateY(-50%) rotateX(180deg);
}

.header-top__wrapper .header-top__left .header-top__left__links {
  position: absolute;
  top: 100%;
  z-index: 999;
  background-color: #262626;
}

.header-top__wrapper .header-top__left .header-top__left__links a {
  display: inline-block;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
  border-top: 1px solid #1f1f1f;
}

.header-top__wrapper .header-top__left .header-top__left__links a:hover {
	text-decoration: none;
	color: #b2b2b2;
}

@media (min-width:1280px) {
  .header-top__wrapper .header-top__left {
    width: 60%;
  }

  .header-top__wrapper .header-top__left .header-top__left__links {
    width: 70%;
    position: static;
    top: auto;
  }

  .header-top__wrapper .header-top__left .header-top__cta {
    width: auto;
    cursor: auto;
  }

  .header-top__wrapper .header-top__left .header-top__cta::before {
    content: '';
  }

  .header-top__wrapper .header-top__left .header-top__left__links a{
    border-top: 0;
    width: auto;
  }

  .header-top__wrapper .header-top__right {
    width: 40%;
  }

}
