
:root{
    box-sizing:border-box;
    --orange: #fe8203;
    --blue: #05a7cd;
    --green: #a3cf5f;
}

body {background-color: #fff;color: #1c1c1c;font-family: helvetica, Verdana, Arial, sans-serif;font-size: 16px;font-weight: 400;line-height: 1.6;font-style: normal;padding: 0;word-wrap: break-word;}
h1,h2,h3,h4,h5,h6{line-height:1.1 !important}

.content-container a{color:#000}
img{max-width:100%;}
p{margin:0 0 1.5em 0;}

.buttons{display:inline-flex;gap:10px;}
.button{display:inline-flex;font-size:14px;gap:10px;color:#000 !important;padding:10px 20px;border-radius:100px;border:none !important;text-decoration:none !important;transition:.2s all;white-space:nowrap}
.button:hover{background:#000 !important;color:#fff !important;fill:#fff}
.button:hover *{color:#fff;}
.button svg{width:24px;height:24px;}
.button--blue{background:var(--blue);}
.button--orange{background:var(--orange);}
.button--green{background:var(--green);}

.photo--square{aspect-ratio:1/1;object-fit:cover}

.photo-border{position:relative;margin-top:20px !important;margin-right:50px}
.photo-border img{position:relative;z-index:2}
.photo-border:after{content:'';position:absolute;top:-30px;right:-30px;z-index:-1;width:40%;aspect-ratio:1/1;background:var(--green)}
.photo-border--blue:after{background:var(--blue)}
.photo-border--green:after{background:var(--green)}
.photo-border--orange:after{background:var(--orange)}


.mobile{display:none;}

.content-container{max-width:1000px;margin:0 auto;padding:0 30px}

.site{}

.header{padding:30px 0}
.header .content-container{display:flex;gap:30px;justify-content:space-between;align-items:center;}
.logos{display:flex;gap:20px;align-items:center;flex:1;width:20%}
.logo__treehouse:not(:only-child){border-right:1px solid var(--orange);padding:0 20px 0 0}
.logos img{width:100%;max-width:250px;max-height:70px}
.logo__treehouse img{}
.logo__practice img{}

.header .buttons{}

.block{margin:75px 0;}
.grid{display:grid;gap:75px}
.grid--2{grid-template-columns:1fr 1fr}
.block .column{}
.block .column > *:first-child{margin-top:0}
.block .column > *:last-child{margin-bottom:0}


.block--hero{margin-top:20px !important}
.block--hero .content-container{display:flex;gap:38px;align-items:center}
.block--hero .content-container .column{width:50%;}
.block--hero .content-container .image{flex:1}
.block--hero .content-container .image img{width:100%}
.block--hero h1{margin:0;font-weight:bold;}
.block--hero h1 span{display:inline-block;background:#fff;padding:5px 10px}
.block--hero h2{margin:0;font-weight:normal}
.block--hero h2 span{display:inline-block;background:#fff;padding:5px 10px}


.quote{padding:60px 30px;text-align:center;font-size:1.2em;line-height:1.3;position:relative}
.quote p{margin:0 0 .25em 0;position:relative;z-index:2}
.quote em{font-weight:bold;font-style:normal;}
.quote--orange{background: var(--orange);}
.quote--blue{background: var(--blue);}
.quote--green{background: var(--green);}
.quote svg{color:#fff;width:100px;height:100px;opacity:.2;position:absolute;top:10px;left:30px;z-index:1}

.block--location{background: var(--orange);padding:40px 0}
.block--location .content-container{display:flex;gap:75px}

.location-hours{width:30%;}
.location-hours h2{margin-top:0}
ul.list--hours.special-hours{margin-bottom:20px;}
ul.list--hours{background:#fea54b;margin:0;padding:10px 20px;list-style:none;}
ul.list--hours li{margin:0 0 5px 0;display:flex;gap:10px}
ul.list--hours li .day{width:75px}
ul.list--hours li .text{flex:1}

.location-map{flex:1}

.block--team{}
.doctors{margin:30px 0 0 0}
.doctor{padding:20px;box-shadow:3px 3px 10px rgba(0,0,0,0.2);display:flex;gap:30px;position:relative;background:#fff}
.doctor:after{content:'';position:absolute;top:-20px;right:-20px;z-index:-1;width:20%;aspect-ratio:1/1;background:var(--green)}
.doctor:nth-child(3n+2):after{background:var(--orange)}
.doctor:nth-child(3n+3):after{background:var(--blue)}

.doctor:not(:last-child){margin-bottom:70px}
.doctor__photo{width:20%;}
.doctor__photo img{aspect-ratio:1/1;object-fit:cover}
.doctor__content{flex:1}
.doctor__content .doctor__heading h3{margin:10px 0 10px 0;}
.doctor__content .doctor__heading .doctor__suffix{font-size:20px;}

.show-more{text-align:center;vertical-align:middle;margin-top:-30px;cursor:pointer}
.show-more svg{vertical-align:middle}

.block--reviews{}
.reviews{display:grid;grid-template-columns:1fr 1fr 1fr;gap:50px;margin:50px 0 0 0}
.review{padding:30px;box-shadow:3px 3px 10px rgba(0,0,0,0.2);position:relative;background:#fff}
.review:after{content:'';position:absolute;top:-12px;left:-12px;z-index:-1;width:70%;aspect-ratio:1/1;background:var(--green)}
.review:nth-child(3n+2):after{background:var(--orange)}
.review:nth-child(3n+3):after{background:var(--blue)}
.review em{font-weight:bold;font-style:normal;font-size:20px;display:block;margin:0 0 5px 0}
.review__stars{color:var(--orange);margin:0}
.review p:last-child{margin:0}

.block--book{background:#fff5eb;padding:50px 0;}


@media (max-width: 762px) {

	.mobile{display:block;}
	.desktop{display:none;}

    .header{}
    .header .content-container{display:block;text-align:center}
    .header .logos{width:100%;justify-content:space-around;margin:0 0 20px 0}

    .block{margin:50px 0 50px 0;}
    .grid--2{grid-template-columns:1fr}

    .block--hero{margin-top:0 !important;padding:30px 0;background: url(https://treehouseeyes.com/wp-content/uploads/2024/05/myopia-landing-page-hero.jpg);background-repeat:no-repeat;background-size:120%;background-position:30% 50%}
    .block--hero .content-container{display:block;}
    .block--hero .content-container .column{width:100%}
    .block--hero .content-container .image{display:none;}
    .block--hero h1 span{padding:10px 20px}
    .block--hero h2 span{padding:0 20px 10px 20px}
	
    .doctor{display:block}
    .doctor__photo{width:30%;float:right;margin:0 0 20px 20px}
    
    .block--location .content-container{display:block}
    .location-hours{width:100%;margin:0 0 20px 0}

    .reviews{grid-template-columns:1fr;gap:50px;}
    
}