/*----------------------------------------------------------------------------------------
						PADDING UTILS
----------------------------------------------------------------------------------------*/

.no-padding{
  padding: 0 !important;
}
.no-padding-h{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.no-padding-v{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.p-xs{
  padding: 5px;
}
.p-sm{
  padding: 10px;
}
.p{
  padding: 15px;
}
.p-md{
  padding: 20px;
}
.p-lg{
  padding: 30px;
}
.p-h{
  padding-left: 15px;
  padding-right: 15px;
}
.p-h-xs{
  padding-left: 5px;
  padding-right: 5px;
}
.p-h-sm{
  padding-left: 10px;
  padding-right: 10px;
}
.p-h-md{
  padding-left: 20px;
  padding-right: 20px;
}
.p-h-lg{
  padding-left: 30px;
  padding-right: 30px;
}
.p-v{
  padding-top: 15px;
  padding-bottom: 15px;
}
.p-v-xs{
  padding-top: 5px;
  padding-bottom: 5px;
}
.p-v-sm{
  padding-top: 10px;
  padding-bottom: 10px;
}
.p-v-md{
  padding-top: 20px;
  padding-bottom: 20px;
}
.p-v-lg{
  padding-top: 30px;
  padding-bottom: 30px;
}

// xs
@media (max-width: 767px) {
  .p-md,
  .p-lg{
    padding: 15px;
  }
  .p-h-md,
  .p-h-lg{
    padding-left: 15px;
    padding-right: 15px;
  }
  .p-v-md,
  .p-v-lg{
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

/*----------------------------------------------------------------------------------------
						MARGIN UTILS
----------------------------------------------------------------------------------------*/
.no-margin{margin: 0}
.m     {margin:       15px}
.m-xs  {margin:       5px}
.m-sm  {margin:       10px}
.m-md  {margin:       20px}
.m-lg  {margin:       30px}

.m-v-xs{margin-top: 5px; margin-bottom: 5px;}
.m-v-sm{margin-top: 10px;margin-bottom: 10px;}
.m-v   {margin-top: 15px;margin-bottom: 15px;}
.m-v-md{margin-top: 20px;margin-bottom: 20px;}
.m-v-lg{margin-top: 30px;margin-bottom: 30px;}

.m-h-xs{margin-left:5px; margin-right: 5px;}
.m-h-sm{margin-left:10px;margin-right: 10px;}
.m-h   {margin-left:15px;margin-right: 15px;}
.m-h-md{margin-left:20px;margin-right: 20px;}
.m-h-lg{margin-left:30px;margin-right: 30px;}

.m-t   {margin-top:   15px;}
.m-t-xs{margin-top:   5px;}
.m-t-sm{margin-top:   10px;}
.m-t-md{margin-top:   20px;}
.m-t-lg{margin-top:   30px;}

.m-r   {margin-right: 15px;}
.m-r-xs{margin-right: 5px;}
.m-r-sm{margin-right: 10px;}
.m-r-md{margin-right: 20px;}
.m-r-lg{margin-right: 30px;}

.m-b   {margin-bottom:15px;}
.m-b-xs{margin-bottom:5px;}
.m-b-sm{margin-bottom:10px;}
.m-b-md{margin-bottom:20px;}
.m-b-lg{margin-bottom:30px;}

.m-l   {margin-left:  15px;}
.m-l-xs{margin-left:  5px;}
.m-l-sm{margin-left:  10px;}
.m-l-md{margin-left:  20px;}
.m-l-lg{margin-left:  30px;}

.m-n  {margin:       -15px}
.m-h-n{margin-left:  -15px;margin-right: -15px;}
.m-v-n{margin-top:   -15px;margin-bottom:-15px;}
.m-l-n{margin-left:  -15px;}
.m-r-n{margin-right: -15px;}
.m-t-n{margin-top:   -15px;}
.m-b-n{margin-bottom:-15px;}

/*----------------------------------------------------------------------------------------
						RADIUS UTILS
----------------------------------------------------------------------------------------*/
.no-radius{
  border-radius: 0
}
.no-r-t{
  .border-top-radius(0);
}
.no-r-r{
  .border-right-radius(0);
}
.no-r-b{
  .border-bottom-radius(0);
}
.no-r-l{
  .border-left-radius(0);
}

.r{
  border-radius: @border-radius-base;
}
.r-t{
  .border-top-radius(@border-radius-base);
}
.r-r{
  .border-right-radius(@border-radius-base);
}
.r-b{
  .border-bottom-radius(@border-radius-base);
}
.r-l{
  .border-left-radius(@border-radius-base);
}
.r-2x{
  border-radius: @border-radius-base * 2;
}
.r-3x{
  border-radius: @border-radius-base * 3;
}

/*----------------------------------------------------------------------------------------
						SCROLL UTILS
----------------------------------------------------------------------------------------*/
.scrollable{
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  &.hover {
    overflow-y: hidden !important;
    > *{
      margin-top: -1px;
    }
    &:hover{
      overflow: visible !important;
      overflow-y: auto !important;
    }
  }
  .smart & {
    overflow-y: auto !important;
  }
}

.scroll-x,
.scroll-y{
  overflow:hidden;
  -webkit-overflow-scrolling:touch;
}
.scroll-y{
  overflow-y:auto;
}
.scroll-x{
  overflow-x:auto;
}


/*----------------------------------------------------------------------------------------
						TEXT UTILS
----------------------------------------------------------------------------------------*/

.l-h{
  line-height: @line-height-base;
}
.l-h-1x{
  line-height: 1;
}
.l-h-2x{
  line-height: 2em;
}

.l-s-1x{
  letter-spacing: 1;
}
.l-s-2x{
  letter-spacing: 2;
}
.l-s-3x{
  letter-spacing: 3;
}

.h-1x{
  height: @line-height-computed;
}
.h-2x{
  height: @line-height-computed * 2;
}
.h-3x{
  height: @line-height-computed * 3;
}
.h-4x{
  height: @line-height-computed * 4;
}

.font-normal{
  font-weight: normal;
}
.font-thin{
  font-weight: 300;
}
.font-bold{
  font-weight: 700;
}

.text-4x{
  font-size: 4em;
}
.text-3x{
  font-size: 3em;
}
.text-2x{
  font-size: 2em;
}
.text-xl{
  font-size: @font-size-xl;
}
.text-lg{
  font-size: @font-size-lg;
}
.text-md{
  font-size: @font-size-md;
}
.text-base{
  font-size: @font-size-base;
}
.text-sm{
  font-size: @font-size-sm;
}
.text-xs{
  font-size: @font-size-xs;
}
.text-xxs{
  font-size: @font-size-xxs;
}

.text-u-c{
  text-transform: uppercase;
}
.text-l-t{
  text-decoration: line-through;
}
.text-u-l{
  text-decoration: underline;
}

.text-ellipsis{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}
.text-fade{
  position: relative;
  overflow: hidden;
  &:after{
    content: "";
    text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    height: 1.2em;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
  }
}

.no-select{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.no-br {
  white-space: nowrap !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  .text-center-sm{
    text-align: center;
  }
  .text-left-sm{
    text-align: left;
  }
  .text-right-sm{
    text-align: right;
  }
}

@media (max-width: 767px) {
  .text-center-xs{
    text-align: center;
  }
  .text-left-xs{
    text-align: left;
  }
  .text-right-xs{
    text-align: right;
  }
}

/*----------------------------------------------------------------------------------------
						SHADOW UTILS
----------------------------------------------------------------------------------------*/


.no-shadow{
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.box-shadow{
  .box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.box-shadow-md{
 	box-shadow: 0 2px 4px rgba(0,0,0,0.2) ;
}
.box-shadow-lg{
 	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05) ;
}
.box-shadow-inset{
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15) ;
}
.text-shadow{
  text-shadow: 0 4px 0 rgba(0,0,0,.1);
}


/*----------------------------------------------------------------------------------------
						RESPONSIVE PADDING UTILS
----------------------------------------------------------------------------------------*/


.push--0 {
    margin-bottom: 0
}
.push--10 {
    margin-bottom: 10px
}
.push--15 {
    margin-bottom: 15px
}
.push--20 {
    margin-bottom: 20px
}
.push--30 {
    margin-bottom: 30px
}
.push--40 {
    margin-bottom: 40px
}
.push--60 {
    margin-bottom: 60px
}
.push--80 {
    margin-bottom: 80px
}
.push--100 {
    margin-bottom: 100px
}
.push--150 {
    margin-bottom: 150px
}

@media all and (max-width: 991px) {
  .push--150 {
      margin-bottom: 75px
  }
}