@import "fonts.css";
@import "buttons.css";


a {color: black; text-decoration: none;}
body {background-color: #e9dac5; font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-size: 16px; webkit-font-smoothing: antialiased; margin: 0;}
h1 {position: absolute; padding-left: 30px;}
img {top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; width: auto; height: auto;}
p { font-weight: 400; letter-spacing: 0.2px; font-size: 1.1rem; line-height: 135%; max-width: 620px;}
li { font-weight: 400; letter-spacing: 0.2px; font-size: 1.1rem; line-height: 135%; max-width: 620px;}
svg { position:absolute; top:40px; left:auto; right: 30px; width:17px; height:13px;}
ul {padding: 0;width: 100% !important;}

#one {display: block;width: 105%;position: fixed;top: 0;left: -10px;}
#TreatmentMenu li {font-size:16px;}
#Treatment {cursor: context-menu;}

.about {display: block;margin: 0;width: 100%;}
.about {vertical-align: top;font-size: 1.9rem;font-weight: 700;text-align: left;display: inline-block;padding: 0 0 15px 0;margin-left: auto;margin-right: 0;margin-top: 0;}
.about-box {max-width: var(--max-width);margin-left: 10vw;background-color: white;padding: 60px 0;}
.about-box {width: 75%;}
.about::after {content: '';display: block;position: relative;background: black;width: 30px;height: 2px;margin-top: 15px;}
.box {grid-column: -1/1;padding: 0;}
.center{display:block; margin:auto;}
.content-opener .section-fly {font-size: 15px;margin-bottom: 40px;max-width: 520px;}
.content-opener .section-title {font-size: 12px;letter-spacing: 0.2px;}
.content-opener {display: grid;padding: 8rem 30px 4rem;margin: 0 auto;max-width: 1000px;}
.content-opener {max-width: 80vw !important;}
.content-opener-text {align-self: center;max-width: 800px;}
.content-padding {padding-top: 104px;}
.content-well {margin: 0 auto;max-width: 80vw;;padding: 60px 0;}
.description {color: #e9dac5;font-family: 'canela-web';font-size: 1.3rem;margin: 10px 0 40px;max-width: 320px;}
.email a {color: black;text-decoration: none;border-bottom: 1px solid black;}
.email {padding-top: 15px;font-style: normal;font-size: 1.2rem;line-height: 2.2rem;}
.first-about {font-weight: 700;font-size: 2.8rem;line-height: 2.6rem;margin: 0;z-index: 1; text-transform: uppercase;}
.grey-box {width: 100%;height: auto;background-color: #ffeadc;}
.header a {color: black;text-decoration: none;}
.header a:hover, .sub-menu a:hover {opacity: 0.7;}
.header {position: fixed;top: 0;height: 60px;width: 100%;background-color: #ffffff;z-index: 10;}
.header-container {height: 100%;max-width: var(--max-width);margin: 0 auto;padding: 0 30px; text-align:left;}
.header-left {text-transform: uppercase;display: inline-block;font-weight: 500;line-height: 55px;font-size: 18px;margin-top: 4px;max-height: 40px;letter-spacing: 3px;}
.header-right span {margin: 1em;letter-spacing: 1.2px; text-transform: uppercase;}
.header-right {margin-top: 18px; float: right; display: inline-block;}
.hp-img {background: url('../assets/bed2.png');height: 200px;display: inline-block;}
.left-image {left: 0;}
.logo {max-height: 60px;width: auto;}
.main-text {font-family: 'Crimson Text';font-size: 28px;}
.main-title {font-family: 'Montserrat';font-size: 60px;}
.name {text-align: left;font-family: 'canela-web';font-style: italic;font-size: 1.4rem;letter-spacing: 0.4px;color: black;border-bottom: 0.5px solid #d7d7d7;max-width: 100%;width: 100%;padding: 0 0 60px 0;}
.opener {width: 100%;background-size: cover;height: auto;}
.page-header {font-family: 'Montserrat';font-size: 2.4rem;line-height: 135%;padding-bottom: 1rem;margin: 0;max-width: 560px; text-transform: uppercase;}
.pink-box {width: 100%;height: auto;background-color: #ffdcd2;z-index: -1;}
.right-image {right: 0;}
.right-image, .left-image  {right: 0;display: -webkit-flex;-webkit-box-align: end;-moz-box-align: end;-o-box-align: end;-ms-flex-align: end;-webkit-align-items: flex-end;align-items: flex-end;background-repeat: no-repeat;-webkit-background-size: cover;-moz-background-size: cover;background-size: cover;background-position: left center;will-change: transform;}
.right-text, .left-text {align-self: center;background-color: #e9dac5;}
.second-about {max-width: 660px;letter-spacing: .02rem;font-size: 1rem;line-height: 1.7rem;color: #121212;width: 50%;}
.second-about {width: 100%;}
.section-fly {line-height: 160%;}
.section-title {font-size: 1.4rem;font-weight: bold;padding-top: 0; letter-spacing: 1.2px; text-transform: uppercase;}
.stars i {font-size: 35px;}
.stars {margin: 0;}
.sub-menu a {color: black;text-decoration: none;}
.sub-menu li {padding: 30px 15px;list-style-type: none;border-top: 1px solid #e8e8e8; max-width:none;}
.sub-menu li:hover {background-color: #f2f2f2;}
.sub-menu ul {position: fixed;top: 60px;width: 100%;background-color: #ffffff;z-index: 10;}
.sub-menu2 li {line-height: 0%; background-color:#f2f2f2}
.sub-menu-container {padding: 0;margin: 0;list-style: none;}
.terms {font-style: italic; font-size:90%;}
.testamonials a:hover {color: black;text-decoration: none;border-bottom: 1px solid black;}
.testamonials {font-size: 1.2rem;line-height: 2.2rem;max-width: 65%;padding-right: 10px;}
.testamonials-box {background-color: #f4ece1;margin: 0 auto;}
.the-grid {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(6, auto);}
.top-box {background-image: url("/assets/background-2025.jpg"); background-size: cover; display: grid; top: 0; width: 100%; min-height: 50vh; background-position: 0% -10%; z-index: -1;}
.top-text {align-self: center;color: #e9dac5;height: 30vh;margin-left: 10vw;max-width: 50vw;}
.white-background {background-color: white;}
.white-box a {text-decoration: none;margin-top: 30px;}
.white-box {width: 100%;padding: 80px 0;background: white;}




/* Grid boxes */
.right-image img, .left-image img, {width: 140%;height: auto;top: -38px;position: absolute;}
.change {grid-row-start: 4;}
.right-box, .left-box {display: block;}
.right-text, .left-text {grid-column: span 2;margin: 60px auto;/* width: 75%; */}
.left-text p, .right-text p {align-self: center;font-size: 1.1rem;line-height: 2.1rem;color: #121212;margin: 0;max-width: 450px; padding:15px}
.left-image, .right-image {grid-column: span 2;}

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

}

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

}

@media screen and (min-width: 1080px) {
	.top-box { background-position: 0% 10%;  min-height: 90vh; background-image: url("/assets/background-2025-large.jpg");}
	.description { margin: 20px 0 40px;  max-width: 300px;}
}


/* Mobiles  and small tablets */
@media screen and (max-width: 815px) {
	#one {width: 255%;}
	.first-about {font-size: 1.6rem;  line-height: 2.4rem;}
	.form-actions {margin: 2.25rem 50px 0 50px;}
	.grid-container {padding-top: 30px;  padding-bottom: 0;  display: grid;  grid-template-columns: repeat(1, 1fr);  width: 100%;  max-width: 960px;  margin: 0 auto;}
	.header-left { letter-spacing: 6px;}.description {max-width: 200px;}
	.header-right a {display: none;}
	.header-right {width: 30px;}
	.left-image, .right-image {height:auto;}
	.menu {display: block; height: 30px; width: auto; margin: 0 !important;}
	.terms {max-width:none;}
	.testamonials {margin: 10.6rem auto;}
	.about-box {width:90vw; margin:auto;}
	.page-header {font-size: 1.9rem;}
	.content-opener {padding: 8rem 30px 2rem;}

}


/* Medium And Big Screen */
@media screen and (min-width: 816px) {
	.menu {display: none; margin: 0;}
	.left-box, .right-box { display: flex;}
	.left-image img, .right-image img { min-width: 38rem;}
	.right-text p:nth-child(2) { padding-top: 0}
	.second p:first-of-type {padding-bottom: 30px;}
	.change {grid-row-start: 2;}
	.left-image, .right-image {overflow: hidden;  grid-column: span 1; height:auto;}
	.left-text, .right-text {grid-column: span 1;  margin: auto; height:auto; width:62.5%;}
	.left-text p, .right-text p {max-width: none;}
	.first-about {font-size: 3.2rem; letter-spacing: 0.4rem;}
	.stars i {font-size: 70px;}
 	.section-title {padding-top: 0;}
	.terms {font-style: italic; max-width:none; width:80%;}
	.testamonials {margin: 7.6rem auto;}
	.testamonials p {max-width: 100%;}
	#Terms {padding: 30px; margin-top:150px;}
	.narrow {max-width: 60vw !important;}

}

/* Big Desktops Screen only */
@media screen and (min-width:1200 px) {

}
