/*Page-wide*/
.canvas-button {
	--cnvs-canvas-button-padding: 1.125rem 2rem;
	--cnvs-canvas-button-font-size: 1.25rem;
	background: #966969;
	border: none;
	font-size: var(--cnvs-canvas-button-font-size);
	position: relative;
	display: inline-block;
	font-weight: 400;
	padding: var(--cnvs-canvas-button-padding);
	color: #ffffff;
	border-radius: 0.25rem;
}

.canvas-button-white {
	--cnvs-canvas-button-padding: 1.125rem 2rem;
	--cnvs-canvas-button-font-size: 1.25rem;
	background: #ffffff;
	border: none;
	font-size: var(--cnvs-canvas-button-font-size);
	position: relative;
	display: inline-block;
	font-weight: 400;
	padding: var(--cnvs-canvas-button-padding);
	color: #000000;
	border-radius: 0.25rem;
}

.canvas-button-tan {
	--cnvs-canvas-button-padding: 1.125rem 2rem;
	--cnvs-canvas-button-font-size: 1.25rem;
	background: #C8A57E;
	border: none;
	font-size: var(--cnvs-canvas-button-font-size);
	position: relative;
	display: inline-block;
	font-weight: 400;
	padding: var(--cnvs-canvas-button-padding);
	color: #ffffff;
	border-radius: 0.25rem;
}

.pinkbg {
	background-color: #966969;
}

.tanbg {
	background-color: #C8A57E;
}

.whitebg {
	background-color: white;
}


/*padding*/

.no-padding {
	padding: 0px;
}

.side-padding {
	padding-left: 60px;
	padding-right: 60px;
}

.images {
	padding: 60px;
}


/*Font Scale. Major Third used for deskop*/

h1 {
	font-size: 61px;
}

h2 {
	font-size: 48px;
}

h3 {
	font-size: 40px;
}

h4 {
	font-size: 31px;
}

h5 {
	font-size: 25px;
}

h6 {
	font-size: 20px;
}

p {
	font-size: 16px
}

@media screen and (max-width: 768px) {
	h1 {
		font-size: 32px;
	}

	h2 {
		font-size: 29px;
	}

	h3 {
		font-size: 26px;
	}

	h4 {
		font-size: 23px;
	}

	h5 {
		font-size: 20px;
	}

	h6 {
		font-size: 18px;
	}

	p {
		font-size: 16px
	}

}

.white-text {
	color: #ffffff !important;
}


.testimonial {
	font-size: 20px;
}

/*content rows*/
.hero {
	padding: 200px;
	background: url(../MyImages/HeroHomepage.png) no-repeat;
	background-size: cover;
}

.heroservices {
	padding: 200px !important;
	background: url(../MyImages/HeroServices.png) no-repeat;
	background-size: cover;
}

.overlapleft {
	position: relative;
	z-index: 3;
	right: 250px;
}

.overlapright {
	position: relative;
	z-index: 3;
	left: 50px;
}

.slidepadding {
	padding: 150px;
}

.slide1 {
	background-image: url(../MyImages/Rectangle\ 7.png);
	background-size: cover;
}

.slide2 {
	background-image: url(../MyImages/Rectangle\ 7\ \(1\).png);
	background-size: cover;
}


.Hairservices {
	background: url(../MyImages/ionela-mat-koWiggH8fmE-unsplash.jpg) no-repeat;
	background-size: contain;
	z-index: 1;
	position: relative;
	align-items: center;
}

.Nailservices {
	background: url(../MyImages/anna-keibalo-T52vfZzQZ6E-unsplash.jpg) no-repeat;
	background-size: contain;
	z-index: 1;
	position: relative;
	align-items: center;
}

.Skinservices {
	background: url(../MyImages/viva-luna-studios-hYpHkpQG5ms-unsplash.jpg) no-repeat;
	background-size: contain;
	z-index: 1;
	position: relative;
	align-items: center;
}


@media screen and (max-width:768px) {
	.heroservices {
		padding: 50px !important;
	}

	.hero {
		padding: 100px !important;
	}

	.pinkbg {
		padding: 50px;
	}

	.overlapleft {
		position: relative;
		z-index: 3;
		right: 0px;
	}

	.row {
		padding: 50px;
	}
}