.modal.tutorial {

  h2 {
    font-size: 30px;
  }

  h2, h3, h4 {
    color: @colored;
  }

  .close {
    text-decoration: none;
  }

  .modal-footer {
    border-top: none;
  }

  &.welcome {
    .modal-body {
      padding-left: 200px;
      min-height: 600px;
      background: url('../images/tutorial/welcome.jpg') no-repeat left center;
    }
  }

  &.diet {
    .modal-body {
      padding-left: 380px;
      min-height: 520px;
      background: url('../images/tutorial/diet.jpg') no-repeat left center;
    }
  }

  &.recipe {
    .modal-body {
      padding-left: 310px;
      min-height: 560px;
      background: url('../images/tutorial/recipe.jpg') no-repeat left center;
    }
  }

  &.exercise {
    .modal-body {
      padding-bottom: 210px;
      background: url('../images/tutorial/exercise.jpg') no-repeat center bottom;
    }
  }

  &.generator {
    .modal-body {
      padding-left: 310px;
      min-height: 460px;
      background: url('../images/tutorial/generator.jpg') no-repeat left center;
    }
  }

  &.tip {
    .modal-body {
      padding-left: 310px;
      min-height: 560px;
      background: url('../images/tutorial/tip.jpg') no-repeat left center;
    }
  }

  &.other {
    .modal-body {
      padding-left: 350px;
      min-height: 520px;
      background: url('../images/tutorial/other.jpg') no-repeat left center;
    }
  }
}