#page-container{
  position: relative;
  min-height: 100vh;
}
#content-wrap{
  padding-bottom: 10rem;
}

.navbar{
  display: flex;
}
.logonav{
  z-index: 99999;
  background-color: #7B3830;
  overflow: hidden;
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  right: 0;
  top: 0;
}
.logo_nav{
  height: 100px;
  width: auto;
  padding-bottom: 10px;
}

.topnav {
  background-color: #7B3830;
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
  
.topnav a {
  color: #EDE2D1;
  text-align: left;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
  
.topnav a:hover {
  background-color: #333333;
  color: #DDC6A4;
}
  
.topnav a.active {
  background-color: #EDE2D1;
  color: #7B3830;
}

.nav{
  display: block;
}

.navlist{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #7B3830;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 3;
}

.navitem{
  float: left;
}

.navlink{
  display: block;
  color: #EDE2D1;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav a:hover {
  background-color: #333333;
  color: #DDC6A4;
}
  
.header{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
}

.landingpage-flex{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding-left:10%;
  padding-right: 10%;
}

.landingpage-text{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left:10%;
  padding-right: 10%;
}

.landingheader{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #333333;
  font-size: large;
}

.landingsentence{
  padding-top: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-align: left;
  letter-spacing: 1px;
  line-height: 2cm;
  line-break: strict;
  color: #333333;
  font-size: 30px;
  font-weight: 200;
  width: 100%;
  padding-left:5%;
  padding-right: 5%;
}

.bookingdiv{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 100px;
}

/* -
-*-~*~-*-*-~*~-*-*-~*~* |
●▬▬▬▬▬▬▬๑۩۩๑▬▬▬▬▬▬▬●
Made by ~
Areal Alien ❥ 雷克斯
●▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬●
──────▄▀▄─────▄▀▄
─────▄█░░▀▀▀▀▀░░█▄
─▄▄──█░░░░░░░░░░░█──▄▄
█▄▄█─█░░▀░░┬░░▀░░█─█▄▄█
-*-~*~-*-*-~*~-*-*-~*~* |
- */

:root {
  --bc: #EDE2D1;
  --primary: rgb(161, 166, 252);
  --white: #EDE2D1;
  --black: #000000;
  /* Colors */
  --red: #da2c4d;
  --orange: #fd7e14;
  --yellow: #f8ab37;
  --yellow-bright: #ffc107;
  --light-green: #24e33a;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  /* Gray Colors */
  --bc-gray: #EDE2D1;
  --gray: #9e9d9b;
  --gray-dark: #1c1a19;
  /* Gradients */
  --rainbow: linear-gradient(90deg, #7B3830   0%, #7B3830  14%, #7B3830  28%,#7B3830  43%, #6A5E51  55%, #6A5E51 69%, #6A5E51 85%, #6A5E51 100%);
  /* Sizes */
  --button: 1.22rem;
  /* Fonts */
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

* {
  box-sizing: border-box;
  user-select: none;
}

main {
  height: 0;
}
/* Global classes */
/* Global classes */
.flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Button 1 */
.button-wrapper {
  margin: 1em 0;
}
.button-svg {
  fill: var(--white);
  height: calc(var(--button) - .1rem);
}
.button, .btn-secondary {
  margin: 0;
  width: 100%;
  position: relative;
  padding: 1.2em 1.8em;
  letter-spacing: .1em;
  line-height: 1.5em;
  text-align: center;
  color: rgba(237,226,209, 0.95) ;
  font-size: var(--button);
  background: var(--rainbow);
  background-size: 500%;
  border-radius: 5em;
  border: none;
  transform: scaleX(1);
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275), filter .3s cubic-bezier(.175,.885,.32,1.275), bottom .3s cubic-bezier(.175,.885,.32,1.275), background-position 3s cubic-bezier(.455,.03,.515,.955), -webkit-transform .3s cubic-bezier(.175,.885,.32,1.275), -webkit-filter .3s cubic-bezier(.175,.885,.32,1.275);
}
.button {
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275), bottom .3s cubic-bezier(.175,.885,.32,1.275), background-position 3s cubic-bezier(.455,.03,.515,.955), -webkit-transform .3s cubic-bezier(.175,.885,.32,1.275);
}
.button, .button .btn-secondary {
  background-position: 0 50%;
  bottom: 0;
}
.button .btn-secondary {
  left: 0;
  width: 100%;
  position: absolute;
  filter: blur(1rem);
  opacity: .65;
  z-index: -1;
  transform: scale3d(.85, .85, 1);
  transition: transform .3s cubic-bezier(.175,.885,.32,1.275), filter .3s cubic-bezier(.175,.885,.32,1.275), bottom .3s cubic-bezier(.175,.885,.32,1.275), background-position 3s cubic-bezier(.455,.03,.515,.955), -webkit-transform .3s cubic-bezier(.175,.885,.32,1.275), -webkit-filter .3s cubic-bezier(.175,.885,.32,1.275);
}
.button:focus {
  outline: none;
}
.button:hover {
  transform: scale3d(1.1, 1.1, 1);
  background-position: 100% 50%;
  outline: none;
  bottom: 2px;
}
.btn-secondary, .button:hover .btn-secondary {
  background-position: 100% 50%;
  filter: blur(1.6rem);
  bottom: -5px;
}
/* Ripple */
span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 600ms linear;
  background-color: rgba(255, 255, 255, .85);
}
/* Ripple Animation */
@keyframes ripple {
  to {
      transform: scale(.65);
      opacity: 0;
  }
}

.hours{
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 2%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-align: left;
  font-size: large;
  color: #333333;
  letter-spacing: 0.5px;
  line-height: 1cm;
}

table {
  border-collapse: collapse; 
  margin-left: auto;
  margin-right: auto;
}

th {
  text-align: left;
  letter-spacing: 2px;
  font-size: larger;
}

td {
  letter-spacing: 1px;
  font-size: larger;
}

tbody td {
  text-align: left;
}

tfoot th {
  text-align: left;
}

th, td {
  padding: 10px;
  border: 0.5px solid;
}

.review-placeholder{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: auto;
  align-items: center;
  justify-content: center;
  padding-bottom: 100px;
}

.menu-placeholder{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: auto;
  align-items: center;
  justify-content: center;
  padding-top: 104px;
  padding-bottom: 2px;
}

.stylistcontainer{
  padding-top: 150px;
  padding-bottom: 100px;
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: auto;
  align-items: center;
  justify-content: center;
}

.personcontainer{
  padding-bottom: 100px;
}

.headshotcontainer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.namecontainer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  line-height: 1cm;
  letter-spacing: 2px;
  color: #333333;
  font-weight: 1000;
  width: 100%;
  padding-top: 50px;
}

.borderradius{
  border-radius: 50%;
  width: 33%;
  height: 33%;
  padding-bottom: 25px;
  min-width: 300px;
}

.biocontainer{
  padding-top: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-align: left;
  letter-spacing: 0.1em;
  line-height: 1.5em;
  line-break: strict;
  color: #333333;
  font-size: 1.05em;
  font-weight: 500;
  width: 100%;
  padding-left: 20%;
  padding-right: 20%;
}

.reservebuttoncontainer{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
}

#footer{
  /*background-color:#7B3830;
  color: #EDE2D1;*/
  /*background-color:#EDE2D1;
  color: #7B3830;*/
  background-color:#7B3830;
  color: #EDE2D1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding-bottom: 25px;
  height: 10rem;
  margin: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-weight: bold;
  z-index: 2;
}

.footertitle{
  margin: auto;
  padding: 10px;
  font-size: small;
}

.footercompany{
  font-size: x-small;
}

.copyright{
  font-size: xx-small;
}

.column4{
  margin: auto;
  padding: 10px;
  font-size: x-small;
}

.address{
  font-size: x-small
}

#servicesfooter{
  background-color:#7B3830;
  color: #EDE2D1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: absolute;
  bottom: 10px;
  padding-bottom: 25px;
  width: 100%;
  height: 10rem;
  margin: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-weight: bold;
  z-index: 2;
}

.servicesfootertitle{
  margin: auto;
  padding: 10px;
  font-size: small;
}

.servicesfootercompany{
  font-size: x-small;
}

.servicescopyright{
  font-size: xx-small;
}

.servicescolumn4{
  margin: auto;
  padding: 10px;
  font-size: x-small;
}

.servicesaddress{
  font-size: x-small
}

#stylistsfooter{
  background-color:#7B3830;
  color: #EDE2D1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: absolute;
  bottom: 10px;
  padding-bottom: 25px;
  width: 100%;
  height: 10rem;
  margin: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-weight: bold;
  z-index: 2;
}

.stylistsfootertitle{
  margin: auto;
  padding: 10px;
  font-size: small;
}

.stylistsfootercompany{
  font-size: x-small;
}

.stylistscopyright{
  font-size: xx-small;
}

.stylistscolumn4{
  margin: auto;
  padding: 10px;
  font-size: x-small;
}

.stylistsaddress{
  font-size: x-small
}

img{
  max-width: 100%;
  height: auto;
}

html, body {
  max-width: 100%;
  font-size: 100%;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}