/* Creates variables we can use instead of hex*/
:root {
    --light-color: #f7ebde;
    --lightest-color: #f3ece4;
    --bs-cameo: #D5b29e;
    --bs-sandal: #Ab7c67;
    --bs-cocoabean: #47271c;
    --bs-spicymix: #905f48;
    --bs-ironstone: #7a4938;
    --bs-pharlap: #a2837c;
    --bs-paleoyster: #9a8e83;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-body-font-family: Nunito, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #f7ebde;
    --bs-body-bg: #fff;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--light-color);

}
.skip-to-main-content-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    background-color: black;
    color: var(--light-color);
    opacity: 0;
  }
  .skip-to-main-content-link:focus {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    color: var(--light-color);
  
  }
  .wrap {
    padding: 40px;
    text-align: center;
}
hr {
    clear: both;
    margin-top: 40px;
    margin-bottom: 40px;
    border: 0;
    border-top: 1px solid #aaaaaa;
}
h1 {
    font-size: 30px;
    margin-bottom: 40px;
}

h2 {
  padding-top: 3%;
  margin-bottom: 0;
  font-family: "La Belle Aurore", sans-serif;    
  font-weight: 100;
  font-size: 5vh;
  color: var(--bs-cocoabean);

}

p {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: #47271c;
}
.btn {
    background: #428bca;
    border: #357ebd solid 1px;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    padding: 8px 15px;
    text-decoration: none;
    text-align: center;
    min-width: 60px;
    position: relative;
    transition: color .1s ease;
}
.btn:hover {
    background: #357ebd;
}
.btn.btn-big {
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
}
.btn-close {
    color: #aaaaaa;
    font-size: 30px;
    text-decoration: none;
    position: absolute;
    right: 5px;
    top: 0;
    background-color: #fefefe68;
}
.btn-close:hover {
    color: #919191;
}
.modal:target:before {
    display: none;
}
.modal:before {
    content:"";
    display: block;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.modal .modal-dialog {
    background: #fefefe;
    border-radius: 5px;
    font-weight: 500;
    position: fixed;
    z-index: 11;
    width: 90%;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: -webkit-transform 0.3s ease-out;
    -moz-transition: -moz-transform 0.3s ease-out;
    -o-transition: -o-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    top: 10%;
    box-shadow: 0 0 30px 0 white,
    0 0 30px 0 white,
    0 0 10px 0 white inset;   
  
}
.modal:target .modal-dialog {
    top: -100%;
    -webkit-transform: translate(0, -500%);
    -ms-transform: translate(0, -500%);
    transform: translate(0, -500%);
}
.modal-body {
    padding: 20px;
}

.modal-body img {
  width: 100%;
}
/* .modal-header, .modal-footer {
    padding: 10px 20px;
} */
.modal-header {
    width: 100%;
    margin-top: 5%; 
    text-align: center;
}

.modal-header h2 {
    font-size: 4vh;
    text-align: center;
    margin: 0;
    width: 100%;
}

.modal-header button {
  margin: 0;
  text-align: center ;
  box-shadow: 0 0 2px 0 #ab7c67, 0 0 0px 0 #ab7c67, 0 0 45px 0 #ab7c67 inset; 
  color: var(--bs-cocoabean);
  background-color: white;
}

.modal-header button a {
  color: var(--bs-cocoabean);
  font-size: 2vh;
  text-decoration: none;  
}

.modal-footer {
    border-top: #eeeeee solid 1px;
    text-align: right;
}

.modal-footer button {
  color: var(--bs-cocoabean);
  background-color: white;
}



nav {
    background-color: #f7ebde;
}

#logo {
    text-align: center;
}

#logo img {
    width: 80%;
}

.topnav {
    text-align: center;
}

  /* Style the links inside the navigation bar */
  .topnav a {
    display: inline-block;
    color: var(--bs-spicymix);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
    padding-left: 3%;
    padding-right: 3%;
    font-family: "Lora", sans-serif;
  }

    /* Change the color of links on hover */
  .topnav a:hover {
    /* background-color: #ddd; */
    color: black;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
    color: var(--bs-spicymix);
  }

  main {
    background-color: #Ab7c67;
    overflow: auto;
  }

.socialmedia {
text-align: right;
font-size: 48px;
margin-right: 5%;
color: var(--bs-cocoabean);
}
.socialmedia a {
    color: var(--bs-cocoabean);
}

  #mainImg {
      width: 100%;
      margin:auto;
      text-align: center;
      background-image: url(../assets/img/whiteline.png);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
  }

  #mainImg img {
      width: 80%;
      padding: 5%;
  }

  #mainTitle {
    height: 100%;
    text-align: center;
    position: relative;
}
#mainTitle img {
    width: 60%;
    opacity: 50%;
}

#mainTitle h1 {
    width: 100%;
    font-size: 11vh;
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Passions Conflict", sans-serif;
    color: white;
    font-weight: normal;
}

#mainTitle h2 {
    font-size: 3vh;
    color: white;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "La Belle Aurore", sans-serif;
}

button {
    background-color: transparent;
    /* border: 2px solid var(--bs-cocoabean); */
    color: white;
    padding: 8px;
    font-size: 3vh;
    text-align: center;
    text-decoration: none; 
    margin-bottom: 5%; 
    border: none;
    box-shadow: 0 0 30px 0 white,
    0 0 30px 0 white,
    0 0 10px 0 white inset;            
}

button a {
    color: white;
    text-decoration: none;
}

button .titlebtn {
    position: absolute;
}

section {
    display: inline-block;
    text-align: center;
    justify-content: center;
}

.instaAd {
    background-color: var(--light-color);
    text-align: center;
    padding-top: 5%;
    width: 100%;
}

.instaAd h2 {
    font-size: 1.25rem;
    font-family: "Lora", sans-serif;
    color: var(--bs-spicymix);
}

.instaAd p {
    font-family: "Lora", sans-serif;
    color: var(--bs-cocoabean);
    font-size: 1.25rem;
}

.instaAd a {
    font-size: 2rem;
    color: var(--bs-cocoabean);
}

#cherrysection {
    width: 100%;
    background-image: url(../assets/img/cherryperson.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    border-bottom: 6px solid #Ab7c67;
}

#cherry img {
    width: 100%;
}

#cherry {
    text-align: left;
}

#cherry h2, h3, ul {
    background-color: rgba(255, 255, 255, 0.66);
    width: 70%;
    text-align: center;
    border-radius: 5px;
    color:var(--bs-cocoabean);
}

#cherry ul {  
    list-style: none;  
}

.cherrybtn {
    width: 70%;
    text-align: center;
}

.cherrybtn button {
  background-color: white;
}

.cherrybtn a {
  color: var(--bs-cocoabean);
}

#cherry h2 {
    font-size: 7vh;
    margin: 0;
    font-weight: 100;
    margin-top:3%;
}

#cherry h3 {
    font-size: 3.5vh;
    margin: 0;
    font-weight: 100;
    font-family: "La Belle Aurore", sans-serif;

}

#cherry ul {
    font-size: 3vh;
}

  /* SERVICES  */

  .services {
    background-color: rgba(255, 255, 255, 0.66);
  }
  .service-p, .about-p {
    width: 65%;
    text-align: center;
    margin:auto;
  }

.gocourses {
  color: var(--bs-ironstone);
  background-color: white;
}
  
  /* services cards */
  /* products */
  .individual-srv {
    margin: 3%;
  }
  
  .individual-srv h2 {
    color: #47271c;
    text-align: center;
    font-size: 37px;
  }
  .cards {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    width: 100%;
  }
  
  .cards img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }
  
  .cards_item {
    display: flex;
    padding: 1rem;
  }
  
  @media (min-width: 40rem) {
    .cards_item {
      width: 50%;
    }
  }
  
  @media (min-width: 56rem) {
    .cards_item {
      width: 33.3333%;
    }
  }
  
  .card-prod {
    background-color: white;
    border-radius: 0.25rem;
    box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
    #services .card_content {
      padding: 1rem;
      height: 100%;
    }
    .card_title {
      color: #47271c;
      font-size: 1.5rem;
      letter-spacing: 1px;
      margin: 0px;
      padding: 2%;
      text-align: center;
      margin-top: 1%;
      font-family: 'Grotesk', sans-serif;
      font-weight: 500;
      margin: auto;
    }
  
    .card_text {
      color: black;
      font-size: 1.5rem;
      line-height: 1.5;
      margin-bottom: 1.25rem;    
      font-weight: 400;
    }
  
#book, #getintouch {
  width: 100%;
}


.dm {
    font-size: 30px;
    color: var(--bs-cocoabean);
}

  .bio {
    height: auto;
    background-color: white;
    color: var(--bs-cocoabean);
    text-align: center;
    display: inline-block;
    width: 100%;
    padding-bottom: 3%;
    border-top: 6px solid #Ab7c67;
  }

  .bio h2 {
    font-family: "La Belle Aurore";
    color: #Ab7c67;
    font-size: 5vh;
  }

.bio a {
    text-decoration: none;
    color: var(--bs-cocoabean)
}
  
  
  .biopic {
    justify-content: center;
    text-align: center;
  }
  
  .bioinfo {
    width: 100%;
    /* margin: auto; */
    padding-top: 5%;
    font-size: 3vh;
    font-family: "Lora", serif;
  }

  .mayra {
    max-width: 50%;
    width: 417px;
    border-radius: 5%;
    font-family: "La Belle Aurore"; 
    font-size: 24px; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: 700; 
    line-height: 26.4px;
  }

  .treatmentsbtn {
    text-align: center;
    text-decoration: none;
    padding-top: 5%;
    justify-content: center;
    box-shadow: 0 0 30px 0 white,
    0 0 30px 0 white,
    0 0 10px 0 white inset; 
}

.treatmentsbtn button {
  font-family: "Passions Conflict", sans-serif; font-size: 4rem;
  font-size: 5rem;
  box-shadow: none;
}
.treatmentsbtn button a {
    text-decoration: none;
}

.footer {
    color: var(--bs-cocoabean);
    background-color: var(--light-color);
  }
  
  .footerinfo {
      text-align: center;
      text-decoration: none;
      /* border-top: 1px solid var(--bs-cocoabean); */
      padding: 5%;
      background-color: var(--bs-cameo);
  }

  .footerinfo a {
      text-decoration: none;
      color: black;
  }



@media screen and (min-width: 769px) {
    #mainImg {
        width: 50%;
        float: left;
    }
    #mainTitle {
        width: 50%;
        float: right;
    }

    .modal-header h2 {
      font-size: 7vh;
      width: 100%;
    }
  
    .modal-header h3 {
      font-size: 3vh;
    }
    .modal .modal-dialog {
      width: 50%;
      margin-left: 25%;
    }

    #treatments h2, #courses {
      font-size: 9vh;
    }

    .bio h2 {
      font-size: 7vh;
    }

}

@media screen and (min-width: 1401px) {
    #mainTitle h1 {
        font-size: 18vh;
        top:2%;
    }

    #mainTitle h2 {
        font-size: 5vh;
        /* top:57%; */
    }
    .topnav a {
      font-size: 25px;
    }
}


@media screen and (min-width: 1024px) {
    #cherry h2 {
        font-size: 11vh;
    }
    #cherry h3 {
        font-size: 4.5vh;
    }
    #cherry ul {
        font-size: 4vh;
    }
    #logo img {
      width: 50%;
  }
}


@media screen and (min-width: 1024px) and (max-width:1400px) {
    #mainTitle h1 {
        font-size: 13vh;
        top:2%;
    }

    #mainTitle h2 {
        font-size: 4vh;
        /* top:57%; */
    }
    #mainTitle .titlebtn {
        font-size: 5vh;
    }


}

@media screen and (min-width:769px) and (max-width: 1023px) {
    #mainTitle h1 {
        font-size: 10vh;
        top:7%;
    }

    #mainTitle h2 {
        font-size: 2.5vh;
        top:50%;
    }

    #mainTitle .titlebtn {
        font-size: 3vh;
    }
    #mainTitle .titlebtn {
        font-size: 5vh;
    }
}




@media screen and (min-width:601px) and (max-width: 768px) {
    #mainTitle h1 {
        font-size: 15vh;
        top:7%;
    }

    #mainTitle h2 {
        font-size: 4vh;
        top:51%;
    }
    #mainTitle .titlebtn {
        font-size: 5vh;
    }
    #mainImg img {
        width: 65%;
    }
}


@media screen and (min-width:420px) and (max-width: 600px) {
    #mainTitle h1 {
        font-size: 11vh;
        top:2%;
    }

    #mainTitle h2 {
        font-size: 4vh;
    }
    
    #mainTitle .titlebtn {
        font-size: 4vh;
    }
}


@media screen and (max-width:420px) {
  #mainTitle h1 {
      font-size: 8vh;
      top:2%;
  }
  
  #mainTitle .titlebtn {
      font-size: 4vh;
  }
}


  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 768px) {
    .topnav.responsive {
        display: block;
        position: relative;
        width: 100%;
        padding-top: 5%;
        
    }

    /* hide all links. Show the link that contains should open and close the topnav (.icon) */
    .topnav a {display: none;}
    .topnav a.icon {
      float: none;
      display: block;
    }

    .topnav.responsive a.icon {
      display: block;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      background-color: var(--light-color);
    }
    #cherry h2, h3, ul {
        width: 100%;
        text-align: center;
        border-radius: 5px;
    }

    .cherrybtn {
        width: 100%;
    }
    .column {
        width: 90%;
        display: block;
        margin-bottom: 20px;
        justify-content: center;
    }
    #mainImg img {
        width: 65%;
    }

}