body{
  height          : 100%;
  margin          : 0;
  padding         : 0;
  font-family     : 'Open Sans', sans-serif;
  background-color: #F2E9E0;
  color           : #201916;
}

html{
  height : 100%;
  margin : 0;
  padding: 0;
}

.anchor{
  padding-top: 70px;
}

#facebook{
  position: fixed;
  bottom: 0px;
  right: 0px;
}

/********
Navigation
********/

.navbar{
  padding         : 8px;
  font-size       : 1.45em;
  background-color: #1D140C;
  border          : none;
  font-family     : 'Baloo Paaji';
}

.navbar-nav>li{
  padding: 0 15px;
}

.dropdown-menu{
  padding: 0;
  border : none;
}

.navbar-left>li{
  padding: 0;
}

#en, #lt {
  display                    : inline-block;
  vertical-align             : middle;
  -webkit-transform          : perspective(1px) translateZ(0);
  transform                  : perspective(1px) translateZ(0);
  box-shadow                 : 0 0 1px transparent;
  position                   : relative;
  -webkit-transition-duration: 0.3s;
  transition-duration        : 0.3s;
  -webkit-transition-property: transform;
  transition-property        : transform;
}

#en:before, #lt:before {
  pointer-events             : none;
  position                   : absolute;
  z-index                    : -1;
  content                    : '';
  top                        : 100%;
  left                       : 5%;
  height                     : 10px;
  width                      : 90%;
  opacity                    : 0;
  background                 : -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  background                 : radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration        : 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property        : transform, opacity;,
}

#en:hover, #en:focus, #en:active,
#lt:hover, #lt:focus, #lt:active {
  -webkit-transform: translateY(-5px);
  transform        : translateY(-5px);  
}

#en:hover:before, #en:focus:before, #en:active:before,
#en:hover:before, #lt:focus:before, #lt:active:before {
  opacity          : 1;
  -webkit-transform: translateY(5px);
  transform        : translateY(5px);
}

/********
Navigation Typography
********/
.navbar-inverse .navbar-nav>li>a {
  display                    : inline-block;
  vertical-align             : middle;
  -webkit-transform          : perspective(1px) translateZ(0);
  transform                  : perspective(1px) translateZ(0);
  box-shadow                 : 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration        : 0.3s;
  -webkit-transition-property: transform;
  transition-property        : transform;
  color                      : #D79B46;
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:active {
  -webkit-transform: scale(1.1);
  transform        : scale(1.1);
  color            : #DECCAE; 
}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{
  background-color: #1D140C;
}

.dropdown-menu>li>a{
  background-color: #FFFFFF;
  color           : #191919;
}

.dropdown-menu>li>a:hover{
  color           : #9F191A;
  background-color: #FFFFFF;
}

.navbar-inverse .navbar-toggle{
  border-color    : #F3D2B4;
  background-color: #643D23;
}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover{
  background-color: #643D23;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
  border-color: #F3D2B4;
}

/********
Index.html
********/
#home{
  background-image: none;
  font-family: 'Baloo Bhaina', sans-serif;
}

.home-left-column{
  padding-left: 80px;
}

.home-left-column h2{
  color: #D79B46;
  font-size: 2.1em
}

.home-left-column li{
  font-size: 1.6em;
}

.home-right-column{
  padding-right: 40px;
}

.welcome h1{
  font-size     : 2.4em;
  text-align    : center;
  padding       : 50px 0 20px 0;
  margin        : 0 auto;
  text-transform: uppercase;
}

#myCarousel{
  width : 68%;
  margin: 0 auto;
}

/********
Services.html
********/
#services{
  background-image: none;
}

.bar{
  margin : 0 0 0 3px;
  padding: 0;
}

.service-navigation{
  left: 30px;
    padding              : 10px 0;
    float                : left;
    position             : fixed;
    width                : 160px;
    height               : auto;
    border               : 2px solid #7F7775;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    -o-border-radius     : 10px;
    border-radius        : 10px;
    background-color     : #85BBAE;
    margin               : 150px auto 0 auto;
    text-align           : center;
    filter               : alpha(opacity=70); /* internet explorer */
    -khtml-opacity       : 0.7;      /* khtml, old safari */
    -moz-opacity         : 0.7;       /* mozilla, netscape */
    opacity              : 0.7;           /* fx, safari, opera */
}

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

.service-navigation p {
  width                      : 100%;
  display                    : inline-block;
  vertical-align             : middle;
  -webkit-transform          : perspective(1px) translateZ(0);
  transform                  : perspective(1px) translateZ(0);
  box-shadow                 : 0 0 1px transparent;
  position                   : relative;
  background                 : #85BBAE;
  -webkit-transition-property: color;
  transition-property        : color;
  -webkit-transition-duration: 0.4s;
  transition-duration        : 0.4s;
}
.service-navigation p:before {
  content                           : "";
  position                          : absolute;
  z-index                           : -1;
  top                               : 0;
  bottom                            : 0;
  left                              : 0;
  right                             : 0;
  background                        : #85BBAE;
  -webkit-transform                 : scaleY(1);
  transform                         : scaleY(1);
  -webkit-transform-origin          : 50%;
  transform-origin                  : 50%;
  -webkit-transition-property       : transform;
  transition-property               : transform;
  -webkit-transition-duration       : 0.4s;
  transition-duration               : 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function        : ease-out;
}
.service-navigation p:hover, .service-navigation p:focus, .service-navigation p:active {
  color           : #F2E9E0;
  background-color: #558D8A;
}
.service-navigation p:hover:before, .service-navigation p:focus:before, .service-navigation p:active:before {
  -webkit-transform: scaleY(0);
  transform        : scaleY(0);
}

.service-list{
  padding    : 20px 0 20px 0;
  text-align : center;
}

.service-list .container{
  padding-left: 80px;
}

.service-list p{
  line-height : 30px;
  padding-left: 65px;
}

.img-responsive{
  margin: 0 auto;
  width : 400px;
  height: 266px;
}

#manicure-pedicure{
  padding-bottom: 85px;
}

.service-anchor{
  padding: 90px 0 30px 0;
}

.service-anchor h1, h3{
  padding: 5px 0;
}

#laser-hair-removal ul{
  padding-left: 60px;
}

#spray-tan ul{
  padding-left: 60px;
}

hr{
  height    : 10px;
  border    : 0;
  box-shadow: 0 10px 10px -10px #797470 inset;
  padding   : 0;
  margin    : 0;
}

/********
Services Typography
********/
.service-list h3, h1{
  font-family: 'Baloo Bhaina', sans-serif;
}

.service-list p{
  text-align    : left;
  font-size     : 1.2em;
  text-indent   : 50px;
  margin        : 0 20px;
  letter-spacing: 1px;
}

.service-list li{
  text-align    : left;
  font-size     : 1.2em;
  letter-spacing: 1px;
  margin        : 0 30px;
}

/********
Price_list.html
********/
#price-list{
  background-image: url("../img/bg2.jpg");
  background-size : cover;
}

.wrapper {
  max-height: 650px;
  overflow  : auto;
}

.price-list-header h1{
  text-align : center;
  font-size  : 2.8em;
  padding    : 30px 0;
  font-weight: bold;
  font-family: 'Baloo Bhaina', sans-serif;
}

#accordion{
  width         : 50%;
  padding       : 0;
  margin        : 0 auto;
  padding-bottom: 30px;
  text-align    : left;
}

#accordion p{
  padding  : 3px 0;
  font-size: 1.2em;
}

#collapse6 h4{
  line-height   : 30px;
  letter-spacing: 0.3px;
}

.panel-title a{
  color          : #30140f;
  text-decoration: none;
}

.panel-body{
  color: #202721;
}

/********
Special-offers.html
********/
#special-offers{
  background-image: url("../img/bg2.jpg");
  background-size : cover;
}

.offers{
  padding-top: 80px;
}

#special-offers{
  text-align : center;
  font-family: 'Baloo Bhaina', sans-serif;
}

.offering-now{
  padding: 50px 0 0 0;
}

.offering-now p{
  font-size: 1.5em;
}

/********
Contacts.html
********/
#contacts{
  background-image: none;
  padding-top: 30px;
}

.contact h1{
  padding-bottom: 15px;
}

form{
  padding-top: 15px;
}

.time{
  padding-top: 5px;
}

#hours{
  padding-top: 10px;
}

/********
Contacts Typography
********/

.form-group{
  width      : 70%;
  font-family: Verdana, serif;
}

.phone-address p{
  font-size: 1.2em;
}

/********
Media Query
********/
@media (min-width: 320px) and (max-width: 425px){
  .service-list p{
    font-size: 1.1em;
  }
  .service-list li{
    font-size: 1.1em;
  }
  .service-list h1, h3{
    font-size: 2em;
  }
  #massages h1{
    font-size: 3em;
  }
  .img-responsive{
    padding: 0 10px;
  }
}


@media (min-width: 320px) and (max-width: 768px){
  .welcome h1{
    font-size: 1.8em;
  }
  .home-right-column{
    padding: 0;
  }
  .service-list .container{
  padding: 0;
  }
  .service-list p{
  padding: 0;
  }
  .panel-body p{
  height: 45px;
  }
  #accordion p{
    font-size: 1em;
  }
  .service-list h1{
    padding-top: 50px;
  }
}

@media (max-width: 360px){
  #accordion p {
    font-size: 0.8em;
    height: 50px;
  }
  #accordion h4{
    font-size: 1em;
  }
}

@media (min-width: 425px) and (max-width: 768px){
  #accordion p{
    font-size: 1.1em;
  }
}

@media (max-width: 768px){
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a{
    color: #6A453C;
  }
  #accordion{
    width: 100%;
  }
  .offers h1, h2{
    font-size: 2em;
  }
  .offers p{
    font-size: 1.3em;
  }
  #facebook{
    bottom: 0px;
    right: 0px;
    position: relative;
    float: right;
    width: 140px;
    margin-top: 20px; 
  }
  .navbar{
    text-align: center;
  }
  .service-navigation{
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  .service-list h1{
    font-size: 2.1em;
  }
  .service-list h3{
    font-size: 1.7em;
  }
  .navbar{
    font-size: 1.1em;
  }
  .navbar-nav>li{
  padding: 0;
  }
  #accordion{
    width: 80%;
  }
  #accordion p{
    font-size: 1.1em;
  }
  .welcome h1{
    font-size  : 1.85em;
    text-align : center;
    padding-top: 100px;
  }
  #myCarousel{
    width : 70%;
    height: auto;
  }
  .home-left-column li{
    font-size: 1.3em;
  }
  .home-left-column h2{
    font-size: 1.5em;
  }
  .service-list .container{
    padding-left: 110px;
  }
}