gridRender(steps, prefix, stepGrid, needMedia, mediaWidth)
  for $i in 1 .. steps
    .{newAppName}-col{prefix}-{$i}
      if (needMedia)
        @media (max-width: mediaWidth)
          flex 0 0 ($i * stepGrid)
          max-width ($i * stepGrid)
      else
        flex 0 0 ($i * stepGrid)
        max-width ($i * stepGrid)

spaceRender(prefix, needMedia, value, mediaWidth)
  name = step

  if (step % 10 == 5)
    if (step < 10)
      name = "0" + name
  else
    if (step == 10)
      name = ""
    else
      name = "" + (step / 10)


  .{newAppName}{prefix}-space-top{name}-half
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-top (value / 10) * vertical-space + 5
    else
      padding-top (value / 10) * vertical-space + 5

  .{newAppName}{prefix}-space-bottom{name}-half
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-bottom (value / 10) * vertical-space + 5
    else
      padding-bottom (value / 10) * vertical-space + 5

  .{newAppName}{prefix}-space-vertical{name}-half
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-top (value / 10) * vertical-space + 5
        padding-bottom (value / 10) * vertical-space + 5
    else
      padding-top (value / 10) * vertical-space + 5
      padding-bottom (value / 10) * vertical-space + 5

  .{newAppName}{prefix}-space-left{name}-half
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-left (value / 10) * horizontal-space + 5
    else
      padding-left (value / 10) * horizontal-space + 5

  .{newAppName}{prefix}-space-right{name}-half
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-right (value / 10) * horizontal-space + 5
    else
      padding-right (value / 10) * horizontal-space + 5

  .{newAppName}{prefix}-space-horizontal{name}-half
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-left (value / 10) * horizontal-space + 5
        padding-right (value / 10) * horizontal-space + 5
    else
      padding-left (value / 10) * horizontal-space + 5
      padding-right (value / 10) * horizontal-space + 5




  .{newAppName}{prefix}-space-top{name}
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-top (value / 10) * vertical-space
    else
      padding-top (value / 10) * vertical-space

  .{newAppName}{prefix}-space-bottom{name}
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-bottom (value / 10) * vertical-space
    else
      padding-bottom (value / 10) * vertical-space

  .{newAppName}{prefix}-space-vertical{name}
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-top (value / 10) * vertical-space
        padding-bottom (value / 10) * vertical-space
    else
      padding-top (value / 10) * vertical-space
      padding-bottom (value / 10) * vertical-space

  .{newAppName}{prefix}-space-left{name}
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-left (value / 10) * horizontal-space
    else
      padding-left (value / 10) * horizontal-space

  .{newAppName}{prefix}-space-right{name}
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-right (value / 10) * horizontal-space
    else
      padding-right (value / 10) * horizontal-space

  .{newAppName}{prefix}-space-horizontal{name}
    if (needMedia)
      @media (max-width: mediaWidth)
        padding-left (value / 10) * horizontal-space
        padding-right (value / 10) * horizontal-space
    else
      padding-left (value / 10) * horizontal-space
      padding-right (value / 10) * horizontal-space

steps = desktop-step-grid 12, tablet-step-grid 6 "td" tablet-upper-limit, mobile-step-grid 3 "md" mobile-upper-limit, 10% 10 "persent", 10% 10 "td-persent" tablet-upper-limit, 10% 10 "md-persent" mobile-upper-limit
//
//.rt-space-top0-half {
//  padding-top: 5px
//}
//
//.rt-space-left0-half {
//  padding-left: 5px
//}
//.rt-space-bottom0-half {
//  padding-bottom: 5px
//}
//.rt-space-right0-half {
//  padding-right: 5px
//}
//.rt-space-top05 {
//  padding-top: 10px
//}
//
//.rt-space-left05 {
//  padding-left: 10px
//}
//.rt-space-bottom05 {
//  padding-bottom: 10px
//}
//.rt-space-right05 {
//  padding-right: 10px
//}
//.rt-space-top05-half {
//  padding-top: 15px
//}
//
//.rt-space-left05-half {
//  padding-left: 15px
//}
//.rt-space-bottom05-half {
//  padding-bottom: 15px
//}
//.rt-space-right05-half {
//  padding-right: 15px
//}
//
//@media (max-width: 1024px) {
//  .rt-td-space-top0-half {
//    padding-top: 5px
//  }
//
//  .rt-td-space-left0-half {
//    padding-left: 5px
//  }
//  .rt-td-space-bottom0-half {
//    padding-bottom: 5px
//  }
//  .rt-td-space-right0-half {
//    padding-right: 5px
//  }
//  .rt-td-space-top05 {
//    padding-top: 10px
//  }
//  .rt-td-space-top05-half {
//    padding-top: 15px
//  }
//
//  .rt-td-space-left05-half {
//    padding-left: 15px
//  }
//  .rt-td-space-bottom05-half {
//    padding-bottom: 15px
//  }
//  .rt-td-space-right05-half {
//    padding-right: 15px
//  }
//  .rt-td-space-top05 {
//    padding-top: 10px
//  }
//
//  .rt-td-space-left05 {
//    padding-left: 10px
//  }
//  .rt-td-space-bottom05 {
//    padding-bottom: 10px
//  }
//  .rt-td-space-right05 {
//    padding-right: 10px
//  }
//}
//@media (max-width: 767px) {
//  .rt-md-space-top0-half {
//    padding-top: 5px
//  }
//
//  .rt-md-space-left0-half {
//    padding-left: 5px
//  }
//  .rt-md-space-bottom0-half {
//    padding-bottom: 5px
//  }
//  .rt-md-space-right0-half {
//    padding-right: 5px
//  }
//  .rt-md-space-top05-half {
//    padding-top: 15px
//  }
//
//  .rt-md-space-left05-half {
//    padding-left: 15px
//  }
//  .rt-md-space-bottom05-half {
//    padding-bottom: 15px
//  }
//  .rt-md-space-right05-half {
//    padding-right: 15px
//  }
//  .rt-md-space-top05 {
//    padding-top: 10px
//  }
//
//  .rt-md-space-left05 {
//    padding-left: 10px
//  }
//  .rt-md-space-bottom05 {
//    padding-bottom: 10px
//  }
//  .rt-md-space-right05 {
//    padding-right: 10px
//  }
//}


.{newAppName}-col
  flex 0 0 1
  width 100%
  padding-left (horizontal-space * .5)
  padding-right (horizontal-space * .5)
  position relative

for devideStep in steps
  media = 0
  devicePrefix = ""
  needMedia = false

  if (devideStep[1] < 12)
    media = devideStep[3]
    devicePrefix = "-" + devideStep[2]

    if (media)
      needMedia = true

  for $i in 1 .. devideStep[1]
    className = newAppName + "-col" + devicePrefix + "-" + $i

    .{className}
      +cache("mobile-column")
        width 100%
        padding-left (horizontal-space * .5)
        padding-right (horizontal-space * .5)
        position relative

  gridRender(devideStep[1], devicePrefix, devideStep[0], needMedia, media)

  for $i in 0 .. 20
    step = $i * 5
    spaceRender(devicePrefix, needMedia, step, media)

.relative
  position relative

.row
  display flex
  flex-wrap wrap
  min-width 100%
  box-sizing border-box
  margin-left -1 * horizontal-space * .5
  margin-right -1 * horizontal-space * .5
  position relative
  -ms-flex-wrap wrap
  &-scroll
    flex-flow nowrap
    overflow auto
  &-nowrap
    flex-wrap: nowrap


  &--tablet-scroll
    @media (max-width: tablet-upper-limit)
      flex-flow nowrap
      overflow auto
      margin-left -1 * horizontal-space * .5
      margin-right -1 * horizontal-space * .5
      padding-bottom vertical-space

  &--tablet-only-scroll
    @media (max-width: tablet-upper-limit) and (min-width: tablet-lower-limit)
      flex-flow nowrap
      overflow auto
      margin-left -1 * horizontal-space * .5
      margin-right -1 * horizontal-space * .5
      padding-bottom vertical-space

  &--mobile-scroll
    @media (max-width: mobile-upper-limit)
      flex-flow nowrap
      overflow auto
      margin-left -1 * horizontal-space * .5
      margin-right -1 * horizontal-space * .5
      padding-bottom vertical-space

  &--mobile-wrap
    @media (max-width: mobile-upper-limit)
      flex-flow wrap
      overflow hidden
      margin-left -1 * horizontal-space * .5
      margin-right -1 * horizontal-space * .5
      padding-bottom vertical-space

.desctop-hide-scroll
  @media (min-width: desktop-lower-limit)
    overflow-y hidden

.td-hide-scroll
  @media (min-width: tablet-lower-limit) and (max-width: tablet-upper-limit)
    overflow-y hidden

.d-none
  display none

.d-inline
  display inline

.d-inline-block
  display inline-block

.d-block
  display block

.d-table
  display table

.d-table-row
  display table-row

.d-table-cell
  display table-cell

.d-flex
  display flex

.flex-end-center
  display flex
  justify-content flex-end
  align-items center

.flex-end-top
  display flex
  justify-content flex-end
  align-items top

.flex-start-center
  display flex
  justify-content flex-start
  align-items center

.flex-center-center
  display flex
  justify-content center
  align-items center

.flex-end-bottom
  display flex
  justify-content flex-end
  align-items flex-end

.flex-center-bottom
  display flex
  justify-content center
  align-items flex-end

.flex-start-bottom
  display flex
  justify-content left
  align-items flex-end

.flex-start-top
  display flex
  justify-content left
  align-items flex-start

.align
  &-start
    align-items: flex-start
  &-center
    align-items: center
  &-end
    align-items: flex-end

.d-inline-flex
  display -ms-inline-flexbox
  display inline-flex

.d-space-between
  justify-content space-between

.d-space-center
  justify-content center

.td-d-space-center
  @media (max-width: tablet-upper-limit)
    justify-content center

.md-d-space-center
  @media (max-width: mobile-upper-limit)
    justify-content center

.d-static
  display static

.d-stretch
  display flex
  align-items stretch

.md-inline-flex
  @media (max-width: mobile-upper-limit)
    display -ms-inline-flexbox
    display inline-flex

.md-space-between
  @media (max-width: mobile-upper-limit)
    justify-content space-between

.md-static
  @media (max-width: mobile-upper-limit)
    display static

.md-stretch
  @media (max-width: mobile-upper-limit)
    display flex
    align-items stretch

.td
  @media (max-width: tablet-upper-limit)
    &-d-none
      display none !important

    &-d-inline
      display inline !important

    &-d-inline-block
      display inline-block !important

    &-d-block
      display block !important

    &-d-table
      display table !important

    &-d-table-row
      display table-row !important

    &-d-table-cell
      display table-cell !important

    &-d-flex
      display flex !important

    &-d-inline-flex
      display inline-flex !important

    &-flex-end-center
      display flex
      justify-content flex-end
      align-items center

    &-flex-start-center
      display flex
      justify-content flex-start
      align-items center

    &-flex-start-top
      display flex
      justify-content flex-start
      align-items flex-start

    &-flex-center-center
      display flex
      justify-content center
      align-items center

    &-flex-end-bottom
      display flex
      justify-content flex-end
      align-items flex-end

    &-flex-center-bottom
      display flex
      justify-content center
      align-items flex-end

    &-flex-start-bottom
      display flex
      justify-content left
      align-items flex-end

.md
  @media (max-width: mobile-upper-limit)
    &-d-none
      display none !important

    &-d-inline
      display inline !important

    &-d-inline-block
      display inline-block !important

    &-d-block
      display block !important

    &-d-table
      display table !important

    &-d-table-row
      display table-row !important

    &-d-table-cell
      display table-cell !important

    &-d-flex
      display flex !important

    &-d-inline-flex
      display inline-flex !important

    &-flex-end-center
      display flex
      justify-content flex-end
      align-items center

    &-flex-start-center
      display flex
      justify-content flex-start
      align-items center

    &-flex-start-top
      display flex
      justify-content flex-start
      align-items flex-start

    &-flex-center-center
      display flex
      justify-content center
      align-items center

    &-flex-center-start
      display flex
      justify-content center
      align-items start

    &-flex-end-bottom
      display flex
      justify-content flex-end
      align-items flex-end

    &-flex-center-bottom
      display flex
      justify-content center
      align-items flex-end

    &-flex-start-bottom
      display flex
      justify-content left
      align-items flex-end

.{newAppName}-container
  width 100%
  max-width container-upper-limit
  margin-left auto
  margin-right auto
  padding-left horizontal-space * 3.5
  padding-right horizontal-space * 3.5
  transition-timing-function ease-in-out
  transition-duration 3s
  transition-property opacity, visibility
  @media (max-width: laptop-upper-limit)
    padding-left horizontal-space * 1.5
    padding-right horizontal-space * 1.5

  @media (max-width: mobile-upper-limit)
    padding-left horizontal-space * .5
    padding-right horizontal-space * .5

.no-gutters
  margin-left 0
  margin-right 0

.no-gutters > .{newAppName}-col,
.no-gutters > [class*="col-"]
  padding-left 0
  padding-right 0

.d-md-flex-column
  .{newAppName}-card
    @media (max-width: mobile-upper-limit)
      min-height fit-content

  @media (max-width: mobile-upper-limit)
    display flex
    flex-direction column

.{newAppName}-pseudo-col
  position absolute
  transition-timing-function ease-in-out
  transition-duration .2s
  transition-property opacity, visibility

  @media (max-width: mobile-upper-limit)
    opacity 0
    visibility hidden

  &--left
    right 100%

  &--right
    left 100%

.{newAppName}-fill-viewport
  min-width 100vw
  min-height 100vh

.{newAppName}-fill-viewport-width
  min-width 100vw

.{newAppName}-fill-viewport-height
  min-height 100vh

.{newAppName}-md-viewport-height-reset
  @media (max-width:  mobile-upper-limit)
    min-height auto
.{newAppName}-space-horizontal-none
  padding-left 0
  padding-right 0

.{newAppName}-td-fill-viewport
  @media (max-width: tablet-upper-limit)
    min-width 100vw
    min-height 100vh

.{newAppName}-td-fill-viewport-width
  @media (max-width: tablet-upper-limit)
    min-width 100vw

.{newAppName}-td-fill-viewport-height
  @media (max-width: tablet-upper-limit)
    min-height 100vh

.{newAppName}-td-space-horizontal-none
  @media (max-width: tablet-upper-limit)
    padding-left 0
    padding-right 0

.{newAppName}-md-fill-viewport
  @media (max-width: mobile-upper-limit)
    min-width 100vw
    min-height 100vh

.{newAppName}-md-fill-viewport-width
  @media (max-width: mobile-upper-limit)
    min-width 100vw

.{newAppName}-md-fill-viewport-height
  @media (max-width: mobile-upper-limit)
    min-height 100vh

.{newAppName}-md-space-horizontal-none
  @media (max-width: mobile-upper-limit)
    padding-left 0
    padding-right 0

.{newAppName}-td-space-left-none
  @media (max-width: tablet-upper-limit)
    padding-left 0

.{newAppName}-td-space-left-none
  @media (max-width: tablet-upper-limit)
    padding-left 0

.{newAppName}-md-space-left-none
  @media (max-width: mobile-upper-limit)
    padding-left 0

.{newAppName}-space-right-none
  padding-right 0

.{newAppName}-td-space-right-none
  @media (max-width: tablet-upper-limit)
    padding-right 0

.{newAppName}-md-space-right-none
  @media (max-width: mobile-upper-limit)
    padding-right 0

.{newAppName}-reverse-horizontal2
  margin-left -2 * horizontal-space
  margin-right -2 * horizontal-space

.{newAppName}-reverse-horizontal
  margin-left -1 * horizontal-space
  margin-right -1 * horizontal-space

.{newAppName}-reverse-horizontal05
  margin-left -1 * horizontal-space * .5
  margin-right -1 * horizontal-space * .5

.{newAppName}-space-top-none
  padding-top 0

.{newAppName}-td-space-top-none
  @media (max-width: tablet-upper-limit)
    padding-top 0

.{newAppName}-md-space-top-none
  @media (max-width: mobile-upper-limit)
    padding-top 0

.{newAppName}-space-top-none
  padding-top 0

.{newAppName}-td-space-bottom-none
  @media (max-width: tablet-upper-limit)
    padding-bottom 0

.{newAppName}-md-space-bottom-none
  @media (max-width: mobile-upper-limit)
    padding-bottom 0

.{newAppName}-td-space-vertical-none
  @media (max-width: tablet-upper-limit)
    padding-top 0
    padding-bottom 0

.{newAppName}-md-space-vertical-none
  @media (max-width: mobile-upper-limit)
    padding-top 0
    padding-bottom 0

.d-td-block
  @media (max-width: tablet-upper-limit)
    display block

.d-md-block
  @media (max-width: mobile-upper-limit)
    display block

.height-fill
  min-height 100%

.flex-md-start
  @media (max-width: mobile-upper-limit)
    display flex
    justify-content flex-start

.md-height-fill
  @media (max-width: mobile-upper-limit)
    min-height 100%

.flex-md-center
  @media (max-width: mobile-upper-limit)
    display flex
    justify-content center

.flex-td-start
  @media (max-width: tablet-upper-limit)
    display flex
    justify-content flex-start

.flex-td-center
  @media (max-width: tablet-upper-limit)
    display flex
    justify-content center

.d-flex
  display flex

.flex-row
  flex-direction row

.flex-row-reverse
  flex-direction row-reverse

.td-flex-row-reverse
  @media (max-width: tablet-upper-limit)
    flex-direction row-reverse

.md-flex-row-reverse
  @media (max-width: mobile-upper-limit)
    flex-direction row-reverse

.flex-column
  flex-direction column

.flex-column-reverse
  flex-direction column-reverse

.td-flex-column-reverse
  @media (max-width: tablet-upper-limit)
    flex-direction column-reverse

.td-flex-column
  @media (max-width: tablet-upper-limit)
    flex-direction column

.md-flex-column-reverse
  @media (max-width: mobile-upper-limit)
    flex-direction column-reverse

.flex-fill
  flex 1 0 0
  flex-basis auto

.flex-fill-none
  flex 0 0 0

.md-flex-fill-none
  @media (max-width: mobile-upper-limit)
    flex 0 0 0
.md-flex-fill
  @media (max-width: mobile-upper-limit)
    flex 1 0 0

.max-full-width
  max-width 100%

.rt-space-top135
  padding-top 270px
.d-flex-nowrap
  flex-wrap nowrap

.gray-border-top
  position: relative
  &:before
    content: ''
    top: 0
    position: absolute
    margin-left: -20px
    margin-right: -20px
    left: 0
    right: 0
    border-top: 2px solid #e3e8ec

.{newAppName}-animate-opacity
  transition-timing-function ease-in-out
  transition-duration .2s
  transition-property opacity, visibility



//tablet-upper-limit = 1024px
//mobile-upper-limit = 767px
//newAppName = 'rt'

.{newAppName}-main-footer
  padding-top: 25px
  padding-bottom: 25px
  border-top: 2px solid #585D68

.{newAppName}-main-footer-container
  display: grid
  grid-template-columns: 1fr 1fr 1fr
  grid-template-rows: 1fr
  grid-template-areas: left center right
  align-items: center
  @media (max-width: tablet-upper-limit)
    grid-template-columns: 1fr 1fr
    grid-template-rows: 1fr

  @media (max-width: mobile-upper-limit)
    grid-template-columns: 1fr
    grid-template-rows: 1fr 1fr 1fr


.{newAppName}-main-footer-copyright
  grid-column-start: 1;
  grid-column-end: 1;
  @media (max-width: tablet-upper-limit)
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 2;
  @media (max-width: mobile-upper-limit)
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-start: 2;

.{newAppName}-main-footer-social
  grid-column-start: 2;
  grid-column-end: 2;
  @media (max-width: tablet-upper-limit)
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
  @media (max-width: mobile-upper-limit)
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 3;
    grid-row-start: 3;

.{newAppName}-main-footer-phone
  grid-column-start: 3;
  grid-column-end: 3;
  text-align: right
  @media (max-width: tablet-upper-limit)
    grid-column-start: 1;
    grid-column-end: 1;
    text-align: left
  @media (max-width: mobile-upper-limit)
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-start: 1;

@require './elementOpacity.styl'