#features {
  background-image: url("../images/features/background.jpg");
}

/* Title */

#features > .title {
  position: absolute;
  left: 100px;
  top: 100px;
}

/* Buttons */

#features > .buttons > .home {
  left: 40px;
  top: 20px;
}

#features > .buttons > .resume {
  right: 40px;
  top: 20px;
  -webkit-transition: opacity 0.25s;
}

#features > .buttons > .resume.tk-inactive {
  opacity: 0;
}

/* Tabs */

#features .tabs {
  position: absolute;
  left: 30px;
  top: 180px;
}

#features .tabs div {
  display: inline-block;
  position: relative;
  width: 380px;
  height: 87px;
  margin-left: 20px;
}

/* force image fader in highlight mode for the selected tab */
#features .tabs div.tk-tab-selected > img:nth-of-type(2) {
  opacity: 0.5;
}

/* force image fader in highlight mode for the selected tab */
#features .tabs div.tk-highlighted > img:nth-of-type(2) {
  opacity: 1;
}

/* Sliding View */

#features .sliding-view {
  position: absolute;
  left: 0px;
  top: 280px;
  width: 1280px;
  height: 338px;
  overflow: hidden;
  z-index: 0;
}

#features .sliding-view-element {
  position: absolute;
  left: 340px;
  width: 600px;
  height: 338px;
  -webkit-transition: -webkit-transform 500ms, opacity 250ms;
  cursor: pointer;
}

#features .sliding-view-element > img {
  position: absolute;
}

#features .sliding-view-element > img:nth-of-type(2) {
  left: 250px;
  top: 180px;
  opacity: 0;
  -webkit-transition: opacity 250ms;
}

#features .sliding-view-element.tk-highlighted > img:nth-child(2),
#features .sliding-view-element:hover > img:nth-child(2) {
  opacity: 1;
}

#features .sliding-view-element > img:nth-of-type(3) {
  left: 140px;
  top: 270px;
  opacity: 0;
  -webkit-transition: opacity 250ms;
}

#features .sliding-view-element-focused > img:nth-child(3) {
  opacity: 1;
}

#features .sliding-view-element-after > div,
#features .sliding-view-element-after > img:nth-of-type(2),
#features .sliding-view-element-after > img:nth-of-type(3) {
  opacity: 0;
}

#features .sliding-view-element-hidden {
  display: none;
}

/* ensure we set the image fader in hover mode when we're highlighted */
#features .sliding-view-element-focused.tk-highlighted .image-fader > img:nth-of-type(2) {
  opacity: 1;
}

/* Page Control */

#features .page-control {
  position: absolute;
  left: 550px;
  top: 645px;
  cursor: pointer;
}

#features .page-control > div {
  position: absolute;
  width: 56px;
  height: 46px;
}

#features .page-control-page-element {
  background: url('../images/interface/contentDot.png') no-repeat top left;
}

#features .page-control-indicator-element {
  background: url('../images/interface/contentDotOver.png') no-repeat top left;
}

/* Arrows */

#features .left-arrow,
#features .right-arrow {
  top: 630px;
  -webkit-transition: opacity 500ms;
}

#features .left-arrow {
  left: 460px;
}

#features .right-arrow {
  left: 740px;
}

#features .inactive {
  opacity: 0;
  pointer-events: none;
}

/* dim the arrows when they're inactive on Apple TV */
@media (-webkit-apple-tv) {
  #features .inactive {
    opacity: 1;
  }
}

