/* 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 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;
}
.marbxxxl {
  margin-bottom: 16rem !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;
}
.martxxxl {
  margin-top: 16rem !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 !important;
}
.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-center {
  justify-items: center !important;
}
.grid-left {
  justify-items: start !important;
}
.grid-right {
  justify-items: end !important;
}
.grid-v-center {
  align-items: center !important;
}
.grid-v-bottom {
  align-items: end !important;
}


/* Grid container */
.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-11 {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-gap: 2rem;
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2rem;
}
.grid-13 {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-gap: 2rem;
}
.grid-14 {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-gap: 2rem;
}
.grid-15 {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-gap: 2rem;
}
.grid-16 {
  display: grid;
  grid-template-columns: repeat(16, 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;
}
.span-10 {
  grid-column: span 10;
}
.span-11 {
  grid-column: span 11;
}
.span-12 {
  grid-column: span 12;
}
.span-13 {
  grid-column: span 13;
}
.span-14 {
  grid-column: span 14;
}
.span-15 {
  grid-column: span 15;
}


.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;
}
.gap-7 {
  grid-gap: 7rem !important;
}
.gap-8 {
  grid-gap: 8rem !important;
}
.gap-9 {
  grid-gap: 9rem !important;
}
.gap-10 {
  grid-gap: 10rem !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);
  }
  .grid-11-lg {
    grid-template-columns: repeat(11, 1fr);
  }
  .grid-12-lg {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid-13-lg {
    grid-template-columns: repeat(13, 1fr);
  }
  .grid-14-lg {
    grid-template-columns: repeat(14, 1fr);
  }
  .grid-15-lg {
    grid-template-columns: repeat(15, 1fr);
  }
  .grid-16-lg {
    grid-template-columns: repeat(16, 1fr);
  }

  .span-1-lg {
    grid-column: span 1;
  }
  .span-2-lg {
    grid-column: span 2;
  }
  .span-3-lg {
    grid-column: span 3;
  }
  .span-4-lg {
    grid-column: span 4;
  }
  .span-5-lg {
    grid-column: span 5;
  }
  .span-6-lg {
    grid-column: span 6;
  }
  .span-7-lg {
    grid-column: span 7;
  }
  .span-8-lg {
    grid-column: span 8;
  }
  .span-9-lg {
    grid-column: span 9;
  }
  .span-10-lg {
    grid-column: span 10;
  }
  .span-11-lg {
    grid-column: span 11;
  }
  .span-12-lg {
    grid-column: span 12;
  }
  .span-13-lg {
    grid-column: span 13;
  }
  .span-14-lg {
    grid-column: span 14;
  }
  .span-15-lg {
    grid-column: span 15;
  }


  .gap-0-lg {
    grid-gap: 0 !important;
  }
  .gap-1-lg {
    grid-gap: 1rem !important;
  }
  .gap-2-lg {
    grid-gap: 2rem !important;
  }
  .gap-3-lg {
    grid-gap: 3rem !important;
  }
  .gap-4-lg {
    grid-gap: 4rem !important;
  }
  .gap-5-lg {
    grid-gap: 5rem !important;
  }
  .gap-6-lg {
    grid-gap: 6rem !important;
  }
  .gap-7-lg {
    grid-gap: 7rem !important;
  }
  .gap-8-lg {
    grid-gap: 8rem !important;
  }
}

@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);
  }
  .grid-11-md {
    grid-template-columns: repeat(11, 1fr);
  }
  .grid-12-md {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid-13-md {
    grid-template-columns: repeat(13, 1fr);
  }
  .grid-14-md {
    grid-template-columns: repeat(14, 1fr);
  }
  .grid-15-md {
    grid-template-columns: repeat(15, 1fr);
  }
  .grid-16-md {
    grid-template-columns: repeat(16, 1fr);
  }

  .span-1-md {
    grid-column: span 1;
  }
  .span-2-md {
    grid-column: span 2;
  }
  .span-3-md {
    grid-column: span 3;
  }
  .span-4-md {
    grid-column: span 4;
  }
  .span-5-md {
    grid-column: span 5;
  }
  .span-6-md {
    grid-column: span 6;
  }
  .span-7-md {
    grid-column: span 7;
  }
  .span-8-md {
    grid-column: span 8;
  }
  .span-9-md {
    grid-column: span 9;
  }
  .span-10-md {
    grid-column: span 10;
  }
  .span-11-md {
    grid-column: span 11;
  }
  .span-12-md {
    grid-column: span 12;
  }
  .span-13-md {
    grid-column: span 13;
  }
  .span-14-md {
    grid-column: span 14;
  }
  .span-15-md {
    grid-column: span 15;
  }

  .gap-0-md {
    grid-gap: 0 !important;
  }
  .gap-1-md {
    grid-gap: 1rem !important;
  }
  .gap-2-md {
    grid-gap: 2rem !important;
  }
  .gap-3-md {
    grid-gap: 3rem !important;
  }
  .gap-4-md {
    grid-gap: 4rem !important;
  }
  .gap-5-md {
    grid-gap: 5rem !important;
  }
  .gap-6-md {
    grid-gap: 6rem !important;
  }
  .gap-7-md {
    grid-gap: 7rem !important;
  }
  .gap-8-md {
    grid-gap: 8rem !important;
  }
}

@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);
  }
  .grid-11-sm {
    grid-template-columns: repeat(11, 1fr);
  }
  .grid-12-sm {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid-13-sm {
    grid-template-columns: repeat(13, 1fr);
  }
  .grid-14-sm {
    grid-template-columns: repeat(14, 1fr);
  }
  .grid-15-sm {
    grid-template-columns: repeat(15, 1fr);
  }
  .grid-16-sm {
    grid-template-columns: repeat(16, 1fr);
  }

  .span-1-sm {
    grid-column: span 1;
  }
  .span-2-sm {
    grid-column: span 2;
  }
  .span-3-sm {
    grid-column: span 3;
  }
  .span-4-sm {
    grid-column: span 4;
  }
  .span-5-sm {
    grid-column: span 5;
  }
  .span-6-sm {
    grid-column: span 6;
  }
  .span-7-sm {
    grid-column: span 7;
  }
  .span-8-sm {
    grid-column: span 8;
  }
  .span-9-sm {
    grid-column: span 9;
  }
  .span-10-sm {
    grid-column: span 10;
  }
  .span-11-sm {
    grid-column: span 11;
  }
  .span-12-sm {
    grid-column: span 12;
  }
  .span-13-sm {
    grid-column: span 13;
  }
  .span-14-sm {
    grid-column: span 14;
  }
  .span-15-sm {
    grid-column: span 15;
  }

  .gap-0-sm {
    grid-gap: 0 !important;
  }
  .gap-1-sm {
    grid-gap: 1rem !important;
  }
  .gap-2-sm {
    grid-gap: 2rem !important;
  }
  .gap-3-sm {
    grid-gap: 3rem !important;
  }
  .gap-4-sm {
    grid-gap: 4rem !important;
  }
  .gap-5-sm {
    grid-gap: 5rem !important;
  }
  .gap-6-sm {
    grid-gap: 6rem !important;
  }
  .gap-7-sm {
    grid-gap: 7rem !important;
  }
  .gap-8-sm {
    grid-gap: 8rem !important;
  }
}

@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);
  }
  .grid-11-xs {
    grid-template-columns: repeat(11, 1fr);
  }
  .grid-12-xs {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid-13-xs {
    grid-template-columns: repeat(13, 1fr);
  }
  .grid-14-xs {
    grid-template-columns: repeat(14, 1fr);
  }
  .grid-15-xs {
    grid-template-columns: repeat(15, 1fr);
  }
  .grid-16-xs {
    grid-template-columns: repeat(16, 1fr);
  }

  .span-1-xs {
    grid-column: span 1;
  }
  .span-2-xs {
    grid-column: span 2;
  }
  .span-3-xs {
    grid-column: span 3;
  }
  .span-4-xs {
    grid-column: span 4;
  }
  .span-5-xs {
    grid-column: span 5;
  }
  .span-6-xs {
    grid-column: span 6;
  }
  .span-7-xs {
    grid-column: span 7;
  }
  .span-8-xs {
    grid-column: span 8;
  }
  .span-9-xs {
    grid-column: span 9;
  }
  .span-10-xs {
    grid-column: span 10;
  }
  .span-11-xs {
    grid-column: span 11;
  }
  .span-12-xs {
    grid-column: span 12;
  }
  .span-13-xs {
    grid-column: span 13;
  }
  .span-14-xs {
    grid-column: span 14;
  }
  .span-15-xs {
    grid-column: span 15;
  }

  .gap-0-xs {
    grid-gap: 0 !important;
  }
  .gap-1-xs {
    grid-gap: 1rem !important;
  }
  .gap-2-xs {
    grid-gap: 2rem !important;
  }
  .gap-3-xs {
    grid-gap: 3rem !important;
  }
  .gap-4-xs {
    grid-gap: 4rem !important;
  }
  .gap-5-xs {
    grid-gap: 5rem !important;
  }
  .gap-6-xs {
    grid-gap: 6rem !important;
  }
  .gap-7-xs {
    grid-gap: 7rem !important;
  }
  .gap-8-xs {
    grid-gap: 8rem !important;
  }
}


.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;
  }

}

/* Postions */
.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

/* Images */
.background-cover {
  background-size: cover !important;
  background-position: center !important;
}

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

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

.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.circle {
  border-radius: 50%;
}


/* SHOW HAND ON HOVER */
.show-hand:hover {
  cursor: pointer !important;
}