* { box-sizing: border-box; font-family: "Gotham-Book", sans-serif;  }

@font-face {
  font-family: 'Gotham-Book';
  src: url('../fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),  url('../fonts/Gotham-Book.otf')  format('opentype'),
	     url('../fonts/Gotham-Book.woff') format('woff'), url('../fonts/Gotham-Book.ttf')  format('truetype'), url('../fonts/Gotham-Book.svg#Gotham-Book') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham-Medium';
  src: url('../fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),  url('../fonts/Gotham-Medium.otf')  format('opentype'),
	     url('../fonts/Gotham-Medium.woff') format('woff'), url('../fonts/Gotham-Medium.ttf')  format('truetype'), url('../fonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Gotham-Bold';
  src: url('../fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/Gotham-Bold.otf')  format('opentype'),
	     url('../fonts/Gotham-Bold.woff') format('woff'), url('../fonts/Gotham-Bold.ttf')  format('truetype'), url('../fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HalloSans';
  src: url('../fonts/HalloSans.eot?#iefix') format('embedded-opentype'),  url('../fonts/HalloSans.woff') format('woff'), url('../fonts/HalloSans.ttf')  format('truetype'), url('../fonts/HalloSans.svg#HalloSans') format('svg');
  font-weight: normal;
  font-style: normal;
}
img {max-width: 100%;}
figure {text-align: center;}
ul { padding: 0; margin: 0; list-style: none; }
.cntr {text-align: center;}
.mainWrap {top: 0; padding-left: 15px; padding-right: 15px; z-index: 9999;   position: fixed; width: 100%; -webkit-transition: all 0.3s;
  transition: all 0.3s; }
header.navDiv {background: #ccc;}
.navbar-default { background: #f9f9f9; margin: 0;  }
.appntBtn { background:none; text-transform: uppercase; padding: 20px 10px; margin: 25px 20px; font-size: 18px; font-weight: 600; color: #eacf84; display: inline-block; }
.sticky { opacity: 1; top: 0px;}
/*.active01 { border-bottom: 2px solid #eacf84; }*/
.hero {background: url('../img/salon-hero.jpg') no-repeat fixed center center; background-size: cover; min-height: 900px; position: relative;}
.logoDiv {position: absolute; width: 100%; margin: 0 auto; top: 40%; text-align: center; }
.logoDiv > h1 {font-size: 150px; color: #fff; text-align: center; text-shadow: 2px 2px #eacf84; font-family: 'HalloSans'; }
.logoDiv > h4 {color:#eacf84; text-transform: uppercase; font-family: 'Gotham-Medium'; font-size: 20px; }
.logoDiv > p > a { color: #fff; margin-top: 20px; display: inline-block;}
.services, .artists, .contact { margin-top: 60px;}
.otherServ > h3 {line-height: 32px;}
.otherServ > h3 > span {font-family:'Gotham-Medium'; border-bottom: 2px solid #eacf84; padding: 5px 0;  }

.artists > div > h1 {margin-top: 60px;}
h1.page-title { text-align: center; text-transform: uppercase; letter-spacing: 6px; margin-top: 60px; font-family: 'Gotham-Bold'; }
.services > figure, .artists > div > figure {text-align: center; margin: 20px 0 20px 0; }
.services > p, .contact > p { margin: 15px 0; }

.s1 {margin: 25px 0;}
.s2 {}
.s2 > ul {text-align: center; }
.s2 > ul > li { display: inline-block; margin: 0 100px;}
.s2 > ul > li > figure > figcaption, .s1 > ul > li > figure > figcaption {color: #333; font-size: 20px; font-family: 'Gotham-Medium'; line-height: 2.5em; text-transform: uppercase;}
.servBtn {display: inline-block; background:#eacf84; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; color: #fff; font-size: 16px; text-transform: uppercase; padding: 20px;border-radius: 45px; }
.servBtn:hover { box-shadow: 2px 5px 16px #eacf84; }

.artistBg {background: #f5f5f5; width: 100%;}
.artistInfo {margin: 60px 0;}
.artistInfo > ul { display: table; margin: 0 auto; }
.artistsDet {position: relative; cursor: pointer; }
.artist1 { position: absolute; width: 100%; height: 100%; top: 0; text-align: center; background:rgba(234,207,132,.5); text-align:center; padding:45px 0 66px 0; opacity:0; -webkit-transition: opacity .25s ease-in ;-moz-transition: opacity .25s ease-in; }
.artistsDet:hover .artist1 {opacity: 1;}
.artist1 > ul {position: absolute; bottom: 20px; color: #fff; }
.artist1 > ul > li > p {padding: 0 15px;  font-family: 'Gotham-Medium'; }
.artist1 > ul > li > h3 {text-transform: uppercase; color: #fff; font-family: 'Gotham-Bold'; }
.lineD {width: 100px; height: 2px; background: #fff; margin: 0 auto; }
figure.sIcon {margin: 10px 0;}
figure.sIcon > a > img {margin: 0 10px; }

.testimBg { width: 100%; height: 450px; float: left; background: url('../img/testimonial-bg.jpg') no-repeat; background-size: cover; }
.testimBg > h1.page-title {color: #fff; }

.salonContact {margin: 60px 0; }
.salonContact > ul > li {line-height: 24px; margin-bottom: 10px;}
.salonContact > ul > li > strong {text-transform: uppercase; color: #333;  font-family: 'Gotham-Medium'; }

.footer {background: #222; color: #fff; }
.footerD1 {text-align:left;}
.footerD1 > ul > li {display: inline-block; margin: 25px 10px; vertical-align: middle; }
.footerD2 {text-align: right;}
.footerD2 > span {color: #666; font-size: 14px; }
.footerD2 > span > a { color: #666; text-decoration: underline; }
.footerD2 > span, .footerD3 > span {margin: 25px 0;  display: inline-block; }
.footerD3 > span {color: #fff;}



.allServices { display: none; position: absolute; height: 500px; background: rgba(0,0,0,0.6);}

.vistSalon {margin: 60px 0;}
.mouse {
  display: block;
  margin: 0 auto;
  width: 26px;
  height: 46px;
  border-radius: 13px;
  border: 2px solid #eacf84;
  position: absolute;
  bottom: 40px;
  position: absolute;
  left: 50%;
  margin-left: -26px;
}
.mouse span {
  display: block;
  margin: 6px auto;
  width: 2px;
  height: 2px;
  border-radius: 4px;
  background: #e8f380;
  border: 1px solid transparent;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: scroll;
  animation-name: scroll;
}
@-webkit-keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes scroll {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.carousel-caption > strong {text-transform: uppercase; }
/*display: flex;  align-items: center;   justify-content: center;*/

@media only screen and (min-width:768px) {
    
    
} 

@media only screen and (min-width:320px) and (max-width:640px) {
    
    .hero { min-height:  640px; }
    .mouse {display: none; }
    .footer {text-align: center; }
    .container-fluid, .mainWrap { padding-left: 0; padding-right: 0; }

    .navbar-toggle { margin-top: 25px; }
    .appntBtn { padding: 0; margin: 30px 10px; }
    .s2 > ul > li { margin: 25px 0; }
    .artist1 > ul > li.artAbout {visibility: hidden;}
    .artistInfo > ul > li { margin: 15px 0; }
    .footerD1, .footerD2 {text-align: center;}
    .logoDiv > h1 {font-size: 90px;}
} 

@media only screen and (max-width:320px) {
    
    h1.page-title {font-size: 32px; letter-spacing: 3px;}
    .logoDiv > h1 {font-size: 90px;}
    
}

@media only screen and (min-width:640px) and (max-width:767px) {
    
    .footerD1, .footerD2 {text-align: center;}
    
}