@import url("https://use.typekit.net/njt5gfu.css");
/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Frankfurter Std Highlight by ITC
 * URL: https://www.myfonts.com/collections/itc-foundry
 
 * © 2025 MyFonts Inc. */
@font-face {
  font-family: "FrankfurterStdHighlight";
  src: url('/assets/fonts/FrankfurterStdHighlight/font.woff2') format('woff2'), url('/assets/fonts/FrankfurterStdHighlight/font.woff') format('woff');
}

:root {
	--primary: #7bdce6;
	--primary-hover: #7cb8ff;
	--primary-text: #fb0088;
	--primary-text-hover: #fb0088;
	--secondary: #fe94f5;
	--secondary-hover: #fb0088;
	--secondary-text: #7cb8ff;
	--success: #33e65d;
	--success-hover: #33e65d;
	--white: #ffffff;
	--black: #000000;
	--nearly-black: #222020;
	--blue: #7cb8ff; 
	--light-blue: #7bdce6; 
	--pink: #fb0088; 
	--light-pink: #fe94f5; 
	--green: #33e65d; 
	--light-green: #c4ffd1; 
	--purple: #c989dd; 
	--font-body: "tt-commons-pro-thin", sans-serif; 
	--font-body-weight: 400;
	--font-heading: "tt-commons-pro-thin", sans-serif; 
	--font-heading-weight: 900;
	--font-heading-h1: "FrankfurterStdHighlight", sans-serif;
	--font-heading-h1-weight: 400;
	--font-heading-h1-letter-spacing: 1px;
	--font-heading-h1-text-stroke: var(--text-stroke);
	--font-heading-h1-paint-order: var(--paint-order);
	--font-heading-h1-text-transform: uppercase;
	--text-stroke: 4px var(--black); 
	--paint-order: stroke fill;
	--border-radius-size: 30px;
	--padding-with-border-radius: .75rem 1.25rem;
	--bs-nav-link-font-weight: var(--font-body-weight); 
	--bs-dropdown-bg: var(--black); 
	--bs-btn-padding-y: 0.5rem; 
	--bs-btn-padding-x: 0.75rem;
}
 

.font-primary-heading{
	font-family: var(--primary-heading) !important;
	font-weight:normal !important;
}

.font-secondary-heading{
	font-family: var(--secondary-heading) !important;
	font-weight:normal !important;
	letter-spacing:0.5px;
}

body{
	overflow-x:hidden;
	font-style: normal;
	overflow-x:hidden;
	font-size:1rem;
	font-family: var(--font-body);
	font-weight: var(--font-body-weight);
	background: var(--black);
	color: var(--white);
}

/* without this code the user menu won't appear on the left hand side of the page */
@media (min-width: 768px) {
	#navbarMyAccount:not(.show) {
		display: block;
	}
}

img{
	max-width:100%;
}


a {
	color: var(--primary);
	text-decoration:none;
}

.container {
	max-width: 1200px;
}

.overlay, .linkOverlay {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
}

/* Stop bootstrap adding padding right to the body */
body.modal-open{
  padding-right: 0px !important;
}

html{
	height: 100%;
	display: flex;
	flex-direction: column;
}
body{
	flex-grow: 1; 
	display: flex;
	flex-direction: column;
}

#navbarMyAccount .list-group-item{
	padding: 5px 0px;
	border: 0px;
	background: none;
}

#navbarMyAccount .list-group-item.list-group-item-parent{
	margin-top:15px;
}

@media (min-width: 576px) {
	.collapse-sm-none:not(.show) {
		display: block;
	}
	
	.w-sm-auto{
		width: auto !important;
	}
}

@media (min-width: 768px) {
	.collapse-md-none:not(.show) {
		display: block;
	}
	.w-md-auto{
		width: auto !important;
	}
}

@media (min-width: 992px) {
	.collapse-lg-none:not(.show) {
		display: block;
	}
	.w-lg-auto{
		width: auto !important;
	}
}

@media (min-width: 1200px) { 
	.collapse-xl-none:not(.show) {
		display: block;
	}
	.w-xl-auto{
		width: auto !important;
	}
	
}

/* */
.bg-primary{
	background: var(--primary);
	color: var(--primary-text); 
}

.bg-secondary{
	background: var(--secondary);
	color: var(--secondary-text); 
}

.bg-dark{
	background: #000000 !important;
	color: var(--white);
}
/*  ----------------------------------------------------------	*/
/*  					Dark Theme Resets						*/
/*  ----------------------------------------------------------	*/
/* 
uncomment the below classes if you want to have a dark themed website, the below will reset most bootstrap classes to have a black background and white text depending on styling when otherwise they'd be white. If you want modals to have a dark theme too, add .modal to the list below. If not, you'll also need the .modal class that resets the text colour back to black rather than what you've set in body 

.basketIcon resets the svgs used on checkout from black to white
*/

.card,
.list-group-item,
.list-group-item:hover,
.list-group-item-light.list-group-item-action:focus,
.list-group-item-light.list-group-item-action:hover, .dropdown-menu, .accordion, .accordion-item, .accordion-body, .nav-tabs .nav-items{
	background: var(--black);
	color:var(--white);
	border-color: transparent;
}

.modal .modal-content{
	background: var(--nearly-black);
	color:var(--white);
	border-color: transparent;
}

.basketIcon{
	filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(55deg) brightness(109%) contrast(101%);
}
.basketIcon svg{
	
}


.ll-skin-melon .ui-datepicker-prev:before, .ll-skin-melon .ui-datepicker-next:before{
	filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(55deg) brightness(109%) contrast(101%);
}


/* If you want to keep modals white with black text, uncomment the below as that resets the text colour back to black rather than what you've set in body */
/*
.modal {
	color: #000;
}
*/

.nav-tabs{
	border-bottom: var(--nearly-black)
}
.nav-tabs .nav-item .nav-link{
	color: var(--white);
	font-family: var(--font-heading-h1);
	font-weight: var(--font-heading-h1-weight);
	/*-webkit-text-stroke: var(--font-heading-h1-text-stroke);*/
	paint-order: var(--font-heading-h1-paint-order);
	letter-spacing: var(--font-heading-h1-text-stroke);
	text-transform:  var(--font-heading-h1-text-transform);
	border-radius: var(--border-radius-size);
	font-size:1.2rem;
	padding: 0.25rem 1rem;
	margin-right: 0.5rem;
	color: var(--primary);
	border-color: var(--primary);
}

.nav-tabs .nav-item .nav-link.active, .nav-tabs .nav-item .nav-link:hover{
	-webkit-text-stroke: var(--font-heading-h1-text-stroke);
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-text);
}


.accordion-button{
	background: var(--nearly-black);
	color: var(--white);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
}

.accordion-item{
	border: 0px;
}
.accordion-item.active .accordion-button, .accordion-button:not(.collapsed){
	background: var(--primary);
	color: black;
}
/*  ----------------------------------------------------------	*/
/*  					Rounded Corner Resets					*/
/*  ----------------------------------------------------------	*/
/* Adjusting border radius on all boostrap items */

.card, .list-group-item.mb-1, .list-group-item.mb-2, .list-group-item.mb-3, .list-group-item.mb-4, .list-group-item.mb-5, .list-group-item.mt-1, .list-group-item.mt-2, .list-group-item.mt-3, .list-group-item.mt-4, .list-group-item.mt-5, .list-group-item.my-1, .list-group-item.my-2, .list-group-item.my-3, .list-group-item.my-4, .list-group-item.my-5{
	border-radius: var(--border-radius-size);
}

.card{
	overflow:hidden;
}

.list-group-item:first-child, .list-group-item:first-of-type{
	border-top-left-radius: var(--border-radius-size) !important;
	border-top-right-radius: var(--border-radius-size) !important;
}

.list-group-item:last-child{
	border-bottom-left-radius: var(--border-radius-size) !important;
	border-bottom-right-radius: var(--border-radius-size) !important;
}

.card .card-body, .card .card-footer, .list-group-item{
	padding: var(--padding-with-border-radius);
}

.card-body + .card-footer {
	padding-top:0px;
}

.input-group .input-group-prepend .btn{
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;;
}

.input-group .input-group-append .btn{
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;;
}

/*  ----------------------------------------------------------	*/
/*  						Backgrounds 	 					*/
/*  ----------------------------------------------------------	*/
.bg-primary{
	background: var(--primary) !important;
	border-color: var(--primary) !important;
	color: var(--white);
}

.bg-secondary{
	background: var(--secondary) !important;
	border-color: var(--secondary) !important;
	color: var(--white);
}


/*  ----------------------------------------------------------	*/
/*  				Payment Sense Overrides 	 				*/
/*  ----------------------------------------------------------	*/
/* For Payment Sense they override the button styling and there's no way to add our btn btn-primary class to it. Set styling here (the same as your .btn and .btn-primary class) - you will need to !important nearly all styling in .conntect-btn class */
.connect-btn{
	background-color: var(--primary) !important;
	border: var(--primary) !important;
	border-radius: var(--border-radius-size) !important;
	color: #FFF !important;
	height: ;
	margin: 0px !important;
	width: 100% !important;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
}

/* adds padding around the pay button to the payment sense button element */
.connect-container .footer{
	text-align:center;
	padding: 15px;
}

/* Make the form fields / google pay button width of container */
.connect-container iframe{
	width: 100%;
}

/*  ----------------------------------------------------------	*/
/*  					Buttons / Headings 	 					*/
/*  ----------------------------------------------------------	*/
.btn, .time-slot{
	font-family: var(--font-heading-h1);
	font-weight: var(--font-heading-h1-weight);
	-webkit-text-stroke: var(--font-heading-h1-text-stroke);
	paint-order: var(--font-heading-h1-paint-order);
	letter-spacing: var(--font-heading-h1-text-stroke);
	text-transform:  var(--font-heading-h1-text-transform);
	border-radius: var(--border-radius-size);
	font-size:1.2rem;
	padding: 0.25rem 1rem;
}

.time-slot{
	-webkit-text-stroke: 0px;
}

.btn-primary{
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-text);
}
.btn-primary.disabled, .btn-primary:disabled {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-text);
	opacity: 0.3;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle{
	background: var(--primary-hover);
	border-color: var(--primary-hover);
	color: var(--primary-text-hover);
}

.btn-secondary{
	background: var(--secondary);
	border-color: var(--secondary);
	color: var(--secondary-text);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle{
	background: var(--secondary-hover);
	border-color: var(--secondary-hover);
	color: var(--secondary-text-hover);
}

.btn-outline-primary{
	color: var(--primary);
	border-color: var(--primary);
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active{
	color: var(--white);
	border-color: var(--primary);
	background: var(--primary);

}
.btn-outline-secondary{
	color: var(--secondary);
	border-color: var(--secondary);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active{
	color: var(--white);
	border-color: var(--secondary);
	background: var(--secondary);
}

.btn-success{
	background: var(--success);
	border-color: var(--success);
}

.btn-success:hover{
	background: var(--success-hover);
	border-color: var(--success-hover);
	color: var(--white);
}

.btn-blue{
	background: var(--light-blue);
	border-color: var(--light-blue);
	color: var(--pink);
}

.btn-blue:hover{
	background: var(--blue);
	border-color: var(--blue);
	color: var(--pink);
}
.btn-green{
	background: var(--light-green);
	border-color: var(--light-green);
	color: var(--green);
}

.btn-green:hover{
	background: var(--green);
	border-color: var(--green);
	color: var(--light-green)
}
.btn-pink{
	background: var(--light-pink);
	border-color: var(--light-pink);
	color: var(--blue); 
}

.btn-pink:hover{
	background: var(--pink);
	border-color: var(--pink);
	color: var(--blue);
}

.form-control{
	border-radius: var(--border-radius-size);
	border-color: white;
	padding: 0.5rem 1rem;
}

/* needed for bootstrap 5*/
select.form-control{
	background-image: url('/common/assets/images/icons/down-arrow.svg');
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 0.8em;
	cursor: pointer;
	padding-right: 35px
}

.input-group-quantity .form-control{
	max-width: 50px;
	-webkit-appearance: none;
	 -moz-appearance: textfield;
}

.input-group-quantity .input-group-prepend, .input-group-quantity .input-group-append{
	display:flex;
} 

.input-group-quantity .btn{
	
}

.input-group-quantity .btn:hover{
	color: ;
}

h1, .h1{
	font-family: var(--font-heading-h1);
	font-weight: var(--font-heading-h1-weight);
	-webkit-text-stroke: var(--font-heading-h1-text-stroke);
	paint-order: var(--font-heading-h1-paint-order);
	letter-spacing: var(--font-heading-h1-text-stroke);
	text-transform:  var(--font-heading-h1-text-transform);
	-webkit-text-stroke-color:  #fe90f3;
	-webkit-text-stroke-width: 8px;
	color: #fb0088; 
}

h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
	font-family: var(--font-body);
	font-weight: 900;
	text-transform: uppercase;
}

h1, .h1{ font-size: 2.0rem; }
h2, .h2{ font-size: 1.6rem; }
h3, .h3{ font-size: 1.5rem;}
h4, .h4{ font-size: 1.4rem;}
h5, .h5{ font-size: 1.2rem;}
h6, .h6{ font-size: 1rem;}

@media (min-width: 576px) {
	
}

@media (min-width: 768px) {
	h1, .h1{ font-size: 2.2rem; }
	h2, .h2{ font-size: 1.8rem; }
	h3, .h3{ font-size: 1.6rem;}
	h4, .h4{ font-size: 1.4rem;}
	h5, .h5{ font-size: 1.2rem;}
	h6, .h6{ font-size: 1rem;}
}

@media (min-width: 992px) {
	
}

@media (min-width: 1200px) {
	
}

.breadcrumbWrap{
	display: none;
}

/*  ----------------------------------------------------------	*/
/*  						Header 	 							*/
/*  ----------------------------------------------------------	*/
#topHeader{
	background: #141414;
	font-size:0.8rem;
}

#topHeader .btn:not(.btn), #header .btn:not(.btn){
	font-size: 1rem;
	color: #fff;
}


#topHeader a:not(.btn){
	color: #fff;
}

/*
#topHeader .btn{
	border-radius:0px;
}
*/
#topHeader .nav-link:not(.btn){
	color: #fff;
	/*border-left: 1px solid rgba(255,255,255,0.3);*/
}

#topHeader .nav-item:last-child .nav-link{
	/*border-right: 1px solid rgba(255,255,255,0.3);*/
}

#topHeader .container, #header .container, #footer .container{
	max-width:1920px;
}
#header{
	background: var(--black);
}

#headerNavigation{
	font-family: var(--font-heading-);
	font-weight: var(--font-heading-weight);
	text-transform:uppercase;
	color: var(--white);
}

#headerNavigation .nav-link{
	color: var(--white);
}
#headerNavigation .btn{
	font-size:0.9rem;
}

#headerNavigation .nav-item{
	width: 100%;
}

#headerNavigation .dropdown-toggle .nav-link{
	padding-right: 25px;
}

#headerNavigation .nav-item .dropdown-toggle::after{
	position: absolute;
	right: 5px;
	top:50%;
}

#header .headerIcon{
	display:flex;
	align-items:center;
	justify-content:center;
	height: 50px;
	width: 50px;
}

#header .headerIcon.navbar-toggler{
	border-radius: 0px;
	color: var(--primary); 
}

#header #headerLogo{
	height: 50px;
	padding: 0px;
}

.navbar-toggler{
	border:0px;
}

@media (min-width: 768px) {
	#header #headerLogo{
		height: 80px;
	}
}
@media (min-width: 992px) {
	#headerNavigation .nav-item{
		width: auto;
	}
				
	#headerNavigation .nav-item{
		position: relative;
	}
	
	#headerNavigation .nav-item:before{
		content: "";
		position: absolute;
		top:50%;
		margin-top:-10px;
		right:0px;
		height: 20px;
		width: 2px;
		background: var(--white);
	}
	
	#headerNavigation .dropdown-menu .nav-item:before{
		display:none;
	}
	
	.nav-item:last-child:after{
		display:none;
	}
	#header #headerNavigation .nav-link{
		position:relative;
	}
	#header #headerNavigation .nav-link:after{
		content: "";
		position: relative;
		bottom: 0px;
		left: 0px;
		width: 0%;
		background: var(--primary);
		height: 2px;
		display:block;
		transition: 0.3s;
	}
	
	#header #headerNavigation .nav-link:hover:after{
		width: 100%;
		transition: 0.3s;
	}
	

	#header #headerNavigation .nav-link:hover{
		color: var(--primary);
	}

	#header #headerNavigation .nav-item:nth-child(2n+1) .nav-link:after{
		background: var(--blue);
	}
	#header #headerNavigation .nav-item:nth-child(2n+1) .nav-link:hover{
		color: var(--pink);
	}
	
	#header #headerNavigation .nav-item:nth-child(3n+1) .nav-link:after{
		background: var(--green);
	}
	#header #headerNavigation .nav-item:nth-child(3n+1) .nav-link:hover{
		color: var(--purple);
	}
	#header #headerNavigation .nav-item:nth-child(4n+1) .nav-link:after{
		background: var(--light-blue);
	}
	#header #headerNavigation .nav-item:nth-child(4n+1) .nav-link:hover{
		color: var(--light-pink);
	}
	#header #headerNavigation .nav-item:nth-child(5n+1) .nav-link:after{
		background: var(--light-green);
	}
}
	
	
#basketIconWrapper {
	position:relative;
}

#productCount{
	position:absolute;
	top:-2px;
	right: 5px;
	background: #fff;
	color: #000;
	display:flex;
	border-radius: 50px;
	background: #fff;
	color: #000;
	justify-content:center;
	align-items:center;
	min-height: 15px;
	min-width:15px;
	font-size:60%;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.8)
}
/* ============ desktop view ============ */
@media all and (min-width: 992px) {

	.dropdown-menu li {
		position: relative;
	}

	.dropdown-menu .submenu {
		display: none;
		position: absolute;
		left: 100%;
		top: -7px;
	}

	.dropdown-menu .submenu-left {
		right: 100%;
		left: auto;
	}

	.dropdown-menu>li:hover {
		background-color: #f1f1f1
	}

	.dropdown:hover .dropdown-menu {
		display: block;
	}
}

/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
	.dropdown-menu .dropdown-menu {
		margin-left: 0.7rem;
		margin-right: 0.7rem;
		margin-bottom: .5rem;
	}

}

/* ============ small devices .end// ============ */
/*  ----------------------------------------------------------	*/
/*  						Footer 	 							*/
/*  ----------------------------------------------------------	*/
#footer {
	background: var(--black);
	color: #fff;
	border-top:1px solid rgba(255,255,255,0.1);
	margin-top:1rem;
}


#footer h3{
	font-family: var(--font-heading-h1);
	font-weight: var(--font-heading-h1-weight);
	-webkit-text-stroke: var(--font-heading-h1-text-stroke);
	paint-order: var(--font-heading-h1-paint-order);
	letter-spacing: var(--font-heading-h1-text-stroke);
	text-transform:  var(--font-heading-h1-text-transform);
	color:  var(--pink);
	-webkit-text-stroke-color: var(--light-pink);
	-webkit-text-stroke-width: 8px;
}

#footer a {
	color: #fff;
}

#footerLocations{
	border-top: 1px solid rgba(0,0,0,0.3);
}

#subFooter{
	border-top:1px solid rgba(255,255,255,0.1);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size:0.9rem;
}

#subFooter a{
	text-decoration: none;
}

#footer .footerLocationContainer{
	font-size:0.9rem;
}

#footer .footerLocationContainer:hover{
	
}

#footer .nav .nav-item .nav-link{
	padding-left:0px;
	padding-right:0px;
}

#footer .nav .nav-item .nav-link:hover{
	padding-left:20px;
	transition: padding .5s;
	font-weight:600;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg fill='%23fff'%3e%3cpath d='M9.586 8 6.05 11.536l.707.707L11 8 6.757 3.757l-.707.707z'/%3e%3c/g%3e%3c/svg%3e");
	background-size: 1em;
	background-position: 0px center;
	background-repeat: no-repeat;
}


#footer .footerLocationContainer .font-primary-heading{
	font-size:1rem;
}
.locationContainer .locationImage{
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property:transform;
}

.locationContainer:hover .locationImage{
	-webkit-transform: scale(1.1) rotate(4deg);
	transform: scale(1.1) rotate(4deg);
}


.locationContainer .font-primary-heading{
	font-size:1.2rem;
}

/*  ----------------------------------------------------------	*/
/*  						Other 	 							*/
/*  ----------------------------------------------------------	*/

.breadcrumb {
	display:none !important;
}

.dot-bg{
	background-image: url("/assets/images/default-banner.webp");
	background-size:cover;
	background-position:center;
}
/*  ----------------------------------------------------------	*/
/*  					Banners 	 							*/
/*  ----------------------------------------------------------	*/
#banner{
	position:relative;
}

#banner .banner-image-wrapper{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #fff;
}
/*
#banner .banner-image-wrapper-large{
	padding-bottom: 0%;
	min-height: 125px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: #fff;
}

#banner .banner-dark-overlay{
	position:absolute;
	top:0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000;
	opacity:0.3
}
*/

#banner .banner-caption {
	position: relative;
	left: 0%;
	transform: translate(0%, 0%);
	top:0%;
	padding: 10px;
	background: var(--green-transparent);
	text-transform: ;
	color: #fff;
	text-align:center;
	min-height: 200px;
	display:flex;
	align-content:center;
	justify-content:center;
	flex-direction:column;
}
/*
#banner .banner-caption-left {
	left: 0%;
	transform: translate(0%, 0%);
}
*/
#banner h1, #banner h2{
	font-family: var(--font-heading-h1);
	font-weight: var(--font-heading-h1-weight);
	-webkit-text-stroke: var(--font-heading-h1-text-stroke);
	paint-order: var(--font-heading-h1-paint-order);
	letter-spacing: var(--font-heading-h1-text-stroke);
	text-transform:  var(--font-heading-h1-text-transform);
	color:  var(--pink);
	-webkit-text-stroke-color: var(--light-pink);
	-webkit-text-stroke-width: 8px;
}

#banner h2{
	color:  var(--green);
	-webkit-text-stroke-color: var(--light-green);
}



@media (min-width: 576px) {
	#banner .banner-image-wrapper{
		padding-bottom: 28%;
	}
	#banner .banner-caption {
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		top:50%;
		min-height: 0px;
	}
}

@media (min-width: 768px){
	#banner h1{
		font-size:2rem;
	}
}

@media (min-width: 992px){
	#banner h1{
		line-height: 50px;
		font-size:2.5rem;
	}
}

.categoryItemWrapper{
	position:relative;
	overflow:hidden;
}

.categoryItemWrapper:hover{
	background: var(--primary);
}

.categoryItemImage{
	transition: 0.3s;
}

.categoryItemWrapper:hover .categoryItemImage{
	opacity:0.7;
	transform: scale(1);
	transition: 0.3s
}

.categoryItemText{
	position:absolute;
	background: var(--light-blue);
	padding: 0.25rem 0.75rem;
	bottom: 10%;
	left:0px;
	font-family: var(--font-heading-h1);
	font-weight: var(--font-heading-h1-weight);
	-webkit-text-stroke: var(--font-heading-h1-text-stroke);
	paint-order: var(--font-heading-h1-paint-order);
	letter-spacing: var(--font-heading-h1-text-stroke);
	color: var(--pink);
	display:flex;
	align-items:center;
	font-size: 1.4rem;
	/* text-shadow: 1px 1px 1px rgba(0,0,0,0.8); */
	transition: 0.3s;
	line-height:normal;
	letter-spacing: 1px; 
	min-height: 0 !important;
	min-width:30%;
	width: auto;
	transition: 0.6s;
}

.categoryItemWrapper:hover .categoryItemText{
	/*bottom: auto;
	top:50%;
	transform: translate(0%,-50%);*/
	width: 100%;
	text-align:center;
	justify-content:center;
	transition: 0.3s;
	min-width:100%;
}

@media (min-width: 768px){
	.categoryItemText{
		padding: 0.75rem 1.25rem;
		min-height: 72px;
		font-size: 1rem;
	}
}

.card-footer{
	background: none;
}

.prodItem, .prodItem .card-footer{
	border-color: transparent;
}

.prodItem, .prodItem .card-img-top{
	border-radius: 0px;
}

.prodItem .card-title{
	background: var(--primary);
	padding: 0.75rem;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	color: #fff;
}


/*  ----------------------------------------------------------	*/
/*  						Cards  	 							*/
/*  ----------------------------------------------------------	*/
.card{

}
.card-footer{
	background: transparent;
	border-top: 0px;
}

/*  ----------------------------------------------------------	*/
/*  					HOME / INDEX  	 							*/
/*  ----------------------------------------------------------	*/

#heroBanner{
	position:relative;
}
#heroBanner h1{
	font-size:1.2rem
}

#heroBanner h2, #heroBanner h3{
	font-size:1rem
}


#heroBanner .carousel-caption {
	position: relative;
	right:0;
	top: 0%; 
	margin-top: -150px;
	left:0;
	bottom:0;
}

#heroBanner .caption-top{
	min-height: 150px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction: column
}

#heroBanner .caption-location{
	background: var(--purple);
}

@media (min-width: 765px) {
	#heroBanner .carousel-caption {
		position: absolute;
		right:0;
		top: 0%; 
		margin-top: 0px;
		left:0;
		bottom:0;
	}
	
	#heroBanner .caption-top{
		min-height: 150px;
		display:flex;
		align-items:center;
		justify-content:center;
		flex-direction: column
	}
	
	#heroBanner .caption-location{
		background: none;
	}
}


@media (min-width: 1400px) {
	#heroBanner .carousel-caption {
		right: auto;
		bottom: auto;
		left: 0px;
		top: 0px;
		/* text-shadow: 1px 1px 1px rgba(0,0,0,0.8); */
		height: 100%;
		width: 100%;
	}
	
}


#heroBanner .carousel-overlay{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}

/*
#heroBanner .h1{
	font-family: var(--font-heading);
  	font-weight: var(--font-heading-weight);
}

#heroBanner h2{
	font-family: var(--font-heading);
  	font-weight: var(--font-heading-weight);
}
*/
@media (min-width: 576px) {
	
}

@media (min-width: 768px){
	#heroBanner h1, #heroBanner .h1{
		font-size:2.5rem;
	}
}

@media (min-width: 992px){
	#heroBanner h1, #heroBanner .h1{
		line-height: 65px;
		font-size:4.5rem;
	}
	#heroBanner h2, #heroBanner .h2{
		line-height: 65px;
		font-size:2.1rem;
	}
	
	#heroBanner h3, #heroBanner .h3{
		line-height: 65px;
		font-size:2rem;
	}
}

.caption-location-image.opace{
	opacity:0.4		
}

.caption-location-image{
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property:transform;
}
.caption-location-image:hover{
	-webkit-transform: scale(1.1) rotate(4deg);
	transform: scale(1.1) rotate(4deg);
}
	
/*  ----------------------------------------------------------	*/
/*  					Calendar  	 							*/
/*  ----------------------------------------------------------	*/