//
//layout
//

.pull {
  &-center {
    position: absolute;
    left: 50%;
    top: 50%;
    @include generate-browser-prefix(transform,translateX(-50%) translateY(-50%));

  }
  &-left {
    float: left
  }
  &-right {
    float: right
  }
  &-none {
    float: none
  }
}

.center-block {
  margin: 0 auto
}
.margin {
  margin-bottom: $margin-base * 1.5;
}
.m {
  &-a {
    margin: $margin-base;
    @include margin-variant('margin');
  }
  &-t,&-y {
    margin-top: $margin-base;
    @include margin-variant('margin-top');
  }
  &-b,&-y {
    margin-bottom: $margin-base;
    @include margin-variant('margin-bottom');

  }
  &-l,&-x {
    margin-left: $margin-base;
    @include margin-variant('margin-left');
  }
  &-r,&-x {
    margin-right: $margin-base;
    @include margin-variant('margin-right');
  }

}

.padding {
  padding: $padding-base * 1.5;
  &-out {
    margin: $padding-base * -1.5;
  }
}

.p{
  &-a {
    padding: 1rem;
    @include padding-variant('padding');
  }
  &-t,&-y {
    padding-top: $padding-base;
    @include padding-variant('padding-top');
  }

  &-b,&-y {
    padding-bottom: $padding-base;
    @include padding-variant('padding-bottom');
  }

  &-l,&-x {
    padding-left: $padding-base;
    @include padding-variant('padding-left');
  }
  &-r,&-x {
    padding-right: $padding-base;
    @include padding-variant('padding-right');
  }

}

.pos {
  &-rlt {
    position: relative;
    z-index: 1
  }
  &-abt {
    position: absolute
  }
  &-fix {
    position: fixed!important
  }
  &-stc {
    position: static!important
  }
}

.block {
  display: block;
  &.hide {
    display: none
  }
}

.inline {
  display: inline-block;
  &-16 {
  width: 16px;
  height: 16px
  }
  &-24 {
    width: 24px;
    height: 24px
  }
}

.active>.auto .inline,.active>.inline,.none {
  display: none
}

.active>.auto .none,.active>.none {
  display: inline-block
}

.hide {
  display: none!important
}

.show {
  display: block!important
}

.circle,.rounded {
  border-radius: 500px
}

.clear {
  display: block;
  overflow: hidden
}

@each $key,$val in $layout-media-breakpoints {
  @media (max-width:$val) {
    .pull-none-#{$key} {
      float: none!important
    }

    .pull-right-#{$key} {
      float: right!important
    }

    .pull-left-#{$key} {
      float: left!important
    }

    @if $key == md {
      .no-border-md {
        border-width: 0
      }

      .padding {
        padding: 1.5rem 1rem
      }

      .padding-out {
        margin: -1.5rem -1rem
      }

      .box,.box-color,.margin {
        margin-bottom: 1rem
      }

      .no-padding-md {
        padding: 0!important
      }

      .no-margin-md {
        margin: 0!important
      }
    } @else if $key == sm {
      .pos-stc-sm {
        position: static!important
      }
      .padding {
        padding: 1.5rem .5rem
      }

      .padding-out {
        margin: -1.5rem -.5rem
      }

      .margin {
        margin-bottom: .5rem
      }
      .no-padding-sm {
        padding: 0!important
      }

      .no-margin-sm {
        margin: 0!important
      }
    } @else if $key == xs {

      .pos-stc-xs {
        position: static!important
      }

      .no-padding-xs {
        padding: 0!important
      }

      .no-margin-xs {
        margin: 0!important
      }
    }
  }

}