:root {
  --page-gap: 0.3rem;
}
html {
  margin: 0;
  padding: 0;
  display: block;
}
body {
  background-color: var(--font-light);
  /*linear-gradient(rgba(4, 45, 210, 0.692), rgba(255, 166, 0, 0.298), rgba(1, 26, 1, 0.595)),
        radial-gradient(circle, #0000ff82, rgba(228, 0, 0, 0.5)),
        linear-gradient(27deg,rgba(246, 8, 147, 0.775),rgba(245, 3, 3, 0.501));*/
  font-size: 1rem;
  line-height: 1.75rem;
}
.wrapper {
  max-width: 1250px;
  margin: 0 auto;
}
.t-header,
.s-header,
.b-header,
.h-header,
.c-header,
.l-header {
  height: 80vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;  
}
.t-header {
  background-image: url("../media/pexels-anna-tarazevich-6560289.jpg");
}
.s-header {
  background-image: url("../media/pexels-valeria-boltneva-1204505.jpg");
 }
.b-header {
  background-image: url("../media/pexels-ivan-samkov-6648788.jpg");
}
.h-header {
  background-image: url("../media/pexels-daniel-reche-3601094.jpg");
}
.c-header {
  background-image: url("../media/pexels-damir-mijailovic-4414735.jpg");
}
.l-header {
  background-image: url("../media/pexels-ekaterina-bolovtsova-6077447.jpg");
}
#about .wrapper > h2 {
  max-width: 1250px;
  margin: 0 auto;
  font-size: 2.4rem;
  line-height: 3rem;
  padding: var(--page-gap) 0 0 var(--page-gap);
  color: var(--font-light);
}
#about {
  padding: 2rem 0;
  background: var(--bg-colour);
}

#treatments .wrapper > h2,
#specials .wrapper > h2,
#benefits .wrapper > h2,
#health .wrapper > h2,
#contact .wrapper > h2 {
  max-width: 1250px;
  margin: 0 auto;
  font-size: 2.4rem;
  line-height: 3rem;
  padding: var(--page-gap) 0 0 var(--page-gap);
  color: var(--bg-colour);
  background: var(--bg-colour);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}


#treatments,
#specials,
#benefits,
#health,
#contact  {
  background-color: var(--font-light);
}
#about .content {
  background-color: var(--font-light);
}

#specials .content ul {
  list-style-type: none;
}
#about .content ul li {
  display: flex;
  align-items: center;
}
#about .content ul li::before {
  content: url(../media/certif.png);
  height: 30px;
}
#treatments .content,
#specials .content,
#benefits .content,
#health .content,
#contact .content {
  background: var(--bg-colour);
  color: var(--font-light);
}

#treatments table th {
  padding-top: 2rem;
}
#treatments table td {
  padding: 0.65rem;
}
#treatments table th:nth-child(3),
#treatments table td:nth-child(3) {
  display: none;
}
#specials p,
#health p,
#benefits p {
  margin: 1rem 0;
}
footer h3,
#about h3 {
  margin: 0.85rem 0;

  color: rgb(175, 4, 4);
}

.parent {
  height: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content {
  margin: 2rem 0.2rem;

  padding: var(--page-gap);
  display: flex;
  flex-direction: column;
}
#services {
  border-radius: 0.2rem;
  padding: 0;
}
.grid {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  text-align: center;
}

.location {
  font-size: x-small;
  color: lightgray;
}
.week-times {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-items: center;
  align-items: center;
  justify-content: space-around;
  margin-top: 2rem;
}
.week-times div {
  flex: 1;
  min-width: 240px;

}
.week-times table tr,
.week-times table td {
padding: 0.25rem var(--page-gap);
color: var(--font-light);
}
.week-times a i{
  color: white;
}
.alt {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 600px;
  margin: 2rem auto 0;
}
.alt h3 {
  padding: 1rem 0;
}
#about .grid div {
  text-align: center;
}
.grid div {
  display: block;
  position: relative;
  flex: 1;
  background-image: var(--bg-colour);
  color: var(--font-light);
  border-radius: 0.2rem;
  border: 1px solid orangered;
  box-shadow: 0 3px 5px rgb(3, 8, 4);
  margin: 4rem 0;
  padding: 0 0 2rem;
}
.grid h4 {
  margin: 1rem;
}
.grid p {
  padding: 0.32rem;
  text-align: left;
}
a.inline-link {
  color: var(--font-light);
}
a.inline-link:hover {
  color: orange;
}
#services .grid div {
  max-width: 302px;
}
#reviews .grid div {
  max-width: 453px;
  min-width: 350px;
  padding: 5rem 0.345rem 2rem;
  text-align: left;
}
#reviews .grid div h4 {
  text-align: center;
}
#reviews .grid img {
  position: absolute;
  top: -25px;
  left: -25px;
}
#reviews h2 {
  color: brown;
  text-align: center;
}
.content ul {
  margin: 2rem var(--page-gap);
}
.parent .child {
  color: rgb(67, 104, 137);
  text-align: center;
  margin-top: 3rem;
}

.child:first-child > img {
  max-width: 100%;
  min-width: 250px;
}
.child:nth-last-child(1) > img {
  height: 70vh;
}
.wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
}
#parallax {
  background-image: url("../media/balance-1920.jpg");
  height: 50vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.legal {
  margin: 0 0 2rem;
}
.legal h1,
.legal h2 {
  margin: 1rem 0 0.25rem 0;
  color: darkgray;
}


footer {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  text-align: center;
  background-image: var(--bg-colour);
  color: var(--font-light);
  font-size: 0.85rem;
}
footer .inline-link {
  text-decoration: none;
}
footer div {
  flex: 1;
  min-width: 225px;
  padding: 2rem;
}
footer div h4 {
  padding-bottom: 1rem;
}

blockquote {
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote::after {
  color: #ccc;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}
@media only screen and (min-width: 920px) {
  :root{
    --page-gap:2rem;
  }
  .parent {
    flex-direction: row;
  }
  .child {
    width: 100%;
  }
  .content {
    margin: 2rem;
  }
}
@media only screen and (min-width: 700px) {
.week-times{
  flex-direction: row;
}
}

@media only screen and (min-width: 480px) {
  #treatments table th:nth-child(3),
  #treatments table td:nth-child(3) {
    display: block;
  }
}
@media only screen and (min-width: 408px) {
  :root{
    --page-gap:1rem;
  }

  .content {
    margin: 2rem 0.5rem;
  }
}
/*
  Slide show
 Resize slides 
*/

.resp img {
  min-height: 100%;
  max-width: 100%;
}

.slide-viewer {
  position: relative;
  /* needed for IE7 */
  overflow: hidden;
  height: 100%;
  min-height: 200px;
  text-align: center;
  margin-top: 1rem;
}

.slide-group {
/*  width: 100%;
  height: 100%;
  position: relative; */

  display: flex;
  flex-direction: row;
}
.slide::before {
  opacity: 1;
}
.slide {
  flex: 0 0 100%;
  padding: 0 3rem;

/*  width: 100%;
  height: 100%;
  display: none;
  position: absolute;   */

}
.slide:hover {
  cursor: pointer;
}

.slide:first-child {
  display: block;
}

.slide-buttons {
  text-align: center;
}

.slide-btn {
  border: none;
  background: none;
  color: rgba(215, 77, 243, 0.3);
  font-size: 300%;
  line-height: 1.5em;
}

.slide-btn.active {
  color: greenyellow;
  cursor: pointer;
}

.slide-btn:hover {
  color: rgb(247, 185, 15);
}

.slide-btn-container {
  position: relative; 
  margin: 1rem;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(255, 255, 255, 0.87);
}

.modal-content {
  position: relative;
  margin: 5% auto;
  padding: 20px;
  max-width: 800px;
}
.modal-text {
  font-size: 2rem;
  line-height: 3rem;
}
.close {
  color: rgb(255, 0, 0);
  font-size: 35px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 25px;
  cursor: pointer;
}

.modal-image {
  width: 50%;
  height: auto;
}

/*
 End of Slider / slide show
 IO
*/
/* 
* Debugging issues violation (eventlistener passive!) with google maps
*/
.gmaps {
  overflow: hidden; 
  position: relative; 
  width: 100%; 
  height: 450px;
}