@charset "utf-8";
@font-face { font-family: "Canela"; src: url("Canela-Thin-Web.woff2") format("woff2"), url("Canela-Thin-Web.woff") format("woff"); font-weight: 100; font-style: normal; font-stretch: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("Canela-Light-Web.woff2") format("woff2"), url("Canela-Light-Web.woff") format("woff"); font-weight: 300; font-style: normal; font-stretch: normal; font-display: swap; }
@font-face { font-family: "FoundersRegular"; src: url("FGText-Regular.woff2") format("woff2"), url("FGText-Regular.woff") format("woff"); font-display: swap; }
@font-face { font-family: "FoundersMedium"; src: url("FGText-Medium.woff2") format("woff2"), url("FGText-Medium.woff") format("woff"); font-display: swap; }
@font-face { font-family: 'Graphik'; src: url('Graphik-Regular.woff2') format('woff2'), url('Graphik-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-stretch: normal; font-display: swap; }
@font-face { font-family: 'Graphik'; src: url('Graphik-Medium.woff2') format('woff2'), url('Graphik-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-stretch: normal; font-display: swap; }
strong { font-family: "Graphik", sans-serif; font-weight: 500; }

/* BANNER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page-banner { height: 100vh; position: relative; background-position: center; background-size: cover; }
.page-banner .outer { display: flex; flex-direction: column; }
.page-banner header { margin-top: auto; margin-bottom: 80px; max-width: 1000px; }
.banner-white h1 { color: #FFF; }
.banner-white h5 { color: #FFF; }
.banner-short { height: 450px; }
.banner-narrow .outer { max-width: 1320px; }

.banner-centred { height: auto; padding: 200px 0 70px; }
.banner-centred .outer { position: relative; }
.banner-centred img { display: block; margin: 0 auto; height: auto; width: 560px; }
.banner-centred h1 { font-size: 240px; font-weight: 300; line-height: 0.95; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); margin: 0 auto; text-align: center; }

/* CONTENT
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page-content p.box { border: 1px solid #111; display: inline-block; line-height: 2; margin: 20px 0; padding: 20px; }
.page-content hr { background-color: #111; border: none; clear: both; color: #111; height: 2px; line-height: 1; margin: 20px 0; overflow: hidden; width: 100%; }

.content-block { margin: 0; }
.content-padding { padding-top: 6vh; padding-bottom: 6vh; }
.content-block img { display: block; height: auto; width: 100%; }
.content-block .text-white * { color: #FFF; }
.page-content .text-white p.box { border: 1px solid #FFF; }
.page-content .text-white hr { background-color: #FFF; color: #FFF; }

.text-block .layout-left .text { max-width: 900px; }
.text-block .layout-centre .text { margin-left: auto; margin-right: auto; max-width: 900px; }

.columns-block .inner { display: flex; justify-content: space-between; }
.columns-block .half { max-width: 560px; width: 46%; }

.blocks-block { display: flex; align-items: center; }
.blocks-block a.block-link { display: flex; align-items: center; text-decoration: none; width: 100%; }
.blocks-block a.block-link:hover { text-decoration: none; opacity: 0.9; }
.blocks-block .half { width: 50%; }
.blocks-block .text { padding: 40px 8vh; max-width: 600px; margin: 0 auto; }
.blocks-block figure.layout-centre { padding: 8vh; }

.blocks-block .button-single { margin-top: 20px; }
.blocks-block .buttons { display: flex; justify-content: flex-start; margin-top: 40px; }
.blocks-block .buttons .button { background-image: none; padding: 0 30px; }
.blocks-block .buttons .button:last-child { margin-left: -1px; }

.blocks-block .text-white .button { border-color: #FFF; color: #FFF; }
.blocks-block .text-white .button:hover	{ background-color: #FFF; color: #111 !important; }
.blocks-block .text-white .button-single { background-image: url("/assets/images/arrow-white.svg"); }
.blocks-block .text-white .button-single:hover { background-image: url("/assets/images/arrow-black.svg") !important; }

.testimonial-block .overlay { background-color: rgba(255,255,255,0.5); }
.testimonial-block blockquote { max-width: 900px; margin: 0 auto; padding: 4vh; text-align: center; }
.testimonial-block h5 { line-height: 50px; opacity: 0.6; position: relative; }
.testimonial-block h5::before { opacity: 0.1; position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: url("/assets/images/quote.svg") no-repeat center; background-size: contain; }
.testimonial-block h3 { margin-top: 30px; }

.video-block .video iframe { display: block; }

.treatments a { border-top: 2px solid #111; display: block; text-decoration: none; padding: 25px 50px 25px 0; background: url("/assets/images/arrow-white.svg") no-repeat right center; background-size: 20px; }

.faq-block .faqs { border-bottom: 1px solid #111; margin-top: 40px; } 
.faq-block h3.question { cursor: pointer; border-top: 1px solid #111; display: block; text-decoration: none; margin: 0; padding: 25px 50px 25px 0; background: url("/assets/images/arrow-black.svg") no-repeat right center; background-size: 20px; }
.faq-block h3.question:last-child { border-bottom: 1px; }
.faq-block h3.question:hover { opacity: 0.8; }
.faq-block .answer { padding: 0 0 25px; display: none; overflow: hidden; }

.faq-block .text-white h3.question { border-color: #FFF; background-image: url("/assets/images/arrow-white.svg"); }
.faq-block .text-white.faqs { border-color: #FFF; }

.products-block { margin: 0 0 50px; }
.products-block .inner { padding: 0 20px; }
.products-block .flex { --border: 1px solid #F2F0E8; display: flex; flex-wrap: wrap; border-top: var(--border); border-left: var(--border); }
.products-block .product { flex: 0 0 25%; font-size: 13px; padding: 20px; box-sizing: border-box; border-right: var(--border); border-bottom: var(--border); }
.products-block .product figure { margin-bottom: 15px; }
.products-block .product h5 { letter-spacing: 0.05em; margin-bottom: 10px; }
.products-block .product p { font-size: 13px; }

@media (min-width:1201px) {
	.products-block .product h5 { font-size: 15px; }
}

@media (max-width:1200px) {
	.products-block .inner { padding: 0 10px; }
	.products-block .product { flex-basis: 33.3333%; padding: 10px 10px 20px; }
}
@media (max-width:900px) {
	.products-block .product { flex-basis: 50%; }
	.products-block .product img { margin: 0 auto; width: 65%; }
}
@media (max-width:400px) {
	.products-block .product { flex-basis: 100%; }
}

/* HOME
------------------------------------------------------------------------------------------------------------------------------------------------------*/


/* TREATMENTS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.treatments header { margin: 0 auto 8vh; max-width: 800px; }
.treatments a { border-top: 2px solid #111; display: block; text-decoration: none; padding: 25px 50px 25px 0; background: url("/assets/images/arrow-white.svg") no-repeat right center; background-size: 20px; }
.treatments a h3 { margin-bottom: 10px; }
.treatments a:last-child { border-bottom: 2px solid #111; }
.treatments a:hover { text-decoration: none; }
.treatments-white * { color: #FFF; }
.treatments-white a,
.treatments-white a:last-child { color: #FFF; border-color: #FFF; }

.treatment-modal { display: none; position: fixed; top: 0; left: 0; right: 0; height: 100%; width: 100%; z-index: 999; }
.treatment-overlay { background-color: rgba(0,0,0,.5); position: fixed; top: 0; left: 0; right: 0; height: 100%; width: 100%; }
.treatment-content { background-color: #F2F0E8; padding: 5%; position: fixed; top: 0; left: 0; height: 100%; width: 70%; max-width: 1200px; box-sizing: border-box; overflow-y: scroll; transform: translateX(-100%); transition: all 800ms ease-out; }
.treatment-content .close { position: absolute; top: 0; right: 0; }
.treatment-active .treatment-content { transform: translateX(0); }
.treatment-content .text { margin: 20px 0; }
.treatment-content hr { background-color: #111; border: none; clear: both; color: #111; height: 2px; line-height: 1; margin: 20px 0; overflow: hidden; width: 100%; }

/* BRIDAL
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.brides .outer { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 60px; }
.brides a { display: block; position: relative; text-decoration: none; }
.brides a * { color: #FFF; }
.brides a img { display: block; height: auto; width: 100%; }
.brides a div { opacity: 0; display: flex; align-items: center; height: 100%; width: 100%; position: absolute; top: 0; left: 0; text-align: center; transition: opacity 200ms; }
.brides a header { width: 100%; }
.brides a h5 { margin: 25% 0; opacity: 0.7; }
.brides a:hover { opacity: 1; transition: none; text-decoration: none; }
.brides a:hover div { opacity: 1; }

body.type-bridal .fancybox-container .bride-modal { background-color: #FFF; margin: 0; padding: 0; position: relative; max-height: 820px; max-width: 1520px; margin: 0; height: 95%; width: 95%; }

.bride-modal .bride-text { float: right; width: 40%; min-height: 500px; padding: 0; }
.bride-modal .bride-text .text-inner { padding: 50px; width: auto; }
.bride-modal .bride-text p { font-size: 16px; }

.bride-modal .bride-images { background-color: #F2F0E8; min-height: 500px; height: 100%; width: 60%; position: absolute; top: 0; left: 0; }
.bride-modal .images * { -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
.bride-modal .images { height: 100%; width: 100%; }
.bride-modal .images figure { display: none; height: 100%; width: 100%; background: center no-repeat; background-size: contain; }
.bride-modal .images figure:first-child { display: block; }

.bride-modal .pager { height: 56px; padding: 20px 0; text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 0; overflow: hidden; z-index: 999; }
.bride-modal .pager span { background-color: rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.8); display: inline-block; height: 14px; margin: 0 5px; width: 14px; border-radius: 7px; }
.bride-modal .pager span:hover { background-color: #111; border-color: #111; }
.bride-modal .pager .cycle-pager-active { background-color: rgba(0,0,0,0.8); border-color: rgba(0,0,0,0.8); }
.bride-modal .pager > * { cursor: pointer; }
.bride-modal .pager { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.bride-modal .prev,
.bride-modal .next { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 50%; z-index: 998; cursor: pointer; opacity: 0.75; }
.bride-modal .next { left: auto; right: 0; }

.bride-modal .prev:hover { background: url(/assets/images/arrow-prev.svg) 3% center no-repeat; background-size: 30px; }
.bride-modal .next:hover { background: url(/assets/images/arrow-white.svg) 97% center no-repeat; background-size: 30px; }

/* REAL RESULTS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.results .outer { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 60px; }
.results .result { background-color: #FFF; padding: 20px; }
.results .result .images { height: 100%; width: 100%; margin-bottom: 20px; position: relative; }
.results .result .images * { -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
.results .result .images img { display: none; height: auto; width: 100%; }
.results .result .images img:first-child { display: block; }
.results .result h5 { margin-bottom: 5px; }

.results .result .cycle-pager { height: 20px; padding: 15px 0; text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 0; overflow: hidden; z-index: 999; }
.results .result .cycle-pager span { background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.8); color: rgba(0,0,0,0); display: inline-block; height: 10px; margin: 0 5px; width: 10px; border-radius: 5px; }
.results .result .cycle-pager span:hover { background-color: #FFF; border-color: #FFF; color: rgba(0,0,0,0); }
.results .result .cycle-pager .cycle-pager-active { background-color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.8); color: rgba(0,0,0,0); }
.results .result .cycle-pager > * { cursor: pointer; }
.results .result .cycle-pager { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.results .result .cycle-prev,
.results .result .cycle-next { background: url(/assets/images/arrow-prev.svg) 10% center no-repeat; background-size: 20px; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 50%; z-index: 998; cursor: pointer; }
.results .result .cycle-next { background: url(/assets/images/arrow-white.svg) 90% center no-repeat; background-size: 20px; left: auto; right: 0; }

/* MEDIA
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.media .outer .items { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 -15px; padding: 20px 0; }
.media .outer .item { margin-bottom: 30px; width: 25%; }
.media .outer .item a { background-color: #FFF; display: block; margin: 15px; padding: 30px; text-decoration: none; min-height: 300px; height: 100%; box-sizing: border-box; }
.media .outer .item a:hover { opacity: 1; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1); }
.media .outer .item h3 { line-height: 1.2; }
.media .outer .item h5 { font-size: 12px; }

@media (max-width:1600px) {
	.media .outer .item { width: 33.33%; }
}

@media (max-width:900px) {
	.media .outer .item { width: 50%; }
	.media .outer .item a { min-height: 200px; padding: 20px; }
}

@media (max-width:600px) {
	.media .outer .item { margin-bottom: 20px; width: 100%; }
	.media .outer .item a { min-height: 150px; padding: 15px; }
}

/* CONTACT
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.contact { padding: 80px 0; }
.contact .outer { display: flex; justify-content: space-between; }
.contact-details { width: 45%; }
.contact-details .clinic { border-top: 1px solid #DDD; padding-top: 20px; padding-bottom: 20px; }
.contact-details .clinic .details p { line-height: 2; margin-bottom: 15px; }
.contact-details .clinic .details a { text-decoration: none; }
.contact-details .clinic .details a:hover { text-decoration: underline; }

.contact-details .clinic .hours { max-width: 500px; }
.contact-details .clinic .hours p { display: flex; justify-content: space-between; margin-bottom: 5px; }
.contact-details .clinic .hours span { display: block; width: 48%; }

.contact-form { width: 45%; }

/* FREEFORM
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.freeform form { margin-top: 0; }
.freeform form input,
.freeform form textarea,
.freeform form select { margin: 0; }
.freeform form button { width: auto; }

.freeform .freeform-row .freeform-column { padding: 0 0 20px !important; }
.freeform .freeform-row .freeform-column .freeform-label { font-weight: normal !important; }
.freeform .freeform-row .freeform-column .freeform-label.freeform-required:after { color: #666 !important; }
.freeform .freeform-row .freeform-column .freeform-input-only-label { color: #111; text-transform: none; letter-spacing: 0; font-family: 'Graphik'; font-weight: normal; }
.freeform .freeform-row .freeform-column .freeform-input-only-label > .freeform-input { height: auto; margin: 0 10px 0 0 !important; }

.freeform-form-has-errors { border: 1px solid #997868; color: #997868 !important; margin-bottom: 30px; padding: 15px; }
.freeform-row .freeform-column .freeform-errors > li, 
.freeform-row .freeform-column .ff-errors > li { color: #997868 !important; font-size: 14px; }

.text-white .freeform form input,
.text-white .freeform form textarea,
.text-white .freeform form select { color: #111 !important; }
.text-white .freeform form label { color: rgba(255,255,255,0.75) !important; }
.text-white .freeform form button { background-image: url("/assets/images/arrow-black.svg"); background-color: #FFF; border-color: #FFF; color: #111 !important; }
.text-white .freeform form button:hover { opacity: 0.8; }
.text-white .freeform-form-has-errors { border: 1px solid #FFF; color: #FFF !important; }
.text-white .freeform-row .freeform-column .freeform-errors > li, 
.text-white .freeform-row .freeform-column .ff-errors > li { color: #FFF !important; }

/* MEDIA QUERIES
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width:1600px) {
	.banner-centred h1 { font-size: 15vw; }
	.banner-centred img { width: 35vw; }
	.blocks-block .buttons .button { padding: 0 20px; }
	.brides .outer { grid-gap: 40px; }
	.results .outer { grid-gap: 40px; }
}

@media (max-width:1400px) {
	.content-padding { padding-top: 80px; padding-bottom: 80px; }
	.layout-centre .content-padding { padding: 40px; }
	.blocks-block .buttons .button { padding: 0 15px; }
	.treatments header { margin-bottom: 80px; }
	.bride-modal .bride-text .text-inner { padding: 40px; }
}

@media (max-width:1200px) {
	.content-padding { padding-top: 60px; padding-bottom: 60px; }
	.text-block .layout-centre .text { max-width: 80%; }
	.blocks-block .text { padding: 60px 40px; }
	.blocks-block figure.layout-centre { padding: 60px; }
	.testimonial-block h5 { line-height: 40px; }
	.treatments header { margin-bottom: 60px; }
	.treatment-content { padding: 40px; }
	.brides .outer { grid-gap: 30px; }
	body.type-bridal .fancybox-container .bride-modal { max-height: 620px; }
	.bride-modal .bride-images { width: 50%; }
	.bride-modal .bride-text { width: 50%; }
	.bride-modal .bride-text .text-inner { padding: 30px; }
	.bride-modal .bride-text p { font-size: 15px; }
	.results .outer { grid-gap: 30px; }
	.contact-form { width: 40%; }
	.contact-details { width: 55%; }
	.contact-details .clinic { display: block; }
	.contact-details .clinic div { width: 100%; }
	.contact-details .clinic .hours { margin-top: 20px; width: 100%; }
}

@media (max-width:1000px) {
	.page-banner { max-height: 80vw; }
	.banner-centred { padding: 120px 0 65px; }
	.treatment-content { position: relative; top: auto; left: auto; width: 90%; }
	.results .outer { grid-template-columns: 1fr 1fr; grid-gap: 40px; }
	.results .result p { font-size: 14px; }
	.blocks-block .buttons { flex-direction: column; }
	.blocks-block .buttons .button:last-child { margin: -1px 0 0 0; }
}

@media (max-width:800px) {
	.content-padding { padding-top: 40px; padding-bottom: 40px; }
	.text-block .layout-centre .text { max-width: 90%; }
	.text-block .layout-centre .faqs { max-width: 100%; }
	.columns-block .inner { display: block; }
	.columns-block .half { max-width: 100%; width: auto; }
	.columns-block .half:first-child { margin-bottom: 40px; }
	.blocks-block { display: block; }
	.blocks-block a.block-link { display: block; }
	.blocks-block .half { width: 100%; }
	.blocks-block .text { padding: 80px 40px; max-width: 100%; }
	.blocks-block figure.layout-centre { padding: 0 40px 40px; }
	.blocks-block .buttons { flex-direction: row; }
	.blocks-block .buttons .button:last-child { margin: 0 0 0 -1px; }
	.treatments header { margin-bottom: 40px; }
	.treatment-content { padding: 60px 30px; }

	.brides .outer { grid-template-columns: 1fr 1fr; }
	.brides a div { display: block; position: relative; top: auto; left: auto; height: auto; padding: 20px; width: auto; opacity: 1; }
	.brides a header { background: url("/assets/images/arrow-white.svg") no-repeat right top; background-size: 20px; display: flex; flex-wrap: wrap; text-align: left; }
	.brides a h3 { display: inline-block; margin: 0 0.2em 15px 0; line-height: 20px; }
	.brides a h3:last-child { order: 2; }
	.brides a h5 { margin: 0; order: 3; flex-basis: 100%; font-size: 12px; }
	body.type-bridal .fancybox-container .bride-modal { max-height: 100%; margin: 0; }
	body.type-bridal .fancybox-container .fancybox-toolbar { top: 2.5%; right: 2.5%; }
	body.type-bridal .fancybox-container .fancybox-button { background: rgba(0,0,0,0.5); height: 40px; width: 40px; padding: 6px; }
	.bride-modal .bride-images { position: relative; height: 50%; margin-bottom: 40px; min-height: 200px; width: 100%; }
	.bride-modal .bride-text { float: none; width: 100%; }
	.bride-modal .prev:hover,
	.bride-modal .next:hover { background: none; }
	.bride-modal .pager { bottom: -50px; opacity: 0.5; }
	.bride-modal .pager span { height: 10px; width: 10px; border-radius: 5px; }

	.results .outer { grid-gap: 20px; }

	.contact { padding: 30px 0; }
	.contact .outer { display: block; padding: 0; }
	.contact-details { padding: 0 20px; width: auto; }
	.contact-form { border-top: 1px solid rgba(0,0,0,0.05); margin-top: 30px; padding: 30px 20px 0; width: auto; }
	.freeform form button { width: 100%; }
}

@media (max-width:600px) {
	.testimonial-block h5 { line-height: 30px; }
	.page-banner { min-height: 100px; max-height: 1000px; height: auto; }
	.page-banner .outer { display: block; }
	.page-banner header { margin: 0; padding: 160px 0 40px; }
	.banner-centred { padding: 120px 0 65px; }
	.banner-centred h1 { font-size: 17vw; }
	.banner-centred img { width: 50vw; }
	h5+h1 { margin-top: 0; }
	.banner-short { height: auto; }
	.home-content .page-banner { height: 90vh; }
	.home-content .page-banner .outer { display: flex; }
	.home-content .page-banner header { margin: auto 0 40px; padding: 0; }
	.blocks-block .buttons { flex-direction: column; }
	.blocks-block .buttons .button:last-child { margin: -1px 0 0 0; }
	.brides .outer { display: block; }
	.brides a { margin-bottom: 20px; }
	.bride-modal .bride-images { height: 350px; }
	.bride-modal .bride-text .text-inner { padding: 20px; }
	.results .outer { display: block; padding-bottom: 20px; }
	.results .result { margin-bottom: 20px; padding: 15px; }
	.contact-details .clinic .hours p { font-size: 14px; }
}

@media (max-width:400px) {
	.content-padding { padding-top: 30px; padding-bottom: 30px; }
	.layout-centre .content-padding { padding: 20px; }
	.columns-block .half:first-child { margin-bottom: 30px; }
	.blocks-block .text { padding: 40px 20px; }
	.blocks-block figure.layout-centre { padding: 0 20px 20px; }
	.testimonial-block blockquote { padding: 40px 20px; }
}

.content-block .no-padding { padding-bottom: 0; }