/* Home Page Styles */

/* HERO
######################################################### */
.hero { overflow: hidden; position: relative; }
.hero .content * { color: #fff; }
.hero .text { font-weight: 300; }
.hero .text b { font-weight: 500; }
.hero .play { z-index: 20; }
.hero .play-btn { width: 7.5rem; transition: transform 200ms ease; }
.hero .play:hover .play-btn { transform: scale(1.07); cursor: pointer; }
.hero .start-here { bottom: -4.5rem; width: 9rem; max-width: none; transition: transform 200ms ease; }
.hero .play:hover .start-here { transform: translate(-50%, 10%); }

/* Small Screens */
@media only screen and (max-width: 899px) {
	.hero { display: flex; flex-direction: column-reverse; }
	.hero .layout { background-color: #00a493; }
	.hero .content { text-align: center; }
	.hero .text { font-size: 2rem; margin-bottom: 1.5rem; }
	.hero .tagline { width: 25rem; max-width: 80%; }
	.hero .img { position: relative; left: 0; top: 0; width: 100%; padding-bottom: 50%; }
	.hero .img .hero-img { position: absolute; height: 100%; width: 100%; object-fit: cover; object-position: right center; }
	.hero .play-btn { width: 5rem; }
	.hero .start-here { width: 7rem; bottom: -3.5rem; }
}

@media only screen and (max-width: 599px) {
	.hero .img { padding-bottom: 66.66%; }
	.hero .start-here { display: none; }
}

/* Big Screens */
@media only screen and (min-width: 900px) {
	.hero .layout {
		z-index: 10;
		background: rgb(0,64,91);
		background: linear-gradient(90deg, rgba(0,64,91,1) 0%, rgba(0,134,132,1) 35%, rgba(0,164,147,0) 60%);
	}
	.hero .content { width: 40%; padding: 1rem 0 1.5rem; }
	.hero .text { margin-bottom: 2.5rem; }
	.hero .tagline { width: 80%; transform: rotate(-4deg); max-width: 28rem; }
	.hero .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
	.hero .img .hero-img { position: absolute; z-index: 5; right: 0; width: 65%; height: 100%; object-fit: cover; object-position: right center; }
}


/* HOW CAN I HELP
######################################################### */
.how-can-i-help { position: relative; }
.how-can-i-help .layout { z-index: 10; }
.how-can-i-help .theva { max-width: none; }

/* Small Screens */
@media only screen and (max-width: 1023px) {
	.how-can-i-help .theva-description { display: none; }
}

@media only screen and (min-width: 900px) and (max-width: 1023px) {
	.how-can-i-help .heading { font-size: 3rem; line-height: 1.1em; }
	.how-can-i-help .layout > div { width: 60%; }
	.how-can-i-help .theva { position: absolute; height: 110%; bottom: 0; left: 50%; }
}

@media only screen and (min-width: 700px) and (max-width: 899px) {
	.how-can-i-help .heading { font-size: 2.5rem; }
	.how-can-i-help .layout > div { width: 60%; }
	.how-can-i-help .theva { position: absolute; height: 110%; bottom: 0; left: 40%; }
}

@media only screen and (max-width: 699px) {
	.how-can-i-help .layout > div:last-child { display: none; }
	.how-can-i-help .layout > div { width: 60%; }
	.how-can-i-help .theva { position: absolute; height: 110%; bottom: 0; right: 0; transform: translateX(20%); }
}

@media only screen and (max-width: 599px) {
	.how-can-i-help .theva { height: 100%; bottom: 0; right: 0; transform: translateX(30%); }
}

/* Big Screens */
@media only screen and (min-width: 1024px) {
	.how-can-i-help .layout > div { width: 33.33%; }
	.how-can-i-help .theva { position: absolute; height: 110%; bottom: 0; left: 50%; transform: translateX(-55%); }
}

@media only screen and (min-width: 1024px) and (max-width: 1099px) {
	.how-can-i-help .layout > div:last-child { width: 31%; }
	.how-can-i-help .heading { font-size: 2.5rem; line-height: 1.1em; }
}

@media only screen and (min-width: 1100px) {
	.how-can-i-help .heading { font-size: 3rem; line-height: 1.1em; }
}

/* TREATMENTS CATALOGUE
######################################################### */
.catalogue .indicator {
	position: absolute; top: 0; left: 18%; background-color: inherit;
	width: 40px; height: 40px; transform: translate(-50%, -50%) rotate(45deg);
}

@media only screen and (max-width: 1023px) {
	.catalogue .indicator { left: 50%; }
}

@media only screen and (max-width: 599px) {
	.catalogue .indicator { width: 30px; height: 30px; }
}


/* XMAS GIFT VOUCHERS
######################################################### */
.xmas {
	background-image: url(img/xmas-bg-1.jpg);
	background-repeat: no-repeat;
	background-size: 20rem auto;
	background-position: left top;
	text-align: center;
}
.xmas .bg2 {
	background-image: url(img/xmas-bg-2.jpg);
	background-repeat: no-repeat;
	background-size: 20rem auto;
	background-position: right top;
	padding: 2rem;
	box-shadow: inset 0 -3px 50px rgba(0,0,0,0.1);
}
.xmas img { max-width: 25rem; width: 80%; }
.xmas p { font-size: 1.3rem; line-height: 1.1em; margin: 2rem 0 0; }

@media (min-width: 700px) and (max-width: 1023px) {
	.xmas { background-size: 17rem auto; }
	.xmas .bg2 { background-size: 17rem auto; }
}
@media (max-width: 699px) {
	.xmas { background-size: 50% auto; }
	.xmas .bg2 { background-size: 50% auto; padding: 8rem 0 3rem; }
}