/* UTILITIES
------------------------------------------------------------------------*/

/* PADDING
/* .p-1 means padding in all directions
/* .py-1 means padding only on the y axis (top and bottom)
/* .pt-1 means padding-top
/* .pb-1 means padding-bottom
------------------------------------------------------------------------*/
.p-0 { padding: 0 !important; }
.p-1 { padding: 1rem !important; }
.p-2 { padding: 2rem !important; }
.p-3 { padding: 3rem !important; }
.p-4 { padding: 4rem !important; }
.p-5 { padding: 5rem !important; }

.px-1   { padding: 0 1rem !important; }
.px-2   { padding: 0 2rem !important; }
.px-3   { padding: 0 3rem !important; }
.px-4   { padding: 0 4rem !important; }
.px-5   { padding: 0 5rem !important; }
.px-8   { padding: 0 8rem !important; }

.py-1   { padding: 1rem 0 !important; }
.py-2   { padding: 2rem 0 !important; }
.py-3   { padding: 3rem 0 !important; }
.py-4   { padding: 4rem 0 !important; }
.py-5   { padding: 5rem 0 !important; }
.py-8   { padding: 8rem 0 !important; }

.pt-0  { padding-top: 0 !important; }
.pt-1  { padding-top: 1rem !important; }
.pt-2  { padding-top: 2rem !important; }
.pt-3  { padding-top: 3rem !important; }
.pt-4  { padding-top: 4rem !important; }
.pt-5  { padding-top: 5rem !important; }

.pb-0  { padding-bottom : 0 !important; }
.pb-1  { padding-bottom : 1rem !important; }
.pb-2  { padding-bottom : 2rem !important; }
.pb-3  { padding-bottom : 3rem !important; }
.pb-4  { padding-bottom : 4rem !important; }
.pb-5  { padding-bottom : 5rem !important; }

/* MARGIN
/* .m-1 means margin in all directions
/* .my-1 means margin only on the y axis (top and bottom)
/* .mt-1 means margin-top
/* .mb-1 means margin-bottom
------------------------------------------------------------------------*/
.m-0  { margin: 0 !important; }
.m-1  { margin: 1rem !important; }
.m-2  { margin: 2rem !important; }
.m-3  { margin: 3rem !important; }
.m-4  { margin: 4rem !important; }
.m-5  { margin: 5rem !important; }

.mx-1 { margin: 0 1rem !important; }
.mx-2 { margin: 0 2rem !important; }
.mx-3 { margin: 0 3rem !important; }
.mx-4 { margin: 0 4rem !important; }
.mx-5 { margin: 0 5rem !important; }

.my-1 { margin: 1rem 0 !important; }
.my-2 { margin: 2rem 0 !important; }
.my-3 { margin: 3rem 0 !important; }
.my-4 { margin: 4rem 0 !important; }
.my-5 { margin: 5rem 0 !important; }

.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: 1rem !important; }
.mt-2  { margin-top: 2rem !important; }
.mt-3  { margin-top: 3rem !important; }
.mt-4  { margin-top: 4rem !important; }
.mt-5  { margin-top: 5rem !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: 1rem !important; }
.mb-2  { margin-bottom: 2rem !important; }
.mb-3  { margin-bottom: 3rem !important; }
.mb-4  { margin-bottom: 4rem !important; }
.mb-5  { margin-bottom: 5rem !important; }

/* WIDTH
------------------------------------------------------------------------*/
.full-width,
.w-100    { width: 100% !important; }
.w-90     { width: 90% !important; }
.w-80     { width: 80% !important; }
.w-70     { width: 70% !important; }
.w-60     { width: 60% !important; }
.w-50     { width: 50% !important; }
.w-40     { width: 40% !important; }
.w-30     { width: 30% !important; }
.w-20     { width: 20% !important; }
.w-10     { width: 10% !important; }
.w-auto   { width: auto !important; }

@media screen and (min-width: 768px) {
  .w-md-100  { width: 100% !important; }
  .w-md-90   { width: 90% !important; }
  .w-md-80   { width: 80% !important; }
  .w-md-70   { width: 70% !important; }
  .w-md-60   { width: 60% !important; }
  .w-md-50   { width: 50% !important; }
  .w-md-40   { width: 40% !important; }
  .w-md-30   { width: 30% !important; }
  .w-md-20   { width: 20% !important; }
  .w-md-10   { width: 10% !important; }
  .w-md-auto { width: auto !important; }
}

@media screen and (min-width: 1040px) {
  .w-lg-100  { width: 100% !important; }
  .w-lg-90   { width: 90% !important; }
  .w-lg-80   { width: 80% !important; }
  .w-lg-70   { width: 70% !important; }
  .w-lg-60   { width: 60% !important; }
  .w-lg-50   { width: 50% !important; }
  .w-lg-40   { width: 40% !important; }
  .w-lg-30   { width: 30% !important; }
  .w-lg-20   { width: 20% !important; }
  .w-lg-10   { width: 10% !important; }
  .w-lg-auto { width: auto !important; }
}

.border-bottom {
  border-bottom: 2px solid #0060E1;
  border-bottom: 2px solid var(--bomb-blue);
}

[class*="w-"] {
  margin: 0 auto;
}

.hidden {
  display: none !important;
}

.inline {
  display: inline-block;
}

@media screen and (max-width: 1040px) {
  .mobile-only {
    display: block;
  }
  .desktop-only {
    display: none;
  }
}

@media screen and (min-width: 1040px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: block;
  }
}