/* Margin */
.m-none { margin: 0; }
.m-sm { margin: 5px; }
.m-md { margin: 10px; }
.m-lg { margin: 20px; }
.m-xl { margin: 40px; }

.m-t-none { margin-top: 0; }
.m-t-sm { margin-top: 5px; }
.m-t-md { margin-top: 10px; }
.m-t-lg { margin-top: 20px; }
.m-t-xl { margin-top: 40px; }

.m-b-none { margin-bottom: 0; }
.m-b-sm { margin-bottom: 5px; }
.m-b-md { margin-bottom: 10px; }
.m-b-lg { margin-bottom: 20px; }
.m-b-xl { margin-bottom: 40px; }

.m-l-none { margin-left: 0; }
.m-l-sm { margin-left: 5px; }
.m-l-md { margin-left: 10px; }
.m-l-lg { margin-left: 20px; }
.m-l-xl { margin-left: 40px; }

.m-r-none { margin-right: 0; }
.m-r-sm { margin-right: 5px; }
.m-r-md { margin-right: 10px; }
.m-r-lg { margin-right: 20px; }
.m-r-xl { margin-right: 40px; }

/* Padding */

.p-sm { padding: 5px; }
.p-md { padding: 10px; }
.p-lg { padding: 20px; }
.p-xl { padding: 40px; }

.p-t-sm { padding-top: 5px; }
.p-t-md { padding-top: 10px; }
.p-t-lg { padding-top: 20px; }
.p-t-xl { padding-top: 40px; }

.p-b-sm { padding-bottom: 5px; }
.p-b-md { padding-bottom: 10px; }
.p-b-lg { padding-bottom: 20px; }
.p-b-xl { padding-bottom: 40px; }

.p-l-sm { padding-left: 5px; }
.p-l-md { padding-left: 10px; }
.p-l-lg { padding-left: 20px; }
.p-l-xl { padding-left: 40px; }

.p-r-sm { padding-right: 5px; }
.p-r-md { padding-right: 10px; }
.p-r-lg { padding-right: 20px; }
.p-r-xl { padding-right: 40px; }


/* responsive-align */
.text-center-xs { text-align: center; }
.text-left-xs { text-align: left; }
.text-right-xs { text-align: right; }

/* Small Devices (tablets, phones, 768px and up) */
@media only screen and (min-width: 768px) {
  .text-center-sm { text-align: center; }
  .text-left-sm { text-align: left; }
  .text-right-sm { text-align: right; }
}

/* Medium Devices 992px and up */
@media only screen and (min-width: 992px) {
  .text-center-md { text-align: center; }
  .text-left-md { text-align: left; }
  .text-right-md { text-align: right; }
}

/* Large Desktops, 1200px and up */
@media only screen and (min-width: 1200px) {
  .text-center-lg { text-align: center; }
  .text-left-lg { text-align: left; }
  .text-right-lg { text-align: right; }
}