:root {
  --purple: #481962;
}

@font-face {
  font-family: "Montserrat";
  src: local("Montserrat-Regular"), local("Montserrat"), url("/oapp-res/montserrat-regular.woff") format("woff"), url("/oapp-res/montserrat-regular.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: local("Montserrat-Bold"), local("Montserrat"), url("/oapp-res/montserrat-bold.woff") format("woff"), url("/oapp-res/montserrat-bold.ttf") format("truetype");
  font-weight: bold;
  font-display: swap;
}

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

body {
  font-size: 16px;
  font-family: 'Montserrat';
}

.container {
  overflow-y: hidden;
  min-height: 100vh;
  background: #48196233;
  position: relative;
}

.hBox {
  height: 100%;
  width: clamp(340px, 98%, 1200px);
  margin: 0 auto;
}



.hamButton {
    position: relative;
    display: inline-block;
    width: 1.2em;
    height: .9em;
    border-top: 0.2em solid #000;
    border-bottom: 0.2em solid #000;
    text-align: right;
}

.hamButton::before {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0px;
    width: 100%;
    border-top: 0.2em solid #000;
}

.hamButton:hover, .hamButton:hover::before  { border-color: red; }




.container { min-height: calc(100vh - 6.5rem); }

.subHeaderBar {
  background: linear-gradient(to bottom, #6b338aaa, #6b338a77);
  color: #fff;
  height: 2.5rem;
  font-size: 1rem;
  padding: .75rem 1rem;
}

nav {
  position: sticky;
  top: 0;
  background: #fff;
  color: #222;
  clear: both;
  box-shadow: 0 10px 15px 0 #444;
  z-index: 2;
  width: 100%;
  padding: .25rem 1rem;
  overflow: hidden;
}
nav.open { max-height: none; min-height: 4rem; }

.home-link {
  max-height: 3.5rem;
  transition: filter .3s ease;
}

.home-link:hover {
  filter: opacity(.6);
}

#nav-hambutton {
  --size: 40px;
  width: var(--size);
  height: calc(var(--size) * .75);
  position: absolute;
  top: 17px;
  right: 1rem;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
  display: none;
}
#nav-hambutton span {
  display: block;
  position: absolute;
  height: calc(var(--size) * .15);
  width: 100%;
  background: #6b338a;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
  transform-origin: left center;
}
#nav-hambutton span:nth-child(1) { top: 0; }
#nav-hambutton span:nth-child(2) { top: calc(var(--size) * .3); }
#nav-hambutton span:nth-child(3) { top: calc(var(--size) * .6); }
#nav-hambutton.open span:nth-child(1) {
  transform: rotate(45deg);
  top: calc(var(--size) * -.05);
  left: calc(var(--size) * .13);
}
#nav-hambutton.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
#nav-hambutton.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: calc(var(--size) * .65);
  left: calc(var(--size) * .13);
}

nav > ul {
  list-style-type: none;
  float: right;
  clear: both;
}
nav > ul > li {
  display: inline;
  float: left;
  text-decoration: none;
  text-transform: uppercase;
  margin: .75rem .25rem;
  text-align: right;
}
nav > ul > li > a, nav > ul > li > span {
  padding: .25rem;
  color: #000;
  cursor: pointer;
}
nav > ul > li > a:hover, nav > ul > li > span:hover {
  color: #6b338a;
}

.nav-sub-button.open { color: #f00; }
.nav-sub-body {
  display: none;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 1rem;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}
.nav-sub-body.open { display: flex; }
.nav-sub-body a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 180px;
  height: 3.2rem;
  padding: .5rem;
  background: #6b338a11;
  color: #000;
}
.nav-sub-body a:hover { background: #6b338a22; color: #f00; }
@media (max-width: 1070px) {
  nav > ul > li { font-size: .8rem; }
  nav > ul > li > a, nav > ul > li > span { padding: .25rem 0; }
}
@media (max-width: 850px) {
  #nav-hambutton { display: block; }
  nav { max-height: 4rem; }
  nav > ul { margin-top: 3rem; }
  nav > ul > li { display: block; float: none; }
  .nav-sub-body { margin: 0 2rem 1rem .25rem; gap: .2rem; justify-content: flex-start; }
  .nav-sub-body a { font-size: .8rem; height: 2.5rem; width: 180px; }
}
@media (max-width: 540px) { .nav-sub-body a { font-size: .8rem; height: 2.5rem; width: 130px; } }
@media (max-width: 440px) {
  .nav-sub-body { gap: .5rem; }
  .nav-sub-body a { font-size: .8rem; height: 1.5rem; width: 180px; }
}

.bgTop {
  background: #666;
  color: #fff;
  text-align: center;
  font-size: 2rem;
  text-shadow: 2px 2px 3px #222;
  padding: 2rem 0;
}
h1 { font-size: 4rem; font-weight: bold; }
h2 { color: #9e79b2; font-weight: bold; }

@media all and (max-width: 950px) {
  h1 { font-size: 3rem; }
  .bgTop { padding: 1.5rem 0; }
}

@media all and (max-width: 790px) {
  h1 { font-size: 2rem; }
  .bgTop { padding: 1rem 0; }
}


main {
  background: linear-gradient(to bottom, #666 0px, #666 50px, #6660 150px, #6660);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2rem;
  padding: 0 2rem;
  margin-bottom: 4rem;
}

section, aside {
  padding: 2rem 1rem;
  background: #fff;
  border-radius: 2rem;
  min-height: 50vh;
  box-shadow: 0 0 16px 1px #555;
  color: #222;
}
section { flex-grow: 2; }
aside { width: 240px; }


p, li {
  text-align: justify;
  color: #444;
  margin: 2rem 0;
  line-height: 2rem;
}

li { margin: .5rem; margin-left: 2rem; }

footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #48196233;
  color: #444;
  height: 3rem;
  font-size: 1rem;
  padding: 1rem;
}

footer .hBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

footer a { display: inline-block; color: #000; text-decoration: none; }
footer a:hover { color: #6b338a; }

footer div div:last-child a {
  text-transform: uppercase;
  margin: 0 .5rem;
}

nav a:first-child, footer div div:last-child a:first-child { margin-left: 0; }
nav a:last-child, footer div div:last-child a:last-child { margin-right: 0; }

@media all and (max-width: 870px) {
  main { margin-bottom: 8rem; }
  footer { height: 5rem; }
  footer .hBox { flex-direction: column; }
  footer div div:last-child { order: 1; }
  footer div div:first-child { order: 2; }
}
@media all and (max-width: 580px) {
  main { padding: 0; margin-bottom: 8rem; flex-direction: column; }
  section, aside { border-radius: 0; }
  footer { font-size: .75rem; }
}
@media all and (max-width: 460px) { footer { font-size: .6rem; } }

a { color: #44f; text-decoration: none; }
a:hover { color: #481962; }

.subHeaderBar img { width: 1.25rem; height: 1.25rem; }
.subHeaderBar a { display: inline-block; color: #000; margin: 0 .5rem; border-radius: .5rem; }
.subHeaderBar a:hover { color: #fff; }
.subHeaderBar a.right { float: right; }
.subHeaderBar a.right span { position: relative; top: -.3rem; }
.subHeaderBar a.topicon { width: 1.25rem; height: 1.25rem; }
.subHeaderBar a.topicon:hover { background: #000; }


.imgWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem 0;
}
.imgWrapper img {
  width: 49%;
}

.imgWrapper.clip img:first-child {
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}

.imgWrapper.clip img:last-child {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
}

@media all and (max-width: 800px) {
  .imgWrapper { flex-direction: column; align-items: flex-start; }
  .imgWrapper img { width: 100%; }
  .imgWrapper.clip img:first-child {
    -webkit-clip-path: polygon(0 0%, 100% 0, 100% 90%, 0 100%);
    clip-path: polygon(0 0%, 100% 0, 100% 90%, 0 100%);
  }
  .imgWrapper.clip img:last-child {
    -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
  }
}






.singleImg {
  max-width: 100%;
  max-height: 30rem;
  display: block;
  margin: 0 auto;
}

p.small { font-size: .7rem; }
.tCenter { text-align: center; }


h2.pricing {
  padding: .5rem 1rem;
  margin: 1rem auto;
  margin-bottom: .25rem;
  background: #6b338a;
  color: #fff;
  width: 100%;
  border-radius: .4rem;
  text-align: center;
  max-width: 700px;
}

a.pricing {
  display: block;
  padding: .5rem 1rem;
  margin: 1rem auto;
  margin-bottom: .25rem;
  background: #44f;
  color: #fff;
  width: 100%;
  border-radius: .4rem;
  text-align: center;
  max-width: 700px;
}
a.pricing:hover { background: #6b338a; }

div.pricing { position: relative; background: #48196233; font-weight: bold; padding: .5rem 1rem; padding-right: 125px; margin: .2rem auto; border-radius: .4rem; border: 1px solid #48196233; max-width: 700px; }

div.pricing.full { padding-right: 1rem; background: #48196211; }

div.pricing span { display: inline-flex; background: #fff; font-weight: normal; position: absolute; top: 0; right: 0; bottom: 0; padding: .5rem .5rem; border-radius: .4rem; min-width: 100px; text-align: center; justify-content: center; align-items: center; }


.collapseHead {
  background-color: #6b338a;
  color: #fff;
  cursor: pointer;
  padding: 1em;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1em;
  border-top: 1px solid #222;
}
.collapseA, .collapseHead:hover {
  background-color: #6b338aee;
}
.collapseHead:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.collapseA:after {
  content: "\2212";
}
.collapseBody {
  padding: 0 1em;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  color: #222;
}

div.map {
  background: #bbe2c5;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-radius: .3rem;
  color: #000;
}

img.map {
  max-width: 100%;
  max-height: 30rem;
  border-radius: .3rem;
}

a.map {
  display: block;
  padding: .5rem;
  padding-left: 2rem;
  background-color: #222;
  color: #fff;
  width: 150px;
  background-image: url('/oapp-res/map_icon.png');
  background-position: left .5rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  border-radius: .3rem;
}

a.map:hover { background-color: #444; }

div.map div.mapRow {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: .5rem;
  align-items: flex-start;
  justify-content: space-between;
}

@media all and (max-width: 985px) {
  div.map { flex-direction: column; }
  div.map div.mapRow { flex-direction: row; align-items: center; }
  div.map div.mapRow div p { line-height: 1.2rem;}
}

@media all and (max-width: 400px) {
  div.map div.mapRow { flex-direction: column; }
}

.contactRight {
  width: clamp(8rem, 16vw, 20rem);
  height: clamp(8rem, 16vw, 20rem);
  float: right;
  margin: 2rem;
}

input, textarea {
  width: clamp(330px, 100%, 700px);
  height: 2rem;
  padding: .5rem;
  background: #fff;
  outline: none;
  border: none;
  border-bottom: 2px solid #aaa;
  margin: .5rem 0;
  transition: border-color .5s ease;
}

input:focus, textarea:focus { border-color: #6b338a; }
textarea { height: 7rem; resize: none; border: 2px solid #aaa; border-radius: .3rem; }

input[type="submit"] {
  background: #6b338a;
  color: #fff;
  border: 1px solid #6b338a;
  border-radius: .3rem;
  margin-bottom: 2rem;
  width: 220px;
  transition: background .3s ease, color .3s ease;
  cursor: pointer;
}
input[type="submit"]:hover {
  background: #fff;
  color: #6b338a;
}

.servicesIntro {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
}
.servicesIntro div { margin: 0; flex-grow: 2; }
.servicesIntro h2 { margin-bottom: .5rem; }
.servicesIntro p { margin-top: 0; }

@media all and (max-width: 630px) { .servicesIntro { flex-direction: column-reverse; } }

.servicesSpecs {
  background: #48196211;
  margin: 2rem -1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
}
.servicesSpecs a, .book-button {
  display: block;
  padding: 1rem;
  width: 360px;
  background: #44f;
  color: #fff;
  border-radius: .3rem;
  margin: 1rem 0;
  text-align: center;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}
.servicesSpecs a:hover, .book-button:hover { background: #481962; color: #fff; box-shadow: rgb(38, 57, 77) 0px 10px 15px -5px; }
.book-button { margin: 2rem auto; }

@media (max-width: 450px) { .servicesSpecs a, .book-button { width: 300px; } }
.servicesSpecs div { width: 360px; }
.servicesSpecs img { width: 40px; height: 40px; margin: 0; margin-right: 5px; position: relative; top: 12px; }
.servicesSpecs p { margin-top: 5px; font-size: 14px; text-align: left; }


.servicesGallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem .5rem;
}
.servicesGallery img {
  width: clamp(200px, 30%, 360px);
  height: auto;
  clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
  -webkit-clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%);
}

@media all and (max-width: 760px) {
  .servicesGallery { flex-direction: column-reverse; }
  .servicesGallery img {
    width: clamp(200px, 80%, 350px);
    height: auto;
    clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
    -webkit-clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);
  }
}

.servicesText p, .servicesText li { margin-top: 0; margin-bottom: .5rem; }





.serviceListWrapper {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  margin-top: 2rem;
}
.serviceList {
  padding: 2rem;
  clear: both;
  position: relative;
  width: 350px;
  border: 1px solid #6b338a11;
}

@media (min-width: 1201px) { .serviceList:nth-of-type(even) { background: #6b338a11; } }
@media (min-width: 844px) and (max-width: 1200px)
{ .serviceList:nth-of-type(4n+2), .serviceList:nth-of-type(4n+3) { background: #6b338a11; } }
@media (max-width: 843px) { .serviceList:nth-of-type(even) { background: #6b338a11; } }


.reviewWrapper {
  background: #48196211;
  margin: 2rem -1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
}

.reviewWrapper > div { padding: 1rem; width: 350px; }
.reviewWrapper > div > span { display: inline-block; }
.reviewWrapper > div > a { font-weight: bold; }
.reviewWrapper > div > img {
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 1rem;
}



.reviewWrapper > div > span > span {
  display: inline-block;
  background-image: url('/oapp-res/star.png');
  background-size: contain;
  background-repeat: repeat-x;
  background-position: left center;
  height: 16px;
  width: 80px;
  margin: 0 .5rem;
}


.homeWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: stretch;
  gap: 1rem;
}
.homeWrapper div:first-child { flex-grow: 2; padding: 1rem; }
.homeWrapper div:last-child { width: 320px; }
.homeWrapper > div > div { padding: 1rem; }
.homeWrapper img { width: clamp(200px, 100%, 400px); height: auto; }
.homeWrapper a { font-weight: bold; line-height: 2; }
.businessHours {
  width: 350px;
  margin-bottom: 2rem;
  background: #ec970622;
  border-radius: .5rem;
}
.businessHours table tr td:first-child { width: 10rem; }
.businessHours table tr.now td { font-weight: bold; }
.businessHours.businessOpen { background: #86dc3d22; }
.businessHours.businessClosed { background: #48196211; }

@media (max-width: 850px) { .homeWrapper { flex-direction: column; }}


.carouselWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  padding: 2rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.carouselWrapper > a {
  display: block;
  width: 320px;
  height: 200px;
  padding: 1rem;
  box-shadow: 0 0 15px 5px #44f4;
}

.carouselWrapper.chess > a:nth-of-type(even) { background: #88f1; }
@media (min-width: 847px) and (max-width: 1207px)
{
  .carouselWrapper.chess > a:nth-of-type(even) { background: #fff; }
  .carouselWrapper.chess > a:nth-of-type(4n+2),
  .carouselWrapper.chess > a:nth-of-type(4n+3) { background: #88f1; }
}
.carouselWrapper > a:hover { box-shadow: 0 0 15px 5px #6b338a33; background: #6b338a11; }

.carouselWrapper h3, .carouselWrapper p { margin: .2rem 0; line-height: 1.3rem; text-align: left;}

@media (max-width: 420px) { .carouselWrapper { padding: .5rem; gap: 1rem; }}



/* concerns */
div.concerns-box h3 { clear: both; text-align: center; }
div.concerns-box .carouselWrapper h3 { text-align: left; }
div.concerns-main::after { content: ''; clear: both; }
img.concerns-img { float: left; margin-bottom: 10px; margin-right: 20px; max-width: 350px; height: auto; border-radius: 5px; }
@media (max-width: 870px) { img.concerns-img { max-width: 200px; } }
@media (max-width: 600px) { img.concerns-img { max-width: 150px; } }

.concern-list-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 40px;
}
.concern-list {
  display: flex;
  width: 500px;
  height: 200px;
  text-align: left;
  margin: 0;
  padding: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-shadow: 0 0 15px 5px #44f3;
}
.concern-list:hover { background: #6b338a11; box-shadow: 0 0 15px 5px #6b338a33; }
.concern-list > img { height: 200px; width: 150px; }
.concern-list > span { padding: 10px; }
.concern-list > span > h3 { margin-bottom: 15px; }
.concern-list > span > p { margin: 0; padding: 0; line-height: 1.5em; }

@media (max-width: 530px) {
  .concern-list > span > h3 { margin-bottom: 5px; }
  .concern-list { width: 98%; }
  .concern-list > span > p { font-size: .9rem; line-height: 1.2em; text-align: left; }
}
@media (max-width: 420px) { .concern-list > span > p { font-size: .8rem; }
}