// Clearfix
.cf {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// Border box
*, *:before, *:after {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.slick-dots {
  @extend .cf;
  
  display: none !important;
  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 3px;
  li {
    cursor: pointer;
    float: left;
    width: 33.3%;
    background: #000;
    padding: 0;
    border-right: 1px solid #fff;
    
    &:last-child {
      border: none;
    }
    
    &, & button {
      outline: none;
    }
    
    button {
      background: #99B386;
      border: none;
      width: 0px;
      height: 10px;
      padding: 0;
      cursor: pointer;
      display: block;
    }
  }
}

.hero-slider .img--holder{
  background-position: bottom center;
  transform: scale(1.1) rotate(0.1deg);
  transition: transform 8s linear;
}
.hero-slider .slide-init .img--holder{
  transform: scale(1.1) rotate(0.1deg) !important;
  transition: transform 0s linear;
}
.slick-active .img--holder {
  transform: scale(1) rotate(0.1deg);
}
.slick-slide .img--holder {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.slick-slide.office-photo .img--holder {
  background-position: bottom center;
}

.hero-slider .slick-arrow{
  position:absolute;
  top:50%;
  width: 45px;
  height: 45px;
  background: rgba(0,0,0,.20);
  border: 0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#FFF;
  z-index:5;
  transition: background 0.1s;
}
.hero-slider .slick-arrow:focus {outline:0;}
.hero-slider .slick-arrow:hover{
  display: block;
  background: rgba(0,0,0,.60);
  z-index: 99;
}
.hero-slider .NextArrow{
  right:0px;
}
.hero-slider .PrevArrow{
  left:0px;
}
.hero-slider .NextArrow:before{content:'\f105';}
.hero-slider .PrevArrow:before{content:'\f104';}

.hero-slider .text--holder{
  position: absolute;
  display: inline-block;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  padding: 0 0 50px 0;
  
  font-family: garamond, georgia;
  font-size: 38px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
  text-align: center
}
.hero-slider .text--holder h2{
  font-family: garamond, georgia;
  font-size: 38px;
}
.hero-slider .text--holder p{
  font-family: garamond, georgia;
  font-size: 28px;
}