@import url("https://use.typekit.net/azs7wed.css");
:root {
	--primary: #ad7b67;
	--primary-hover: #c8aba0;
	--secondary: #0f162f;
	--secondary-hover: #000000;
	--success: #198754;
	--success-hover: #198754;
	--white: #ffffff;
	--black: #000000;
	--navy: #0f162f; 
	--nearly-white: #e8e6e6;
	--light-grey: #999999;
	--font-body: "avenir-lt-pro", sans-serif;
	--font-body-weight: 200;
	--font-heading: "lulo-one", sans-serif;
	--font-heading-weight: 700;
	--border-radius-size: 0px;
	--padding-with-border-radius: .75rem 1.25rem; 
}

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: #e8e6e6;
}

/* 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);
}

a:hover{
	color: var(--secondary);
}

.container{
	max-width: 1200px;
}

.overlay{
	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;
	}
	
}
/*  ----------------------------------------------------------	*/
/*  					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 {
	background: var(--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;
}
*/
/*  ----------------------------------------------------------	*/
/*  					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, .form-control{
	border-radius: var(--border-radius-size);
}

.card{
	overflow:hidden;
	border: none;
}

.list-group-item:first-child, .list-group-item:first-of-type, .card-img, .card-img-top{
	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;
}

/*  ----------------------------------------------------------	*/
/*  						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);
}
/*  ----------------------------------------------------------	*/
/*  					Buttons / Headings 	 					*/
/*  ----------------------------------------------------------	*/
.btn, .time-slot{
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	border-radius: var(--border-radius-size);
	font-size: 0.8rem;
	padding: .5rem .75rem;
}

/* 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, .connect-checkout-btn{
	background-color: var(--primary) !important;
	border:  !important;
	border-radius:  !important;
	color: #FFF !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	width: 100% !important;
	height: ; 
}

.payment-container .connect-btn{
	width: auto !important;
	max-width: 100% !important;
	margin-left: 16px !important;
	margin-right: 16px !important; 
}

.btn-primary{
	background: var(--primary);
	border-color: var(--primary);
}
.btn-primary.disabled, .btn-primary:disabled {
	color: #fff;
	background: var(--primary);
	border-color: var(--primary);
	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(--white);
}

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

.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);
}

.card .btn-secondary, .list-group .btn-secondary{
	background: var(--white);
	border-color: var(--white);
	color: var(--navy);
}

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

.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);
}

.card .btn-outline-secondary, .list-group .btn-outline-secondary{
	color: var(--white);
	border-color: var(--white);
}

.card .btn-outline-secondary:hover, .card .btn-outline-secondary:focus, .card .btn-outline-secondary:active, .card .btn-outline-secondary:not(:disabled):not(.disabled).active, .card .btn-outline-secondary:not(:disabled):not(.disabled):active, .card .show > .btn-outline-secondary.dropdown-toggle, .list-group .btn-outline-secondary:hover, .list-group .btn-outline-secondary:focus, .list-group .btn-outline-secondary:active, .list-group .btn-outline-secondary:not(:disabled):not(.disabled).active, .list-group .btn-outline-secondary:not(:disabled):not(.disabled):active, .list-group .show > .btn-outline-secondary.dropdown-toggle{
	color: var(--navy);
	border-color: var(--white);
	background: var(--white);
}

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

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

.form-control{

}
/* 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: 80px;
	-webkit-appearance: none;
	 -moz-appearance: textfield;
}

.input-group-quantity .btn{
	
}

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

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
}

h1, .h1{ font-size: 1.8rem; color: var(--primary);}
h2, .h2{ font-size: 1.5rem; }
h3, .h3{ font-size: 1.2rem;}
h4, .h4{ font-size: 1.1rem;}
h5, .h5{ font-size: 1rem;}
h6, .h6{ font-size: 0.8rem;}

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

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

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

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

.breadcrumbWrap{
	display: none;
}

/*  ----------------------------------------------------------	*/
/*  						Header 	 							*/
/*  ----------------------------------------------------------	*/
#header {
	background: var(--navy);
	color: var(--white);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 0.8rem;
}

#header a {
	color: var(--white);
}

#header a:not(.btn):hover{
	color: #b8bfd5;
}

#header .container{
	max-width: 1920px;
}

#header #topBar{
	background: var(--black);
	font-size: 0.6rem;
}

#header #headerLogo{
	height: 58px;
	border: 5px solid #5f96cc;
}

#header .basketCircle{
	top:0px;
	right:0px;
	background: var(--primary);
	color: var(--white);
	display: flex; 
	align-items: center;
	justify-content: center;
	font-size: 70%;
	height: 18px;
	width: 18px;
	border-radius: 40px; 
}
/*  ----------------------------------------------------------	*/
/*  						Footer 	 							*/
/*  ----------------------------------------------------------	*/
#footer {
	background: var(--navy);
	color:  var(--primary);
	font-size: 10px;
}

#footer .container{
	max-width: 1920px;
}
/*  ----------------------------------------------------------	*/
/*  						Cards  	 							*/
/*  ----------------------------------------------------------	*/
.card{

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

.card .stretched-link:hover:after{
	background: white;
	opacity: 0.2;
}
/*  ----------------------------------------------------------	*/
/*  					Calendar  	 							*/
/*  ----------------------------------------------------------	*/
.StripeElement{
	background: white; 
	color: black;
	padding: 15px;
}

/*  ----------------------------------------------------------	*/
/*  						Products  	  						*/
/*  ----------------------------------------------------------	*/
.out-of-stock-overlay {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(39, 39, 39, 0.87);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    padding: 15px;
    text-align: center;
}

.out-of-stock-text {
	padding-bottom: 130px;
}

.subOptions{
	list-style-type: none;
	margin-left:0px;
	padding-left:0px;
}

.subOptions .option{
	display:inline-block;
	vertical-align:top;
	border: 1px solid var(--black);
	padding: 5px 10px;
	margin-right: 8px;
	cursor:pointer;
}

.subOptions .option:not(.outofstock):hover{
	background: #fff;
	color: var(--black);
}

.subOptions .option.selected{
	background:var(--success);
	color: #fff;
}

.subOptions .disabled{
	opacity:0.4;
	cursor:not-allowed;
}

.subOptions .outofstock{
	text-decoration: line-through;
	cursor: default;
	background: grey;
	opacity: .7;
}

.unavailable{
	opacity:0.4;
	cursor:default;
}

.colourSelect{
	background-size:cover;
}

.subOptions .colourSelect.outofstock{
	
}

.subOptions .colourSelect.outofstock::after {
	content: "\f00d";
	font-family: 'Font Awesome\ 5 Free';
	font-weight: 900;
	color: red;
	height: 25px;
	display:block;
	text-align:center;
	font-size: 22px; 
}

/*  ----------------------------------------------------------	*/
/*  						Product page  	  						*/
/*  ----------------------------------------------------------	*/
/* product gallery stuff */
#product-carousel {
    border: 1px solid transparent;
    /* box-shadow: 0px 8px 14px -10px rgba(0,0,0,0.75); */
}

#product-carousel .owl-prev {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
}

#product-carousel .owl-next {
    top: 50%;
    right: 5%;
    position: absolute;
    transform: translateY(-50%);
}

#product-carousel .owl-prev .icon, .owl-next .icon {
    height: 3rem;
    width: 3rem;
    fill: #fff;
}

#product-carousel .owl-prev:hover, .owl-next:hover {
    background-color: transparent !important;
}

#product-carousel-thumbs {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1000;
}

#product-carousel-thumbs .owl-thumb-item {
	padding: 0;
	border: none;
}


.productTotalPrice {

}

.qtyBtn {
	background-color: #333;
	border: 1px solid #000;
	color: #fff;
}

.qtyBtn:hover {
	background-color: #000;
	color: #fff !important;
}

.productTabs .nav-link {
	border-radius: 0;
	color: #fff;
	transition: .1s all ease-in-out;
}
.productTabs .nav-link.active {
	color: #000;
}