:root {
  --spacing-unit: 0.625rem;
}


.overflow-hidden {
  overflow: hidden;
}

.fixed {
  position: fixed;
}

.s-only {
  display: none !important; 
  
  @media screen and (max-width:767px) {
    display: flex !important;
  }
}
.s-hide {
  @media screen and (max-width:767px) {
    display: none !important;
  }
}

.pos-relative {position: relative;}
.pos-absolute {position: absolute;}
.pos-static {position: static;}

.dspl-block {display: block;}
.dspl-none {display: none;}
.dspl-inline {display: inline;}
.dspl-inline-block {display: inline-block;}
.dspl-flex {display: flex;}
.dspl-inline-flex {display: inline-flex;}

@media screen and (max-width:1280px) {
  .l-dspl-block {display: block;}
  .l-dspl-none {display: none;}
  .l-dspl-inline {display: inline;}
  .l-dspl-inline-block {display: inline-block;}
  .l-dspl-flex {display: flex;}
  .l-dspl-inline-flex {display: inline-flex;}
}

@media screen and (max-width:992px) {
  .m-dspl-block {display: block;}
  .m-dspl-none {display: none;}
  .m-dspl-inline {display: inline;}
  .m-dspl-inline-block {display: inline-block;}
  .m-dspl-flex {display: flex;}
  .m-dspl-inline-flex {display: inline-flex;}
}

@media screen and (max-width:767px) {
  .s-dspl-block {display: block;}
  .s-dspl-none {display: none;}
  .s-dspl-inline {display: inline;}
  .s-dspl-inline-block {display: inline-block;}
  .s-dspl-flex {display: flex;}
  .s-dspl-inline-flex {display: inline-flex;}
}



.column {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  &.m-dspl-none {
    display: none;
  }
}
.row {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  &.m-dspl-none {
    display: none;
  }
}
.column-reverse {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column-reverse;
}
.row-reverse {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row-reverse;
}

.wrap {flex-wrap: wrap;}
.no-wrap {flex-wrap: nowrap;}

.shrink {flex-wrap: initial;}
.no-shrink {flex-shrink: 0;}

.flex-1 {flex: 1; min-width: 0;}
.flex-2 {flex: 2; min-width: 0;}
.flex-3 {flex: 3; min-width: 0;}
.flex-4 {flex: 4; min-width: 0;}

.justc-start {justify-content: flex-start;}
.justc-center {justify-content: center;}
.justc-end {justify-content: flex-end;}
.justc-space-b {justify-content: space-between;}
.justc-space-a {justify-content: space-around;}

.alitems-start {align-items: flex-start}
.alitems-end { align-items: flex-end;}
.alitems-center { align-items: center;}
.alitems-stretch { align-items: stretch; }

.aliself-start {align-self: flex-start}
.aliself-end { align-self: flex-end;}
.aliself-center { align-self: center;}
.aliself-stretch { align-self: stretch; }


@media screen and (max-width:1280px) {
  .l-row { flex-direction: row;}
  .l-column { flex-direction: column;}
  .l-column-reverse {flex-direction: column-reverse;}
  .l-row-reverse {flex-direction: row-reverse;}

  .l-wrap {flex-wrap: wrap;}
  .l-no-wrap {flex-wrap: nowrap;}

  .l-flex-1 {flex: 1;}

  .l-justc-start {justify-content: flex-start;}
  .l-justc-center {justify-content: center;}
  .l-justc-end {justify-content: flex-end;}
  .l-justc-space-b {justify-content: space-between;}
  .l-justc-space-a {justify-content: space-around;}

  .l-alitems-start {align-items: flex-start;}
  .l-alitems-end { align-items: flex-end;}
  .l-alitems-center { align-items: center;}
  .l-alitems-stretch { align-items: stretch; }

  .l-aliself-start {align-self: flex-start}
  .l-aliself-end { align-self: flex-end;}
  .l-aliself-center { align-self: center;}
  .l-aliself-stretch { align-self: stretch; }
}

@media screen and (max-width:992px) {
  .m-row { flex-direction: row;}
  .m-column { flex-direction: column;}
  .m-column-reverse {flex-direction: column-reverse;}
  .m-row-reverse {flex-direction: row-reverse;}

  .m-wrap {flex-wrap: wrap;}
  .m-no-wrap {flex-wrap: nowrap;}

  .m-flex-1 {flex: 1;}

  .m-justc-start {justify-content: flex-start;}
  .m-justc-center {justify-content: center;}
  .m-justc-end {justify-content: flex-end;}
  .m-justc-space-b {justify-content: space-between;}
  .m-justc-space-a {justify-content: space-around;}

  .m-alitems-start {align-items: flex-start;}
  .m-alitems-end { align-items: flex-end;}
  .m-alitems-center { align-items: center;}
  .m-alitems-stretch { align-items: stretch; }

  .m-aliself-start {align-self: flex-start}
  .m-aliself-end { align-self: flex-end;}
  .m-aliself-center { align-self: center;}
  .m-aliself-stretch { align-self: stretch; }
}

@media screen and (max-width:767px) {
  .s-row { flex-direction: row;}
  .s-column { flex-direction: column;}
  .s-column-reverse {flex-direction: column-reverse;}
  .s-row-reverse {flex-direction: row-reverse;}

  .s-wrap {flex-wrap: wrap;}
  .s-no-wrap {flex-wrap: nowrap;}

  .s-flex-1 {flex: 1;}

  .s-justc-start {justify-content: flex-start;}
  .s-justc-center {justify-content: center;}
  .s-justc-end {justify-content: flex-end;}
  .s-justc-space-b {justify-content: space-between;}
  .s-justc-space-a {justify-content: space-around;}

  .s-alitems-start {align-items: flex-start;}
  .s-alitems-end { align-items: flex-end;}
  .s-alitems-center { align-items: center;}
  .s-alitems-stretch { align-items: stretch; }

  .s-aliself-start {align-self: flex-start}
  .s-aliself-end { align-self: flex-end;}
  .s-aliself-center { align-self: center;}
  .s-aliself-stretch { align-self: stretch; }
}




.mg-0 { margin: 0;}
.mg-xs { margin: calc(calc(var(--spacing-unit)/2));}
.mg-s { margin: var(--spacing-unit);}
.mg-m { margin: calc(var(--spacing-unit)*2);}
.mg-l { margin: calc(var(--spacing-unit)*3);}
.mg-xl { margin: calc(var(--spacing-unit)*4);}

.mgt-0 { margin-top: 0;}
.mgt-xs { margin-top: calc(calc(var(--spacing-unit)/2));}
.mgt-s { margin-top: var(--spacing-unit);}
.mgt-m { margin-top: calc(var(--spacing-unit)*2);}
.mgt-l { margin-top: calc(var(--spacing-unit)*3);}
.mgt-xl { margin-top: calc(var(--spacing-unit)*4);}

.mgr-0 { margin-right: 0;}
.mgr-xs { margin-right: calc(calc(var(--spacing-unit)/2));}
.mgr-s { margin-right: var(--spacing-unit);}
.mgr-m { margin-right: calc(var(--spacing-unit)*2);}
.mgr-l { margin-right: calc(var(--spacing-unit)*3);}
.mgr-xl { margin-right: calc(var(--spacing-unit)*4);}

.mgb-0 { margin-bottom: 0;}
.mgb-xs { margin-bottom: calc(calc(var(--spacing-unit)/2));}
.mgb-s { margin-bottom: var(--spacing-unit);}
.mgb-m { margin-bottom: calc(var(--spacing-unit)*2);}
.mgb-l { margin-bottom: calc(var(--spacing-unit)*3);}
.mgb-xl { margin-bottom: calc(var(--spacing-unit)*4);}

.mgl-0 { margin-left: 0;}
.mgl-xs { margin-left: calc(calc(var(--spacing-unit)/2));}
.mgl-s { margin-left: var(--spacing-unit);}
.mgl-m { margin-left: calc(var(--spacing-unit)*2);}
.mgl-l { margin-left: calc(var(--spacing-unit)*3);}
.mgl-xl { margin-left: calc(var(--spacing-unit)*4);}

.mg-vertical-xs {margin-top: calc(calc(var(--spacing-unit)/2)); margin-bottom: calc(calc(var(--spacing-unit)/2));}
.mg-vertical-s {margin-top: var(--spacing-unit); margin-bottom: var(--spacing-unit);}
.mg-vertical-m {margin-top: calc(var(--spacing-unit)*2); margin-bottom: calc(var(--spacing-unit)*2);}
.mg-vertical-l {margin-top: calc(var(--spacing-unit)*3); margin-bottom: calc(var(--spacing-unit)*3);}
.mg-vertical-xl {margin-top: calc(var(--spacing-unit)*4); margin-bottom: calc(var(--spacing-unit)*4);}

.mg-horizontal-xs {margin-left: calc(calc(var(--spacing-unit)/2)); margin-right: calc(calc(var(--spacing-unit)/2));}
.mg-horizontal-s {margin-left: var(--spacing-unit); margin-right: var(--spacing-unit);}
.mg-horizontal-m {margin-left: calc(var(--spacing-unit)*2); margin-right: calc(var(--spacing-unit)*2);}
.mg-horizontal-l {margin-left: calc(var(--spacing-unit)*3); margin-right: calc(var(--spacing-unit)*3);}
.mg-horizontal-xl {margin-left: calc(var(--spacing-unit)*4); margin-right: calc(var(--spacing-unit)*4);}

.pd-0 { padding: 0;}
.pd-xs { padding: calc(calc(var(--spacing-unit)/2));}
.pd-s { padding: var(--spacing-unit);}
.pd-m { padding: calc(var(--spacing-unit)*2);}
.pd-l { padding: calc(var(--spacing-unit)*3);}
.pd-xl { padding: calc(var(--spacing-unit)*4);}

.pdt-0 { padding-top: 0;}
.pdt-xs { padding-top: calc(calc(var(--spacing-unit)/2));}
.pdt-s { padding-top: var(--spacing-unit);}
.pdt-m { padding-top: calc(var(--spacing-unit)*2);}
.pdt-l { padding-top: calc(var(--spacing-unit)*3);}
.pdt-xl { padding-top: calc(var(--spacing-unit)*4);}

.pdr-0 { padding-right: 0;}
.pdr-xs { padding-right: calc(calc(var(--spacing-unit)/2));}
.pdr-s { padding-right: var(--spacing-unit);}
.pdr-m { padding-right: calc(var(--spacing-unit)*2);}
.pdr-l { padding-right: calc(var(--spacing-unit)*3);}
.pdr-xl { padding-right: calc(var(--spacing-unit)*4);}

.pdb-0 { padding-bottom: 0;}
.pdb-xs { padding-bottom: calc(calc(var(--spacing-unit)/2));}
.pdb-s { padding-bottom: var(--spacing-unit);}
.pdb-m { padding-bottom: calc(var(--spacing-unit)*2);}
.pdb-l { padding-bottom: calc(var(--spacing-unit)*3);}
.pdb-xl { padding-bottom: calc(var(--spacing-unit)*4);}

.pdl-0 { padding-left: 0;}
.pdl-xs { padding-left: calc(calc(var(--spacing-unit)/2));}
.pdl-s { padding-left: var(--spacing-unit);}
.pdl-m { padding-left: calc(var(--spacing-unit)*2);}
.pdl-l { padding-left: calc(var(--spacing-unit)*3);}
.pdl-xl { padding-left: calc(var(--spacing-unit)*4);}

.pd-vertical-xs {padding-top: calc(calc(var(--spacing-unit)/2)); padding-bottom: calc(calc(var(--spacing-unit)/2));}
.pd-vertical-s {padding-top: var(--spacing-unit); padding-bottom: var(--spacing-unit);}
.pd-vertical-m {padding-top: calc(var(--spacing-unit)*2); padding-bottom: calc(var(--spacing-unit)*2);}
.pd-vertical-l {padding-top: calc(var(--spacing-unit)*3); padding-bottom: calc(var(--spacing-unit)*3);}
.pd-vertical-xl {padding-top: calc(var(--spacing-unit)*4); padding-bottom: calc(var(--spacing-unit)*4);}

.pd-horizontal-xs {padding-left: calc(calc(var(--spacing-unit)/2)); padding-right: calc(calc(var(--spacing-unit)/2));}
.pd-horizontal-s {padding-left: var(--spacing-unit); padding-right: var(--spacing-unit);}
.pd-horizontal-m {padding-left: calc(var(--spacing-unit)*2); padding-right: calc(var(--spacing-unit)*2);}
.pd-horizontal-l {padding-left: calc(var(--spacing-unit)*3); padding-right: calc(var(--spacing-unit)*3);}
.pd-horizontal-xl {padding-left: calc(var(--spacing-unit)*4); padding-right: calc(var(--spacing-unit)*4);}



@media screen and (max-width:1280px) {
  .l-mg-0 { margin: 0;}
  .l-mg-xs { margin: calc(calc(var(--spacing-unit)/2));}
  .l-mg-s { margin: var(--spacing-unit);}
  .l-mg-m { margin: calc(var(--spacing-unit)*2);}
  .l-mg-l { margin: calc(var(--spacing-unit)*3);}
  .l-mg-xl { margin: calc(var(--spacing-unit)*4);}

  .l-mgt-0 { margin-top: 0;}
  .l-mgt-xs { margin-top: calc(calc(var(--spacing-unit)/2));}
  .l-mgt-s { margin-top: var(--spacing-unit);}
  .l-mgt-m { margin-top: calc(var(--spacing-unit)*2);}
  .l-mgt-l { margin-top: calc(var(--spacing-unit)*3);}
  .l-mgt-xl { margin-top: calc(var(--spacing-unit)*4);}

  .l-mgr-0 { margin-right: 0;}
  .l-mgr-xs { margin-right: calc(calc(var(--spacing-unit)/2));}
  .l-mgr-s { margin-right: var(--spacing-unit);}
  .l-mgr-m { margin-right: calc(var(--spacing-unit)*2);}
  .l-mgr-l { margin-right: calc(var(--spacing-unit)*3);}
  .l-mgr-xl { margin-right: calc(var(--spacing-unit)*4);}

  .l-mgb-0 { margin-bottom: 0;}
  .l-mgb-xs { margin-bottom: calc(calc(var(--spacing-unit)/2));}
  .l-mgb-s { margin-bottom: var(--spacing-unit);}
  .l-mgb-m { margin-bottom: calc(var(--spacing-unit)*2);}
  .l-mgb-l { margin-bottom: calc(var(--spacing-unit)*3);}
  .l-mgb-xl { margin-bottom: calc(var(--spacing-unit)*4);}

  .l-mgl-0 { margin-left: 0;}
  .l-mgl-xs { margin-left: calc(calc(var(--spacing-unit)/2));}
  .l-mgl-s { margin-left: var(--spacing-unit);}
  .l-mgl-m { margin-left: calc(var(--spacing-unit)*2);}
  .l-mgl-l { margin-left: calc(var(--spacing-unit)*3);}
  .l-mgl-xl { margin-left: calc(var(--spacing-unit)*4);}

  .l-mg-vertical-xs {margin-top: calc(calc(var(--spacing-unit)/2)); margin-bottom: calc(calc(var(--spacing-unit)/2));}
  .l-mg-vertical-s {margin-top: var(--spacing-unit); margin-bottom: var(--spacing-unit);}
  .l-mg-vertical-m {margin-top: calc(var(--spacing-unit)*2); margin-bottom: calc(var(--spacing-unit)*2);}
  .l-mg-vertical-l {margin-top: calc(var(--spacing-unit)*3); margin-bottom: calc(var(--spacing-unit)*3);}
  .l-mg-vertical-xl {margin-top: calc(var(--spacing-unit)*4); margin-bottom: calc(var(--spacing-unit)*4);}

  .l-mg-horizontal-xs {margin-left: calc(calc(var(--spacing-unit)/2)); margin-right: calc(calc(var(--spacing-unit)/2));}
  .l-mg-horizontal-s {margin-left: var(--spacing-unit); margin-right: var(--spacing-unit);}
  .l-mg-horizontal-m {margin-left: calc(var(--spacing-unit)*2); margin-right: calc(var(--spacing-unit)*2);}
  .l-mg-horizontal-l {margin-left: calc(var(--spacing-unit)*3); margin-right: calc(var(--spacing-unit)*3);}
  .l-mg-horizontal-xl {margin-left: calc(var(--spacing-unit)*4); margin-right: calc(var(--spacing-unit)*4);}

  .l-pd-0 { padding: 0;}
  .l-pd-xs { padding: calc(calc(var(--spacing-unit)/2));}
  .l-pd-s { padding: var(--spacing-unit);}
  .l-pd-m { padding: calc(var(--spacing-unit)*2);}
  .l-pd-l { padding: calc(var(--spacing-unit)*3);}
  .l-pd-xl { padding: calc(var(--spacing-unit)*4);}

  .l-pdt-0 { padding-top: 0;}
  .l-pdt-xs { padding-top: calc(calc(var(--spacing-unit)/2));}
  .l-pdt-s { padding-top: var(--spacing-unit);}
  .l-pdt-m { padding-top: calc(var(--spacing-unit)*2);}
  .l-pdt-l { padding-top: calc(var(--spacing-unit)*3);}
  .l-pdt-xl { padding-top: calc(var(--spacing-unit)*4);}

  .l-pdr-0 { padding-right: 0;}
  .l-pdr-xs { padding-right: calc(calc(var(--spacing-unit)/2));}
  .l-pdr-s { padding-right: var(--spacing-unit);}
  .l-pdr-m { padding-right: calc(var(--spacing-unit)*2);}
  .l-pdr-l { padding-right: calc(var(--spacing-unit)*3);}
  .l-pdr-xl { padding-right: calc(var(--spacing-unit)*4);}

  .l-pdb-0 { padding-bottom: 0;}
  .l-pdb-xs { padding-bottom: calc(calc(var(--spacing-unit)/2));}
  .l-pdb-s { padding-bottom: var(--spacing-unit);}
  .l-pdb-m { padding-bottom: calc(var(--spacing-unit)*2);}
  .l-pdb-l { padding-bottom: calc(var(--spacing-unit)*3);}
  .l-pdb-xl { padding-bottom: calc(var(--spacing-unit)*4);}

  .l-pdl-0 { padding-left: 0;}
  .l-pdl-xs { padding-left: calc(calc(var(--spacing-unit)/2));}
  .l-pdl-s { padding-left: var(--spacing-unit);}
  .l-pdl-m { padding-left: calc(var(--spacing-unit)*2);}
  .l-pdl-l { padding-left: calc(var(--spacing-unit)*3);}
  .l-pdl-xl { padding-left: calc(var(--spacing-unit)*4);}

  .l-pd-vertical-xs {padding-top: calc(calc(var(--spacing-unit)/2)); padding-bottom: calc(calc(var(--spacing-unit)/2));}
  .l-pd-vertical-s {padding-top: var(--spacing-unit); padding-bottom: var(--spacing-unit);}
  .l-pd-vertical-m {padding-top: calc(var(--spacing-unit)*2); padding-bottom: calc(var(--spacing-unit)*2);}
  .l-pd-vertical-l {padding-top: calc(var(--spacing-unit)*3); padding-bottom: calc(var(--spacing-unit)*3);}
  .l-pd-vertical-xl {padding-top: calc(var(--spacing-unit)*4); padding-bottom: calc(var(--spacing-unit)*4);}

  .l-pd-horizontal-xs {padding-left: calc(calc(var(--spacing-unit)/2)); padding-right: calc(calc(var(--spacing-unit)/2));}
  .l-pd-horizontal-s {padding-left: var(--spacing-unit); padding-right: var(--spacing-unit);}
  .l-pd-horizontal-m {padding-left: calc(var(--spacing-unit)*2); padding-right: calc(var(--spacing-unit)*2);}
  .l-pd-horizontal-l {padding-left: calc(var(--spacing-unit)*3); padding-right: calc(var(--spacing-unit)*3);}
  .l-pd-horizontal-xl {padding-left: calc(var(--spacing-unit)*4); padding-right: calc(var(--spacing-unit)*4);}
}

@media screen and (max-width:992px) {
  .m-mg-0 { margin: 0;}
  .m-mg-xs { margin: calc(calc(var(--spacing-unit)/2));}
  .m-mg-s { margin: var(--spacing-unit);}
  .m-mg-m { margin: calc(var(--spacing-unit)*2);}
  .m-mg-l { margin: calc(var(--spacing-unit)*3);}
  .m-mg-xl { margin: calc(var(--spacing-unit)*4);}

  .m-mgt-0 { margin-top: 0;}
  .m-mgt-xs { margin-top: calc(calc(var(--spacing-unit)/2));}
  .m-mgt-s { margin-top: var(--spacing-unit);}
  .m-mgt-m { margin-top: calc(var(--spacing-unit)*2);}
  .m-mgt-l { margin-top: calc(var(--spacing-unit)*3);}
  .m-mgt-xl { margin-top: calc(var(--spacing-unit)*4);}

  .m-mgr-0 { margin-right: 0;}
  .m-mgr-xs { margin-right: calc(calc(var(--spacing-unit)/2));}
  .m-mgr-s { margin-right: var(--spacing-unit);}
  .m-mgr-m { margin-right: calc(var(--spacing-unit)*2);}
  .m-mgr-l { margin-right: calc(var(--spacing-unit)*3);}
  .m-mgr-xl { margin-right: calc(var(--spacing-unit)*4);}

  .m-mgb-0 { margin-bottom: 0;}
  .m-mgb-xs { margin-bottom: calc(calc(var(--spacing-unit)/2));}
  .m-mgb-s { margin-bottom: var(--spacing-unit);}
  .m-mgb-m { margin-bottom: calc(var(--spacing-unit)*2);}
  .m-mgb-l { margin-bottom: calc(var(--spacing-unit)*3);}
  .m-mgb-xl { margin-bottom: calc(var(--spacing-unit)*4);}

  .m-mgl-0 { margin-left: 0;}
  .m-mgl-xs { margin-left: calc(calc(var(--spacing-unit)/2));}
  .m-mgl-s { margin-left: var(--spacing-unit);}
  .m-mgl-m { margin-left: calc(var(--spacing-unit)*2);}
  .m-mgl-l { margin-left: calc(var(--spacing-unit)*3);}
  .m-mgl-xl { margin-left: calc(var(--spacing-unit)*4);}

  .m-mg-vertical-xs {margin-top: calc(calc(var(--spacing-unit)/2)); margin-bottom: calc(calc(var(--spacing-unit)/2));}
  .m-mg-vertical-s {margin-top: var(--spacing-unit); margin-bottom: var(--spacing-unit);}
  .m-mg-vertical-m {margin-top: calc(var(--spacing-unit)*2); margin-bottom: calc(var(--spacing-unit)*2);}
  .m-mg-vertical-l {margin-top: calc(var(--spacing-unit)*3); margin-bottom: calc(var(--spacing-unit)*3);}
  .m-mg-vertical-xl {margin-top: calc(var(--spacing-unit)*4); margin-bottom: calc(var(--spacing-unit)*4);}

  .m-mg-horizontal-xs {margin-left: calc(calc(var(--spacing-unit)/2)); margin-right: calc(calc(var(--spacing-unit)/2));}
  .m-mg-horizontal-s {margin-left: var(--spacing-unit); margin-right: var(--spacing-unit);}
  .m-mg-horizontal-m {margin-left: calc(var(--spacing-unit)*2); margin-right: calc(var(--spacing-unit)*2);}
  .m-mg-horizontal-l {margin-left: calc(var(--spacing-unit)*3); margin-right: calc(var(--spacing-unit)*3);}
  .m-mg-horizontal-xl {margin-left: calc(var(--spacing-unit)*4); margin-right: calc(var(--spacing-unit)*4);}

  .m-pd-0 { padding: 0;}
  .m-pd-xs { padding: calc(calc(var(--spacing-unit)/2));}
  .m-pd-s { padding: var(--spacing-unit);}
  .m-pd-m { padding: calc(var(--spacing-unit)*2);}
  .m-pd-l { padding: calc(var(--spacing-unit)*3);}
  .m-pd-xl { padding: calc(var(--spacing-unit)*4);}

  .m-pdt-0 { padding-top: 0;}
  .m-pdt-xs { padding-top: calc(calc(var(--spacing-unit)/2));}
  .m-pdt-s { padding-top: var(--spacing-unit);}
  .m-pdt-m { padding-top: calc(var(--spacing-unit)*2);}
  .m-pdt-l { padding-top: calc(var(--spacing-unit)*3);}
  .m-pdt-xl { padding-top: calc(var(--spacing-unit)*4);}

  .m-pdr-0 { padding-right: 0;}
  .m-pdr-xs { padding-right: calc(calc(var(--spacing-unit)/2));}
  .m-pdr-s { padding-right: var(--spacing-unit);}
  .m-pdr-m { padding-right: calc(var(--spacing-unit)*2);}
  .m-pdr-l { padding-right: calc(var(--spacing-unit)*3);}
  .m-pdr-xl { padding-right: calc(var(--spacing-unit)*4);}

  .m-pdb-0 { padding-bottom: 0;}
  .m-pdb-xs { padding-bottom: calc(calc(var(--spacing-unit)/2));}
  .m-pdb-s { padding-bottom: var(--spacing-unit);}
  .m-pdb-m { padding-bottom: calc(var(--spacing-unit)*2);}
  .m-pdb-l { padding-bottom: calc(var(--spacing-unit)*3);}
  .m-pdb-xl { padding-bottom: calc(var(--spacing-unit)*4);}

  .m-pdl-0 { padding-left: 0;}
  .m-pdl-xs { padding-left: calc(calc(var(--spacing-unit)/2));}
  .m-pdl-s { padding-left: var(--spacing-unit);}
  .m-pdl-m { padding-left: calc(var(--spacing-unit)*2);}
  .m-pdl-l { padding-left: calc(var(--spacing-unit)*3);}
  .m-pdl-xl { padding-left: calc(var(--spacing-unit)*4);}

  .m-pd-vertical-xs {padding-top: calc(calc(var(--spacing-unit)/2)); padding-bottom: calc(calc(var(--spacing-unit)/2));}
  .m-pd-vertical-s {padding-top: var(--spacing-unit); padding-bottom: var(--spacing-unit);}
  .m-pd-vertical-m {padding-top: calc(var(--spacing-unit)*2); padding-bottom: calc(var(--spacing-unit)*2);}
  .m-pd-vertical-l {padding-top: calc(var(--spacing-unit)*3); padding-bottom: calc(var(--spacing-unit)*3);}
  .m-pd-vertical-xl {padding-top: calc(var(--spacing-unit)*4); padding-bottom: calc(var(--spacing-unit)*4);}

  .m-pd-horizontal-xs {padding-left: calc(calc(var(--spacing-unit)/2)); padding-right: calc(calc(var(--spacing-unit)/2));}
  .m-pd-horizontal-s {padding-left: var(--spacing-unit); padding-right: var(--spacing-unit);}
  .m-pd-horizontal-m {padding-left: calc(var(--spacing-unit)*2); padding-right: calc(var(--spacing-unit)*2);}
  .m-pd-horizontal-l {padding-left: calc(var(--spacing-unit)*3); padding-right: calc(var(--spacing-unit)*3);}
  .m-pd-horizontal-xl {padding-left: calc(var(--spacing-unit)*4); padding-right: calc(var(--spacing-unit)*4);}
}

@media screen and (max-width:767px) {
  .s-mg-0 { margin: 0;}
  .s-mg-xs { margin: calc(calc(var(--spacing-unit)/2));}
  .s-mg-s { margin: var(--spacing-unit);}
  .s-mg-m { margin: calc(var(--spacing-unit)*2);}
  .s-mg-l { margin: calc(var(--spacing-unit)*3);}
  .s-mg-xl { margin: calc(var(--spacing-unit)*4);}

  .s-mgt-0 { margin-top: 0;}
  .s-mgt-xs { margin-top: calc(calc(var(--spacing-unit)/2));}
  .s-mgt-s { margin-top: var(--spacing-unit);}
  .s-mgt-m { margin-top: calc(var(--spacing-unit)*2);}
  .s-mgt-l { margin-top: calc(var(--spacing-unit)*3);}
  .s-mgt-xl { margin-top: calc(var(--spacing-unit)*4);}

  .s-mgr-0 { margin-right: 0;}
  .s-mgr-xs { margin-right: calc(calc(var(--spacing-unit)/2));}
  .s-mgr-s { margin-right: var(--spacing-unit);}
  .s-mgr-m { margin-right: calc(var(--spacing-unit)*2);}
  .s-mgr-l { margin-right: calc(var(--spacing-unit)*3);}
  .s-mgr-xl { margin-right: calc(var(--spacing-unit)*4);}

  .s-mgb-0 { margin-bottom: 0;}
  .s-mgb-xs { margin-bottom: calc(calc(var(--spacing-unit)/2));}
  .s-mgb-s { margin-bottom: var(--spacing-unit);}
  .s-mgb-m { margin-bottom: calc(var(--spacing-unit)*2);}
  .s-mgb-l { margin-bottom: calc(var(--spacing-unit)*3);}
  .s-mgb-xl { margin-bottom: calc(var(--spacing-unit)*4);}

  .s-mgl-0 { margin-left: 0;}
  .s-mgl-xs { margin-left: calc(calc(var(--spacing-unit)/2));}
  .s-mgl-s { margin-left: var(--spacing-unit);}
  .s-mgl-m { margin-left: calc(var(--spacing-unit)*2);}
  .s-mgl-l { margin-left: calc(var(--spacing-unit)*3);}
  .s-mgl-xl { margin-left: calc(var(--spacing-unit)*4);}

  .s-mg-vertical-xs {margin-top: calc(calc(var(--spacing-unit)/2)); margin-bottom: calc(calc(var(--spacing-unit)/2));}
  .s-mg-vertical-s {margin-top: var(--spacing-unit); margin-bottom: var(--spacing-unit);}
  .s-mg-vertical-m {margin-top: calc(var(--spacing-unit)*2); margin-bottom: calc(var(--spacing-unit)*2);}
  .s-mg-vertical-l {margin-top: calc(var(--spacing-unit)*3); margin-bottom: calc(var(--spacing-unit)*3);}
  .s-mg-vertical-xl {margin-top: calc(var(--spacing-unit)*4); margin-bottom: calc(var(--spacing-unit)*4);}

  .s-mg-horizontal-xs {margin-left: calc(calc(var(--spacing-unit)/2)); margin-right: calc(calc(var(--spacing-unit)/2));}
  .s-mg-horizontal-s {margin-left: var(--spacing-unit); margin-right: var(--spacing-unit);}
  .s-mg-horizontal-m {margin-left: calc(var(--spacing-unit)*2); margin-right: calc(var(--spacing-unit)*2);}
  .s-mg-horizontal-l {margin-left: calc(var(--spacing-unit)*3); margin-right: calc(var(--spacing-unit)*3);}
  .s-mg-horizontal-xl {margin-left: calc(var(--spacing-unit)*4); margin-right: calc(var(--spacing-unit)*4);}

  .s-pd-0 { padding: 0;}
  .s-pd-xs { padding: calc(calc(var(--spacing-unit)/2));}
  .s-pd-s { padding: var(--spacing-unit);}
  .s-pd-m { padding: calc(var(--spacing-unit)*2);}
  .s-pd-l { padding: calc(var(--spacing-unit)*3);}
  .s-pd-xl { padding: calc(var(--spacing-unit)*4);}

  .s-pdt-0 { padding-top: 0;}
  .s-pdt-xs { padding-top: calc(calc(var(--spacing-unit)/2));}
  .s-pdt-s { padding-top: var(--spacing-unit);}
  .s-pdt-m { padding-top: calc(var(--spacing-unit)*2);}
  .s-pdt-l { padding-top: calc(var(--spacing-unit)*3);}
  .s-pdt-xl { padding-top: calc(var(--spacing-unit)*4);}

  .s-pdr-0 { padding-right: 0;}
  .s-pdr-xs { padding-right: calc(calc(var(--spacing-unit)/2));}
  .s-pdr-s { padding-right: var(--spacing-unit);}
  .s-pdr-m { padding-right: calc(var(--spacing-unit)*2);}
  .s-pdr-l { padding-right: calc(var(--spacing-unit)*3);}
  .s-pdr-xl { padding-right: calc(var(--spacing-unit)*4);}

  .s-pdb-0 { padding-bottom: 0;}
  .s-pdb-xs { padding-bottom: calc(calc(var(--spacing-unit)/2));}
  .s-pdb-s { padding-bottom: var(--spacing-unit);}
  .s-pdb-m { padding-bottom: calc(var(--spacing-unit)*2);}
  .s-pdb-l { padding-bottom: calc(var(--spacing-unit)*3);}
  .s-pdb-xl { padding-bottom: calc(var(--spacing-unit)*4);}

  .s-pdl-0 { padding-left: 0;}
  .s-pdl-xs { padding-left: calc(calc(var(--spacing-unit)/2));}
  .s-pdl-s { padding-left: var(--spacing-unit);}
  .s-pdl-m { padding-left: calc(var(--spacing-unit)*2);}
  .s-pdl-l { padding-left: calc(var(--spacing-unit)*3);}
  .s-pdl-xl { padding-left: calc(var(--spacing-unit)*4);}

  .s-pd-vertical-xs {padding-top: calc(calc(var(--spacing-unit)/2)); padding-bottom: calc(calc(var(--spacing-unit)/2));}
  .s-pd-vertical-s {padding-top: var(--spacing-unit); padding-bottom: var(--spacing-unit);}
  .s-pd-vertical-m {padding-top: calc(var(--spacing-unit)*2); padding-bottom: calc(var(--spacing-unit)*2);}
  .s-pd-vertical-l {padding-top: calc(var(--spacing-unit)*3); padding-bottom: calc(var(--spacing-unit)*3);}
  .s-pd-vertical-xl {padding-top: calc(var(--spacing-unit)*4); padding-bottom: calc(var(--spacing-unit)*4);}

  .s-pd-horizontal-xs {padding-left: calc(calc(var(--spacing-unit)/2)); padding-right: calc(calc(var(--spacing-unit)/2));}
  .s-pd-horizontal-s {padding-left: var(--spacing-unit); padding-right: var(--spacing-unit);}
  .s-pd-horizontal-m {padding-left: calc(var(--spacing-unit)*2); padding-right: calc(var(--spacing-unit)*2);}
  .s-pd-horizontal-l {padding-left: calc(var(--spacing-unit)*3); padding-right: calc(var(--spacing-unit)*3);}
  .s-pd-horizontal-xl {padding-left: calc(var(--spacing-unit)*4); padding-right: calc(var(--spacing-unit)*4);}
}



.full-width {width: 100%;}
.half-width {width: 50%;}
.forty-width {width: 40%;}
.third-width {width: 33.333%;}
.two-third-width {width: 66.666%;}
.quarter-width {width: 25%;}

@media screen and (max-width:1280px) {
  .l-full-width {width: 100%;}
  .l-half-width {width: 50%;}
  .l-forty-width {width: 40%;}
  .l-third-width {width: 33.333%;}
  .l-two-third-width {width: 66.666%;}
  .l-quarter-width {width: 25%;}
}
@media screen and (max-width:992px) {
  .m-full-width {width: 100%;}
  .m-half-width {width: 50%;}
  .m-forty-width {width: 40%;}
  .m-third-width {width: 33.333%;}
  .m-two-third-width {width: 66.666%;}
  .m-quarter-width {width: 25%;}
}
@media screen and (max-width:767px) {
  .s-full-width {width: 100%;}
  .s-half-width {width: 50%;}
  .s-forty-width {width: 40%;}
  .s-third-width {width: 33.333%;}
  .s-two-third-width {width: 66.666%;}
  .s-quarter-width {width: 25%;}
}

/* .font-s {font-size: $font-size-s;}
.font-m {font-size: $base-font-size;}
.font-ml {font-size: $font-size-ml;}
.font-l {font-size: $font-size-l;}
.font-xl {font-size: $font-size-xl;}
.font-xxl {font-size: $font-size-xxl;}

@media screen and (max-width:1280px) {
  .l-font-s {font-size: $font-size-s;}
  .l-font-m {font-size: $base-font-size;}
  .l-font-ml {font-size: $font-size-ml;}
  .l-font-l {font-size: $font-size-l;}
  .l-font-xl {font-size: $font-size-xl;}
  .l-font-xxl {font-size: $font-size-xxl;}
}
@media screen and (max-width:992px) {
  .m-font-s {font-size: $font-size-s;}
  .m-font-m {font-size: $base-font-size;}
  .m-font-ml {font-size: $font-size-ml;}
  .m-font-l {font-size: $font-size-l;}
  .m-font-xl {font-size: $font-size-xl;}
  .m-font-xxl {font-size: $font-size-xxl;}
}
@media screen and (max-width:767px) {
  .s-font-s {font-size: $font-size-s;}
  .s-font-m {font-size: $base-font-size;}
  .s-font-ml {font-size: $font-size-ml;}
  .s-font-l {font-size: $font-size-l;}
  .s-font-xl {font-size: $font-size-xl;}
  .s-font-xxl {font-size: $font-size-xxl;}
} */

.bold {
  font-weight: bold;
}



.uppercase {
  text-transform: uppercase;
}

.secondary-text {
  opacity: 0.6;
}

.font-white {
  color: white;
}

.font-dark {
  color: $font-color-light;
}

.opacity70 {
  opacity: 0.7;
}

.outline-text {
  color: rgba(255,255,255,0.5);
  -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  
  &.light {
    -webkit-text-stroke-color: white;
  }
  &.dark {
    -webkit-text-stroke-color: $font-color-light;
  }
}

.white-space-nowrap {
  white-space: nowrap;
}

.text-align-center {text-align: center;}
.text-align-left {text-align: left;}
.text-align-right {text-align: right;}
@media screen and (max-width:1280px) {
  .l-text-align-center {text-align: center;}
  .l-text-align-left {text-align: left;}
  .l-text-align-right {text-align: right;}
}
@media screen and (max-width:992px) {
  .m-text-align-center {text-align: center;}
  .m-text-align-left {text-align: left;}
  .m-text-align-right {text-align: right;}
}
@media screen and (max-width:767px) {
  .s-text-align-center {text-align: center;}
  .s-text-align-left {text-align: left;}
  .s-text-align-right {text-align: right;}
}


.cursor-pointer {
  cursor: pointer;
}

.cols-2 {
  columns: 2;
}

.m-cols-1 {
  @media screen and (max-width:992px) {
    columns: 1;
  }
}