/*
 * Shortcode: image-with-rotated-text.scss
 * -----------------------------------------------
*/
.tm-sc-image-with-rotated-text {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  @include transition(all 0.3s ease);
  .image-text-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    .image-inner {
      overflow: hidden;
      img {
        transform: scale(1);
        transition: 1s;
      }
    }
    .text-holder {
      font-size: 12rem;
      font-weight: 700;
      font-family: $heading-font;
      line-height: 1;
      margin: 0;
      color: transparent;
      -webkit-text-stroke: 2px #c2c0bd;
      @include transition(all 0.3s ease);

      .text {
        @include transition(all 0.3s ease);
      }
    }
  }
  
  &.text-position-top-left,
  &.text-position-bottom-left {
    .text-holder {
      left: 18px;
      position: absolute;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      transform: rotate(-90deg);
      -webkit-transform-origin: bottom left;
      -moz-transform-origin: bottom left;
      transform-origin: bottom left;
      white-space: nowrap;
    }
  }
  
  &.text-position-top-left {
    .text-holder {
      bottom: 74px;
    }
  }
  
  &.text-position-bottom-left {
    .text-holder {
      bottom: -29px;
    }
  }
  
  &.text-position-top-right,
  &.text-position-bottom-right {
    .text-holder {
      position: relative;
      left: auto;
      float: right;
      right: -152px;
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      -webkit-transform-origin: top right;
      -ms-transform-origin: top right;
      transform-origin: top right;
      white-space: nowrap;
    }
  }
  
  &.text-position-bottom-right {
    .text-holder {
      bottom: 42px;
    }
  }
  
  &.text-position-top-right {
    .text-holder {
      bottom: 18.2%;
      position: absolute;
    }
  }
}