#tutorial {
  background: #2d2d2d;
  z-index: 101;
}

/*
 * Tiny devices. Number of steps is 3
 */

#tutorial-steps-container {
  top: 0.5rem;
  bottom: 8.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#tutorial-step-header {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0 1.5rem 0.5rem;
  box-sizing: border-box;
  min-height: 8.5rem;
}

#tutorial-step-title {
  flex: 0 1 auto;
  color: white;
  display: block;
  padding: 1rem 0;
  margin: 0;
  font-size: 1.4rem;
  line-height: 2rem;
}

#tutorial-step-media {
  flex: 1 1 auto;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.step-video-base {
  height: 100%;
}

#tutorial-step-media img {
  width: 28.9rem;
}

/*
 * First step. Has no 'Back' action.
 */

/*
 * We need !important to override Web components,
 * as we don't have ::content yet (bug 992249).
 */
#tutorial[data-step="1"] #back-tutorial {
 display: none !important;
}

/*
 * Large devices. Tablet for example
 */
@media (min-width: 768px) {
  #tutorial[data-step="1"] .recommend{
    width: 83rem;
  }

  #tutorial-step-media img {
    width: 82.2rem;
  }
}