@charset "utf-8";

/*
### Site Search
********************************************************************/
.searchBoxWrapper{
	height:60px;
	background:#f7f7f7;
	border-bottom:1px solid #cccccc;
	padding:10px 0;
}
.searchBoxWrapper .searchBox{
	width:93.75%;/*300/320*/
	margin:0 auto;
	position:relative;
}

.searchBoxWrapper .searchBox .searchType,
.searchBoxWrapper .searchBox .siteSearchInput,
.searchBoxWrapper .searchBox .searchBtn{
	float:left;
	display:block;
	height:39px;line-height:39px;
}

.searchBoxWrapper .searchBox .searchType{
	position:relative;
	width:18.3333333333%;/*55/300*/
	cursor:pointer;
}

.searchBoxWrapper .searchBox .searchType label{
	display:block;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	position:relative;
	
	border:1px solid #cccccc;
	cursor:pointer;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
	background-color:#eaeaea;
	height:39px;line-height:39px;
	
	position:relative;
	z-index:2;
}

.searchBoxWrapper .searchBox .searchType label:active{
	background-color:#d9d9d9;
}

.searchBoxWrapper .searchBox .searchType label.searchTypeValue{
	border-top-left-radius:0;
	top:-1px;
}

.searchBoxWrapper .searchBox .searchType label.searchTypeSelected.open{
	border-bottom-left-radius:0;
}

.searchBoxWrapper .searchBox .searchType label.single:before,
.searchBoxWrapper .searchBox .searchType label.multi:before{
	position:absolute;
	color:#4d4d4d;
	font-size:16px;
	top:50%;margin-top:-8px;
	left:20%;
}

.searchBoxWrapper .searchBox .searchType label.single:before{
	content:"\a045";/*ico-multi_search*/
}

.searchBoxWrapper .searchBox .searchType label.multi:before{
	content:"\a037";/*ico-multi_search*/
}

.searchBoxWrapper .searchBox .searchType:after{
	position:absolute;
	z-index:3;
	font-size:10px;
	color:#4d4d4d;
	content:"\a010";/*ico-arrow_sharp_down*/
	width:10px;height:6px;
	top:40%;
	left:60%;
	margin-top:0px;
}

.searchBoxWrapper .searchBox .searchType.open:after{
	content:"\a013";/*ico-arrow_sharp_up*/
}

.searchBoxWrapper .searchBox .searchType.multi:after{
	top:43%;
}

.searchBoxWrapper .searchBox .siteSearchInput{
	width:63.6666666667%;/*191/300*/
	border-width:1px 0 1px 0;
	border-style:solid;
	border-color:#cccccc;
	
	font-family:BrandonGrotesque;
	font-weight: 700;
	font-size:12px;
	color:#4d4d4d;
	text-indent:12px;
	text-transform:uppercase;
}

.searchBoxWrapper .searchBox .siteSearchInput:focus{
	box-shadow:none;
	outline:none;
	margin:0;
}

.searchBoxWrapper .searchBox .searchBtn{
	width:18%;/*54/300*/
	border:0;outline:none;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	background:#333333;
	font-family:BrandonGrotesque;
	font-weight: 400;
	font-size:10px;
	color:#ffffff;
	text-transform:uppercase;
	text-align:center;
	padding:0;
	margin:0;padding:0;
}

.searchBoxWrapper .searchBox .searchBtn:active,
.searchBoxWrapper .searchBox .searchBtn:hover{
	background:#222222;
	margin:0;padding:0;
}


@media(min-width:768px){
	
	.searchBoxWrapper{
		height:85px;
		line-height:85px;
		padding:20px 0;
	}

	.searchBoxWrapper .ui-product-item {
		line-height: normal;
	}
	
	.searchBoxWrapper .searchBox{
		width:95.2741020794%;/*504/529*/
	}
	
	.searchBoxWrapper .searchBox .searchType,
	.searchBoxWrapper .searchBox .siteSearchInput,
	.searchBoxWrapper .searchBox .searchBtn{
		height:43px;line-height:43px;
	}
	
	.searchBoxWrapper .searchBox .searchType{
		width:10.9126984127%;/*55/504*/
	}	
	
	.searchBoxWrapper .searchBox .searchType label,
	.searchBoxWrapper .searchBox .searchType label:not(.selected){
		height:43px;line-height:43px;
	}
	
	.searchBoxWrapper .searchBox .siteSearchInput{
		width:71.23015873%;/*359/504*/
		border-right: 1px solid #fff;
	}
	
	.searchBoxWrapper .searchBox .searchBtn{
		width:17.8571428571%;/*90/504*/
		font-size:14px;
	}

}

@media(min-width:1280px){
	
	.searchBoxWrapper .searchBox{
		width:94.4791666667%;/*907/960*/
	}
	
	.searchBoxWrapper .searchBox .searchType{
		width:22%;/*171/907*/
	}
	
	.searchBoxWrapper .searchBox .searchType label{
		font-family:BrandonGrotesque;
		font-weight: 700;
		font-size:12px;
		color:#4d4d4d;
		text-transform:uppercase;
		text-align:center;
		cursor:pointer;
	}
	
	.searchBoxWrapper .searchBox .searchType label.single:before,
	.searchBoxWrapper .searchBox .searchType label.multi:before{
		left:0;margin-left:15px;
	}
	
	.searchBoxWrapper .searchBox .searchType:after{
		top:40%;
		left:84.2105263158%;
	}
	
	.searchBoxWrapper .searchBox .siteSearchInput{
		width:68%;
	}
	
	.searchBoxWrapper .searchBox .searchBtn{
		width:10%;
	}

}


/*multi item search customization**/
.searchBoxWrapper .searchBox .multiSearchBox{
	position:relative;
	z-index:3;
	float:left;
	display:block;
	min-height:39px;
	max-height:39px;
	overflow:hidden;
	
	
	width:63.6666666667%;/*191/300*/
	border-width:1px 0 1px 0;
	border-style:solid;
	border-color:#cccccc;
	background:#fff;
	
	line-height:12px;
}

.searchBoxWrapper .searchBox .multiSearchBox.active,
.searchBoxWrapper .searchBox .multiSearchBox:hover{
	max-height: auto;
	overflow:visible;
}

.searchBoxWrapper .searchBox .multiSearchBox .taggle_placeholder{
	width:90%;
	left:12px;
	color:#4d4d4d;
	color:rgba(77,77,77,0.7);
	text-transform:uppercase;
	z-index: 9999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.searchBoxWrapper .searchBox .multiSearchBox .taggle_input{
	font-weight: 700;
	font-size:12px;
	color:#4d4d4d;
	margin-top:1px;
	float:left;
	width:100%!important;
	text-transform: uppercase;
}

.searchBoxWrapper .searchBox .multiSearchBox .taggle_list{
	background:#fff;
	padding:2px 0 0 12px;
	min-height:37px;
}

.searchBoxWrapper .searchBox .multiSearchBox .taggle_list .taggle{
	z-index: 9999;
}

.searchBoxWrapper .searchBox .multiSearchBox .taggle{
	background:#dbdbdb;
	font-size:12px;
	font-weight: 700;
	color:#595959;
	padding:5px 11px 5px 14px;
	margin-top:5px;
}

.searchBoxWrapper .searchBox .multiSearchBox .taggle:hover{
	background:#cccccc;
}

.searchBoxWrapper .searchBox .multiSearchBox .taggle .close{
	display:inline-block;
	color:#fff;
	position:relative;
	top:1px;
	margin-left:10px;
	padding:0;
}

@media(min-width:768px){
	
	.searchBoxWrapper .searchBox .multiSearchBox{
		position:relative;
		width:71.23015873%;/*359/504*/
		min-height:43px;
		max-height:43px;
	}
	
	.searchBoxWrapper .searchBox .multiSearchBox .taggle_list{
		padding-top:1px;
	}
	
	.searchBoxWrapper .searchBox .multiSearchBox .taggle_placeholder{
		line-height:19px;
	}

	.stickyheader .searchBoxWrapper .searchBox .multiSearchBox{
		width: 65%;
	}
	
}
@media(min-width:1280px){
	.searchBoxWrapper .searchBox .multiSearchBox{
		width: 68%;
	}
}


/***********************************************
#################################################
#################################################
############### UI-AUTOCOMPLETE #################
#################################################
#################################################
************************************************/

.autocompleteBoxContainer{
	position: relative;
}

.autocompleteBox {
	position: absolute;
	z-index: 2;
	width: 106.7%;  /* 93.75/100 = 100/x   -->  x = 100 * 100 / 93.75  */
	background: #fff;
	top: 50px;
	margin-left: -3.3334%;
}

.autocompleteBox .autocompleteContainer{
	width: 100%;
}

.autocompleteBox .autocompleteCategoriesContainer,
.autocompleteBox .autocompleteProductContainer{
	width: 100%;
}

.autocompleteBox .ui-menu-item .autocompleteValue{
	display: block;
}

.autocompleteBox .ui-menu-item,
.autocompleteBox .offersSuggestions,
.autocompleteBox .categoriesSuggestions{
	border-bottom: 1px solid #ccc;
	font-family: BrandonGrotesque;
	font-weight: 400;
	font-size: 12px;
	color: #4d4d4d;
	text-indent: 12px;
	text-transform: uppercase;
	height: 42px;
	line-height: 42px;
}

.autocompleteBox .offersSuggestions,
.autocompleteBox .categoriesSuggestions{
	background-color: #eaeaea;
	font-weight: 700;
}

.autocompleteBox .ui-product-item .imgContainer {
	display: none;
}

@media (min-width: 768px){
	.autocompleteBox .ui-product-item .imgContainer {
		display: block;
	}
	
	.autocompleteBox{
		width: 71.5%; /*359/504*/
		top: 43px;
		left: 10.9126984127%;/*55/504*/
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		margin-left: -1px;
	}

	.stickyheader .autocompleteBox {
		width: 100%;
		left: 2px;
	}

}



@media (min-width:1280px){

	.autocompleteBox {
		position: absolute;
		width: 68.3%;
		left: 22%;
		top: 43px;
		background: #fff;
		border: 1px solid #cccccc;
		border-top: 0;
		display: flex;
		z-index: 9;
	}	
	
	.autocompleteBox .autocompleteContainer.fullWidth {
		width: 100%;
	}
	
	.autocompleteBox .ui-product-item {
		border-bottom: 1px solid #ccc;
		width: 100%;
		padding: 10px;
	}
	
	.autocompleteBox .ui-product-item .productItemLink {
		display: table;
		width: 100%;
	}

	.autocompleteBox .ui-product-item .imgContainer {
		width: 20%;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		align-self: center;
	}
	.autocompleteBox .ui-product-item .imgContainer img {
		width: 100%;
		max-width: 80px;
		vertical-align: middle;
	}
	
	.autocompleteBox .ui-product-item .infoContainer {
		width: 50%;
		display: table-cell;
		vertical-align: middle;
	}
	.autocompleteBox .ui-product-item .productName {
		font-size: 12px;
		font-weight: 700;
		font-family: BrandonGrotesque, Arial, sans-serif;
		display: block;
		text-transform: none;
		line-height: 15px;
		overflow: hidden;
	}
	
	.autocompleteBox .ui-product-item .productDescription {
		font-weight: inherit;
		font-style: inherit;
		font-size: 12px;
		font-family: BrandonGrotesque, Arial, sans-serif;
		line-height: 15px;
		display: block;
		text-transform: none;
		margin-top: 3px;
	}
	.autocompleteBox .ui-product-item .productInfoPriceTotal {
		width: 30%;
		border-top: 0;
		border-bottom: 0;
		border-left: none;
	}
	.autocompleteBox .ui-product-item .productInfoPriceTotal.sales{
		background-color: #fff;
		border-left:none;
	}
	

	
	.autocompleteBox .ui-product-item label,
	.autocompleteBox .ui-product-item div {
		line-height: normal;
	}
	
}

.autocompleteBox .ui-product-item .productInfoPriceTotal.sales{
	background-color: #fff;
}

.autocompleteBox .ui-product-item .productInfoPriceTotal.sales .priceInteger,
.autocompleteBox .ui-product-item .productInfoPriceTotal.sales .priceDecimal{
	color: #e30613;
}

.autocompleteBox .ui-product-item .productInfoPriceTotal.sales .extraInfoPrice,
.autocompleteBox .ui-product-item .productInfoPriceTotal.sales .insteadOfPrice{
	color: #4c4c4c;
}

.autocompleteBox .autocompleteSearchBtn{
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #333;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	background-color: #ca0614;
}

.ui-autocomplete{
	width:278px !important;
	z-index:10000 !important;
    border: 1px solid #CCCCCC;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
    border-radius: 0;
	-webkit-box-shadow: 0px 8px 15px #2c3a55;
	-moz-box-shadow: 0px 8px 15px #2c3a55;
    box-shadow: 0 8px 15px #999;
	padding:5px;
	margin:0;
	float:none;
}

.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item a:hover{
	display:block;
	padding: 0;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	font-weight: 400 !important;
	color:#000 !important;
}

.ui-autocomplete .suggestions.ui-menu-item a,
.ui-autocomplete .suggestions.ui-menu-item a:hover{
	padding: 10px;
	text-transform:uppercase;
}

.ui-autocomplete .ui-menu-item .ui-state-hover{
	background:#F6F6F6;
}

.ui-autocomplete .ui-menu-item .thumb{
	float:left;
	width:76px;
	height:76px;
}

.ui-autocomplete .ui-menu-item .thumb img{
	width:100%;
	height:auto;
}


.ui-autocomplete .ui-menu-item .desc{
	margin:10px;
}


.ui-autocomplete .ui-menu-item .desc .title{
	float:left;
	white-space: normal;
	width: 200px;
	display:block;
}

.ui-autocomplete .ui-menu-item .desc .price{
	float:right;
	font-weight: 700  !important;
}


/* products with image */
.ui-autocomplete .ui-menu-item .thumb + .desc{
	margin:10px 10px 0 100px;
}

.ui-autocomplete .ui-menu-item .thumb + .desc .title{
	width: 115px;
}



.autocompleteBox{
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.autocompleteBox .ui-product-item{
	padding: 5px;
}

.autocompleteBox .ui-product-item .productItemLink{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	height: 80px;
	align-items: center;
}

.autocompleteBox .ui-product-item .imgContainer{
	width: 80px;
}

.autocompleteBox .ui-product-item .infoContainer {
	width: 55%;
	align-self: center;
}

.autocompleteBox .ui-product-item .productInfoPriceTotal {
	padding: 0;
	width: 45%;
	align-self: center;
	justify-items: right;
	text-align: right;
	font-weight: 500;
}

.autocompleteBox .ui-product-item .productInfoPriceTotal .actualPriceContainer{
	font-weight:700;
}

@media(min-width:768px){
	.autocompleteBox .ui-product-item .infoContainer {
		width: calc(75% - 80px);
		align-self: center;
		padding-left: 20px;
	}
	.autocompleteBox .ui-product-item .productInfoPriceTotal {
		padding: 0;
		width: 25%;
		align-self: center;
		justify-items: right;
		text-align: right;
	}
}

.firstLevelCategoryBanner {
	display: none;
}

.firstLevelCategoryBanner .dynamicCategoryBannerComponent .categoryImageContainer .displayCategoryName {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media(min-width:768px){
	.firstLevelCategoryBanner {
		display: block;
	}
	.categoryImageContainer .sparImageResponsive {
		width: 100%;
		max-height: 180px;
	}
}

@media(min-width:1280px){
	.firstLevelCategoryBanner {
		height: 180px;
		background-size: cover;
	}
	.categoryImageContainer .sparImageResponsive {
		width: 100%;
		max-height: 180px;
	}
}