body {
  font-family: 'Montserrat', sans-serif !important;
  color:#58585a !important;
  font-size:1.15em !important;
}

body:after{
 display:none;
 content: url(images/facebook-icon-brown.svg);
}

body:before{
 display:none;
 content: url(images/facebook-icon-blue.svg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Serif Pro', serif !important;
  color:#bea085 !important;
}

body .border-dark {
  border-color:#5b4837 !important;
}

#hr-one {
  width:86%;
}

#hr-two {
  width:93%;
}

h1.heading-border-blue, h1.heading-border-white {
  position:relative;
}

#header-interior {
  background:#eadcd1;
}

.heading-border-blue:after {
  content:"";
  background:url("images/underline-blue.svg");
  background-size:cover;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:50px;
  height:7px;
}

.heading-border-white:after {
  content:"";
  background:url("images/underline-white.svg");
  background-size:cover;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:50px;
  height:7px;
}

.navbar ul.nav li a#facebook-icon-header:hover:after {
  display:none;
}

.navbar a#facebook-icon-header {
  width:36px;
  height:36px;
}

.navbar a#facebook-icon-header {
  background:url('images/facebook-icon-grey.svg') no-repeat;
  background-size:16px 16px;
  background-position:50% 50%;
  border:1px solid #58585a;
  border-radius:50%;
}

.navbar a#facebook-icon-header:hover {
  background:url('images/facebook-icon-blue.svg') no-repeat;
  background-size:16px 16px;
  background-position:50% 50%;
  border-color:#87b8b1;
}

.nav {
  font-family:'Source Serif Pro', serif !important;
  font-size: 0.9em;
  font-weight:bold;
}

.nav a {
  position: relative;
  color:#58585a !important;
  font-size:0.8rem;
}

.nav a:hover:after {
  content:"";
  background:url("images/underline-blue.svg");
  background-size:cover;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0px;
  width:45px;
  height:7px;
}

.nav li a:hover {
  color:#87b8b1 !important;
}

.nav #book-online {
  font-size:1.3em;
}

.nav #book-online a {
  font-size:1rem;
}

.nav a {
  padding:.5rem 0.7rem;
}

.nav #book-online a {
  padding-top:4px;
}

.navbar ul.nav li a#facebook-icon-header:hover img {
  content:url('images/facebook-nav-icon-b.png') !important;
}

#header {
  background:url("images/header-background.jpg");
  background-size:cover;
  background-position:50% 50%;
  height:100vh;
  max-height:800px;
}

#appointments img {
  width:100%;
}

#about img {
  width:100%;
  max-width:450px;
}

#recharge-massage-studio-logo {
  display: inline-block;
  text-align: center;
  width:100%;
  margin-top:200px;
}

#recharge-massage-studio-logo img {
  width:80%;
  max-width: 440px;
  margin:0 auto;
  display:inline-block;
}

.nav .nav-item img {
  max-width:40px;
}

#about {
  padding-top:100px;
  padding-bottom:150px;
}

#services {
  background:url("images/services-header.jpg") no-repeat;
  background-size:80% auto;
  background-position:top center;
  padding-top:27%;
  color:#5b4837;
}

#services .container {
  width:95%;
  max-width:845px;
  background:#bea085;
}

a#book-now-button {
  background:#87b8b1;
  color:#fff;
  padding:8px 40px;
  border-radius:30px;
}

a#book-now-button:hover {
  background:#bea085;
  text-decoration: none;
}

#mobile-massage {
  background:#d3b79f !important;
}

#get-in-touch {
  background:#c5a78d;
  padding-top:125px;
  padding-bottom:75px;
  color:#624e3d;
}

#get-in-touch a {
  color:#624e3d;
}

#get-in-touch a:hover, #get-in-touch button:hover {
  background:#87b8b1 !important;
  color:#fff !important;
  text-decoration: none;
  border-color:#87b8b1 !important;
}

#get-in-touch form input, #get-in-touch form textarea {
  background: transparent;
  border-radius: 0;
  border:none;
  border-bottom:1px solid #fff;
}

#get-in-touch form input::placeholder, #get-in-touch form textarea::placeholder {
  color:#fff;
}

#get-in-touch input::-ms-input-placeholder {
  color:#fff !important;
}

#get-in-touch textarea::-ms-input-placeholder {
  color:#fff !important;
}

#get-in-touch h1 {
  color:#fff !important;
}

#get-in-touch table {
  font-size: 0.85em;
}

.footer-button-links {
  border:1px solid #624e3d !important;
  border-radius:30px !important;
  padding:5px 40px !important;
  color:#624e3d !important;
  background:transparent !important;
}

.photos {
  display: -ms-flexbox!important;
  display: flex!important;
}

.photos .photo {
    width: 20%;
}

.photos .photo img {
    width: 100%;
}

#footer {
  background:#90c0b9;
  color:#fff;
  min-height:150px;
}

#footer a {
  color:#fff;
}

#footer img {
  max-width:40px;
}

#footer a#facebook-footer {
  width:36px;
  height:36px;
  background:url('images/facebook-icon-white.svg') no-repeat;
  background-size:16px 16px;
  background-position:50% 50%;
  border:1px solid #fff;
  border-radius:50%;
}

#footer a#facebook-footer:hover {
  background:url('images/facebook-icon-brown.svg') no-repeat;
  background-size:16px 16px;
  background-position:50% 50%;
  border-color:#8a715b;
}

#footer #facebook-footer:hover img {
  content:url('images/facebook-nav-icon-br.png');
}

div.square-aspect {
  width:71%;
  padding-top:71%;
  position:relative;
  margin:0 auto;
}

div.square-aspect:after {
  content:"";
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  border: 1px solid #c6ac95;
  transform: rotate(45deg);
}

div.square-aspect:hover {
  z-index: 1000;
}

div.square-aspect:hover:after {
  background:#f1f7f6;
}

div.square-aspect:hover span {
  display:inline-block;
}

div.square-aspect-int {
  position: absolute;
  text-align: center;
  width:100%;
  top:50%;
  transform: translateY(-50%);
}

div.square-aspect-int span {

  background:#bea085;
  font-size:0.8rem;
  padding:3px 23px;
  border-radius:14px;
}

div.square-aspect-int span a {
  color:#fff;
}

div.square-aspect-int span a:hover {
  text-decoration: none;
}

#form-sent-confirmation, #form-sent-failed {
  position: fixed;
  width:100%;
  max-width:400px;
  top:10%;
  left:50%;
  text-align:center;
  padding:20px;
  border-radius:10px;
  transform:translateX(-50%);
  background:#fff;
  box-shadow:0px 0px 10px #000;
}

.form-sent-hidden {
  display:none;
}

#min-height-footer {
  min-height:calc(100vh - 266px);
}

.popup-window {
  position: fixed;
  top:0;
  right:0;
  bottom:0;
  width:50%;
  background:#f1f7f6;
  z-index: 2000;
  font-size:0.9rem;
}

#esthetics-popup {
  width:calc(100% - 50px) !important;
}

#esthetics-popup table {
  width:100%;
  max-width:275px;
}

.popup-window .close {
  cursor: pointer;
  float:none !important;
}

.ct {
  color:#bea085;
  padding-left:10px;
}

.bbt {
  border-bottom: 2px solid #d4d9d8;
}

@media only screen and (max-width: 1200px) {

  #get-in-touch table {
    font-size:0.8em;
  }

  #services .container {

  }

  .popup-window {
    width:85%;
  }

}

@media only screen and (max-width: 1150px) {

  #header {
    max-height:650px;
  }

  #recharge-massage-studio-logo {
    margin-top:130px;
  }

}

@media only screen and (max-width: 992px) {

  #get-in-touch table {
    font-size:0.6em;
  }

  #services .container {
    max-width:685px;
  }

}

@media only screen and (max-width: 767px) {

  #get-in-touch table {
    font-size:1em;
  }

  #ajax-contact button {
    float:left !important;
  }

  body {
    font-size:1em !important;
  }

  h1 {
    font-size:2em !important;
  }

  #get-in-touch .row .col-12.pl-5 {
    padding-left:15px !important;
  }
  
  .photos {
      flex-wrap: wrap;
  }
  
  .photos .photo {
    width: 50%;
  }

  #footer {
    font-size:0.8em;
  }

  .popup-window {
    width:calc(100% - 45px);
  }

}

@media only screen and (max-width: 750px) {

  #header {
    max-height:550px;
  }

  #recharge-massage-studio-logo {
    margin-top:100px;
  }

}

@media only screen and (max-width: 480px) {

  #header {
    max-height:450px;
  }

  #recharge-massage-studio-logo {
    margin-top:50px;
  }

  #appointments .container {
    margin-top:0 !important;
  }

  #about {
    padding-top:0;
    padding-bottom:60px;
  }

  #get-in-touch {
    padding-top:60px;
  }

  #header-container {
    text-align: center;
  }

  #mobile-massage #mobile-first-row .col:nth-child(2), #mobile-massage #mobile-first-row .col:nth-child(4), #mobile-massage #mobile-second-row .col:nth-child(1), #mobile-massage #mobile-second-row .col:nth-child(3) {
    display: none;
  }

}

@media only screen and (max-width: 575px) {

  .navbar {
    padding:0 !important;
  }

  .navbar button:focus {
    outline:none;
  }

  .navbar ul.nav, #header-interior ul.nav {
    background:#58585A;
    justify-content:left !important;
  }

  .navbar ul.nav li, #header-interior ul.nav li {
    width:50%;
    text-align:left;
    padding-left:6%;
  }

  #header-interior ul.nav li a {
    color:#fff !important;
  }

  #header-interior ul.nav li a:hover:after {
    display: none;
  }

  .nav #book-online a {
    font-size:0.8rem;
  }





  .navbar ul.nav li a {
    color:#fff !important;
  }

  .navbar ul.nav li a:hover:after {
    display:none;
  }

  .navbar ul.nav #book-online {
    font-size:inherit !important;
  }

  .navbar ul.nav #book-online a {
    padding-top:0.5rem !important;
  }

  .navbar button {
    margin-bottom:10px;
  }

  .navbar ul.nav li a#facebook-icon-header img {
    content:url('images/facebook-nav-icon-w.png');
  }

  .navbar ul.nav li a#facebook-icon-header:hover img {
    content:url('images/facebook-nav-icon-w.png');
  }

}

@media only screen and (max-width: 440px) {

  #get-in-touch table {
    font-size:0.8em;
  }

  #get-in-touch form input, #get-in-touch form textarea {
    font-size:0.8em;
  }
  
  .photos .photo {
    width: 100%;
  }

}

@media only screen and (max-width: 350px) {

  #get-in-touch table {
    font-size:0.7em;
  }

}