/*————————————

Margin Spaces

————————————*/ // // .m-0, .mt-0, .mr-0, .mb-0, .ml-0, .mx-0, .my-0 // .m-auto, .mt-auto, .mt-auto, .mb-auto, .ml-auto, .mx-auto, .my-auto //

/* Margin Spaces (xs) ————————————*/ @include margin-spaces(xs);

/* Margin Spaces (sm) ————————————*/ @include margin-spaces(sm);

/* Margin Spaces (md) ————————————*/ @include margin-spaces(md);

/* Margin Spaces (lg) ————————————*/ @include margin-spaces(lg);

/* Margin Spaces (xl) ————————————*/ @include margin-spaces(xl);

/* Margins Around ————————————*/ .g-ma-1 {

@include px-to-rem(margin, 1px !important);

} .g-ma-3 {

@include px-to-rem(margin, 3px !important);

} .g-ma-5 {

@include px-to-rem(margin, 5px !important);

} .g-ma-10 {

@include px-to-rem(margin, 10px !important);

} .g-ma-20 {

@include px-to-rem(margin, 20px !important);

} .g-ma-minus-1 {

@include px-to-rem(margin, -1px !important);

}

/* Minus Margins ————————————*/ /* Minus Margin Top */ .g-mt-minus-1 {

@include px-to-rem(margin-top, -1px);

} .g-mt-minus-20 {

@include px-to-rem(margin-top, -20px);

} .g-mt-minus-25 {

@include px-to-rem(margin-top, -25px);

} .g-mt-minus-30 {

@include px-to-rem(margin-top, -30px);

} .g-mt-minus-40 {

@include px-to-rem(margin-top, -40px);

} .g-mt-minus-70 {

@include px-to-rem(margin-top, -70px);

} .g-mt-minus-120 {

@include px-to-rem(margin-top, -120px);

} .g-mt-minus-200 {

@include px-to-rem(margin-top, -200px);

} .g-mt-minus-300 {

@include px-to-rem(margin-top, -300px);

}

/* Minus Margin Bottom */ .g-mb-minus-70 {

@include px-to-rem(margin-bottom, -70px);

}

/* Minus Margin Left */ .g-ml-minus-20 {

@include px-to-rem(margin-left, -20px);

} .g-ml-minus-35 {

@include px-to-rem(margin-left, -35px);

} .g-ml-minus-55 {

@include px-to-rem(margin-left, -55px);

} .g-ml-minus-25 {

@include px-to-rem(margin-left, -25px);

} .g-ml-minus-82 {

@include px-to-rem(margin-left, -82px);

} .g-ml-minus-90 {

@include px-to-rem(margin-left, -90px);

} .g-ml-minus-100 {

@include px-to-rem(margin-left, -100px);

} .g-ml-minus-118 {

@include px-to-rem(margin-left, -118px);

} .g-ml-minus-142 {

@include px-to-rem(margin-left, -142px);

}

/* Minus Margin Right */ .g-mr-minus-50 {

@include px-to-rem(margin-right, -50px);

} .g-mr-minus-100 {

@include px-to-rem(margin-right, -100px);

}

/* Margin Left and Right */ .g-mx-minus-1 {

@include px-to-rem(margin-left, -1px);
@include px-to-rem(margin-right, -1px);

} .g-mx-minus-2 {

@include px-to-rem(margin-left, -2px);
@include px-to-rem(margin-right, -2px);

} .g-mx-minus-4 {

@include px-to-rem(margin-left, -4px);
@include px-to-rem(margin-right, -4px);

} .g-mx-minus-5 {

@include px-to-rem(margin-left, -5px);
@include px-to-rem(margin-right, -5px);

} .g-mx-minus-15 {

@include px-to-rem(margin-left, -15px);
@include px-to-rem(margin-right, -15px);

} .g-mx-minus-25 {

@include px-to-rem(margin-left, -25px);
@include px-to-rem(margin-right, -25px);

} .g-mx-minus-30 {

@include px-to-rem(margin-left, -30px);
@include px-to-rem(margin-right, -30px);

}

/* Custon Spaces ————————————*/

/* Margin Top */ .g-mt-10x {

margin-top: 10%; /* O */

} .g-mt-21 {

@include px-to-rem(margin-top, 21px);

} .g-mt-22 {

@include px-to-rem(margin-top, 22px);

} .g-mt-32 {

@include px-to-rem(margin-top, 32px !important); // Z

} .g-mt-57 {

@include px-to-rem(margin-top, 57px !important); // Z

} .g-mt-500 {

@include px-to-rem(margin-top, 500px);

}

/* Margin Bottom */ .g-mb-23 {

@include px-to-rem(margin-bottom, 23px);

} .g-mb-28 {

@include px-to-rem(margin-bottom, 28px);

} .g-mb-500 {

@include px-to-rem(margin-bottom, 500px);

}

/* Margin Left */ .g-ml-10x {

margin-left: 10%; /* O */

} .g-ml-12 {

@include px-to-rem(margin-left, 12px);

} .g-ml-13 {

@include px-to-rem(margin-left, 13px);

} .g-ml-20 {

@include px-to-rem(margin-left, 20px);

} .g-ml-25 {

@include px-to-rem(margin-left, 25px);

} .g-ml-35 {

@include px-to-rem(margin-left, 35px);

} .g-ml-43 {

@include px-to-rem(margin-left, 43px);

} .g-ml-60 {

@include px-to-rem(margin-left, 60px);

} .g-ml-75 {

@include px-to-rem(margin-left, 75px);

} .g-ml-82 {

@include px-to-rem(margin-left, 82px);

} .g-ml-85 {

@include px-to-rem(margin-left, 85px);

} .g-ml-105 {

@include px-to-rem(margin-left, 105px);

} .g-ml-118 {

@include px-to-rem(margin-left, 118px);

} .g-ml-142 {

@include px-to-rem(margin-left, 142px);

}

/* Margin Right */ .g-mr-12 {

@include px-to-rem(margin-right, 12px);

} .g-mr-60 {

@include px-to-rem(margin-right, 60px);

} .g-mr-63 {

@include px-to-rem(margin-right, 63px);

} .g-mr-minus-10 {

@include px-to-rem(margin-right, -10px);

} .g-mr-minus-15 {

@include px-to-rem(margin-right, -15px);

} .g-mr-minus-30 {

@include px-to-rem(margin-right, -30px);

}

/* Margin Left and Right */ .g-mx-minus-10 {

@include px-to-rem(margin-left, -10px);
@include px-to-rem(margin-right, -10px);

} .g-mx-minus-15 {

@include px-to-rem(margin-left, -15px);
@include px-to-rem(margin-right, -15px);

} .g-mx-minus-20 {

@include px-to-rem(margin-left, -20px);
@include px-to-rem(margin-right, -20px);

} .g-mx-minus-25 {

@include px-to-rem(margin-left, -25px);
@include px-to-rem(margin-right, -25px);

} .g-mx-minus-30 {

@include px-to-rem(margin-left, -30px);
@include px-to-rem(margin-right, -30px);

}

/* Margin Top and Bottom */ .g-my-minus-1 {

@include px-to-rem(margin-top, -1px);
@include px-to-rem(margin-bottom, -1px);

} .g-my-minus-2 {

@include px-to-rem(margin-top, -2px);
@include px-to-rem(margin-bottom, -2px);

} .g-my-minus-10 {

@include px-to-rem(margin-top, -10px);
@include px-to-rem(margin-bottom, -10px);

}

// @media (min-width: $g-sm) { // .g-x-40–sm { // @include px-to-rem(margin-right, 40px); // @include px-to-rem(margin-left, 40px); // } // }

.g-m-reset {

margin: 0 !important;

}

@media (min-width: $g-sm) {

.g-mb-0--sm {
  margin-bottom: 0 !important;
}

.g-mx-minus-10--sm {
  @include px-to-rem(margin-left, -10px);
  @include px-to-rem(margin-right, -10px);
}

.g-my-minus-5--sm {
  @include px-to-rem(margin-top, -5px);
  @include px-to-rem(margin-bottom, -5px);
}

.g-my-minus-10--sm {
  @include px-to-rem(margin-top, -10px);
  @include px-to-rem(margin-bottom, -10px);
}

.g-mx-minus-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.g-my-minus-0 {
  margin-top: 0;
  margin-bottom: 0;
}

}

@media (min-width: $g-md) {

.g-mx-12--md {
  @include px-to-rem(margin-left, 12px !important);
  @include px-to-rem(margin-right, 12px !important);
}
.g-ml-12--md {
  @include px-to-rem(margin-left, 12px !important);
}
.g-mr-12--md {
  @include px-to-rem(margin-right, 12px !important);
}
.g-mb-0--md {
  margin-bottom: 0 !important;
}
.g-ml-minus-1--md {
  @include px-to-rem(margin-left, -1px);
}
.g-mr-minus-1--md {
  @include px-to-rem(margin-right, -1px);
}
.g-ml-minus-9--md {
  @include px-to-rem(margin-left, 9px !important);
}
.g-mr-minus-9--md {
  @include px-to-rem(margin-right, 9px !important);
}
.g-ml-minus-82--md {
  @include px-to-rem(margin-left, -82px !important);
}
.g-mr-60--md {
  @include px-to-rem(margin-right, 60px !important);
}
.g-mr-63--md {
  @include px-to-rem(margin-right, 63px !important);
}
.g-ml-85--md {
  @include px-to-rem(margin-left, 85px !important);
}
.g-ml-minus-90--md {
  @include px-to-rem(margin-left, -90px !important);
}
.g-m-reset--md {
  margin: 0 !important;
}

}

@media (min-width: $g-lg) {

.g-mx-12--lg {
  @include px-to-rem(margin-left, 12px !important);
  @include px-to-rem(margin-right, 12px !important);
}

.g-mb-60--lg {
  @include px-to-rem(margin-bottom, 60px !important);
}

.g-ml-12--lg {
  @include px-to-rem(margin-left, 12px !important);
}
.g-mr-12--lg {
  @include px-to-rem(margin-right, 12px !important);
}
.g-mr-minus-1--lg {
  @include px-to-rem(margin-right, -1px);
}
.g-mr-minus-100--lg {
  @include px-to-rem(margin-right, -100px);
}
.g-ml-minus-100--lg {
  @include px-to-rem(margin-left, -100px);
}
.g-ml-minus-100 {
  @include px-to-rem(margin-left, -100px);
}
.g-mx-minus-5--lg {
  @include px-to-rem(margin-left, -5px);
  @include px-to-rem(margin-right, -5px);
}
.g-mx-minus-10--lg {
  @include px-to-rem(margin-left, -10px);
  @include px-to-rem(margin-right, -10px);
}
.g-mx-minus-15--lg {
  @include px-to-rem(margin-left, -15px);
  @include px-to-rem(margin-right, -15px);
}
.g-ml-minus-50--lg {
  @include px-to-rem(margin-left, -50px);
}

.g-m-reset--lg {
  margin: 0 !important;
}

.g-ml-100--lg {
  @include px-to-rem(margin-left, 100px);
}

}

@media (min-width: $g-xl) {

.g-mx-minus-10--xl {
  @include px-to-rem(margin-left, -10px);
  @include px-to-rem(margin-right, -10px);
}
.g-mx-minus-15--xl {
  @include px-to-rem(margin-left, -15px);
  @include px-to-rem(margin-right, -15px);
}

.g-m-reset--xl {
  margin: 0 !important;
}

}