/*
Spacing-specific utilities
 =========================

Used to adjust the default spacing between components
Use with great care!

`<type>-<breakpoint>-<direction>-<size>`

type:
-  margin
-  padding

Breakpoint:
-  xs = small spartphones
-  sm = tablets
-  md = small desktop
-  lg = large desktop

Direction:
-  a = all
-  t = top
-  r = right
-  b = bottom
-  l = left
-  h = horizontal
-  v = vertical

Size:
-  n = none
-  s = small
-  m = medium
-  l = large
-  xl = extra-large

## margins

  <div class="margin-xs-a-n well">Lorem ipsum dolor...</div>
  <div class="margin-xs-a-s well">Lorem ipsum dolor...</div>
  <div class="margin-xs-a-m well">Lorem ipsum dolor...</div>
  <div class="margin-xs-a-l well">Lorem ipsum dolor...</div>
  <div class="margin-xs-a-xl well">Lorem ipsum dolor...</div>

##paddings

  <div class="padding-xs-a-n well">Lorem ipsum dolor...</div>
  <div class="padding-xs-a-s well">Lorem ipsum dolor...</div>
  <div class="padding-xs-a-m well">Lorem ipsum dolor...</div>
  <div class="padding-xs-a-l well">Lorem ipsum dolor...</div>
  <div class="padding-xs-a-xl well">Lorem ipsum dolor...</div>
*/
/* margins */
.margin-xs-t-n,
.margin-xs-v-n,
.margin-xs-a-n {
  margin-top: 0 !important;
}
.margin-xs-t-s,
.margin-xs-v-s,
.margin-xs-a-s {
  margin-top: 15px !important;
}
.margin-xs-t-m,
.margin-xs-v-m,
.margin-xs-a-m {
  margin-top: 30px !important;
}
.margin-xs-t-l,
.margin-xs-v-l,
.margin-xs-a-l {
  margin-top: 60px !important;
}
.margin-xs-t-xl,
.margin-xs-v-xl,
.margin-xs-a-xl {
  margin-top: 120px !important;
}
.margin-xs-r-n,
.margin-xs-h-n,
.margin-xs-a-n {
  margin-right: 0 !important;
}
.margin-xs-r-s,
.margin-xs-h-s,
.margin-xs-a-s {
  margin-right: 15px !important;
}
.margin-xs-r-m,
.margin-xs-h-m,
.margin-xs-a-m {
  margin-right: 30px !important;
}
.margin-xs-r-l,
.margin-xs-h-l,
.margin-xs-a-l {
  margin-right: 60px !important;
}
.margin-xs-r-xl,
.margin-xs-h-xl,
.margin-xs-a-xl {
  margin-right: 120px !important;
}
.margin-xs-b-n,
.margin-xs-v-n,
.margin-xs-a-n {
  margin-bottom: 0 !important;
}
.margin-xs-b-s,
.margin-xs-v-s,
.margin-xs-a-s {
  margin-bottom: 15px !important;
}
.margin-xs-b-m,
.margin-xs-v-m,
.margin-xs-a-m {
  margin-bottom: 30px !important;
}
.margin-xs-b-l,
.margin-xs-v-l,
.margin-xs-a-l {
  margin-bottom: 60px !important;
}
.margin-xs-b-xl,
.margin-xs-v-xl,
.margin-xs-a-xl {
  margin-bottom: 120px !important;
}
.margin-xs-l-n,
.margin-xs-h-n,
.margin-xs-a-n {
  margin-left: 0 !important;
}
.margin-xs-l-s,
.margin-xs-h-s,
.margin-xs-a-s {
  margin-left: 15px !important;
}
.margin-xs-l-m,
.margin-xs-h-m,
.margin-xs-a-m {
  margin-left: 30px !important;
}
.margin-xs-l-l,
.margin-xs-h-l,
.margin-xs-a-l {
  margin-left: 60px !important;
}
.margin-xs-l-xl,
.margin-xs-h-xl,
.margin-xs-a-xl {
  margin-left: 120px !important;
}
/* paddings */
.padding-xs-t-n,
.padding-xs-v-n,
.padding-xs-a-n {
  padding-top: 0 !important;
}
.padding-xs-t-s,
.padding-xs-v-s,
.padding-xs-a-s {
  padding-top: 15px !important;
}
.padding-xs-t-m,
.padding-xs-v-m,
.padding-xs-a-m {
  padding-top: 30px !important;
}
.padding-xs-t-l,
.padding-xs-v-l,
.padding-xs-a-l {
  padding-top: 60px !important;
}
.padding-xs-t-xl,
.padding-xs-v-xl,
.padding-xs-a-xl {
  padding-top: 120px !important;
}
.padding-xs-r-n,
.padding-xs-h-n,
.padding-xs-a-n {
  padding-right: 0 !important;
}
.padding-xs-r-s,
.padding-xs-h-s,
.padding-xs-a-s {
  padding-right: 15px !important;
}
.padding-xs-r-m,
.padding-xs-h-m,
.padding-xs-a-m {
  padding-right: 30px !important;
}
.padding-xs-r-l,
.padding-xs-h-l,
.padding-xs-a-l {
  padding-right: 60px !important;
}
.padding-xs-r-xl,
.padding-xs-h-xl,
.padding-xs-a-xl {
  padding-right: 120px !important;
}
.padding-xs-b-n,
.padding-xs-v-n,
.padding-xs-a-n {
  padding-bottom: 0 !important;
}
.padding-xs-b-s,
.padding-xs-v-s,
.padding-xs-a-s {
  padding-bottom: 15px !important;
}
.padding-xs-b-m,
.padding-xs-v-m,
.padding-xs-a-m {
  padding-bottom: 30px !important;
}
.padding-xs-b-l,
.padding-xs-v-l,
.padding-xs-a-l {
  padding-bottom: 60px !important;
}
.padding-xs-b-xl,
.padding-xs-v-xl,
.padding-xs-a-xl {
  padding-bottom: 120px !important;
}
.padding-xs-l-n,
.padding-xs-h-n,
.padding-xs-a-n {
  padding-left: 0 !important;
}
.padding-xs-l-s,
.padding-xs-h-s,
.padding-xs-a-s {
  padding-left: 15px !important;
}
.padding-xs-l-m,
.padding-xs-h-m,
.padding-xs-a-m {
  padding-left: 30px !important;
}
.padding-xs-l-l,
.padding-xs-h-l,
.padding-xs-a-l {
  padding-left: 60px !important;
}
.padding-xs-l-xl,
.padding-xs-h-xl,
.padding-xs-a-xl {
  padding-left: 120px !important;
}

@media (min-width: 768px) {
  /* margins */
  .margin-sm-t-n,
  .margin-sm-v-n,
  .margin-sm-a-n {
    margin-top: 0 !important;
  }
  .margin-sm-t-s,
  .margin-sm-v-s,
  .margin-sm-a-s {
    margin-top: 15px !important;
  }
  .margin-sm-t-m,
  .margin-sm-v-m,
  .margin-sm-a-m {
    margin-top: 30px !important;
  }
  .margin-sm-t-l,
  .margin-sm-v-l,
  .margin-sm-a-l {
    margin-top: 60px !important;
  }
  .margin-sm-t-xl,
  .margin-sm-v-xl,
  .margin-sm-a-xl {
    margin-top: 120px !important;
  }
  .margin-sm-r-n,
  .margin-sm-h-n,
  .margin-sm-a-n {
    margin-right: 0 !important;
  }
  .margin-sm-r-s,
  .margin-sm-h-s,
  .margin-sm-a-s {
    margin-right: 15px !important;
  }
  .margin-sm-r-m,
  .margin-sm-h-m,
  .margin-sm-a-m {
    margin-right: 30px !important;
  }
  .margin-sm-r-l,
  .margin-sm-h-l,
  .margin-sm-a-l {
    margin-right: 60px !important;
  }
  .margin-sm-r-xl,
  .margin-sm-h-xl,
  .margin-sm-a-xl {
    margin-right: 120px !important;
  }
  .margin-sm-b-n,
  .margin-sm-v-n,
  .margin-sm-a-n {
    margin-bottom: 0 !important;
  }
  .margin-sm-b-s,
  .margin-sm-v-s,
  .margin-sm-a-s {
    margin-bottom: 15px !important;
  }
  .margin-sm-b-m,
  .margin-sm-v-m,
  .margin-sm-a-m {
    margin-bottom: 30px !important;
  }
  .margin-sm-b-l,
  .margin-sm-v-l,
  .margin-sm-a-l {
    margin-bottom: 60px !important;
  }
  .margin-sm-b-xl,
  .margin-sm-v-xl,
  .margin-sm-a-xl {
    margin-bottom: 120px !important;
  }
  .margin-sm-l-n,
  .margin-sm-h-n,
  .margin-sm-a-n {
    margin-left: 0 !important;
  }
  .margin-sm-l-s,
  .margin-sm-h-s,
  .margin-sm-a-s {
    margin-left: 15px !important;
  }
  .margin-sm-l-m,
  .margin-sm-h-m,
  .margin-sm-a-m {
    margin-left: 30px !important;
  }
  .margin-sm-l-l,
  .margin-sm-h-l,
  .margin-sm-a-l {
    margin-left: 60px !important;
  }
  .margin-sm-l-xl,
  .margin-sm-h-xl,
  .margin-sm-a-xl {
    margin-left: 120px !important;
  }
  /* paddings */
  .padding-sm-t-n,
  .padding-sm-v-n,
  .padding-sm-a-n {
    padding-top: 0 !important;
  }
  .padding-sm-t-s,
  .padding-sm-v-s,
  .padding-sm-a-s {
    padding-top: 15px !important;
  }
  .padding-sm-t-m,
  .padding-sm-v-m,
  .padding-sm-a-m {
    padding-top: 30px !important;
  }
  .padding-sm-t-l,
  .padding-sm-v-l,
  .padding-sm-a-l {
    padding-top: 60px !important;
  }
  .padding-sm-t-xl,
  .padding-sm-v-xl,
  .padding-sm-a-xl {
    padding-top: 120px !important;
  }
  .padding-sm-r-n,
  .padding-sm-h-n,
  .padding-sm-a-n {
    padding-right: 0 !important;
  }
  .padding-sm-r-s,
  .padding-sm-h-s,
  .padding-sm-a-s {
    padding-right: 15px !important;
  }
  .padding-sm-r-m,
  .padding-sm-h-m,
  .padding-sm-a-m {
    padding-right: 30px !important;
  }
  .padding-sm-r-l,
  .padding-sm-h-l,
  .padding-sm-a-l {
    padding-right: 60px !important;
  }
  .padding-sm-r-xl,
  .padding-sm-h-xl,
  .padding-sm-a-xl {
    padding-right: 120px !important;
  }
  .padding-sm-b-n,
  .padding-sm-v-n,
  .padding-sm-a-n {
    padding-bottom: 0 !important;
  }
  .padding-sm-b-s,
  .padding-sm-v-s,
  .padding-sm-a-s {
    padding-bottom: 15px !important;
  }
  .padding-sm-b-m,
  .padding-sm-v-m,
  .padding-sm-a-m {
    padding-bottom: 30px !important;
  }
  .padding-sm-b-l,
  .padding-sm-v-l,
  .padding-sm-a-l {
    padding-bottom: 60px !important;
  }
  .padding-sm-b-xl,
  .padding-sm-v-xl,
  .padding-sm-a-xl {
    padding-bottom: 120px !important;
  }
  .padding-sm-l-n,
  .padding-sm-h-n,
  .padding-sm-a-n {
    padding-left: 0 !important;
  }
  .padding-sm-l-s,
  .padding-sm-h-s,
  .padding-sm-a-s {
    padding-left: 15px !important;
  }
  .padding-sm-l-m,
  .padding-sm-h-m,
  .padding-sm-a-m {
    padding-left: 30px !important;
  }
  .padding-sm-l-l,
  .padding-sm-h-l,
  .padding-sm-a-l {
    padding-left: 60px !important;
  }
  .padding-sm-l-xl,
  .padding-sm-h-xl,
  .padding-sm-a-xl {
    padding-left: 120px !important;
  }
}

@media (min-width: 992px) {
  /* margins */
  .margin-md-t-n,
  .margin-md-v-n,
  .margin-md-a-n {
    margin-top: 0 !important;
  }
  .margin-md-t-s,
  .margin-md-v-s,
  .margin-md-a-s {
    margin-top: 15px !important;
  }
  .margin-md-t-m,
  .margin-md-v-m,
  .margin-md-a-m {
    margin-top: 30px !important;
  }
  .margin-md-t-l,
  .margin-md-v-l,
  .margin-md-a-l {
    margin-top: 60px !important;
  }
  .margin-md-t-xl,
  .margin-md-v-xl,
  .margin-md-a-xl {
    margin-top: 120px !important;
  }
  .margin-md-r-n,
  .margin-md-h-n,
  .margin-md-a-n {
    margin-right: 0 !important;
  }
  .margin-md-r-s,
  .margin-md-h-s,
  .margin-md-a-s {
    margin-right: 15px !important;
  }
  .margin-md-r-m,
  .margin-md-h-m,
  .margin-md-a-m {
    margin-right: 30px !important;
  }
  .margin-md-r-l,
  .margin-md-h-l,
  .margin-md-a-l {
    margin-right: 60px !important;
  }
  .margin-md-r-xl,
  .margin-md-h-xl,
  .margin-md-a-xl {
    margin-right: 120px !important;
  }
  .margin-md-b-n,
  .margin-md-v-n,
  .margin-md-a-n {
    margin-bottom: 0 !important;
  }
  .margin-md-b-s,
  .margin-md-v-s,
  .margin-md-a-s {
    margin-bottom: 15px !important;
  }
  .margin-md-b-m,
  .margin-md-v-m,
  .margin-md-a-m {
    margin-bottom: 30px !important;
  }
  .margin-md-b-l,
  .margin-md-v-l,
  .margin-md-a-l {
    margin-bottom: 60px !important;
  }
  .margin-md-b-xl,
  .margin-md-v-xl,
  .margin-md-a-xl {
    margin-bottom: 120px !important;
  }
  .margin-md-l-n,
  .margin-md-h-n,
  .margin-md-a-n {
    margin-left: 0 !important;
  }
  .margin-md-l-s,
  .margin-md-h-s,
  .margin-md-a-s {
    margin-left: 15px !important;
  }
  .margin-md-l-m,
  .margin-md-h-m,
  .margin-md-a-m {
    margin-left: 30px !important;
  }
  .margin-md-l-l,
  .margin-md-h-l,
  .margin-md-a-l {
    margin-left: 60px !important;
  }
  .margin-md-l-xl,
  .margin-md-h-xl,
  .margin-md-a-xl {
    margin-left: 120px !important;
  }
  /* paddings */
  .padding-md-t-n,
  .padding-md-v-n,
  .padding-md-a-n {
    padding-top: 0 !important;
  }
  .padding-md-t-s,
  .padding-md-v-s,
  .padding-md-a-s {
    padding-top: 15px !important;
  }
  .padding-md-t-m,
  .padding-md-v-m,
  .padding-md-a-m {
    padding-top: 30px !important;
  }
  .padding-md-t-l,
  .padding-md-v-l,
  .padding-md-a-l {
    padding-top: 60px !important;
  }
  .padding-md-t-xl,
  .padding-md-v-xl,
  .padding-md-a-xl {
    padding-top: 120px !important;
  }
  .padding-md-r-n,
  .padding-md-h-n,
  .padding-md-a-n {
    padding-right: 0 !important;
  }
  .padding-md-r-s,
  .padding-md-h-s,
  .padding-md-a-s {
    padding-right: 15px !important;
  }
  .padding-md-r-m,
  .padding-md-h-m,
  .padding-md-a-m {
    padding-right: 30px !important;
  }
  .padding-md-r-l,
  .padding-md-h-l,
  .padding-md-a-l {
    padding-right: 60px !important;
  }
  .padding-md-r-xl,
  .padding-md-h-xl,
  .padding-md-a-xl {
    padding-right: 120px !important;
  }
  .padding-md-b-n,
  .padding-md-v-n,
  .padding-md-a-n {
    padding-bottom: 0 !important;
  }
  .padding-md-b-s,
  .padding-md-v-s,
  .padding-md-a-s {
    padding-bottom: 15px !important;
  }
  .padding-md-b-m,
  .padding-md-v-m,
  .padding-md-a-m {
    padding-bottom: 30px !important;
  }
  .padding-md-b-l,
  .padding-md-v-l,
  .padding-md-a-l {
    padding-bottom: 60px !important;
  }
  .padding-md-b-xl,
  .padding-md-v-xl,
  .padding-md-a-xl {
    padding-bottom: 120px !important;
  }
  .padding-md-l-n,
  .padding-md-h-n,
  .padding-md-a-n {
    padding-left: 0 !important;
  }
  .padding-md-l-s,
  .padding-md-h-s,
  .padding-md-a-s {
    padding-left: 15px !important;
  }
  .padding-md-l-m,
  .padding-md-h-m,
  .padding-md-a-m {
    padding-left: 30px !important;
  }
  .padding-md-l-l,
  .padding-md-h-l,
  .padding-md-a-l {
    padding-left: 60px !important;
  }
  .padding-md-l-xl,
  .padding-md-h-xl,
  .padding-md-a-xl {
    padding-left: 120px !important;
  }
}

@media (min-width: 1030px) {
  /* margins */
  .margin-lg-t-n,
  .margin-lg-v-n,
  .margin-lg-a-n {
    margin-top: 0 !important;
  }
  .margin-lg-t-s,
  .margin-lg-v-s,
  .margin-lg-a-s {
    margin-top: 15px !important;
  }
  .margin-lg-t-m,
  .margin-lg-v-m,
  .margin-lg-a-m {
    margin-top: 30px !important;
  }
  .margin-lg-t-l,
  .margin-lg-v-l,
  .margin-lg-a-l {
    margin-top: 60px !important;
  }
  .margin-lg-t-xl,
  .margin-lg-v-xl,
  .margin-lg-a-xl {
    margin-top: 120px !important;
  }
  .margin-lg-r-n,
  .margin-lg-h-n,
  .margin-lg-a-n {
    margin-right: 0 !important;
  }
  .margin-lg-r-s,
  .margin-lg-h-s,
  .margin-lg-a-s {
    margin-right: 15px !important;
  }
  .margin-lg-r-m,
  .margin-lg-h-m,
  .margin-lg-a-m {
    margin-right: 30px !important;
  }
  .margin-lg-r-l,
  .margin-lg-h-l,
  .margin-lg-a-l {
    margin-right: 60px !important;
  }
  .margin-lg-r-xl,
  .margin-lg-h-xl,
  .margin-lg-a-xl {
    margin-right: 120px !important;
  }
  .margin-lg-b-n,
  .margin-lg-v-n,
  .margin-lg-a-n {
    margin-bottom: 0 !important;
  }
  .margin-lg-b-s,
  .margin-lg-v-s,
  .margin-lg-a-s {
    margin-bottom: 15px !important;
  }
  .margin-lg-b-m,
  .margin-lg-v-m,
  .margin-lg-a-m {
    margin-bottom: 30px !important;
  }
  .margin-lg-b-l,
  .margin-lg-v-l,
  .margin-lg-a-l {
    margin-bottom: 60px !important;
  }
  .margin-lg-b-xl,
  .margin-lg-v-xl,
  .margin-lg-a-xl {
    margin-bottom: 120px !important;
  }
  .margin-lg-l-n,
  .margin-lg-h-n,
  .margin-lg-a-n {
    margin-left: 0 !important;
  }
  .margin-lg-l-s,
  .margin-lg-h-s,
  .margin-lg-a-s {
    margin-left: 15px !important;
  }
  .margin-lg-l-m,
  .margin-lg-h-m,
  .margin-lg-a-m {
    margin-left: 30px !important;
  }
  .margin-lg-l-l,
  .margin-lg-h-l,
  .margin-lg-a-l {
    margin-left: 60px !important;
  }
  .margin-lg-l-xl,
  .margin-lg-h-xl,
  .margin-lg-a-xl {
    margin-left: 120px !important;
  }
  /* paddings */
  .padding-lg-t-n,
  .padding-lg-v-n,
  .padding-lg-a-n {
    padding-top: 0 !important;
  }
  .padding-lg-t-s,
  .padding-lg-v-s,
  .padding-lg-a-s {
    padding-top: 15px !important;
  }
  .padding-lg-t-m,
  .padding-lg-v-m,
  .padding-lg-a-m {
    padding-top: 30px !important;
  }
  .padding-lg-t-l,
  .padding-lg-v-l,
  .padding-lg-a-l {
    padding-top: 60px !important;
  }
  .padding-lg-t-xl,
  .padding-lg-v-xl,
  .padding-lg-a-xl {
    padding-top: 120px !important;
  }
  .padding-lg-r-n,
  .padding-lg-h-n,
  .padding-lg-a-n {
    padding-right: 0 !important;
  }
  .padding-lg-r-s,
  .padding-lg-h-s,
  .padding-lg-a-s {
    padding-right: 15px !important;
  }
  .padding-lg-r-m,
  .padding-lg-h-m,
  .padding-lg-a-m {
    padding-right: 30px !important;
  }
  .padding-lg-r-l,
  .padding-lg-h-l,
  .padding-lg-a-l {
    padding-right: 60px !important;
  }
  .padding-lg-r-xl,
  .padding-lg-h-xl,
  .padding-lg-a-xl {
    padding-right: 120px !important;
  }
  .padding-lg-b-n,
  .padding-lg-v-n,
  .padding-lg-a-n {
    padding-bottom: 0 !important;
  }
  .padding-lg-b-s,
  .padding-lg-v-s,
  .padding-lg-a-s {
    padding-bottom: 15px !important;
  }
  .padding-lg-b-m,
  .padding-lg-v-m,
  .padding-lg-a-m {
    padding-bottom: 30px !important;
  }
  .padding-lg-b-l,
  .padding-lg-v-l,
  .padding-lg-a-l {
    padding-bottom: 60px !important;
  }
  .padding-lg-b-xl,
  .padding-lg-v-xl,
  .padding-lg-a-xl {
    padding-bottom: 120px !important;
  }
  .padding-lg-l-n,
  .padding-lg-h-n,
  .padding-lg-a-n {
    padding-left: 0 !important;
  }
  .padding-lg-l-s,
  .padding-lg-h-s,
  .padding-lg-a-s {
    padding-left: 15px !important;
  }
  .padding-lg-l-m,
  .padding-lg-h-m,
  .padding-lg-a-m {
    padding-left: 30px !important;
  }
  .padding-lg-l-l,
  .padding-lg-h-l,
  .padding-lg-a-l {
    padding-left: 60px !important;
  }
  .padding-lg-l-xl,
  .padding-lg-h-xl,
  .padding-lg-a-xl {
    padding-left: 120px !important;
  }
}