html{
	font-size: 62.5%;
	scroll-behavior: smooth;
}

*{
	padding: 0;
	margin: 0;
	border: 0;
	box-sizing: border-box;
}

body{
	font-size: 1.6rem;
	font-family: 'Open Sans', sans-serif;
	line-height: 2;
	color: #4A4A4A;
	background: #fff;
	border-top: 0.5rem solid #DDC9BE;
}

/* main styles */

h1, h2, h3{
	font:400 3rem/1.2 'Source Serif Pro', serif;
	margin: 0 0 2rem 0;
	color: #333;
	letter-spacing: -0.05rem;
	width: 100%;
}

h2,h3{
	font-size: 2.8rem;
	margin: 3rem 0 1rem 0;
}

p{
	font-size: 1.6rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

a{
	color: #333;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

.site-btn{
	display: inline-block;
	background: #fff;
	color: #333;
	padding: 0.8rem 1.6rem;
	margin: 0;
	text-decoration: none;
	border: 0.2rem solid #EEE4DE;
}

.site-btn:hover{
	background: #EEE4DE;
	text-decoration: none;
}

.sb{
	font-weight: 600;
}

/* main layout */

.wrapper,
header,
section,
.hero,
footer{
	width: 100%;
	display: block;
}

section{
	padding: 3rem 2rem;
}

.container{
	width: 100%;
	max-width: 120rem;
	margin: 0 auto;
}

.hero{
	min-height: 20rem;
}

.hero .two-col:first-child{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
}

.hero .two-col img{
	max-width: 90%;
	margin-top: 2rem;
}

.left-col,
.right-col,
.single-col,
.two-col,
.three-col,
.four-col{
	width: 100%;
}

.center{
	text-align: center;
}

.mt30{
	margin-top: 3rem;
}

/* header */

.mobile-link{
	display: none;
	float: left;
	padding: 1rem 0;
	margin: 1.6rem 0 0 0;
	text-decoration: none;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
}

.mobile-link:hover{
	background-color: #fff;
	text-decoration: none;
}

.mobile-link span{
	font-weight: 400;
	color: #EEE4DE;
	font-size: 1.6rem;
}

#mobile-menu{
	display: none;
	width: 100%;
	height: 100%;
	float: left;
	background-color: rgba(0,0,0,0.90);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000000000;
}

#mobile-links ul{
	z-index: 2;
	margin-left: 0;
	margin-top: 50px;
}

#mobile-links ul li{
	width: 100%;
	float: left;
	margin-bottom: 1rem;
	padding-left: 5%;
	list-style: none;
}

#mobile-links ul li a{
	width: 100%;
	float: left;
	color: #fff;
	font-size: 1.8rem;
	font-weight: 400;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
}

.mobile-services-menu{
	background: url("../images/mobile-arrow-down.svg") no-repeat 95% 0.8rem;
	background-size: 1.1rem 1.1rem;
}

.nav-arrow-up{
	background: url("../images/mobile-arrow-up.svg") no-repeat 95% 1rem;
	background-size: 1.1rem 1.1rem;
}

#mobile-services-menu{
	display: none;
}

#mobile-services-menu ul{
	float: left;
	margin: 1rem 0 2rem 0;
	padding: 0;
}

#mobile-services-menu ul li{
	line-height: 1.4;
	padding-left: 3%;
}

.close-btn{
	float: right;
    font-size: 40px;
	line-height: 40px;
    color: #fff;
    position: absolute;
    top: 10px;
    right: 10px;
	text-decoration: none;
}

.mobile-link{
	display: block;
}

.mobile-tel{
	width: 100%;
	color: #fff;
	display: inline-block;
	font-size: 1.6rem;
	line-height: 1.3;
	margin: 2rem 0 0 5%;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
}

.mobile-tel a{
	color: #fff;
	font-size: 2.4rem;
}

.mobile-tel a:hover{
	text-decoration: none;
}

.mobile-social{
	margin: 4rem 0 0 5%;
}

.mobile-social img{
	width: 3rem;
	height: 3rem;
	margin-right: 1rem;
}

header{
	height: 8rem;
	padding: 0 2rem;
	position: relative;
}

header .container{
	position: relative;
}

header .container::after{
	content: "";
	width: 100%;
	height: 0.1rem;
	background: #EEE4DE;
	position: absolute;
	left: 0;
	top: 9rem;
}

.mobile-book{
	float: right;
	position: absolute;
	top: 2.2rem;
	right: 0;
	padding: 0.6rem 1rem;
	margin: 0;
}

.site-logo{
	display: inline-block;
	position: absolute;
	left: 50%;
	margin-left: -5.9rem;
}

.site-logo img{
	height: 6rem;
	margin-top: 1.5rem;
}

a.tel-number{
	float: right;
	color: #333;
	margin-top: 2.4rem;
	text-decoration: none;
}

.social-icon{
	display: none;
}

nav{
	display: none;
	float: left;
}

nav ul{
	float: right;
	margin: 5rem 0 0 0;
}

nav ul li{
	float: left;
	margin-right: 1rem;
	list-style: none;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	position: relative;
}

nav ul li a{
	padding: 1rem 1rem;
	background-color: #fff;
	text-decoration: none;
	color: #333;
	border: solid 0.2rem #fff;
	position: relative;
}

nav ul li a:hover{
	border-color: #DDC9BE;
	text-decoration: none;
}

nav ul li ul{
	display: none;
	position: absolute;
	width: 380px;
	top: -2rem;
	left: 0;
	background-color: #fff;
	border: 1px solid #DDC9BE;
	border-bottom: 0;
	z-index: 100;
}

nav ul li ul li{
	width: 100%;
	float: left;
	background: #fff;
	padding: 0;
	margin: 0;
	border: 0;
}

nav ul li ul li a{
	display: block;
	width: 100%;
	padding: 2px;
	margin: 0;
	border: 0;
	text-indent: 5px;
	border-bottom: 1px solid #DDC9BE;
}

nav ul li ul li a:hover{
	background-color: #DDC9BE;
	border: 0;
	border-bottom: 1px solid #DDC9BE;
}

nav ul li:hover ul{
	display: block;
	
}

ul,
ol{
	margin: 0 0 2rem 2rem;
}

ul li,
ol li{
	line-height: 1.6;
	margin-bottom: 0.5rem;
}

.narrow{
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
}

/* footer */

footer{
	padding: 5rem 2rem;
	text-align: left;
}

.footer-top{
	width: 100%;
	padding-bottom: 1rem;
	border-bottom: 0.1rem solid #EEE4DE;
}

.footer-top ul li{
	list-style: none;
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	display: inline-block;
	margin: 0 0.5rem;
}

.footer-lower{
	width: 100%;
	padding-top: 1.5rem;
}

.footer-lower p{
	width: 100%;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
}

/* Form */

label{
	width: 100%;
	float: left;
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea{
	width: 100%;
	padding: 1rem;
	margin-bottom: 2rem;
	border: 1px solid #eee;
	border-radius: 0;
	font: 400 1.6rem 'Open Sans', sans-serif;
	-webkit-appearance: none;
}

textarea{
	height: 15rem;
}

input[type="submit"]{
	background: #fff;
	color: #333;
	padding: 1.2rem 2rem;
	margin: 0;
	text-decoration: none;
	font: 400 1.6rem 'Open Sans', sans-serif;
	border: 0.2rem solid #EEE4DE;
	-webkit-appearance: none;
}

input[type="submit"]:hover{
	background: #EEE4DE;
}

#success-div{
	display: none;
	width: 100%;
	color: #333;
	background: #EEE4DE;
	padding: 1rem;
	margin-bottom: 2rem;
}

#success-div p{
	margin-bottom: 0;
}

/* Home */

.services-home{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 2rem;
}

.home-service-module{
	width: 98%;
	margin: 1%;
	background: #EEE4DE;
	border: 0.1rem solid #EEE4DE;
	padding: 4rem 2rem;
	text-align: center;
}

.home-service-module a{
	border-bottom: 1px solid #333;
}

.home-service-module a:hover{
	text-decoration: none;
}

.home-service-module:nth-child(even){
	background: #f6f6f6;
}

.home-service-module h3{
	font-size: 2.2rem;
	margin: 0 0 1rem 0;
}

.home-service-module .site-btn{
	margin-top: 1rem;
	background: #eee4de;
	border-color: #fff;
}

.home-service-module p:last-child{
	margin-bottom: 0;
}

.home-about{
	background-color: #EEE4DE;
}

.home-about-wrapper{
	background: #fff;
}

.home-about-left{
	width: 100%;
	height: 30rem;
	background: url("../images/home-about-img.jpg") center;
	background-size: cover;
}

.home-about-right{
	width: 100%;
	padding: 2rem;
}

.home-about-right h2{
	margin-bottom: 1rem;
}

.home-about-right .site-btn{
	margin-top: 1rem;
}

.home-intro-wrapper{
	padding-top: 0;
}

.home-intro{
	width: 100%;
	padding: 2rem;
	border:0.1rem solid #EEE4DE;
}

.home-intro h3{
	font-size: 2.8rem;
	max-width: 70rem;
	margin: 0 0 1rem 0;
}

.home-intro ul.qualifications{
	margin-top: 2rem;
	margin-bottom: 3rem;
}

/* Services */

.service-intro{
	padding: 0 2rem;
}

.service-intro .container{
	border-top: 1px solid #EEE4DE;
}

.service-section{
	padding: 2rem;
}

.service-module{
	background: #EEE4DE;
	padding: 3rem;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.service-module-alt .service-images{
	order: 2;
}

.service-price{
	width: 100%;
	padding: 3rem;
	margin-top: 3rem;
	border: 0.1rem solid #AEA9A6;
}

.service-price h3{
	font: 400 2.2rem/1.2 'Source Serif Pro', sans-serif;
	padding-bottom: 1rem;
	margin: 0 0 1rem 0;
	border-bottom: 0.1rem solid #AEA9A6;
}

.service-price ul li{
	list-style: none;
}

.service-price p{
	line-height: 1.6;
}

.service-images{
	margin-top: 4rem;
}

.service-images img{
	max-width: 100%;
}

/* Contact */

.contact-wrapper{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	max-width: 100rem;
	margin: 0 auto;
	background: #FCFCFC;
	border: 0.1rem solid #EEE4DE;
	padding: 2rem;
	text-align: center;
}

.contact-wrapper .two-col{
	text-align: left;
}

.contact-wrapper h1{
	width: 100%;
}

.contact-wrapper img{
	max-width: 100%;
	margin-bottom: 4rem;
	border-radius: 0.3rem;
}

.contact-wrapper .two-col:last-child h2{
	margin-top: 2rem;
}

.contact-col h2{
	margin: 3rem 0 1rem 0;
}

.contact-col h2:first-child{
	margin-top: 0;
}

.contact-col h3{
	font: 400 1.4rem 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	margin-bottom: 0;
}

.social-link-facebook,
.social-link-instagram{
	display: block;
	height: 2.5rem;
	background: url("../images/facebook-icon.svg") no-repeat;
	background-size: 2rem;
	padding-left: 2.8rem;
	line-height: 2.5rem;
	background-position: 0 0.2rem;
}

.social-link-instagram{
	background: url("../images/instagram-icon.svg") no-repeat;
	background-size: 2rem;
	background-position: 0 0.2rem;
}

/* About */

ul.qualifications{
	list-style: none;
	margin: 0 0 1rem 0;
}

ul.qualifications li{
	padding-left: 1.8rem;
	line-height: 1.5;
	margin-bottom: 1rem;
	background: url("../images/list-bg.svg") no-repeat 0 7px;
}

.about-photos{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.about-photo-top{
	width: 100%;
	height: 25rem;
	background: url("../images/about-photo-top.jpg") center;
	background-size: cover;
	margin-bottom: 2%;
}

.about-photo-col{
	width: 31%;
	margin: 1rem 0;
}

.about-photo-bottom{
	width: 100%;
	height: 25rem;
	background: url("../images/about-photo-bottom.jpg") center;
	background-size: cover;
}

.about-photos img{
	max-width: 100%;
	border-radius: 2rem;
}

.about-photo-col{
	width: 33.3%;
}

/* Kind words */

.banner{
	width:100%;
	height:40rem;
	margin: 0;
	position: relative;
	left: 0;
}

.banner ul{
	width:100%;
	height:40rem;
	padding:0;
	margin:0;
	overflow:hidden;
}

.banner ul li{
	width:100%;
	height:30rem;
	float:left;
	list-style:none;
}

ol.dots{
	position: absolute;
	bottom: 0;
}

ol.dots li{
	width: 20px;
	height: 20px;
	float: left;
	margin: 0 6px;
	background-color: #f6f6f6;
	border-radius: 50%;
	color:#f6f6f6;
	list-style: none;
	overflow: hidden;
}

ol.dots li:hover,
ol.dots li:active{
	background-color: #EEE4DE;
	color: #EEE4DE;
	cursor: pointer;
}

ol.dots li.active{
	background-color: #EEE4DE;
	color: #EEE4DE;
}

.about-right{
	margin-top: 4rem;
}

.cookies h2,
.cookies h3{
	margin-top: 4rem;
}

.cookies ul{
	margin: 0 0 2rem 2rem;
}

.insta-feed{
	width: 100%;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.service-small{
	font-size: 1.4rem;
	text-align: center;
}

.micro-needling{
	margin: 0 0 2rem 2rem;
}

.service-intro .container{
	padding-top: 4rem;
	margin-top: 2rem;
}

.service-hero h1{
	font-size: 1.4rem;
	font-family: 'Open Sans', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	margin-top: 2rem;
}

.service-hero h2{
	font-size: 3.2rem;
	line-height: 1.1;
	padding: 0;
	margin: 0 0 1rem 0;
}

.service-hero p{
	font-size: 1.6rem;
	line-height: 1.6;
}

.service-hero .right-col{
	margin-top: 2rem;
}

.service-hero .right-col img{
	max-width: 100%;
}

.service-hero p a{
	border-bottom: 1px solid #4a4a4a;
}

.service-hero p a:hover{
	background-color: #EEE4DE;
	text-decoration: none;
}

.about-hero .container{
	padding-bottom: 4rem;
	border-bottom: 1px solid #EEE4DE;
}

.about-row{
	width: 100%;
	margin-bottom: 4rem;
	display: flex;
	flex-wrap: wrap;
}

.about-row h2{
	margin-top: 0;
}

.treatment-gallery{
	width: 100%;
	margin-top: 2rem;
}

.treatment-gallery img{
	max-width: 100%;
	margin-bottom: 1rem;
}

@media all and (min-width:480px){

.hero{
	min-height: 35rem;
}

.home-about-left{
	height: 40rem;
}

}

@media all and (min-width:768px){

body,
p{
	font-size: 1.6rem;
}
	
h1{
	font-size: 4.4rem;
	line-height: 1.1;
}
	
h2, h3{
	font-size: 2.8rem;
}
	
header{
	height: 12.5rem;
	margin-bottom: 2rem;
}

header .container::after{
	top: 12.5rem;
}

header .site-btn{
	display: block;
}

.mobile-link {
	margin-top: 3.8rem;
}

.mobile-book{
	position: relative;
	margin-top: 1.8rem;
	margin-left: 2rem;
}

a.tel-number{
	margin-top: 5rem;
}

.social-icon{
	display: block;
	float: right;
	margin: 5.2rem 0 0 1rem;
}
	
.site-logo{
	margin-left: -9.7rem;
}
	
.site-logo img{
	height: 10rem;
	margin-top: 1rem;
}

section .container,
.hero .container{
	display: flex;
	flex-wrap: wrap;
}

.left-col{
	width: 66%;
	margin: 0 2%;
}

.right-col{
	width: 26%;
	margin: 0 2%;
}
	
.about-left{
	width: 54%;
}
	
.about-left h3{
	font-size: 2.4rem;
	margin: 2rem 0 1rem 0;
	color: #4a4a4a;
}
	
.about-right{
	width: 38%;
}

.single-col{
	width: 100%;
}

.two-col,
.three-col,
.four-col{
	width: 46%;
	margin: 0 2%;
}

.three-col{
	width: 29%;
}

.four-col{
	width: 21%;
}

footer{
	text-align: center;
}

.footer-col{
	width: 21%;
	margin: 0 2%;
}
	
.hero .two-col:last-child{
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}
	
.hero .two-col img{
	margin-top: 0;
}
	
.service-module{
	padding: 6rem;
}

.home-service-module{
	width: 48%;
}

/* About */

.contact-wrapper{
	padding: 3rem;
}

.contact-wrapper .two-col{
	width: 50%;
	margin: 0 0 2% 0;
}

.contact-wrapper .two-col:last-child h2{
	margin-top: 0;
}
	
.kind-words{
	padding: 10rem 5% 5rem 5%;
}

.banner ul li{
	height: 20rem;
}
	
.kind-words .container{
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
}
	
.kind-words .container div{
	width: 100%;
}

ol.dots{
	left: 50%;
	margin-left: -80px;
}

.insta .container{
	text-align: center;
	justify-content: center;
}

.home-intro{
	padding: 4rem;
	display: flex;
	flex-wrap: wrap;
	margin-top: 4rem;
}

.service-hero .container{
	align-items: center;
}

.service-hero h1{
	margin-top: 0;
}

.service-hero h2{
	font-size: 4.4rem;
}

.service-hero .left-col{
	width: 56%;
	padding-right: 4%;
}

.service-hero .right-col{
	width: 36%;
}
	
.about-row-alt .left-col{
	order: 2;
}

.home-intro ul{
	columns: 2;
}

.home-hero .two-col:last-child{
	justify-content: center;
}
	
.treatment-gallery{
	display: flex;
	flex-wrap: wrap;
	align-items: start;
}

.treatment-gallery img{
	width: 49%;
	margin: 0 1% 1% 0;
}

}

@media all and (min-width:960px){

.home-section{
	padding: 10rem 2rem;
}

.hero{
	padding: 4rem 2rem 2rem 2rem;
}
	
nav{
	display: block;
}
	
.mobile-link{
	display: none;
}

a.tel-number{
	margin-top: 5rem;
}

.home-service-module{
	width: 31%;
}

.contact-wrapper{
	padding: 5rem;
}
	
.home-about-wrapper{
	display: flex;
}

.home-about-left,
.home-about-right{
	width: 50%;
}

.home-about-left{
	height: 100%;
}

.home-about-right{
	padding: 4rem;
	align-content: center;
	display: flex;
	flex-wrap: wrap;
}

.home-about-right h2{
	margin-bottom: 2rem;
}

.kind-words{
	padding: 10rem 12rem;
}

.service-module::after{
	content: "";
	position: absolute;
	width: 30%;
	height: 100%;
	background: #F6F6F6;
	top: 0;
	right: 0;
}

.service-module-alt::after{
	content: "";
	position: absolute;
	width: 30%;
	height: 100%;
	background: #F6F6F6;
	top: 0;
	left: 0;
}

.service-module-alt .service-images{
	order: 1;
}

.service-module-alt .service-content{
	order: 2;
}
	
.service-content{
	width: 65%;
	padding-right: 4rem;
}

.service-module-alt .service-content{
	padding-left: 4rem;
	padding-right: 0;
}

ul.dual-col-price-list{
	columns:2;
	margin-bottom: 2rem;
}
	
.service-images{
	width: 35%;
	z-index: 2;
	margin-top: 0;
}
	
.home-intro h3{
	font-size: 3.6rem;
	margin-bottom: 2rem;
}

.treatment-gallery img{
	width: 32%;
}

}

@media all and (min-width:960px){

.kind-words{
	padding: 10rem 20% 5rem 20%;
}

}