/* MOBILE STYLES FIRST */

@font-face {
    font-family: 'Freestyle Script';
    font-style: normal;
    font-weight: 400;
    src: local('Freestyle Script'), url('https://fonts.cdnfonts.com/s/19923/FREESCPT.woff') format('woff');
}

* 	{ 
	box-sizing: border-box; 				/* This means the browser will include margin and padding size definitions rather than adding those values on. */
	}

body {  	
	width: 100%; 
	margin: 0px;
	padding: 0px;
	font-size: 0.95em; 
	line-height: 1.5; 
	font-family: 'Lato'; 
	color: #333;
	background-color: #fff;
	font-weight: 300;
	}


/* MENU STYLES */

.menu-toggle {
	display: inline-block; /* Necessary for rotation to take effect */
    transform: scale(3.8, 1.2);
	position: absolute;
	top: 10px;
	left: 42px;
	color: #fff;
	z-index: 11;
	font-size: 250%;
	font-weight: 200;
	font-family: 'Lato';
	cursor: pointer;
}

div.menu {
	display: none;
	background: rgba(0, 0, 0, 0);
	padding: 90px 80px 40px 0px;
	position: absolute;
	top: 0px;
	z-index: 10;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #ffffff;
	}
div.menu a {
	display: block;
	color: #fff;
	font-size: 150%;
	text-decoration: none;
	padding: 3px 0px 3px 3vw;
}

/* BASIC ROWS AND IMAGES */

.row {  
	background: transparent;
	display: block;
	margin: 0;
	position: relative;
	width: 100vw;										/* Does not use max width so that a background can be used in the full width of the row */
	padding: 60px 40px 60px 40px; 						/* Uses padding not margin so that a background can be used in the full width of the row */
}	

.header-background-image {  								/* The div which holds a page's header image*/
    height: 80vh;
}

.image-div {					/* Add to divs which are mainly, or only, about the background image */
	height: 70vh;
	text-align: center;
}







/* FADER STYLES */
sliderscreen {
	display: block;
	width: 100%;
	max-width: 1000px;
	height: 500px;
	margin: auto;
	position: relative;
	overflow: hidden;
}

img.right-arrow {
	display: none; /* to hide it in mobile view for less clutter */
	cursor: pointer;
	width: 59px;
	position: absolute;
	top: 45%; right: 5vw;
	opacity: 0.9;
}

img.left-arrow {
	display: none; /* to hide it in mobile view for less clutter */
	cursor: pointer;
	width: 59px;
	position: absolute;
	top: 45%; left: 5vw;
	opacity: 0.9;
	transform: rotate(180deg);
}

.bullet-points {
	z-index: 2;
    position: absolute;
    bottom: 80px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px; /* Space between bullets */
}

.bullet {
    width: 10px; /* Size of the bullet */
    height: 10px; /* Size of the bullet */
    border-radius: 50%; /* Make it circular */
    background-color: #ccc; /* Default color */
    cursor: pointer; /* Change cursor to pointer */
}

.bullet-points-grey .bullet {background-color: #ccc;}
.bullet-points-white .bullet {background-color: #fff;}

.bullet.active {
    background-color: #a5c532; /* Active bullet color */
}

slide {   
	position: absolute; /* Position testimonials absolutely - this means they all sit one on top of the other in the case of the fader, and can be positioned offsides in case of slider */
	top: 0;
	left: 0;
	width: 100%;
	display: flex; /* Enable flexbox in order that the testimonials can be centred vertically within the slide! */
	height: 100%; /* ensure that the slide fills the full height of the sliderscreen */
	justify-content: center; /* Center horizontally */
	flex-direction: column;
	align-items: center; /* Center vertically */
	padding: 0px 2vw 0px 2vw;
			
	visibility: hidden; /* Prevents interaction with clicks because opacity: 0; won't do that */
	opacity: 0;
    transition: all 0.5s ease-out 0s; /* Duration, timing function, and delay *//*transition: opacity 0.5s ease; /* Transition effect*/}
	

slide.slide-active {	
	visibility: visible; /*instantly becomes visible, and then fades in thanks to the opacity animation */
    opacity: 1; /* The animatable arrival/departure of visibility on the page */
}


		/* Now some additional styles specific to the testimonial slider */
		slide.testimonial {
			justify-content: center; /* Center horizontally */
			flex-direction: column;
			align-items: center; /* Center vertically */

		}

		p.testimonial {width: 70%; max-width: 900px; margin: auto; padding: 0px 0px 0px 0px; margin: 0px 0px 30px 0px; text-align: center; font-style: italic;}
		p.testimonial-byline {width: 100%; margin: auto; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; text-align: center; font-weight: 300;}









/* TEXT STYLES */
h1, h2, h3 {display: block; 
            font-family: 'Lato';
            margin: 0px;}

h1.header {font-size: 310%; font-weight: 400;  letter-spacing: 0px; word-spacing: -2px; line-height: 1.4; color: #fafafd;}

h1.freestyle-script {font-family: 'Freestyle Script'; font-size: 420%; font-weight: 400;  letter-spacing: 0px; word-spacing: -2px; line-height: 1.4; margin: 0px 0px 50px 0px;}

h1.normal {font-size: 200%; font-weight: 400; line-height: 1.4; color: #fff; margin: 0px 0px 15px 0px;}

	
h2. {color: #333; font-size: 190%; margin: 100px 0px 25px 0px; }
h2.over-header-image {color:#fff; font-size: 200%; font-weight: 300; position: relative; top: 90px; margin: 57px 0px 0px 0px;}
h2.page-top {color: #333; font-size: 190%; margin: 0px 0px 25px 0px; }


							
h2.segment-header {
	color: #fff; 
	text-decoration: none; 
	font-size: 2vw; 
	font-weight: 700; 
	display: inline-block; 
	padding: 2px 8px 2px 8px; border-radius: 5px;
	background: rgba(000, 000, 000, 0.2);
	position: relative; left: 0px; top: 0px;}
							
h3.massage-eastbourne {			/* Used for the clickable contact options */
	font-weight: 700; 
	letter-spacing: 0.5px; 
	display: block; 
	cursor: pointer;
	font-size: 200%; 
	color: #fff; 
	padding: 35px 0px 25px 0px;}
	

p {color: #333; font-family: 'Lato'; font-weight: 300; font-size: 150%; font-size: 138%; line-height: 1.8;}

p.large {font-size: 130%; font-weight: 400;}

p.strong {font-weight: 700;}

p.overimage {
	font-size: 155%; 
	color: #ccc; 
	font-weight: 500; 
	width: 100%;
	padding: 0px 5vw 0px 5vw;
	background: rgba(0, 0, 0, 0.1);
	}

p.rxblurb {color: #fff; font-weight: 600; margin: 0px 0px 20px 0px;}

p.pricing {color: #fff; line-height: 1.5; font-weight: 500; margin: 0px 0px 100px 0px;}




/* lINKS. no classless <a> styles are used because this prevents styles unintentionally slipping over into other a classes */
a.normal {font-family: inherit; font-size: inherit; color: #0e70f6; font-weight: 400; text-decoration: none; border-bottom: 1px dashed #0e70f6; padding: 0px 1px 0px 1px;}		
a.normal:visited {color: #0e70f6; text-decoration: none;}
a.normal:hover {color: #034fb7; text-decoration: none; border-bottom: 1px solid #034fb7;}
	
a.footer {text-decoration: none; font-weight: 300; color: #fff; display: block; -webkit-tap-highlight-color: transparent; line-height: 2.3;}
a.footer:hover {text-decoration: none; text-decoration: underline; color: #fff}
a.footer:visited {text-decoration: none; text-decoration: none; color: #fff;}








	

/* OTHER STYLES */

strong, b, em {font-weight: 700;}

.image-sig {
	width: 30%;
	min-width: 200px;
	position: absolute; 
	bottom: 2vh; 
	right: 2vw; 	
	}

.image-FHT {
	width: 19vw;
	min-width: 180px;
	}
	

.centred {text-align: center;}

div.pricing-item {display: inline-block; width: 200px;}
div.pricing-price {display: inline-block;}

.padding-bottom {padding-bottom: 90px;}

.grayfiltertransition {transition: all 1.0s ease; filter: grayscale(100%);}
.grayfiltertransition:hover {filter: none;}

.button {
	border: 2px solid 989fae;
	}

.space-above {margin-top: 90px;}			/* These are used instead of needing to apply margin to elements which don't always need it */
.space-below {margin-bottom: 90px;}






























@media only screen and (min-width: 850px) {
	



/* BASIC ROWS AND IMAGES */

.row {	
	padding: 60px 15vw 60px 15vw;
}

.header-background-image {  										/* The div which holds a page's header image*/
    height: 100vh;	
}

.image-div {					/* Add to divs which are mainly, or only, about the background image */
	height: 90vh;	
}




/* FADER STYLES */

slide {
	padding: 0px 0px 0px 0px;
}

img.right-arrow {
	display: block; /* to UNhide it from small viewport setting */
}

img.left-arrow {
	display: block; /* to UNhide it from small viewport setting */
}

.bullet-points {
    bottom: 200px; /* To increase the placement from bottom compared with small viewport setting */
}





/* TEXT STYLES */
h1.header {font-family: 'Lato'; font-size: 250%; font-weight: 400;  letter-spacing: 0px; word-spacing: -2px; line-height: 1.4; color: #fafafd; margin: 0px 0px 45px 0px;}

h1.freestyle-script {font-family: 'Freestyle Script'; font-size: 600%; font-weight: 400;  letter-spacing: 0px; word-spacing: -2px; line-height: 1.4; margin: 0px 0px 70px 0px;}

h1.normal {font-size: 220%; font-weight: 600; line-height: 1.4; color: #fff; margin: 0px 0px 15px 0px;}




h2 {color: #333; font-size: 190%; margin: 100px 0px 25px 0px; }
h2.over-header-image {color:#fff; font-size: 200%; font-weight: 300; position: relative; top: 90px; margin: 57px 0px 0px 0px;}


h3.massage-eastbourne {
	font-family: 'Lato'; 
	font-weight: 700; 
	letter-spacing: 0.5px; 
	display: block;
	width: fit-content;	
	cursor: pointer;
	font-size: 200%; 
	color: #fff; 
	padding: 10px 0px 10px 0px;
	margin: 20px auto 20px auto;
	}


p {font-family: 'Lato'; font-size: 150%; line-height: 1.8; margin: 0px 0px 43px 0px;}
p.large {font-size: 230%;}
p.strong {font-weight: 700;}

p.overimage {
	font-size: 155%; 
	color: #ccc; 
	font-weight: 500; 
	width: 100%;
	padding: 0px 5vw 0px 
	background: rgba(0, 0, 0, 0.1);
	}


p.rxblurb {color: #fafafa; font-weight: 500; margin: 0px 0px 20px 0px;}

p.pricing {color: #fafafa; line-height: 1.5; font-weight: 500; margin: 0px 0px 120px 0px;}





/* OTHER STYLES */

.sig {
	width: 30%; 	
	}
	
.space-above {margin-top: 90px;}			/* These are used instead of needing to apply margin to elements which don't always need it */
.space-below {margin-bottom: 90px;}


}/* close media query */