@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500&display=swap');
@import url('navbar.css');

:root {
	--main-color: #5b5b5b;
	--text-color: #5b5b5b;  
	--text-color-menu: #546a7b;	
	--text-color-h1: #000000;   
	--text-color-h2: #000000;   
	--text-color-h3: #000000;   
	--text-color-h4: #161e2d;   
	--text-color-h5: #161e2d; 
	--text-color-h6: #161e2d;   
	--color-btn-default: #f6e9ea;   
	--color-btn-action: #f6e9ea; 
	--font-family: Gill Sans, 'Lato', sans-serif;
	--color-background:#ffffff;   
	--color-background-header:#d5eaf7;  	
	--color-background-footer:#d5eaf7;  
	--color-background-footer-sub:#f8fbf4; 
	--color-background-footer-sub2:#a9c2c9;	
	--text-color-footer: #5b5b5b;   
	--color-background-card:#f6e9ea;
	--color-background-beige:#f4ead9;		
	--color-background-pink:#f6e9ea;		
	--color-background-green:#c9d3c1;
	--color-background-blue:#d5eaf7;	
}

body {
	font-family: var(--font-family);
	color: var(--text-color);
	font-size: 16px;
	line-height:1.5;
	font-weight: 300;
	background-color: var(--color-background);
	margin:0; 
	height:100%;
	-webkit-font-smoothing: auto;
}

.DNNEmptyPane {margin-top:0px !important; margin-bottom:0px !important;}
.form-control {border-radius:0px !important}
.form-control.is-invalid, .was-validated .form-control:invalid {background-image: none; padding-right:0px}
.form-control.is-valid, .was-validated .form-control:valid {background-image: none; padding-right:0px}


.site-color {color:var(--main-color) !important}

/*=========== Typography ===============*/
h1, h2, h3, h4, h5, h6, p, btn, .h1, .h2, .h3, .h4, .h5, .h6, .p, .btn {font-family: var(--font-family); line-height:1.5}
h1, .h1 {font-size: 47px; font-weight: 400; color:var(--main-color-h1);}
h2, .h2 {font-size: 28px; font-weight: 400;  color:var(--main-color-h2)}
h3, .h3 {font-size: 25px; font-weight: 400;  color:var(--main-color-h3); margin-bottom: 16px}
h4, .h4 {font-size: 20px; font-weight: 400;  color:var(--main-color-h4)}
h5, .h5 {font-size: 18px; font-weight: 400;  color:#FFFFFF; text-align: center;}
h6, .h6 {font-size: 13px; display:inline;}
div, p, .p, li, span, td, normal {font-size: 16px; line-height:1.5; font-weight: 300; color:var(--text-color);}

label {font-weight:400}
.form-control {font-weight:300}

a, a:visited  {color:#02609d; text-decoration:none;}

h3 a, h3 a:visited {color:var(--text-color-h3)}

input::placeholder {
  color: #cccccc;
  font-style: italic;
}

strong {
 font-weight:400;
}

/*=========== End Typography ===============*/
.container_default {background-color:transparent; }
.container_white {background-color:#ffffff; }
.container_pink {background-color:var(--color-background-pink);}
.container_green {background-color:var(--color-background-green);}
.container_blue {background-color:var(--color-background-blue);}

/*=========== Buttons ===============*/
.btn {border-radius:0}
.btn-site-default, a.btn-site-default {background-color: var(--color-btn-default); border-color: var(--color-btn-default); color: #5b5b5b; padding: 5px 20px;}
.btn-site-default:hover, .btn-site-default:active, .btn-site-default:focus {background-color: var(--color-btn-default) !important; border-color: var(--color-btn-default) !important; color: #5b5b5b;}
.btn-site-action {background-color: var(--color-btn-action); border-color: var(--color-btn-action); color:#5b5b5b; padding: 5px 20px;}
.btn-site-action:hover, .btn-site-action:active, .btn-site-action:focus {background-color: var(--color-btn-action) !important; border-color: var(--color-btn-action) !important; color:#5b5b5b;}
.btn-site-save {background-color: var(--color-btn-action); border-color: var(--color-btn-action); color:#ffffff; }
.btn-site-save:hover, .btn-site-save:active, .btn-site-save:focus {background-color: var(--color-btn-action) !important; border-color: var(--color-btn-action) !important; color:#ffffff;}
.btn-site-delete {background-color: #f0353d; border-color: #f0353d; color:#ffffff;}
.btn-site-delete:hover, .btn-site-delete:active, .btn-site-delete:focus {background-color: #ec000a !important; border-color: #ec000a !important; color:#ffffff;}
.btn-site-cancel {background-color: #9baaab; border-color: #9baaab; color:#ffffff;}
.btn-site-cancel:hover, .btn-site-cancel:active, .btn-site-cancel:focus {background-color: #687f82 !important; border-color: #687f82 !important; color:#ffffff;}
.btn-site-edit {background-color: #2660f2; border-color: #2660f2; color:#ffffff;}
.btn-site-edit:hover, .btn-site-edit:active, .btn-site-edit:focus {background-color: #0a9af2 !important; border-color: #0a9af2 !important; color:#ffffff;}
.btn-site-view {background-color: #fd6a33; border-color: #fd6a33; color:#ffffff;}
.btn-site-view:hover, .btn-site-view:active, .btn-site-view:focus {background-color: #f95213 !important; border-color: #f95213 !important; color:#ffffff;}
.btn-fa {cursor:pointer}

.btn-addtocart {background-color: var(--color-background-blue); border-color: var(--color-background-blue); color:#5b5b5b; padding: 5px 20px; font-size: 20px; font-weight: 500;}
.btn-addtocart:hover, .btn-site-action:active, .btn-site-action:focus {background-color: var(--color-background-blue) !important; border-color: var(--color-background-blue) !important; color:#5b5b5b;}

.btn-site-action2 {background-color: var(--color-background-blue); border-color: var(--color-background-blue); color:#5b5b5b; padding: 5px 20px; font-size: 20px; font-weight: 500;}
.btn-site-action2:hover, .btn-site-action:active, .btn-site-action:focus {background-color: var(--color-background-blue) !important; border-color: var(--color-background-blue) !important; color:#5b5b5b;}


.btn-rounded {border-radius:20px}

i.btn-view {color:#365dcd;}
i.btn-delete {color:#F44336;}

.btn-site-beige {background-color: var(--color-background-beige); border-color: var(--color-background-beige); color:#5b5b5b;}
.btn-site-beige:hover, .btn-site-beige:active, .btn-site-beige:focus {background-color: var(--color-background-beige) !important; border-color: var(--color-background-beige) !important; color:#5b5b5b;}
.btn-site-pink {background-color: var(--color-background-pink); border-color: var(--color-background-pink); color:#5b5b5b;}
.btn-site-pink:hover, .btn-site-pink:active, .btn-site-pink:focus {background-color: var(--color-background-pink) !important; border-color: var(--color-background-pink) !important; color:#5b5b5b;}
.btn-site-blue {background-color: var(--color-background-blue); border-color: var(--color-background-blue); color:#5b5b5b;}
.btn-site-blue:hover, .btn-site-blue:active, .btn-site-blue:focus {background-color: var(--color-background-blue) !important; border-color: var(--color-background-blue) !important; color:#5b5b5b;}
.btn-site-green {background-color: var(--color-background-green); border-color: var(--color-background-green); color:#5b5b5b;}
.btn-site-green:hover, .btn-site-green:active, .btn-site-green:focus {background-color: var(--color-background-green) !important; border-color: var(--color-background-green) !important; color:#5b5b5b;}
.btn-site-grey {background-color: #727272; border-color: #727272; color:#ffffff;}
.btn-site-grey:hover, .btn-site-grey:active, .btn-site-grey:focus {background-color: #727272 !important; border-color: #727272 !important; color:#ffffff;}


.btn-site-large {font-size:24px}

.btn-black-border {border-color:#000000 !important}
.btn-black-border:hover {border-color:#cccccc !important}

.btn-choose_experience {width:50%}

/*=========== End Buttons ===============*/

/*=========== Cards ===============*/
.card-header {
    background: #ffffff;
}
.card-title {
    font-size: 22px;
    color: var(--main-color);
}

.card-header-site {
	background: var(--color-background-card);
}

.card-header-site .h2 {color:var(--text-color)}



/*=========== End Cards ===============*/



/*=========== Header ===============*/
#top-bar {background-color:#f8f8f8;}

#header {
	transition: all 0.4s ease 0s;
	background-color:#f8f8f8;
}

#header_tmp {box-shadow: 1px 1px 1px 0px #b2dfe1;}

.contact-details {
	float: left;
}


.logo img {margin-top: 0px;}
#toplogo {display:none; padding:0px !important;}
#toplogo {float:left; } 
#headerlogo {float:left;} 
#headerlogo img { transition: all 0.4s ease 0s;}
#topbarmenu {text-align:right;}

.topbanner {padding:30px 30px}
.topbanner h2 {text-transform:lowercase}

/*=========== End Header ===============*/






#body-wrapper {padding: 30px 0px}


/*=========== Footer ===============*/
#footer {
		background: var(--color-background-footer);
}

.footertext {
	font-size: 24px;
	font-weight: 400;
	color: var(--text-color-footer);
}

#FooterSection1 {
	padding-bottom:20px;
}

#FooterSection2 {
	padding:10px 0px;
	background: var(--color-background-footer-sub);
}

.FooterSection1 ul {list-style-type: none; margin: 0; padding: 0;}

li.footermenu {
	font-size: 14px;
	color: var(--text-color-footer);
	line-height: 1.5;
	padding-bottom: 5px;
	text-transform:lowercase;
}

.footer a {color:var(--text-color-footer)}
.footera a {color:#02609d}


/*=========== End Footer ===============*/

.banner-about {
	background-image: linear-gradient(to bottom, #ffffffb5, #ffffffb5),url(/Portals/0/assets/backgrounds/about-back.jpg);
    background-size: cover;
	height:350px;
}

.banner-howitworks {
	background-image: linear-gradient(to bottom, #ffffffb5, #ffffffb5),url(/Portals/0/assets/backgrounds/howto-back.jpg);
    background-size: cover;
	height:350px;
}

.banner-partner {
	background-image: linear-gradient(to bottom, #ffffffb5, #ffffffb5),url(https://thewellnesscard.co.uk/Portals/0/assets/backgrounds/Become-a-partner-back.jpg);
    background-size: cover;
	height:350px;
}

.banner-corporate1 {
	background-image: linear-gradient(to bottom, #ffffffb5, #ffffffb5),url(/Portals/0/assets/backgrounds/Corporate-back.jpg);
    background-size: cover;
	height:350px;
}

.banner-corporate2 {
	background-image: linear-gradient(to bottom, #ffffffb5, #ffffffb5),url(/Portals/0/assets/backgrounds/Corporate-back2.jpg);
    background-size: cover;
	height:350px;
}

.product-type-col {
    padding: 0px 50px 0px;	
}
.product-type-card {
	display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border-radius: 20px;
	margin-bottom: 20px;
}

.product-type-card img {
	height:80%;
}

.rounded-card {
    border-radius: 20px;
	margin-bottom: 20px;
}

.rounded-card img {
	height:100px;
}

.choose_experience {
	position: absolute; width: 100%; bottom: 15%; margin-left: 23%;
}
.btn-choose_experience {width:50%}

/*=========== Catalogue ===============*/
.productBox {
    height: auto;
    display: block;
}
.productBox .productImage {

}
.productBox .productImage img {
	width: 100%;
    transition: all .3s ease-in-out;
}
.productBox .productCaption {
    text-align: center;
}

.productPrice {font-weight:500}

.promoPrice {color:var(--main-color)}

.promoTag {
	background-color:var(--main-color);	
	color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: none;
    text-align: center;
    line-height: 75px;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    position: absolute;
    top: -10px;
    right: 0px;
    display: inline-block;
    z-index: 20;
}

.view-product {cursor: pointer}

.categoryHeader {
	background-color:var(--color-background-card);
	font-size: 16px;
}

.prodcat, .servicetype {
	font-size: 16px;
    margin-bottom: 5px;	
	cursor:pointer;
}

.prodcat i, .servicetype i {margin-right:5px; color:var(--main-color)}

.square {
  position: relative;
  width: 100%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.responsive-16by9 {
  position: relative;
  width: 100%;
}

.responsive-16by9:after {
  content: "";
  display: block;
  padding-bottom: 60%;
}

/*=========== End Catalogue ===============*/

/*=========== Checkout  ===============*/
.checkoutsteps {
	background-color: var(--color-background-blue);	
	color: var(--text-color);
}
.checkoutsteps .step {
	padding: 20px 0px 20px 10px;
	width:100%;
}
.checkoutsteps div {
	font-size:18px;
}
.checkoutsteps i {
	font-size:30px;
	margin-right:8px;
}

.checkoutsteps .active {
	background-color: var(--color-background-pink);	
}

#lxTdnn_owsBasket {
	display:inline-block;
}
.uneditable .basket-img {
    max-height: 70px;
}

@media (max-width: 991px) {
	.container {
		max-width: 100%;
	}
	.homelink {display:none}
	
}




/*=========== End Checkout ===============*/

.spa-listing-card {
	background-color: #ffffff;
    border: 0;	
}

.spa-listing-row {}
.spa-listing-info {height:240px; }
.spa-listing-card {border:1px solid #000000; padding:20px;}
.spa-listing-filter {max-width:300px}
.spa-listing-img {width:100%; height:100%; background-size:cover; background-position:center}
.spa-listing-details {height:160px; overflow:hidden; margin-bottom:10px;}
.spa-listing-services {height:80px}
.details-row-less {height:200px; }

.spa-listing-services ul {
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    justify-content: center;
}
.spa-listing-services ul li {
	padding:0px 10px;
}

@media (max-width: 768px) {
	.spa-listing-details {height:200px;}
	.details-row-less {height:auto; }

}

@media (max-width: 576px) {
	.spa-listing-details {height:150px;}	
	.spa-listing-info {height:auto;}
	.spa-listing-img {height:200px}
}


.ms-options-wrap button {border-radius:5px;}

#LoginButton {width:100%; max-width:300px; margin-left:auto; margin-right:auto;}

@media (max-width: 991px) {
	.checkoutsteps div {
		font-size:14px;
	}
	.checkoutsteps i {
		font-size:18px;
	}
	#headerlogo img {height:60px;}	
	#header {height:100px;}	
	
	.choose_experience {
		position: absolute; width: 100%; bottom: 15%; margin-left:5%;
	}
	.btn-choose_experience {width:80%}	
	
	
} 

@media only screen and (max-width: 767px) {
	#headerlogo img {height:50px;}	
	#header {height:80px;}
	#header .col-12 {padding:0px}	
	#headerlogo {display:block;}	
	.sticky-header #headerlogo {display:block; opacity:1}	
	.basket-img {
			display:none;
	}
	.padding20 {
		padding: 0 0 !important;
	}
	.checkoutsteps div {
		font-size:14px;
	}	
	h1, .h1 {font-size: 28px;}	
	
	#lxTdnn_owsBasket {top: 20px; right: 65px;}	


}

@media only screen and (max-width: 566px) {
	#headerlogo img {height:30px;}	
	#header {height:50px;}
	.spa-listing-card .h5 {font-size:14px}


}

.background-beige {background-color:var(--color-background-beige)}
.background-pink {background-color:var(--color-background-pink)}
.background-green {background-color:var(--color-background-green)}
.background-blue {background-color:var(--color-background-blue)}

.round {border-radius: 50%;}

.dropdown:hover>.dropdown-menu {
  display: block;
}
.dropdown>.dropdown-menu { margin: 0; } 

#faq .card {
  margin-bottom: 10px;
  border: 0;
}

#faq .card .card-header {
  border: 0;
  padding: 0;
	border-bottom: 2px solid #cccccc !important;  
}

#faq .card .card-header .btn-header-link {
  display: block;
  text-align: left;
  padding: 10px;
  font-size:24px;
}

#faq .card .card-header .btn-header-link:focus {
	box-shadow:none;
}

#faq .card .card-header .btn-header-link:after {
  content: "\f106";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  float: right;
}

#faq .card .card-header .btn-header-link.collapsed {

}

#faq .card .card-header .btn-header-link.collapsed:after {
  content: "\f107";
}

#faq .card .collapsing {

}

#faq .card .collapse {
  border: 0;
}

#faq .card .collapse.show {

}