/* CSS Document */
/*Header Design*/
.photoheader {
	min-height: 100px;
	max-height: 250px;
	background-image: url("HeaderImg_Test.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mobileheader {
	height: 100px;
	background-image: url("HeaderImg_Test.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.logo-header{
	max-height: 250px;
}

.mobilelogo-header {
	max-height: 100px;
}

.logo {
	max-height: inherit;
}
.ShopDetail_LogoImage {
	background-size:cover;
	background-repeat:no-repeat;
}
/* -------------- Filter -------------- */
.filter {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: .2rem;
}

.filter-text {
	font-size: 1.2rem;
	font-weight: 400;
}

/* --------------  Category Card Formatting -------------- */
@media only screen and (min-width : 1000px) {
	.categoryDeck {
		width:1000px;
		grid-template-columns: repeat(4,minmax(250px, 1fr)) !important;
		margin:auto;
		grid-row-gap: 1em;
	}
}	
.categoryCard { border:none !important; position:relative; }
.categoryCard .cat-seemore {
	display:inline;
	opacity: 0;
	position:absolute;
	transform:translateX(-50%) translateY(-50%);
	left:50%;
	top:60%;

	background-color:var(--bg-color3);
	color:var(--text-color3);
	line-height:7rem;
	font-size:7rem;
	padding: 15px;
	transition:all .3s ease 0s;
}
.categoryCard:hover .cat-seemore {
	opacity: 1;
	transition:all .3s ease 0s;
	
}
.categoryCard:hover .cat-seemore:hover {
	background-color:var(--text-color3);
	color:var(--bg-color3);
}

.categoryMenuItem {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 1.5rem;	
}
.categoryMenuItemActive {
	border-radius: 5px;
	background-color:var(--bg-color2);
}
.productCard { position:relative; }
.productCard img {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	transition:all .5s ease-out 0s;
}
.productCard .title { color:black; }
.productCard .title:hover { color:blue; }
.productCard .title { 
	font-size:1.2rem;
	font-weight:700;
	text-transform:capitalize;
	transition:all .3s ease 0s; 
}

.productCard .newproductnotification {
	position:absolute;
	display:inline;
	top: 0;
	left: 0;
	padding: 0;
}

.productCard .productNotifications {
	position:absolute;
	display:inline;
	top: 0;
	right: 0;
	font-size:1.5rem;
	line-height:36px;
	margin: 0px 5px 0px 5px;
	text-align:right;
}
.productCard .productNotifications .notification {
	display:inline-block;
	height:36px;
	border-radius:2px;
	padding:5px;
	color:var(--bg-color3) !important;
}
.productCard .productNotifications .productCardFavIcon {
	color:var(--bg-accent);
}

.productCard .productCardQuickView {
	position:absolute;
	display:inline;
	top:40%;
	opacity:0;
	font-size:1.5rem;
	line-height:36px;
	width:40px;
	height:36px;
	border-radius:2px;
	padding:5px;
	color:var(--bg-color3) !important;
	background:var(--text-color3) !important;
}
.productCard .productCardQuickView {
	left:50%;
	margin-left:-42px;
}
.productCard:hover .productCardQuickView {
	transition:all .7s; 
	transition-delay:.15s;
	opacity:1;
}
.productCard .productCardQuickView:hover {
	color:var(--text-color3) !important;
	background:var(--bg-color3) !important;
}


/* --------------  Filters Menu accordion on mobile  -------------- */
.mobileToggle {
	transition: all .5s ease-in-out;
}
.mobileToggleButton {
	float:right;
	margin-right:20px;
}
@media only screen and (max-width : 575px) {
	.mobileToggle {
		display:none;
	}
	.mobileToggleButton {
		display:inline;
	}
}
@media only screen and (min-width : 576px) {
	.mobileToggle {
		display:block !important;
	}
	.mobileToggleButton {
		display:none;
	}
}

/* --------------  Category Card Formatting -------------- */
.productDeck {
	grid-template-columns: repeat(3,minmax(250px, 1fr)) !important;
}