/* Font Helpers */

.f200 {
  font-weight: 200 !important;
}

.f300 {
  font-weight: 300 !important;
}

.f400 {
  font-weight: 400 !important;
}

.f500 {
  font-weight: 500 !important;
}

.f600 {
  font-weight: 600 !important;
}

.f700 {
  font-weight: 700 !important;
}

.f800 {
  font-weight: 800 !important;
}

.f900 {
  font-weight: 900 !important;
}


/* text variants */
.italic {
  font-style: italic !important;
}




/* Text Align */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

@media screen and (max-width: 1200px) {

  .text-center-lg {
    text-align: center;
  }

  .text-left-lg {
    text-align: left;
  }

  .text-right-lg {
    text-align: right;
  }

}

@media screen and (max-width: 960px) {

  .text-center-md {
    text-align: center;
  }

  .text-left-md {
    text-align: left;
  }

  .text-right-md {
    text-align: right;
  }

}

@media screen and (max-width: 768px) {

  .text-center-sm {
    text-align: center;
  }

  .text-left-sm {
    text-align: left;
  }

  .text-right-sm {
    text-align: right;
  }

}

@media screen and (max-width: 480px) {

  .text-center-xs {
    text-align: center;
  }

  .text-left-xs {
    text-align: left;
  }

  .text-right-xs {
    text-align: right;
  }

}



/* Margin helpers */
.nomargin {
  margin: 0 !important;
  ;
}


.marbxxl {
  margin-bottom: 11rem !important;
}

.marbxl {
  margin-bottom: 8rem !important;
}

.marbl {
  margin-bottom: 5.5rem !important;
}

.marbm {
  margin-bottom: 3.5rem !important;
}

.marbs {
  margin-bottom: 2rem !important;
}

.marbxs {
  margin-bottom: 1rem !important;
}

.marbxxs {
  margin-bottom: 0.5rem !important;
}

.marbnone {
  margin-bottom: 0 !important;
}

.martxxl {
  margin-top: 11rem !important;
}

.martxl {
  margin-top: 8rem !important;
}

.martl {
  margin-top: 5.5rem !important;
}

.martm {
  margin-top: 3.5rem !important;
}

.marts {
  margin-top: 2rem !important;
}

.martxs {
  margin-top: 1rem !important;
}

.martxxs {
  margin-top: 0.5rem !important;
}

.martnone {
  margin-top: 0 !important;
}


/* Padding helpers */
.nopad {
  padding: 0;
}


.padtxxs {
  padding-top: 0.5rem !important;
}

.padtxs {
  padding-top: 1rem !important;
}

.padts {
  padding-top: 2rem !important;
}

.padtm {
  padding-top: 3.5rem !important;
}

.padtl {
  padding-top: 5.5rem !important;
}

.padtxl {
  padding-top: 8rem !important;
}

.padtxxl {
  padding-top: 11rem !important;
}

.padbxxs {
  padding-bottom: 0.5rem !important;
}

.padbxs {
  padding-bottom: 1rem !important;
}

.padbs {
  padding-bottom: 2rem !important;
}

.padbm {
  padding-bottom: 3.5rem !important;
}

.padbl {
  padding-bottom: 5.5rem !important;
}

.padbxl {
  padding-bottom: 8rem !important;
}

.padbxxl {
  padding-bottom: 11rem !important;
}


/* GRID */
.grid-1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2rem;
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 2rem;
}

.grid-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 2rem;
}

.grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 2rem;
}

.grid-9 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-gap: 2rem;
}

.grid-10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 2rem;
}


/* Grid child align */

/* Grid child span */
.span-1 {
  grid-column: span 1;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}

.span-6 {
  grid-column: span 6;
}

.span-7 {
  grid-column: span 7;
}

.span-8 {
  grid-column: span 8;
}

.span-9 {
  grid-column: span 9;
}

.gap-0 {
  grid-gap: 0 !important;
}

.gap-1 {
  grid-gap: 1rem !important;
}

.gap-2 {
  grid-gap: 2rem !important;
}

.gap-3 {
  grid-gap: 3rem !important;
}

.gap-4 {
  grid-gap: 4rem !important;
}

.gap-5 {
  grid-gap: 5rem !important;
}

.gap-6 {
  grid-gap: 6rem !important;
}


@media screen and (max-width: 1200px) {
  .grid-1-lg {
    grid-template-columns: 1fr;
  }

  .grid-2-lg {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3-lg {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4-lg {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-5-lg {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid-6-lg {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid-7-lg {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid-8-lg {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid-9-lg {
    grid-template-columns: repeat(9, 1fr);
  }

  .grid-10-lg {
    grid-template-columns: repeat(10, 1fr);
  }

  .span-1-lg {
    grid-column: span 1;
  }
}

@media screen and (max-width: 960px) {
  .grid-1-md {
    grid-template-columns: 1fr;
  }

  .grid-2-md {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3-md {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4-md {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-5-md {
    grid-template-columns: repeat(5 1fr);
  }

  .grid-6-md {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid-7-md {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid-8-md {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid-9-md {
    grid-template-columns: repeat(9, 1fr);
  }

  .grid-10-md {
    grid-template-columns: repeat(10, 1fr);
  }
  .span-1-md {
    grid-column: span 1;
  }
}

@media screen and (max-width: 768px) {
  .grid-1-sm {
    grid-template-columns: 1fr;
  }

  .grid-2-sm {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3-sm {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4-sm {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-5-sm {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid-6-sm {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid-7-sm {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid-8-sm {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid-9-sm {
    grid-template-columns: repeat(9, 1fr);
  }

  .grid-10-sm {
    grid-template-columns: repeat(10, 1fr);
  }
  .span-1-sm {
    grid-column: span 1;
  }
}

@media screen and (max-width: 480px) {
  .grid-1-xs {
    grid-template-columns: 1fr;
  }

  .grid-2-xs {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3-xs {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4-xs {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-5-xs {
    grid-template-columns: repeat(5, 1fr);
  }

  .grid-6-xs {
    grid-template-columns: repeat(6, 1fr);
  }

  .grid-7-xs {
    grid-template-columns: repeat(7, 1fr);
  }

  .grid-8-xs {
    grid-template-columns: repeat(8, 1fr);
  }

  .grid-9-xs {
    grid-template-columns: repeat(9, 1fr);
  }

  .grid-10-xs {
    grid-template-columns: repeat(10, 1fr);
  }
  .span-1-xs {
    grid-column: span 1;
  }
}


.hidden {
  display: none !important;
}
.block {
  display: block !important;
}
.inline {
  display: inline !important;
}
.inline-block {
  display: inline-block !important;
}


@media screen and (max-width: 1200px) {

  .hidden-lg {
    display: none !important;
  }
  .block-lg {
    display: block !important;
  }
  .inline-lg {
    display: inline !important;
  }
  .inline-block-lg {
    display: inline-block !important;
  }

}

@media screen and (max-width: 960px) {

  .hidden-md {
    display: none !important;
  }
  .block-md {
    display: block !important;
  }
  .inline-md {
    display: inline !important;
  }
  .inline-block-md {
    display: inline-block !important;
  }

}

@media screen and (max-width: 768px) {

  .hidden-sm {
    display: none !important;
  }
  .block-sm {
    display: block !important;
  }
  .inline-sm {
    display: inline !important;
  }
  .inline-block-sm {
    display: inline-block !important;
  }

}

@media screen and (max-width: 480px) {

  .hidden-xs {
    display: none !important;
  }
  .block-xs {
    display: block !important;
  }
  .inline-xs {
    display: inline !important;
  }
  .inline-block-xs {
    display: inline-block !important;
  }

}

.grid-v-center {
  align-items: center !important;
}

.grid-v-bottom {
  align-items: flex-end !important;
}

/* Images */
.responsive {
  max-width: 100%;
  height: auto;
}

.responsive-full {
  width: 100%;
  height: auto;
}