/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
* {
    width: 100%;
}
body {
    display: flex;
    flex-flow: row wrap;
    margin: 0 auto;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 1vw;
}
ul {
    padding: 0;
}
h1, h2 {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: .15vw;
}
h1 {
    font-size: 4vw;
}
.slider__slide h1 {
    font-size: 5vw;
}
.staff-section h1 {
    color: #e1cb9b;
    margin-bottom: 2vw;
}
h2 {
    color: #dfc89c;
    font-size: 2.5vw;
    margin-bottom: 1.5vw;
}
h3, .salon-artists span {
    margin: 0;
    font-size: 1vw;
    text-transform: uppercase;
    color: #212121;
}
/******************************************
/* LAYOUT
/*******************************************/

header {
   background: #212121;
}

/* Main Navigation */

.main-nav {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    height: 4vw;
    padding: 1vw 2vw;
    overflow: hidden;
}
.main-nav li {
    list-style: none;
    display: inline-block;
    font-size: .9vw;
    text-transform: uppercase;
    padding: .5vw 1vw;
}
.main-nav a, .main-nav li {
    color: #dfc89c;
    text-decoration: none;
    font-weight: 400;
}
.middle-nav {
    display: flex;
    flex-flow: row nowrap;
    text-align: center;
    padding-top: 1vw;
}
.middle-nav li::after {
    content: '';
    display: block;
    width: 0;
    margin-top: .5vw;
    height: .1vw;
    background: #dfc89c;
    transition: width .4s ease-in;
  }
.middle-nav li:hover::after {
    width: 100%;
  }
.left-nav li {
    padding: 0;
}
.left-nav img {
    height: 50%;
    width: 50%;
}
.right-nav {
   text-align: right;
}
.right-nav a {
    color: #212121;
}
.book-button {
    background: linear-gradient(45deg, #b59b75, #e1cb9b, #eed9ab, #e1cb9b, #ab8d60);
    border: .1vw solid #b59b75;
    border-radius: .15vw;
    padding: .5vw 1vw;
}
.book-button:hover {
    background-color: #191818;
    opacity: .8;
    transition: 0s;
}
.container {
    display: flex;
    flex-flow: row wrap;
}
/* Slideshow container */

.slider {
    display: block;
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}
.slider__slides {
  width: 100%;
  padding-top: 40vw;
}

/* Slide Behavior */

.slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 1.5s;
    opacity: 0;
}
.slider__slide.active {
    opacity: 1;
}

/* Slider Text */

.slider__slide div {
    position: absolute;
    color: white;
}
.heading-visit, .heading-facial, .heading-massage, .heading-relax {
    left: 4.5vw;
}
.heading-visit {
    top: 33vw;
}
.heading-facial, .heading-massage, .heading-relax {
    top: 1.5vw;
}
.text {
    top: 1vw;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .15vw;
}
.bottom-text {
    text-align: left;
    left: 15vw;
    top: 8vw;
}
/* Slider Images */

.slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider Navigation Arrows */

.slider__controls {
    position: absolute;
    height: 4vw;
    width: 3vw;
    border-radius: .5vw 0 0 .5vw;
    opacity: 1;
    cursor: pointer;
}
.slider__controls:hover {
    background-color: #333;
    opacity: .5;
    transition: 1s;
}
#nav-button--prev {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
#nav-button--prev::after,
#nav-button--next::after {
    content: "";
    position: absolute;
    border: solid white;
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: .2vw;
    width: 1vw;
    height: 1vw;
    top: 50%;
    right: 50%;
}
#nav-button--next {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
#nav-button--next::after{
    transform: translate(25%, -50%) rotate(-45deg);
}

#nav-button--prev::after {
    transform: translate(75%, -50%) rotate(135deg);
}
/* Slider Nav Dots */

.slider__nav {
    background: #212121;
    text-align: center;
    padding: 1vw 0;
}
.slider__navlink {
    display: inline-block;
    height: 1vw;
    width: 1vw;
    border-radius: 50%;
    border: 1px #eee1cb solid;
    background-color: #dfc89c;
    margin: 0 10px 0 10px;
    cursor: pointer;
}
.slider__navlink.active {
    background-color: #eee1cb;
    border: 1px #dfc89c solid;
}

/* Services Offered */

.services {
    display: flex;
    flex-flow: row nowrap;
    text-align: center;
    justify-content: space-around;
    color: #dfc89c;
    background: #212121;
    padding: 4vw 0 6vw 0;
}
.services-box {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    max-width: 30vw;
    font-weight: normal;
}
.services span {
    text-transform: uppercase;
    letter-spacing: .09vw;
}
.services-box img {
    width: 2vw;
    padding-bottom: 1vw;
}

/* About Us */

.about {
    background: #f7f3ea;
    color: #212121;
    padding: 6vw 8vw;
    gap: 2vw;
}
.about-us-container h2 {
    font-weight: 400;
    color: #ab8d60;
}
.about p {
    margin: 0;
    font-size: 1.25vw;
    padding-bottom: 1vw;
}

/* Staff */

.staff-section {
    display: flex;
    flex-flow: row wrap;
    padding: 6vw 8vw 16vw 8vw;
    background: #212121;
}
.staff-section h1::after {
    content: '';
    display: block;
    margin: .5vw 0 2vw 0;
    height: .1vw;
    background: #dfc89c;;
}
.staff-section h2::after {
    content: '';
    display: block;
    width: 3vw;
    margin: .5vw 0 2vw 0;
    height: .1vw;
    background: #dfc89c;;
}
.staff-profiles {
    display: flex;
    flex-flow: row wrap;
    gap: 15vw;
}
.stylists, .health-wellness {
    display: flex;
    flex-flow: row wrap;
    height: 40vw;
    width: 100vw;
}
.stylist-profiles, .wellness-profiles {
    display: flex;
    flex-flow: nowrap;
    gap: 2vw;
}
.staff-info {
    background: linear-gradient(45deg, #b59b75, #e1cb9b, #eed9ab, #e1cb9b, #ab8d60);
    margin-top: -2vw;
    margin-left: 3.5vw;
    text-align: center;
    padding: .75vw 2.5vw;
    position: absolute;
    width: 20vw;
}
.staff-box > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
}

/* Offer */

.offer {
    display: flex;
    height: 50vw;
    padding: 8vw;
    align-items: center;
    justify-content: flex-start;
    background: #f7f3ea;
    overflow: hidden;
    color: white;
    text-transform: uppercase;
}
.offer-img-container {
    width: 100%;
    height: 100%;
    align-self: center;
    overflow: hidden;
}
.offer-img {
    object-fit: cover;
}
.offer-content {
    position: absolute;
    padding: 5vw;
    width: 40vw;
}
.offer span, .offer p, .offer a {
    position: relative;
}
.offer span {
    padding: 0;
    font-size: 1vw;
}
.offer p {
    margin: 0;
    padding-bottom: 1.5vw;
    font-size: 2vw;
    font-weight: 300;
}
.offer p > span {
    font-weight: bold;
    font-size: 3vw;
}
.offer a {
    background: #212121;
    color: #dfc89c;
    padding: .5vw 1vw;
}

/* LookBook */
.lookbook {
    display: flex;
    flex-flow: row wrap;
    background: #212121;
    padding-bottom: 6vw;
}
.lookbook h1 {
    color: #dfc89c;;
    margin: 6vw 8vw 1vw 8vw;
}
.lookbook h1::after {
    content: '';
    display: block;
    width: 3vw;
    margin: .5vw 0;
    height: .2vw;
    background: #dfc89c;;
}
.lookbook-gallery {
    display: grid;
    margin: 0 8vw;
    grid-template-columns: (4, 1fr);
    grid-auto-rows: (5, 1fr);
    grid-gap: 1.5vw;
    padding: 4vw;
    background: #dfc89c;
}
.gallery__item {
    margin: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px;
}
.gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s ease-in-out;
}
.gallery__img:hover {
    transform: scale(1.1);
}
.gallery__item--1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.gallery__item--2 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}
.gallery__item--3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.gallery__item--4 {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}
.gallery__item--5 {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}
.gallery__item--6 {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
}
.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(24, 24, 24, 0.8);
    animation: zoom 0.3s ease-in-out;
}
@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
.modal img {
    width: 50%;
    object-fit: cover;
}
.closeBtn {
    color: rgba(255, 255, 255, 0.87);
    font-size: 2vw;
    position: absolute;
    top: 2vw;
    left: 93vw;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.closeBtn:hover {
    color: rgb(255, 255, 255);
}