Styles Index

This is a complete list of every style utility available in the pattern library. Try searching the page for various CSS declarations like display or color.

align

.valign-baseline
vertical-align: baseline !important;
.valign-middle
vertical-align: middle !important;
.valign-top
vertical-align: top !important;
.valign-bottom
vertical-align: bottom !important;
.text-left
text-align: left !important;
.text-right
text-align: right !important;
.text-center
text-align: center !important;
.sm-text-left
text-align: left !important;
@media (min-width: 480px)
.sm-text-right
text-align: right !important;
@media (min-width: 480px)
.sm-text-center
text-align: center !important;
@media (min-width: 480px)
.md-text-left
text-align: left !important;
@media (min-width: 768px)
.md-text-right
text-align: right !important;
@media (min-width: 768px)
.md-text-center
text-align: center !important;
@media (min-width: 768px)
.lg-text-left
text-align: left !important;
@media (min-width: 1024px)
.lg-text-right
text-align: right !important;
@media (min-width: 1024px)
.lg-text-center
text-align: center !important;
@media (min-width: 1024px)
.xl-text-left
text-align: left !important;
@media (min-width: 1280px)
.xl-text-right
text-align: right !important;
@media (min-width: 1280px)
.xl-text-center
text-align: center !important;
@media (min-width: 1280px)
.xxl-text-left
text-align: left !important;
@media (min-width: 1600px)
.xxl-text-right
text-align: right !important;
@media (min-width: 1600px)
.xxl-text-center
text-align: center !important;
@media (min-width: 1600px)

color

.color-white
color: #ffffff !important;
.color-cream
color: #f3f1e7 !important;
.color-ceramic
color: #edebe9 !important;
.color-black
color: #000000 !important;
.color-blackWarm
color: #2d2926 !important;
.color-blackWarmer
color: #3d3935 !important;
.color-greenStarbucks
color: #00653e !important;
.color-greenApron
color: #00a862 !important;
.color-greenDarkApron
color: #008248 !important;
.color-greenAccent
color: #00754A !important;
.color-greenLight
color: #d4e9e2 !important;
.color-greenLightSecondary
color: rgba(212, 233, 226, 0.33) !important;
.color-houseGreen
color: #1E3932 !important;
.color-gold
color: #cba258 !important;
.color-red
color: #d62b1f !important;
.color-yellow
color: #fbbc05 !important;
.color-textBlack
color: rgba(0, 0, 0, .87) !important;
.color-textBlackSoft
color: rgba(0, 0, 0, .56) !important;
.color-textWhite
color: rgba(255, 255, 255, 1) !important;
.color-textWhiteSoft
color: rgba(255, 255, 255, .70) !important;
.color-black10
color: rgba(0, 0, 0, .1) !important;
.color-black20
color: rgba(0, 0, 0, .2) !important;
.color-black30
color: rgba(0, 0, 0, .3) !important;
.color-black40
color: rgba(0, 0, 0, .4) !important;
.color-black50
color: rgba(0, 0, 0, .5) !important;
.color-black60
color: rgba(0, 0, 0, .6) !important;
.color-black70
color: rgba(0, 0, 0, .7) !important;
.color-black80
color: rgba(0, 0, 0, .8) !important;
.color-black90
color: rgba(0, 0, 0, .9) !important;
.color-white10
color: rgba(255,255,255, .1) !important;
.color-white20
color: rgba(255,255,255, .2) !important;
.color-white30
color: rgba(255,255,255, .3) !important;
.color-white40
color: rgba(255,255,255, .4) !important;
.color-white50
color: rgba(255,255,255, .5) !important;
.color-white60
color: rgba(255,255,255, .6) !important;
.color-white70
color: rgba(255,255,255, .7) !important;
.color-white80
color: rgba(255,255,255, .8) !important;
.color-white90
color: rgba(255,255,255, .9) !important;
.bg-transparent
background-color: transparent !important;
.bg-white
background-color: #ffffff !important;
.bg-grayNatural
background-color: #f7f7f7 !important;
.bg-cream
background-color: #f3f1e7 !important;
.bg-ceramic
background-color: #edebe9 !important;
.bg-black
background-color: #000000 !important;
.bg-blackWarm
background-color: #2d2926 !important;
.bg-blackWarmer
background-color: #3d3935 !important;
.bg-greenStarbucks
background-color: #00653e !important;
.bg-greenApron
background-color: #00a862 !important;
.bg-greenDarkApron
background-color: #008248 !important;
.bg-greenAccent
background-color: #00754A !important;
.bg-greenLight
background-color: #d4e9e2 !important;
.bg-greenLightSecondary
background-color: rgba(212, 233, 226, 0.33) !important;
.bg-houseGreen
background-color: #1E3932 !important;
.bg-gold
background-color: #cba258 !important;
.bg-red
background-color: #d62b1f !important;
.bg-yellow
background-color: #fbbc05 !important;
.bg-black10
background-color: rgba(0, 0, 0, .1) !important;
.bg-black20
background-color: rgba(0, 0, 0, .2) !important;
.bg-black30
background-color: rgba(0, 0, 0, .3) !important;
.bg-black40
background-color: rgba(0, 0, 0, .4) !important;
.bg-black50
background-color: rgba(0, 0, 0, .5) !important;
.bg-black60
background-color: rgba(0, 0, 0, .6) !important;
.bg-black70
background-color: rgba(0, 0, 0, .7) !important;
.bg-black80
background-color: rgba(0, 0, 0, .8) !important;
.bg-black90
background-color: rgba(0, 0, 0, .9) !important;

display

.hidden
display: none !important;
.block
display: block !important;
.inline
display: inline !important;
.inline-block
display: inline-block !important;
.table
display: table !important;
.table-cell
display: table-cell !important;
.float-left
float: left !important;
.float-right
float: right !important;
.float-none
float: none !important;
.overflow-hidden
overflow: hidden !important;
.overflow-x-hidden
overflow-x: hidden !important;
.overflow-auto
overflow: auto !important;
-webkit-overflow-scrolling: touch;
.sm-hidden
display: none !important;
@media (min-width: 480px)
.sm-block
display: block !important;
@media (min-width: 480px)
.sm-inline
display: inline !important;
@media (min-width: 480px)
.sm-inline-block
display: inline-block !important;
@media (min-width: 480px)
.sm-table
display: table !important;
@media (min-width: 480px)
.sm-table-cell
display: table-cell !important;
@media (min-width: 480px)
.sm-float-left
float: left !important;
@media (min-width: 480px)
.sm-float-right
float: right !important;
@media (min-width: 480px)
.sm-float-none
float: none !important;
@media (min-width: 480px)
.sm-overflow-hidden
overflow: hidden !important;
@media (min-width: 480px)
.sm-overflow-auto
overflow: auto !important;
-webkit-overflow-scrolling: touch;
@media (min-width: 480px)
.md-hidden
display: none !important;
@media (min-width: 768px)
.md-block
display: block !important;
@media (min-width: 768px)
.md-inline
display: inline !important;
@media (min-width: 768px)
.md-inline-block
display: inline-block !important;
@media (min-width: 768px)
.md-table
display: table !important;
@media (min-width: 768px)
.md-table-cell
display: table-cell !important;
@media (min-width: 768px)
.md-float-left
float: left !important;
@media (min-width: 768px)
.md-float-right
float: right !important;
@media (min-width: 768px)
.md-float-none
float: none !important;
@media (min-width: 768px)
.md-overflow-hidden
overflow: hidden !important;
@media (min-width: 768px)
.md-overflow-auto
overflow: auto !important;
-webkit-overflow-scrolling: touch;
@media (min-width: 768px)
.lg-hidden
display: none !important;
@media (min-width: 1024px)
.lg-block
display: block !important;
@media (min-width: 1024px)
.lg-inline
display: inline !important;
@media (min-width: 1024px)
.lg-inline-block
display: inline-block !important;
@media (min-width: 1024px)
.lg-table
display: table !important;
@media (min-width: 1024px)
.lg-table-cell
display: table-cell !important;
@media (min-width: 1024px)
.lg-float-left
float: left !important;
@media (min-width: 1024px)
.lg-float-right
float: right !important;
@media (min-width: 1024px)
.lg-float-none
float: none !important;
@media (min-width: 1024px)
.lg-overflow-hidden
overflow: hidden !important;
@media (min-width: 1024px)
.lg-overflow-auto
overflow: auto !important;
-webkit-overflow-scrolling: touch;
@media (min-width: 1024px)
.xl-hidden
display: none !important;
@media (min-width: 1280px)
.xl-block
display: block !important;
@media (min-width: 1280px)
.xl-inline
display: inline !important;
@media (min-width: 1280px)
.xl-inline-block
display: inline-block !important;
@media (min-width: 1280px)
.xl-table
display: table !important;
@media (min-width: 1280px)
.xl-table-cell
display: table-cell !important;
@media (min-width: 1280px)
.xl-float-left
float: left !important;
@media (min-width: 1280px)
.xl-float-right
float: right !important;
@media (min-width: 1280px)
.xl-float-none
float: none !important;
@media (min-width: 1280px)
.xl-overflow-hidden
overflow: hidden !important;
@media (min-width: 1280px)
.xl-overflow-auto
overflow: auto !important;
-webkit-overflow-scrolling: touch;
@media (min-width: 1280px)
.xxl-hidden
display: none !important;
@media (min-width: 1600px)
.xxl-block
display: block !important;
@media (min-width: 1600px)
.xxl-inline
display: inline !important;
@media (min-width: 1600px)
.xxl-inline-block
display: inline-block !important;
@media (min-width: 1600px)
.xxl-table
display: table !important;
@media (min-width: 1600px)
.xxl-table-cell
display: table-cell !important;
@media (min-width: 1600px)
.xxl-float-left
float: left !important;
@media (min-width: 1600px)
.xxl-float-right
float: right !important;
@media (min-width: 1600px)
.xxl-float-none
float: none !important;
@media (min-width: 1600px)
.xxl-overflow-hidden
overflow: hidden !important;
@media (min-width: 1600px)
.xxl-overflow-auto
overflow: auto !important;
-webkit-overflow-scrolling: touch;
@media (min-width: 1600px)
.smMax-hidden
display: none !important;
@media (max-width: 479px)
.mdMax-hidden
display: none !important;
@media (max-width: 767px)
.lgMax-hidden
display: none !important;
@media (max-width: 1023px)
.xlMax-hidden
display: none !important;
@media (max-width: 1279px)

flex

.flex
display: flex !important;
.sm-flex
display: flex !important;
@media (min-width: 480px)
.md-flex
display: flex !important;
@media (min-width: 768px)
.lg-flex
display: flex !important;
@media (min-width: 1024px)
.xl-flex
display: flex !important;
@media (min-width: 1280px)
.xxl-flex
display: flex !important;
@media (min-width: 1600px)
.flex-column
flex-direction: column !important;
.flex-wrap
flex-wrap: wrap !important;
.flex-wrap-reverse
flex-wrap: wrap-reverse !important;
.items-start
align-items: flex-start !important;
.items-end
align-items: flex-end !important;
.items-center
align-items: center !important;
.items-baseline
align-items: baseline !important;
.items-stretch
align-items: stretch !important;
.self-start
align-self: flex-start !important;
.self-end
align-self: flex-end !important;
.self-center
align-self: center !important;
.self-baseline
align-self: baseline !important;
.self-stretch
align-self: stretch !important;
.justify-start
justify-content: flex-start !important;
.justify-end
justify-content: flex-end !important;
.justify-center
justify-content: center !important;
.justify-between
justify-content: space-between !important;
.justify-around
justify-content: space-around !important;
.content-start
align-content: flex-start !important;
.content-end
align-content: flex-end !important;
.content-center
align-content: center !important;
.content-between
align-content: space-between !important;
.content-around
align-content: space-around !important;
.content-stretch
align-content: stretch !important;
.flex-auto
flex: 1 1 auto !important;
min-width: 0 !important;
min-height: 0 !important;
.flex-none
flex: none !important;
.flex-shrink
flex-shrink: 1 !important;
.flex-shrink-none
flex-shrink: 0 !important;
.flex-grow
flex-grow: 1 !important;
.flex-grow-none
flex-grow: 0 !important;
.flex-basis-none
flex-basis: 0% !important;
.order-0
order: 0 !important;
.order-1
order: 1 !important;
.order-2
order: 2 !important;
.order-3
order: 3 !important;
.order-last
order: 99999 !important;
.order-first
order: -1 !important;

grid

.container, .container--headerCrate
display: block;
width: 100%;
padding: 0 1.6rem;
.container
padding: 0 4.0rem;
@media (min-width: 1024px)
.container--headerCrate
padding: 0 4.0rem;
@media (min-width: 1024px)
.grid
display: block;
margin: 0;
padding: 0;
text-align: left;
.grid--compactGutter
margin: 0 calc(-1 * .4rem);
.grid--mediumGutter
margin: 0 calc(-1 * .8rem);
.grid--wideGutter
margin: 0 calc(-1 * 1.6rem);
.grid img
max-width: 100%;
height: auto;
.grid--compactGutter
margin: 0 calc(-1 * .8rem);
@media (min-width: 1280px)
.grid--mediumGutter
margin: 0 calc(-1 * 1.6rem);
@media (min-width: 1280px)
.grid--wideGutter
margin: 0 calc(-1 * 2.4rem);
@media (min-width: 1280px)
.grid--alignLeft
text-align: left;
.grid--alignCenter
text-align: center;
.grid--alignRight
text-align: right;
.grid--valignTop .gridItem
vertical-align: top;
.grid--valignMiddle .gridItem
vertical-align: middle;
.grid--valignBottom .gridItem
vertical-align: bottom;
.gridItem
position: relative;
display: inline-block;
width: 100%;
margin: 0;
padding: 0;
text-align: left;
vertical-align: top;
.grid--compactGutter .gridItem
padding: 0 .4rem;
.grid--mediumGutter .gridItem
padding: 0 .8rem;
.grid--wideGutter .gridItem
padding: 0 1.6rem;
.grid--compactGutter .gridItem
padding: 0 .8rem;
@media (min-width: 1280px)
.grid--mediumGutter .gridItem
padding: 0 1.6rem;
@media (min-width: 1280px)
.grid--wideGutter .gridItem
padding: 0 2.4rem;
@media (min-width: 1280px)

margin

.m0
margin: 0 !important;
.mt0
margin-top: 0 !important;
.mr0
margin-right: 0 !important;
.mb0
margin-bottom: 0 !important;
.ml0
margin-left: 0 !important;
.mx0
margin-left: 0 !important;
margin-right: 0 !important;
.my0
margin-top: 0 !important;
margin-bottom: 0 !important;
.m1
margin: .4rem !important;
.mt1
margin-top: .4rem !important;
.mr1
margin-right: .4rem !important;
.mb1
margin-bottom: .4rem !important;
.ml1
margin-left: .4rem !important;
.mx1
margin-left: .4rem !important;
margin-right: .4rem !important;
.my1
margin-top: .4rem !important;
margin-bottom: .4rem !important;
.mxn1
margin-left: calc(-1 * .4rem) !important;
margin-right: calc(-1 * .4rem) !important;
.m2
margin: .8rem !important;
.mt2
margin-top: .8rem !important;
.mr2
margin-right: .8rem !important;
.mb2
margin-bottom: .8rem !important;
.ml2
margin-left: .8rem !important;
.mx2
margin-left: .8rem !important;
margin-right: .8rem !important;
.my2
margin-top: .8rem !important;
margin-bottom: .8rem !important;
.mxn2
margin-left: calc(-1 * .8rem) !important;
margin-right: calc(-1 * .8rem) !important;
.m3
margin: 1.6rem !important;
.mt3
margin-top: 1.6rem !important;
.mr3
margin-right: 1.6rem !important;
.mb3
margin-bottom: 1.6rem !important;
.ml3
margin-left: 1.6rem !important;
.mx3
margin-left: 1.6rem !important;
margin-right: 1.6rem !important;
.my3
margin-top: 1.6rem !important;
margin-bottom: 1.6rem !important;
.mxn3
margin-left: calc(-1 * 1.6rem) !important;
margin-right: calc(-1 * 1.6rem) !important;
.m4
margin: 2.4rem !important;
.mt4
margin-top: 2.4rem !important;
.mr4
margin-right: 2.4rem !important;
.mb4
margin-bottom: 2.4rem !important;
.ml4
margin-left: 2.4rem !important;
.mx4
margin-left: 2.4rem !important;
margin-right: 2.4rem !important;
.my4
margin-top: 2.4rem !important;
margin-bottom: 2.4rem !important;
.mxn4
margin-left: calc(-1 * 2.4rem) !important;
margin-right: calc(-1 * 2.4rem) !important;
.m5
margin: 3.2rem !important;
.mt5
margin-top: 3.2rem !important;
.mr5
margin-right: 3.2rem !important;
.mb5
margin-bottom: 3.2rem !important;
.ml5
margin-left: 3.2rem !important;
.mx5
margin-left: 3.2rem !important;
margin-right: 3.2rem !important;
.my5
margin-top: 3.2rem !important;
margin-bottom: 3.2rem !important;
.mxn5
margin-left: calc(-1 * 3.2rem) !important;
margin-right: calc(-1 * 3.2rem) !important;
.m6
margin: 4rem !important;
.mt6
margin-top: 4rem !important;
.mr6
margin-right: 4rem !important;
.mb6
margin-bottom: 4rem !important;
.ml6
margin-left: 4rem !important;
.mx6
margin-left: 4rem !important;
margin-right: 4rem !important;
.my6
margin-top: 4rem !important;
margin-bottom: 4rem !important;
.mxn6
margin-left: calc(-1 * 4rem) !important;
margin-right: calc(-1 * 4rem) !important;
.m7
margin: 4.8rem !important;
.mt7
margin-top: 4.8rem !important;
.mr7
margin-right: 4.8rem !important;
.mb7
margin-bottom: 4.8rem !important;
.ml7
margin-left: 4.8rem !important;
.mx7
margin-left: 4.8rem !important;
margin-right: 4.8rem !important;
.my7
margin-top: 4.8rem !important;
margin-bottom: 4.8rem !important;
.mxn7
margin-left: calc(-1 * 4.8rem) !important;
margin-right: calc(-1 * 4.8rem) !important;
.m8
margin: 5.6rem !important;
.mt8
margin-top: 5.6rem !important;
.mr8
margin-right: 5.6rem !important;
.mb8
margin-bottom: 5.6rem !important;
.ml8
margin-left: 5.6rem !important;
.mx8
margin-left: 5.6rem !important;
margin-right: 5.6rem !important;
.my8
margin-top: 5.6rem !important;
margin-bottom: 5.6rem !important;
.mxn8
margin-left: calc(-1 * 5.6rem) !important;
margin-right: calc(-1 * 5.6rem) !important;
.m9
margin: 6.4rem !important;
.mt9
margin-top: 6.4rem !important;
.mr9
margin-right: 6.4rem !important;
.mb9
margin-bottom: 6.4rem !important;
.ml9
margin-left: 6.4rem !important;
.mx9
margin-left: 6.4rem !important;
margin-right: 6.4rem !important;
.my9
margin-top: 6.4rem !important;
margin-bottom: 6.4rem !important;
.mxn9
margin-left: calc(-1 * 6.4rem) !important;
margin-right: calc(-1 * 6.4rem) !important;
.ml-auto
margin-left: auto !important;
.mr-auto
margin-right: auto !important;
.mx-auto
margin-left: auto !important;
margin-right: auto !important;
.sm-m0
margin: 0 !important;
@media (min-width: 480px)
.sm-mt0
margin-top: 0 !important;
@media (min-width: 480px)
.sm-mr0
margin-right: 0 !important;
@media (min-width: 480px)
.sm-mb0
margin-bottom: 0 !important;
@media (min-width: 480px)
.sm-ml0
margin-left: 0 !important;
@media (min-width: 480px)
.sm-mx0
margin-left: 0 !important;
margin-right: 0 !important;
@media (min-width: 480px)
.sm-my0
margin-top: 0 !important;
margin-bottom: 0 !important;
@media (min-width: 480px)
.sm-m1
margin: .4rem !important;
@media (min-width: 480px)
.sm-mt1
margin-top: .4rem !important;
@media (min-width: 480px)
.sm-mr1
margin-right: .4rem !important;
@media (min-width: 480px)
.sm-mb1
margin-bottom: .4rem !important;
@media (min-width: 480px)
.sm-ml1
margin-left: .4rem !important;
@media (min-width: 480px)
.sm-mx1
margin-left: .4rem !important;
margin-right: .4rem !important;
@media (min-width: 480px)
.sm-my1
margin-top: .4rem !important;
margin-bottom: .4rem !important;
@media (min-width: 480px)
.sm-mxn1
margin-left: calc(-1 * .4rem) !important;
margin-right: calc(-1 * .4rem) !important;
@media (min-width: 480px)
.sm-m2
margin: .8rem !important;
@media (min-width: 480px)
.sm-mt2
margin-top: .8rem !important;
@media (min-width: 480px)
.sm-mr2
margin-right: .8rem !important;
@media (min-width: 480px)
.sm-mb2
margin-bottom: .8rem !important;
@media (min-width: 480px)
.sm-ml2
margin-left: .8rem !important;
@media (min-width: 480px)
.sm-mx2
margin-left: .8rem !important;
margin-right: .8rem !important;
@media (min-width: 480px)
.sm-my2
margin-top: .8rem !important;
margin-bottom: .8rem !important;
@media (min-width: 480px)
.sm-mxn2
margin-left: calc(-1 * .8rem) !important;
margin-right: calc(-1 * .8rem) !important;
@media (min-width: 480px)
.sm-m3
margin: 1.6rem !important;
@media (min-width: 480px)
.sm-mt3
margin-top: 1.6rem !important;
@media (min-width: 480px)
.sm-mr3
margin-right: 1.6rem !important;
@media (min-width: 480px)
.sm-mb3
margin-bottom: 1.6rem !important;
@media (min-width: 480px)
.sm-ml3
margin-left: 1.6rem !important;
@media (min-width: 480px)
.sm-mx3
margin-left: 1.6rem !important;
margin-right: 1.6rem !important;
@media (min-width: 480px)
.sm-my3
margin-top: 1.6rem !important;
margin-bottom: 1.6rem !important;
@media (min-width: 480px)
.sm-mxn3
margin-left: calc(-1 * 1.6rem) !important;
margin-right: calc(-1 * 1.6rem) !important;
@media (min-width: 480px)
.sm-m4
margin: 2.4rem !important;
@media (min-width: 480px)
.sm-mt4
margin-top: 2.4rem !important;
@media (min-width: 480px)
.sm-mr4
margin-right: 2.4rem !important;
@media (min-width: 480px)
.sm-mb4
margin-bottom: 2.4rem !important;
@media (min-width: 480px)
.sm-ml4
margin-left: 2.4rem !important;
@media (min-width: 480px)
.sm-mx4
margin-left: 2.4rem !important;
margin-right: 2.4rem !important;
@media (min-width: 480px)
.sm-my4
margin-top: 2.4rem !important;
margin-bottom: 2.4rem !important;
@media (min-width: 480px)
.sm-mxn4
margin-left: calc(-1 * 2.4rem) !important;
margin-right: calc(-1 * 2.4rem) !important;
@media (min-width: 480px)
.sm-m5
margin: 3.2rem !important;
@media (min-width: 480px)
.sm-mt5
margin-top: 3.2rem !important;
@media (min-width: 480px)
.sm-mr5
margin-right: 3.2rem !important;
@media (min-width: 480px)
.sm-mb5
margin-bottom: 3.2rem !important;
@media (min-width: 480px)
.sm-ml5
margin-left: 3.2rem !important;
@media (min-width: 480px)
.sm-mx5
margin-left: 3.2rem !important;
margin-right: 3.2rem !important;
@media (min-width: 480px)
.sm-my5
margin-top: 3.2rem !important;
margin-bottom: 3.2rem !important;
@media (min-width: 480px)
.sm-mxn5
margin-left: calc(-1 * 3.2rem) !important;
margin-right: calc(-1 * 3.2rem) !important;
@media (min-width: 480px)
.sm-m6
margin: 4rem !important;
@media (min-width: 480px)
.sm-mt6
margin-top: 4rem !important;
@media (min-width: 480px)
.sm-mr6
margin-right: 4rem !important;
@media (min-width: 480px)
.sm-mb6
margin-bottom: 4rem !important;
@media (min-width: 480px)
.sm-ml6
margin-left: 4rem !important;
@media (min-width: 480px)
.sm-mx6
margin-left: 4rem !important;
margin-right: 4rem !important;
@media (min-width: 480px)
.sm-my6
margin-top: 4rem !important;
margin-bottom: 4rem !important;
@media (min-width: 480px)
.sm-mxn6
margin-left: calc(-1 * 4rem) !important;
margin-right: calc(-1 * 4rem) !important;
@media (min-width: 480px)
.sm-m7
margin: 4.8rem !important;
@media (min-width: 480px)
.sm-mt7
margin-top: 4.8rem !important;
@media (min-width: 480px)
.sm-mr7
margin-right: 4.8rem !important;
@media (min-width: 480px)
.sm-mb7
margin-bottom: 4.8rem !important;
@media (min-width: 480px)
.sm-ml7
margin-left: 4.8rem !important;
@media (min-width: 480px)
.sm-mx7
margin-left: 4.8rem !important;
margin-right: 4.8rem !important;
@media (min-width: 480px)
.sm-my7
margin-top: 4.8rem !important;
margin-bottom: 4.8rem !important;
@media (min-width: 480px)
.sm-mxn7
margin-left: calc(-1 * 4.8rem) !important;
margin-right: calc(-1 * 4.8rem) !important;
@media (min-width: 480px)
.sm-m8
margin: 5.6rem !important;
@media (min-width: 480px)
.sm-mt8
margin-top: 5.6rem !important;
@media (min-width: 480px)
.sm-mr8
margin-right: 5.6rem !important;
@media (min-width: 480px)
.sm-mb8
margin-bottom: 5.6rem !important;
@media (min-width: 480px)
.sm-ml8
margin-left: 5.6rem !important;
@media (min-width: 480px)
.sm-mx8
margin-left: 5.6rem !important;
margin-right: 5.6rem !important;
@media (min-width: 480px)
.sm-my8
margin-top: 5.6rem !important;
margin-bottom: 5.6rem !important;
@media (min-width: 480px)
.sm-mxn8
margin-left: calc(-1 * 5.6rem) !important;
margin-right: calc(-1 * 5.6rem) !important;
@media (min-width: 480px)
.sm-m9
margin: 6.4rem !important;
@media (min-width: 480px)
.sm-mt9
margin-top: 6.4rem !important;
@media (min-width: 480px)
.sm-mr9
margin-right: 6.4rem !important;
@media (min-width: 480px)
.sm-mb9
margin-bottom: 6.4rem !important;
@media (min-width: 480px)
.sm-ml9
margin-left: 6.4rem !important;
@media (min-width: 480px)
.sm-mx9
margin-left: 6.4rem !important;
margin-right: 6.4rem !important;
@media (min-width: 480px)
.sm-my9
margin-top: 6.4rem !important;
margin-bottom: 6.4rem !important;
@media (min-width: 480px)
.sm-mxn9
margin-left: calc(-1 * 6.4rem) !important;
margin-right: calc(-1 * 6.4rem) !important;
@media (min-width: 480px)
.sm-ml-auto
margin-left: auto !important;
@media (min-width: 480px)
.sm-mr-auto
margin-right: auto !important;
@media (min-width: 480px)
.sm-mx-auto
margin-left: auto !important;
margin-right: auto !important;
@media (min-width: 480px)
.md-m0
margin: 0 !important;
@media (min-width: 768px)
.md-mt0
margin-top: 0 !important;
@media (min-width: 768px)
.md-mr0
margin-right: 0 !important;
@media (min-width: 768px)
.md-mb0
margin-bottom: 0 !important;
@media (min-width: 768px)
.md-ml0
margin-left: 0 !important;
@media (min-width: 768px)
.md-mx0
margin-left: 0 !important;
margin-right: 0 !important;
@media (min-width: 768px)
.md-my0
margin-top: 0 !important;
margin-bottom: 0 !important;
@media (min-width: 768px)
.md-m1
margin: .4rem !important;
@media (min-width: 768px)
.md-mt1
margin-top: .4rem !important;
@media (min-width: 768px)
.md-mr1
margin-right: .4rem !important;
@media (min-width: 768px)
.md-mb1
margin-bottom: .4rem !important;
@media (min-width: 768px)
.md-ml1
margin-left: .4rem !important;
@media (min-width: 768px)
.md-mx1
margin-left: .4rem !important;
margin-right: .4rem !important;
@media (min-width: 768px)
.md-my1
margin-top: .4rem !important;
margin-bottom: .4rem !important;
@media (min-width: 768px)
.md-mxn1
margin-left: calc(-1 * .4rem) !important;
margin-right: calc(-1 * .4rem) !important;
@media (min-width: 768px)
.md-m2
margin: .8rem !important;
@media (min-width: 768px)
.md-mt2
margin-top: .8rem !important;
@media (min-width: 768px)
.md-mr2
margin-right: .8rem !important;
@media (min-width: 768px)
.md-mb2
margin-bottom: .8rem !important;
@media (min-width: 768px)
.md-ml2
margin-left: .8rem !important;
@media (min-width: 768px)
.md-mx2
margin-left: .8rem !important;
margin-right: .8rem !important;
@media (min-width: 768px)
.md-my2
margin-top: .8rem !important;
margin-bottom: .8rem !important;
@media (min-width: 768px)
.md-mxn2
margin-left: calc(-1 * .8rem) !important;
margin-right: calc(-1 * .8rem) !important;
@media (min-width: 768px)
.md-m3
margin: 1.6rem !important;
@media (min-width: 768px)
.md-mt3
margin-top: 1.6rem !important;
@media (min-width: 768px)
.md-mr3
margin-right: 1.6rem !important;
@media (min-width: 768px)
.md-mb3
margin-bottom: 1.6rem !important;
@media (min-width: 768px)
.md-ml3
margin-left: 1.6rem !important;
@media (min-width: 768px)
.md-mx3
margin-left: 1.6rem !important;
margin-right: 1.6rem !important;
@media (min-width: 768px)
.md-my3
margin-top: 1.6rem !important;
margin-bottom: 1.6rem !important;
@media (min-width: 768px)
.md-mxn3
margin-left: calc(-1 * 1.6rem) !important;
margin-right: calc(-1 * 1.6rem) !important;
@media (min-width: 768px)
.md-m4
margin: 2.4rem !important;
@media (min-width: 768px)
.md-mt4
margin-top: 2.4rem !important;
@media (min-width: 768px)
.md-mr4
margin-right: 2.4rem !important;
@media (min-width: 768px)
.md-mb4
margin-bottom: 2.4rem !important;
@media (min-width: 768px)
.md-ml4
margin-left: 2.4rem !important;
@media (min-width: 768px)
.md-mx4
margin-left: 2.4rem !important;
margin-right: 2.4rem !important;
@media (min-width: 768px)
.md-my4
margin-top: 2.4rem !important;
margin-bottom: 2.4rem !important;
@media (min-width: 768px)
.md-mxn4
margin-left: calc(-1 * 2.4rem) !important;
margin-right: calc(-1 * 2.4rem) !important;
@media (min-width: 768px)
.md-m5
margin: 3.2rem !important;
@media (min-width: 768px)
.md-mt5
margin-top: 3.2rem !important;
@media (min-width: 768px)
.md-mr5
margin-right: 3.2rem !important;
@media (min-width: 768px)
.md-mb5
margin-bottom: 3.2rem !important;
@media (min-width: 768px)
.md-ml5
margin-left: 3.2rem !important;
@media (min-width: 768px)
.md-mx5
margin-left: 3.2rem !important;
margin-right: 3.2rem !important;
@media (min-width: 768px)
.md-my5
margin-top: 3.2rem !important;
margin-bottom: 3.2rem !important;
@media (min-width: 768px)
.md-mxn5
margin-left: calc(-1 * 3.2rem) !important;
margin-right: calc(-1 * 3.2rem) !important;
@media (min-width: 768px)
.md-m6
margin: 4rem !important;
@media (min-width: 768px)
.md-mt6
margin-top: 4rem !important;
@media (min-width: 768px)
.md-mr6
margin-right: 4rem !important;
@media (min-width: 768px)
.md-mb6
margin-bottom: 4rem !important;
@media (min-width: 768px)
.md-ml6
margin-left: 4rem !important;
@media (min-width: 768px)
.md-mx6
margin-left: 4rem !important;
margin-right: 4rem !important;
@media (min-width: 768px)
.md-my6
margin-top: 4rem !important;
margin-bottom: 4rem !important;
@media (min-width: 768px)
.md-mxn6
margin-left: calc(-1 * 4rem) !important;
margin-right: calc(-1 * 4rem) !important;
@media (min-width: 768px)
.md-m7
margin: 4.8rem !important;
@media (min-width: 768px)
.md-mt7
margin-top: 4.8rem !important;
@media (min-width: 768px)
.md-mr7
margin-right: 4.8rem !important;
@media (min-width: 768px)
.md-mb7
margin-bottom: 4.8rem !important;
@media (min-width: 768px)
.md-ml7
margin-left: 4.8rem !important;
@media (min-width: 768px)
.md-mx7
margin-left: 4.8rem !important;
margin-right: 4.8rem !important;
@media (min-width: 768px)
.md-my7
margin-top: 4.8rem !important;
margin-bottom: 4.8rem !important;
@media (min-width: 768px)
.md-mxn7
margin-left: calc(-1 * 4.8rem) !important;
margin-right: calc(-1 * 4.8rem) !important;
@media (min-width: 768px)
.md-m8
margin: 5.6rem !important;
@media (min-width: 768px)
.md-mt8
margin-top: 5.6rem !important;
@media (min-width: 768px)
.md-mr8
margin-right: 5.6rem !important;
@media (min-width: 768px)
.md-mb8
margin-bottom: 5.6rem !important;
@media (min-width: 768px)
.md-ml8
margin-left: 5.6rem !important;
@media (min-width: 768px)
.md-mx8
margin-left: 5.6rem !important;
margin-right: 5.6rem !important;
@media (min-width: 768px)
.md-my8
margin-top: 5.6rem !important;
margin-bottom: 5.6rem !important;
@media (min-width: 768px)
.md-mxn8
margin-left: calc(-1 * 5.6rem) !important;
margin-right: calc(-1 * 5.6rem) !important;
@media (min-width: 768px)
.md-m9
margin: 6.4rem !important;
@media (min-width: 768px)
.md-mt9
margin-top: 6.4rem !important;
@media (min-width: 768px)
.md-mr9
margin-right: 6.4rem !important;
@media (min-width: 768px)
.md-mb9
margin-bottom: 6.4rem !important;
@media (min-width: 768px)
.md-ml9
margin-left: 6.4rem !important;
@media (min-width: 768px)
.md-mx9
margin-left: 6.4rem !important;
margin-right: 6.4rem !important;
@media (min-width: 768px)
.md-my9
margin-top: 6.4rem !important;
margin-bottom: 6.4rem !important;
@media (min-width: 768px)
.md-mxn9
margin-left: calc(-1 * 6.4rem) !important;
margin-right: calc(-1 * 6.4rem) !important;
@media (min-width: 768px)
.md-ml-auto
margin-left: auto !important;
@media (min-width: 768px)
.md-mr-auto
margin-right: auto !important;
@media (min-width: 768px)
.md-mx-auto
margin-left: auto !important;
margin-right: auto !important;
@media (min-width: 768px)
.lg-m0
margin: 0 !important;
@media (min-width: 1024px)
.lg-mt0
margin-top: 0 !important;
@media (min-width: 1024px)
.lg-mr0
margin-right: 0 !important;
@media (min-width: 1024px)
.lg-mb0
margin-bottom: 0 !important;
@media (min-width: 1024px)
.lg-ml0
margin-left: 0 !important;
@media (min-width: 1024px)
.lg-mx0
margin-left: 0 !important;
margin-right: 0 !important;
@media (min-width: 1024px)
.lg-my0
margin-top: 0 !important;
margin-bottom: 0 !important;
@media (min-width: 1024px)
.lg-m1
margin: .4rem !important;
@media (min-width: 1024px)
.lg-mt1
margin-top: .4rem !important;
@media (min-width: 1024px)
.lg-mr1
margin-right: .4rem !important;
@media (min-width: 1024px)
.lg-mb1
margin-bottom: .4rem !important;
@media (min-width: 1024px)
.lg-ml1
margin-left: .4rem !important;
@media (min-width: 1024px)
.lg-mx1
margin-left: .4rem !important;
margin-right: .4rem !important;
@media (min-width: 1024px)
.lg-my1
margin-top: .4rem !important;
margin-bottom: .4rem !important;
@media (min-width: 1024px)
.lg-mxn1
margin-left: calc(-1 * .4rem) !important;
margin-right: calc(-1 * .4rem) !important;
@media (min-width: 1024px)
.lg-m2
margin: .8rem !important;
@media (min-width: 1024px)
.lg-mt2
margin-top: .8rem !important;
@media (min-width: 1024px)
.lg-mr2
margin-right: .8rem !important;
@media (min-width: 1024px)
.lg-mb2
margin-bottom: .8rem !important;
@media (min-width: 1024px)
.lg-ml2
margin-left: .8rem !important;
@media (min-width: 1024px)
.lg-mx2
margin-left: .8rem !important;
margin-right: .8rem !important;
@media (min-width: 1024px)
.lg-my2
margin-top: .8rem !important;
margin-bottom: .8rem !important;
@media (min-width: 1024px)
.lg-mxn2
margin-left: calc(-1 * .8rem) !important;
margin-right: calc(-1 * .8rem) !important;
@media (min-width: 1024px)
.lg-m3
margin: 1.6rem !important;
@media (min-width: 1024px)
.lg-mt3
margin-top: 1.6rem !important;
@media (min-width: 1024px)
.lg-mr3
margin-right: 1.6rem !important;
@media (min-width: 1024px)
.lg-mb3
margin-bottom: 1.6rem !important;
@media (min-width: 1024px)
.lg-ml3
margin-left: 1.6rem !important;
@media (min-width: 1024px)
.lg-mx3
margin-left: 1.6rem !important;
margin-right: 1.6rem !important;
@media (min-width: 1024px)
.lg-my3
margin-top: 1.6rem !important;
margin-bottom: 1.6rem !important;
@media (min-width: 1024px)
.lg-mxn3
margin-left: calc(-1 * 1.6rem) !important;
margin-right: calc(-1 * 1.6rem) !important;
@media (min-width: 1024px)
.lg-m4
margin: 2.4rem !important;
@media (min-width: 1024px)
.lg-mt4
margin-top: 2.4rem !important;
@media (min-width: 1024px)
.lg-mr4
margin-right: 2.4rem !important;
@media (min-width: 1024px)
.lg-mb4
margin-bottom: 2.4rem !important;
@media (min-width: 1024px)
.lg-ml4
margin-left: 2.4rem !important;
@media (min-width: 1024px)
.lg-mx4
margin-left: 2.4rem !important;
margin-right: 2.4rem !important;
@media (min-width: 1024px)
.lg-my4
margin-top: 2.4rem !important;
margin-bottom: 2.4rem !important;
@media (min-width: 1024px)
.lg-mxn4
margin-left: calc(-1 * 2.4rem) !important;
margin-right: calc(-1 * 2.4rem) !important;
@media (min-width: 1024px)
.lg-m5
margin: 3.2rem !important;
@media (min-width: 1024px)
.lg-mt5
margin-top: 3.2rem !important;
@media (min-width: 1024px)
.lg-mr5
margin-right: 3.2rem !important;
@media (min-width: 1024px)
.lg-mb5
margin-bottom: 3.2rem !important;
@media (min-width: 1024px)
.lg-ml5
margin-left: 3.2rem !important;
@media (min-width: 1024px)
.lg-mx5
margin-left: 3.2rem !important;
margin-right: 3.2rem !important;
@media (min-width: 1024px)
.lg-my5
margin-top: 3.2rem !important;
margin-bottom: 3.2rem !important;
@media (min-width: 1024px)
.lg-mxn5
margin-left: calc(-1 * 3.2rem) !important;
margin-right: calc(-1 * 3.2rem) !important;
@media (min-width: 1024px)
.lg-m6
margin: 4rem !important;
@media (min-width: 1024px)
.lg-mt6
margin-top: 4rem !important;
@media (min-width: 1024px)
.lg-mr6
margin-right: 4rem !important;
@media (min-width: 1024px)
.lg-mb6
margin-bottom: 4rem !important;
@media (min-width: 1024px)
.lg-ml6
margin-left: 4rem !important;
@media (min-width: 1024px)
.lg-mx6
margin-left: 4rem !important;
margin-right: 4rem !important;
@media (min-width: 1024px)
.lg-my6
margin-top: 4rem !important;
margin-bottom: 4rem !important;
@media (min-width: 1024px)
.lg-mxn6
margin-left: calc(-1 * 4rem) !important;
margin-right: calc(-1 * 4rem) !important;
@media (min-width: 1024px)
.lg-m7
margin: 4.8rem !important;
@media (min-width: 1024px)
.lg-mt7
margin-top: 4.8rem !important;
@media (min-width: 1024px)
.lg-mr7
margin-right: 4.8rem !important;
@media (min-width: 1024px)
.lg-mb7
margin-bottom: 4.8rem !important;
@media (min-width: 1024px)
.lg-ml7
margin-left: 4.8rem !important;
@media (min-width: 1024px)
.lg-mx7
margin-left: 4.8rem !important;
margin-right: 4.8rem !important;
@media (min-width: 1024px)
.lg-my7
margin-top: 4.8rem !important;
margin-bottom: 4.8rem !important;
@media (min-width: 1024px)
.lg-mxn7
margin-left: calc(-1 * 4.8rem) !important;
margin-right: calc(-1 * 4.8rem) !important;
@media (min-width: 1024px)
.lg-m8
margin: 5.6rem !important;
@media (min-width: 1024px)
.lg-mt8
margin-top: 5.6rem !important;
@media (min-width: 1024px)
.lg-mr8
margin-right: 5.6rem !important;
@media (min-width: 1024px)
.lg-mb8
margin-bottom: 5.6rem !important;
@media (min-width: 1024px)
.lg-ml8
margin-left: 5.6rem !important;
@media (min-width: 1024px)
.lg-mx8
margin-left: 5.6rem !important;
margin-right: 5.6rem !important;
@media (min-width: 1024px)
.lg-my8
margin-top: 5.6rem !important;
margin-bottom: 5.6rem !important;
@media (min-width: 1024px)
.lg-mxn8
margin-left: calc(-1 * 5.6rem) !important;
margin-right: calc(-1 * 5.6rem) !important;
@media (min-width: 1024px)
.lg-m9
margin: 6.4rem !important;
@media (min-width: 1024px)
.lg-mt9
margin-top: 6.4rem !important;
@media (min-width: 1024px)
.lg-mr9
margin-right: 6.4rem !important;
@media (min-width: 1024px)
.lg-mb9
margin-bottom: 6.4rem !important;
@media (min-width: 1024px)
.lg-ml9
margin-left: 6.4rem !important;
@media (min-width: 1024px)
.lg-mx9
margin-left: 6.4rem !important;
margin-right: 6.4rem !important;
@media (min-width: 1024px)
.lg-my9
margin-top: 6.4rem !important;
margin-bottom: 6.4rem !important;
@media (min-width: 1024px)
.lg-mxn9
margin-left: calc(-1 * 6.4rem) !important;
margin-right: calc(-1 * 6.4rem) !important;
@media (min-width: 1024px)
.lg-ml-auto
margin-left: auto !important;
@media (min-width: 1024px)
.lg-mr-auto
margin-right: auto !important;
@media (min-width: 1024px)
.lg-mx-auto
margin-left: auto !important;
margin-right: auto !important;
@media (min-width: 1024px)
.xl-m0
margin: 0 !important;
@media (min-width: 1280px)
.xl-mt0
margin-top: 0 !important;
@media (min-width: 1280px)
.xl-mr0
margin-right: 0 !important;
@media (min-width: 1280px)
.xl-mb0
margin-bottom: 0 !important;
@media (min-width: 1280px)
.xl-ml0
margin-left: 0 !important;
@media (min-width: 1280px)
.xl-mx0
margin-left: 0 !important;
margin-right: 0 !important;
@media (min-width: 1280px)
.xl-my0
margin-top: 0 !important;
margin-bottom: 0 !important;
@media (min-width: 1280px)
.xl-m1
margin: .4rem !important;
@media (min-width: 1280px)
.xl-mt1
margin-top: .4rem !important;
@media (min-width: 1280px)
.xl-mr1
margin-right: .4rem !important;
@media (min-width: 1280px)
.xl-mb1
margin-bottom: .4rem !important;
@media (min-width: 1280px)
.xl-ml1
margin-left: .4rem !important;
@media (min-width: 1280px)
.xl-mx1
margin-left: .4rem !important;
margin-right: .4rem !important;
@media (min-width: 1280px)
.xl-my1
margin-top: .4rem !important;
margin-bottom: .4rem !important;
@media (min-width: 1280px)
.xl-mxn1
margin-left: calc(-1 * .4rem) !important;
margin-right: calc(-1 * .4rem) !important;
@media (min-width: 1280px)
.xl-m2
margin: .8rem !important;
@media (min-width: 1280px)
.xl-mt2
margin-top: .8rem !important;
@media (min-width: 1280px)
.xl-mr2
margin-right: .8rem !important;
@media (min-width: 1280px)
.xl-mb2
margin-bottom: .8rem !important;
@media (min-width: 1280px)
.xl-ml2
margin-left: .8rem !important;
@media (min-width: 1280px)
.xl-mx2
margin-left: .8rem !important;
margin-right: .8rem !important;
@media (min-width: 1280px)
.xl-my2
margin-top: .8rem !important;
margin-bottom: .8rem !important;
@media (min-width: 1280px)
.xl-mxn2
margin-left: calc(-1 * .8rem) !important;
margin-right: calc(-1 * .8rem) !important;
@media (min-width: 1280px)
.xl-m3
margin: 1.6rem !important;
@media (min-width: 1280px)
.xl-mt3
margin-top: 1.6rem !important;
@media (min-width: 1280px)
.xl-mr3
margin-right: 1.6rem !important;
@media (min-width: 1280px)
.xl-mb3
margin-bottom: 1.6rem !important;
@media (min-width: 1280px)
.xl-ml3
margin-left: 1.6rem !important;
@media (min-width: 1280px)
.xl-mx3
margin-left: 1.6rem !important;
margin-right: 1.6rem !important;
@media (min-width: 1280px)
.xl-my3
margin-top: 1.6rem !important;
margin-bottom: 1.6rem !important;
@media (min-width: 1280px)
.xl-mxn3
margin-left: calc(-1 * 1.6rem) !important;
margin-right: calc(-1 * 1.6rem) !important;
@media (min-width: 1280px)
.xl-m4
margin: 2.4rem !important;
@media (min-width: 1280px)
.xl-mt4
margin-top: 2.4rem !important;
@media (min-width: 1280px)
.xl-mr4
margin-right: 2.4rem !important;
@media (min-width: 1280px)
.xl-mb4
margin-bottom: 2.4rem !important;
@media (min-width: 1280px)
.xl-ml4
margin-left: 2.4rem !important;
@media (min-width: 1280px)
.xl-mx4
margin-left: 2.4rem !important;
margin-right: 2.4rem !important;
@media (min-width: 1280px)
.xl-my4
margin-top: 2.4rem !important;
margin-bottom: 2.4rem !important;
@media (min-width: 1280px)
.xl-mxn4
margin-left: calc(-1 * 2.4rem) !important;
margin-right: calc(-1 * 2.4rem) !important;
@media (min-width: 1280px)
.xl-m5
margin: 3.2rem !important;
@media (min-width: 1280px)
.xl-mt5
margin-top: 3.2rem !important;
@media (min-width: 1280px)
.xl-mr5
margin-right: 3.2rem !important;
@media (min-width: 1280px)
.xl-mb5
margin-bottom: 3.2rem !important;
@media (min-width: 1280px)
.xl-ml5
margin-left: 3.2rem !important;
@media (min-width: 1280px)
.xl-mx5
margin-left: 3.2rem !important;
margin-right: 3.2rem !important;
@media (min-width: 1280px)
.xl-my5
margin-top: 3.2rem !important;
margin-bottom: 3.2rem !important;
@media (min-width: 1280px)
.xl-mxn5
margin-left: calc(-1 * 3.2rem) !important;
margin-right: calc(-1 * 3.2rem) !important;
@media (min-width: 1280px)
.xl-m6
margin: 4rem !important;
@media (min-width: 1280px)
.xl-mt6
margin-top: 4rem !important;
@media (min-width: 1280px)
.xl-mr6
margin-right: 4rem !important;
@media (min-width: 1280px)
.xl-mb6
margin-bottom: 4rem !important;
@media (min-width: 1280px)
.xl-ml6
margin-left: 4rem !important;
@media (min-width: 1280px)
.xl-mx6
margin-left: 4rem !important;
margin-right: 4rem !important;
@media (min-width: 1280px)
.xl-my6
margin-top: 4rem !important;
margin-bottom: 4rem !important;
@media (min-width: 1280px)
.xl-mxn6
margin-left: calc(-1 * 4rem) !important;
margin-right: calc(-1 * 4rem) !important;
@media (min-width: 1280px)
.xl-m7
margin: 4.8rem !important;
@media (min-width: 1280px)
.xl-mt7
margin-top: 4.8rem !important;
@media (min-width: 1280px)
.xl-mr7
margin-right: 4.8rem !important;
@media (min-width: 1280px)
.xl-mb7
margin-bottom: 4.8rem !important;
@media (min-width: 1280px)
.xl-ml7
margin-left: 4.8rem !important;
@media (min-width: 1280px)
.xl-mx7
margin-left: 4.8rem !important;
margin-right: 4.8rem !important;
@media (min-width: 1280px)
.xl-my7
margin-top: 4.8rem !important;
margin-bottom: 4.8rem !important;
@media (min-width: 1280px)
.xl-mxn7
margin-left: calc(-1 * 4.8rem) !important;
margin-right: calc(-1 * 4.8rem) !important;
@media (min-width: 1280px)
.xl-m8
margin: 5.6rem !important;
@media (min-width: 1280px)
.xl-mt8
margin-top: 5.6rem !important;
@media (min-width: 1280px)
.xl-mr8
margin-right: 5.6rem !important;
@media (min-width: 1280px)
.xl-mb8
margin-bottom: 5.6rem !important;
@media (min-width: 1280px)
.xl-ml8
margin-left: 5.6rem !important;
@media (min-width: 1280px)
.xl-mx8
margin-left: 5.6rem !important;
margin-right: 5.6rem !important;
@media (min-width: 1280px)
.xl-my8
margin-top: 5.6rem !important;
margin-bottom: 5.6rem !important;
@media (min-width: 1280px)
.xl-mxn8
margin-left: calc(-1 * 5.6rem) !important;
margin-right: calc(-1 * 5.6rem) !important;
@media (min-width: 1280px)
.xl-m9
margin: 6.4rem !important;
@media (min-width: 1280px)
.xl-mt9
margin-top: 6.4rem !important;
@media (min-width: 1280px)
.xl-mr9
margin-right: 6.4rem !important;
@media (min-width: 1280px)
.xl-mb9
margin-bottom: 6.4rem !important;
@media (min-width: 1280px)
.xl-ml9
margin-left: 6.4rem !important;
@media (min-width: 1280px)
.xl-mx9
margin-left: 6.4rem !important;
margin-right: 6.4rem !important;
@media (min-width: 1280px)
.xl-my9
margin-top: 6.4rem !important;
margin-bottom: 6.4rem !important;
@media (min-width: 1280px)
.xl-mxn9
margin-left: calc(-1 * 6.4rem) !important;
margin-right: calc(-1 * 6.4rem) !important;
@media (min-width: 1280px)
.xl-ml-auto
margin-left: auto !important;
@media (min-width: 1280px)
.xl-mr-auto
margin-right: auto !important;
@media (min-width: 1280px)
.xl-mx-auto
margin-left: auto !important;
margin-right: auto !important;
@media (min-width: 1280px)
.xxl-m0
margin: 0 !important;
@media (min-width: 1600px)
.xxl-mt0
margin-top: 0 !important;
@media (min-width: 1600px)
.xxl-mr0
margin-right: 0 !important;
@media (min-width: 1600px)
.xxl-mb0
margin-bottom: 0 !important;
@media (min-width: 1600px)
.xxl-ml0
margin-left: 0 !important;
@media (min-width: 1600px)
.xxl-mx0
margin-left: 0 !important;
margin-right: 0 !important;
@media (min-width: 1600px)
.xxl-my0
margin-top: 0 !important;
margin-bottom: 0 !important;
@media (min-width: 1600px)
.xxl-m1
margin: .4rem !important;
@media (min-width: 1600px)
.xxl-mt1
margin-top: .4rem !important;
@media (min-width: 1600px)
.xxl-mr1
margin-right: .4rem !important;
@media (min-width: 1600px)
.xxl-mb1
margin-bottom: .4rem !important;
@media (min-width: 1600px)
.xxl-ml1
margin-left: .4rem !important;
@media (min-width: 1600px)
.xxl-mx1
margin-left: .4rem !important;
margin-right: .4rem !important;
@media (min-width: 1600px)
.xxl-my1
margin-top: .4rem !important;
margin-bottom: .4rem !important;
@media (min-width: 1600px)
.xxl-mxn1
margin-left: calc(-1 * .4rem) !important;
margin-right: calc(-1 * .4rem) !important;
@media (min-width: 1600px)
.xxl-m2
margin: .8rem !important;
@media (min-width: 1600px)
.xxl-mt2
margin-top: .8rem !important;
@media (min-width: 1600px)
.xxl-mr2
margin-right: .8rem !important;
@media (min-width: 1600px)
.xxl-mb2
margin-bottom: .8rem !important;
@media (min-width: 1600px)
.xxl-ml2
margin-left: .8rem !important;
@media (min-width: 1600px)
.xxl-mx2
margin-left: .8rem !important;
margin-right: .8rem !important;
@media (min-width: 1600px)
.xxl-my2
margin-top: .8rem !important;
margin-bottom: .8rem !important;
@media (min-width: 1600px)
.xxl-mxn2
margin-left: calc(-1 * .8rem) !important;
margin-right: calc(-1 * .8rem) !important;
@media (min-width: 1600px)
.xxl-m3
margin: 1.6rem !important;
@media (min-width: 1600px)
.xxl-mt3
margin-top: 1.6rem !important;
@media (min-width: 1600px)
.xxl-mr3
margin-right: 1.6rem !important;
@media (min-width: 1600px)
.xxl-mb3
margin-bottom: 1.6rem !important;
@media (min-width: 1600px)
.xxl-ml3
margin-left: 1.6rem !important;
@media (min-width: 1600px)
.xxl-mx3
margin-left: 1.6rem !important;
margin-right: 1.6rem !important;
@media (min-width: 1600px)
.xxl-my3
margin-top: 1.6rem !important;
margin-bottom: 1.6rem !important;
@media (min-width: 1600px)
.xxl-mxn3
margin-left: calc(-1 * 1.6rem) !important;
margin-right: calc(-1 * 1.6rem) !important;
@media (min-width: 1600px)
.xxl-m4
margin: 2.4rem !important;
@media (min-width: 1600px)
.xxl-mt4
margin-top: 2.4rem !important;
@media (min-width: 1600px)
.xxl-mr4
margin-right: 2.4rem !important;
@media (min-width: 1600px)
.xxl-mb4
margin-bottom: 2.4rem !important;
@media (min-width: 1600px)
.xxl-ml4
margin-left: 2.4rem !important;
@media (min-width: 1600px)
.xxl-mx4
margin-left: 2.4rem !important;
margin-right: 2.4rem !important;
@media (min-width: 1600px)
.xxl-my4
margin-top: 2.4rem !important;
margin-bottom: 2.4rem !important;
@media (min-width: 1600px)
.xxl-mxn4
margin-left: calc(-1 * 2.4rem) !important;
margin-right: calc(-1 * 2.4rem) !important;
@media (min-width: 1600px)
.xxl-m5
margin: 3.2rem !important;
@media (min-width: 1600px)
.xxl-mt5
margin-top: 3.2rem !important;
@media (min-width: 1600px)
.xxl-mr5
margin-right: 3.2rem !important;
@media (min-width: 1600px)
.xxl-mb5
margin-bottom: 3.2rem !important;
@media (min-width: 1600px)
.xxl-ml5
margin-left: 3.2rem !important;
@media (min-width: 1600px)
.xxl-mx5
margin-left: 3.2rem !important;
margin-right: 3.2rem !important;
@media (min-width: 1600px)
.xxl-my5
margin-top: 3.2rem !important;
margin-bottom: 3.2rem !important;
@media (min-width: 1600px)
.xxl-mxn5
margin-left: calc(-1 * 3.2rem) !important;
margin-right: calc(-1 * 3.2rem) !important;
@media (min-width: 1600px)
.xxl-m6
margin: 4rem !important;
@media (min-width: 1600px)
.xxl-mt6
margin-top: 4rem !important;
@media (min-width: 1600px)
.xxl-mr6
margin-right: 4rem !important;
@media (min-width: 1600px)
.xxl-mb6
margin-bottom: 4rem !important;
@media (min-width: 1600px)
.xxl-ml6
margin-left: 4rem !important;
@media (min-width: 1600px)
.xxl-mx6
margin-left: 4rem !important;
margin-right: 4rem !important;
@media (min-width: 1600px)
.xxl-my6
margin-top: 4rem !important;
margin-bottom: 4rem !important;
@media (min-width: 1600px)
.xxl-mxn6
margin-left: calc(-1 * 4rem) !important;
margin-right: calc(-1 * 4rem) !important;
@media (min-width: 1600px)
.xxl-m7
margin: 4.8rem !important;
@media (min-width: 1600px)
.xxl-mt7
margin-top: 4.8rem !important;
@media (min-width: 1600px)
.xxl-mr7
margin-right: 4.8rem !important;
@media (min-width: 1600px)
.xxl-mb7
margin-bottom: 4.8rem !important;
@media (min-width: 1600px)
.xxl-ml7
margin-left: 4.8rem !important;
@media (min-width: 1600px)
.xxl-mx7
margin-left: 4.8rem !important;
margin-right: 4.8rem !important;
@media (min-width: 1600px)
.xxl-my7
margin-top: 4.8rem !important;
margin-bottom: 4.8rem !important;
@media (min-width: 1600px)
.xxl-mxn7
margin-left: calc(-1 * 4.8rem) !important;
margin-right: calc(-1 * 4.8rem) !important;
@media (min-width: 1600px)
.xxl-m8
margin: 5.6rem !important;
@media (min-width: 1600px)
.xxl-mt8
margin-top: 5.6rem !important;
@media (min-width: 1600px)
.xxl-mr8
margin-right: 5.6rem !important;
@media (min-width: 1600px)
.xxl-mb8
margin-bottom: 5.6rem !important;
@media (min-width: 1600px)
.xxl-ml8
margin-left: 5.6rem !important;
@media (min-width: 1600px)
.xxl-mx8
margin-left: 5.6rem !important;
margin-right: 5.6rem !important;
@media (min-width: 1600px)
.xxl-my8
margin-top: 5.6rem !important;
margin-bottom: 5.6rem !important;
@media (min-width: 1600px)
.xxl-mxn8
margin-left: calc(-1 * 5.6rem) !important;
margin-right: calc(-1 * 5.6rem) !important;
@media (min-width: 1600px)
.xxl-m9
margin: 6.4rem !important;
@media (min-width: 1600px)
.xxl-mt9
margin-top: 6.4rem !important;
@media (min-width: 1600px)
.xxl-mr9
margin-right: 6.4rem !important;
@media (min-width: 1600px)
.xxl-mb9
margin-bottom: 6.4rem !important;
@media (min-width: 1600px)
.xxl-ml9
margin-left: 6.4rem !important;
@media (min-width: 1600px)
.xxl-mx9
margin-left: 6.4rem !important;
margin-right: 6.4rem !important;
@media (min-width: 1600px)
.xxl-my9
margin-top: 6.4rem !important;
margin-bottom: 6.4rem !important;
@media (min-width: 1600px)
.xxl-mxn9
margin-left: calc(-1 * 6.4rem) !important;
margin-right: calc(-1 * 6.4rem) !important;
@media (min-width: 1600px)
.xxl-ml-auto
margin-left: auto !important;
@media (min-width: 1600px)
.xxl-mr-auto
margin-right: auto !important;
@media (min-width: 1600px)
.xxl-mx-auto
margin-left: auto !important;
margin-right: auto !important;
@media (min-width: 1600px)

offset

.offset1of12
margin-left: calc(100% * (1 / 12));
.offset2of12
margin-left: calc(100% * (2 / 12));
.offset3of12
margin-left: calc(100% * (3 / 12));
.offset4of12
margin-left: calc(100% * (4 / 12));
.offset5of12
margin-left: calc(100% * (5 / 12));
.offset6of12
margin-left: calc(100% * (6 / 12));
.offset7of12
margin-left: calc(100% * (7 / 12));
.offset8of12
margin-left: calc(100% * (8 / 12));
.offset9of12
margin-left: calc(100% * (9 / 12));
.offset10of12
margin-left: calc(100% * (10 / 12));
.offset11of12
margin-left: calc(100% * (11 / 12));
.offset1of5
margin-left: calc(100% * (1 / 5));
.offset2of5
margin-left: calc(100% * (2 / 5));
.offset3of5
margin-left: calc(100% * (3 / 5));
.offset4of5
margin-left: calc(100% * (4 / 5));
.sm-offset1of12
margin-left: calc(100% * (1 / 12));
@media (min-width: 480px)
.sm-offset2of12
margin-left: calc(100% * (2 / 12));
@media (min-width: 480px)
.sm-offset3of12
margin-left: calc(100% * (3 / 12));
@media (min-width: 480px)
.sm-offset4of12
margin-left: calc(100% * (4 / 12));
@media (min-width: 480px)
.sm-offset5of12
margin-left: calc(100% * (5 / 12));
@media (min-width: 480px)
.sm-offset6of12
margin-left: calc(100% * (6 / 12));
@media (min-width: 480px)
.sm-offset7of12
margin-left: calc(100% * (7 / 12));
@media (min-width: 480px)
.sm-offset8of12
margin-left: calc(100% * (8 / 12));
@media (min-width: 480px)
.sm-offset9of12
margin-left: calc(100% * (9 / 12));
@media (min-width: 480px)
.sm-offset10of12
margin-left: calc(100% * (10 / 12));
@media (min-width: 480px)
.sm-offset11of12
margin-left: calc(100% * (11 / 12));
@media (min-width: 480px)
.sm-offset1of5
margin-left: calc(100% * (1 / 5));
@media (min-width: 480px)
.sm-offset2of5
margin-left: calc(100% * (2 / 5));
@media (min-width: 480px)
.sm-offset3of5
margin-left: calc(100% * (3 / 5));
@media (min-width: 480px)
.sm-offset4of5
margin-left: calc(100% * (4 / 5));
@media (min-width: 480px)
.md-offset1of12
margin-left: calc(100% * (1 / 12));
@media (min-width: 768px)
.md-offset2of12
margin-left: calc(100% * (2 / 12));
@media (min-width: 768px)
.md-offset3of12
margin-left: calc(100% * (3 / 12));
@media (min-width: 768px)
.md-offset4of12
margin-left: calc(100% * (4 / 12));
@media (min-width: 768px)
.md-offset5of12
margin-left: calc(100% * (5 / 12));
@media (min-width: 768px)
.md-offset6of12
margin-left: calc(100% * (6 / 12));
@media (min-width: 768px)
.md-offset7of12
margin-left: calc(100% * (7 / 12));
@media (min-width: 768px)
.md-offset8of12
margin-left: calc(100% * (8 / 12));
@media (min-width: 768px)
.md-offset9of12
margin-left: calc(100% * (9 / 12));
@media (min-width: 768px)
.md-offset10of12
margin-left: calc(100% * (10 / 12));
@media (min-width: 768px)
.md-offset11of12
margin-left: calc(100% * (11 / 12));
@media (min-width: 768px)
.md-offset1of5
margin-left: calc(100% * (1 / 5));
@media (min-width: 768px)
.md-offset2of5
margin-left: calc(100% * (2 / 5));
@media (min-width: 768px)
.md-offset3of5
margin-left: calc(100% * (3 / 5));
@media (min-width: 768px)
.md-offset4of5
margin-left: calc(100% * (4 / 5));
@media (min-width: 768px)
.lg-offset1of12
margin-left: calc(100% * (1 / 12));
@media (min-width: 1024px)
.lg-offset2of12
margin-left: calc(100% * (2 / 12));
@media (min-width: 1024px)
.lg-offset3of12
margin-left: calc(100% * (3 / 12));
@media (min-width: 1024px)
.lg-offset4of12
margin-left: calc(100% * (4 / 12));
@media (min-width: 1024px)
.lg-offset5of12
margin-left: calc(100% * (5 / 12));
@media (min-width: 1024px)
.lg-offset6of12
margin-left: calc(100% * (6 / 12));
@media (min-width: 1024px)
.lg-offset7of12
margin-left: calc(100% * (7 / 12));
@media (min-width: 1024px)
.lg-offset8of12
margin-left: calc(100% * (8 / 12));
@media (min-width: 1024px)
.lg-offset9of12
margin-left: calc(100% * (9 / 12));
@media (min-width: 1024px)
.lg-offset10of12
margin-left: calc(100% * (10 / 12));
@media (min-width: 1024px)
.lg-offset11of12
margin-left: calc(100% * (11 / 12));
@media (min-width: 1024px)
.lg-offset1of5
margin-left: calc(100% * (1 / 5));
@media (min-width: 1024px)
.lg-offset2of5
margin-left: calc(100% * (2 / 5));
@media (min-width: 1024px)
.lg-offset3of5
margin-left: calc(100% * (3 / 5));
@media (min-width: 1024px)
.lg-offset4of5
margin-left: calc(100% * (4 / 5));
@media (min-width: 1024px)
.xl-offset1of12
margin-left: calc(100% * (1 / 12));
@media (min-width: 1280px)
.xl-offset2of12
margin-left: calc(100% * (2 / 12));
@media (min-width: 1280px)
.xl-offset3of12
margin-left: calc(100% * (3 / 12));
@media (min-width: 1280px)
.xl-offset4of12
margin-left: calc(100% * (4 / 12));
@media (min-width: 1280px)
.xl-offset5of12
margin-left: calc(100% * (5 / 12));
@media (min-width: 1280px)
.xl-offset6of12
margin-left: calc(100% * (6 / 12));
@media (min-width: 1280px)
.xl-offset7of12
margin-left: calc(100% * (7 / 12));
@media (min-width: 1280px)
.xl-offset8of12
margin-left: calc(100% * (8 / 12));
@media (min-width: 1280px)
.xl-offset9of12
margin-left: calc(100% * (9 / 12));
@media (min-width: 1280px)
.xl-offset10of12
margin-left: calc(100% * (10 / 12));
@media (min-width: 1280px)
.xl-offset11of12
margin-left: calc(100% * (11 / 12));
@media (min-width: 1280px)
.xl-offset1of5
margin-left: calc(100% * (1 / 5));
@media (min-width: 1280px)
.xl-offset2of5
margin-left: calc(100% * (2 / 5));
@media (min-width: 1280px)
.xl-offset3of5
margin-left: calc(100% * (3 / 5));
@media (min-width: 1280px)
.xl-offset4of5
margin-left: calc(100% * (4 / 5));
@media (min-width: 1280px)
.xxl-offset1of12
margin-left: calc(100% * (1 / 12));
@media (min-width: 1600px)
.xxl-offset2of12
margin-left: calc(100% * (2 / 12));
@media (min-width: 1600px)
.xxl-offset3of12
margin-left: calc(100% * (3 / 12));
@media (min-width: 1600px)
.xxl-offset4of12
margin-left: calc(100% * (4 / 12));
@media (min-width: 1600px)
.xxl-offset5of12
margin-left: calc(100% * (5 / 12));
@media (min-width: 1600px)
.xxl-offset6of12
margin-left: calc(100% * (6 / 12));
@media (min-width: 1600px)
.xxl-offset7of12
margin-left: calc(100% * (7 / 12));
@media (min-width: 1600px)
.xxl-offset8of12
margin-left: calc(100% * (8 / 12));
@media (min-width: 1600px)
.xxl-offset9of12
margin-left: calc(100% * (9 / 12));
@media (min-width: 1600px)
.xxl-offset10of12
margin-left: calc(100% * (10 / 12));
@media (min-width: 1600px)
.xxl-offset11of12
margin-left: calc(100% * (11 / 12));
@media (min-width: 1600px)
.xxl-offset1of5
margin-left: calc(100% * (1 / 5));
@media (min-width: 1600px)
.xxl-offset2of5
margin-left: calc(100% * (2 / 5));
@media (min-width: 1600px)
.xxl-offset3of5
margin-left: calc(100% * (3 / 5));
@media (min-width: 1600px)
.xxl-offset4of5
margin-left: calc(100% * (4 / 5));
@media (min-width: 1600px)

padding

.p0
padding: 0 !important;
.pt0
padding-top: 0 !important;
.pr0
padding-right: 0 !important;
.pb0
padding-bottom: 0 !important;
.pl0
padding-left: 0 !important;
.px0
padding-left: 0 !important;
padding-right: 0 !important;
.py0
padding-top: 0 !important;
padding-bottom: 0 !important;
.frapPadding
padding-bottom: 9rem !important;
.frapPaddingDouble
padding-bottom: 14.6rem !important;
.p1
padding: .4rem !important;
.pt1
padding-top: .4rem !important;
.pr1
padding-right: .4rem !important;
.pb1
padding-bottom: .4rem !important;
.pl1
padding-left: .4rem !important;
.px1
padding-left: .4rem !important;
padding-right: .4rem !important;
.py1
padding-top: .4rem !important;
padding-bottom: .4rem !important;
.p2
padding: .8rem !important;
.pt2
padding-top: .8rem !important;
.pr2
padding-right: .8rem !important;
.pb2
padding-bottom: .8rem !important;
.pl2
padding-left: .8rem !important;
.px2
padding-left: .8rem !important;
padding-right: .8rem !important;
.py2
padding-top: .8rem !important;
padding-bottom: .8rem !important;
.p3
padding: 1.6rem !important;
.pt3
padding-top: 1.6rem !important;
.pr3
padding-right: 1.6rem !important;
.pb3
padding-bottom: 1.6rem !important;
.pl3
padding-left: 1.6rem !important;
.px3
padding-left: 1.6rem !important;
padding-right: 1.6rem !important;
.py3
padding-top: 1.6rem !important;
padding-bottom: 1.6rem !important;
.p4
padding: 2.4rem !important;
.pt4
padding-top: 2.4rem !important;
.pr4
padding-right: 2.4rem !important;
.pb4
padding-bottom: 2.4rem !important;
.pl4
padding-left: 2.4rem !important;
.px4
padding-left: 2.4rem !important;
padding-right: 2.4rem !important;
.py4
padding-top: 2.4rem !important;
padding-bottom: 2.4rem !important;
.p5
padding: 3.2rem !important;
.pt5
padding-top: 3.2rem !important;
.pr5
padding-right: 3.2rem !important;
.pb5
padding-bottom: 3.2rem !important;
.pl5
padding-left: 3.2rem !important;
.px5
padding-left: 3.2rem !important;
padding-right: 3.2rem !important;
.py5
padding-top: 3.2rem !important;
padding-bottom: 3.2rem !important;
.p6
padding: 4rem !important;
.pt6
padding-top: 4rem !important;
.pr6
padding-right: 4rem !important;
.pb6
padding-bottom: 4rem !important;
.pl6
padding-left: 4rem !important;
.px6
padding-left: 4rem !important;
padding-right: 4rem !important;
.py6
padding-top: 4rem !important;
padding-bottom: 4rem !important;
.p7
padding: 4.8rem !important;
.pt7
padding-top: 4.8rem !important;
.pr7
padding-right: 4.8rem !important;
.pb7
padding-bottom: 4.8rem !important;
.pl7
padding-left: 4.8rem !important;
.px7
padding-left: 4.8rem !important;
padding-right: 4.8rem !important;
.py7
padding-top: 4.8rem !important;
padding-bottom: 4.8rem !important;
.p8
padding: 5.6rem !important;
.pt8
padding-top: 5.6rem !important;
.pr8
padding-right: 5.6rem !important;
.pb8
padding-bottom: 5.6rem !important;
.pl8
padding-left: 5.6rem !important;
.px8
padding-left: 5.6rem !important;
padding-right: 5.6rem !important;
.py8
padding-top: 5.6rem !important;
padding-bottom: 5.6rem !important;
.p9
padding: 6.4rem !important;
.pt9
padding-top: 6.4rem !important;
.pr9
padding-right: 6.4rem !important;
.pb9
padding-bottom: 6.4rem !important;
.pl9
padding-left: 6.4rem !important;
.px9
padding-left: 6.4rem !important;
padding-right: 6.4rem !important;
.py9
padding-top: 6.4rem !important;
padding-bottom: 6.4rem !important;
.sm-p0
padding: 0 !important;
@media (min-width: 480px)
.sm-pt0
padding-top: 0 !important;
@media (min-width: 480px)
.sm-pr0
padding-right: 0 !important;
@media (min-width: 480px)
.sm-pb0
padding-bottom: 0 !important;
@media (min-width: 480px)
.sm-pl0
padding-left: 0 !important;
@media (min-width: 480px)
.sm-px0
padding-left: 0 !important;
padding-right: 0 !important;
@media (min-width: 480px)
.sm-py0
padding-top: 0 !important;
padding-bottom: 0 !important;
@media (min-width: 480px)
.sm-p1
padding: .4rem !important;
@media (min-width: 480px)
.sm-pt1
padding-top: .4rem !important;
@media (min-width: 480px)
.sm-pr1
padding-right: .4rem !important;
@media (min-width: 480px)
.sm-pb1
padding-bottom: .4rem !important;
@media (min-width: 480px)
.sm-pl1
padding-left: .4rem !important;
@media (min-width: 480px)
.sm-px1
padding-left: .4rem !important;
padding-right: .4rem !important;
@media (min-width: 480px)
.sm-py1
padding-top: .4rem !important;
padding-bottom: .4rem !important;
@media (min-width: 480px)
.sm-p2
padding: .8rem !important;
@media (min-width: 480px)
.sm-pt2
padding-top: .8rem !important;
@media (min-width: 480px)
.sm-pr2
padding-right: .8rem !important;
@media (min-width: 480px)
.sm-pb2
padding-bottom: .8rem !important;
@media (min-width: 480px)
.sm-pl2
padding-left: .8rem !important;
@media (min-width: 480px)
.sm-px2
padding-left: .8rem !important;
padding-right: .8rem !important;
@media (min-width: 480px)
.sm-py2
padding-top: .8rem !important;
padding-bottom: .8rem !important;
@media (min-width: 480px)
.sm-p3
padding: 1.6rem !important;
@media (min-width: 480px)
.sm-pt3
padding-top: 1.6rem !important;
@media (min-width: 480px)
.sm-pr3
padding-right: 1.6rem !important;
@media (min-width: 480px)
.sm-pb3
padding-bottom: 1.6rem !important;
@media (min-width: 480px)
.sm-pl3
padding-left: 1.6rem !important;
@media (min-width: 480px)
.sm-px3
padding-left: 1.6rem !important;
padding-right: 1.6rem !important;
@media (min-width: 480px)
.sm-py3
padding-top: 1.6rem !important;
padding-bottom: 1.6rem !important;
@media (min-width: 480px)
.sm-p4
padding: 2.4rem !important;
@media (min-width: 480px)
.sm-pt4
padding-top: 2.4rem !important;
@media (min-width: 480px)
.sm-pr4
padding-right: 2.4rem !important;
@media (min-width: 480px)
.sm-pb4
padding-bottom: 2.4rem !important;
@media (min-width: 480px)
.sm-pl4
padding-left: 2.4rem !important;
@media (min-width: 480px)
.sm-px4
padding-left: 2.4rem !important;
padding-right: 2.4rem !important;
@media (min-width: 480px)
.sm-py4
padding-top: 2.4rem !important;
padding-bottom: 2.4rem !important;
@media (min-width: 480px)
.sm-p5
padding: 3.2rem !important;
@media (min-width: 480px)
.sm-pt5
padding-top: 3.2rem !important;
@media (min-width: 480px)
.sm-pr5
padding-right: 3.2rem !important;
@media (min-width: 480px)
.sm-pb5
padding-bottom: 3.2rem !important;
@media (min-width: 480px)
.sm-pl5
padding-left: 3.2rem !important;
@media (min-width: 480px)
.sm-px5
padding-left: 3.2rem !important;
padding-right: 3.2rem !important;
@media (min-width: 480px)
.sm-py5
padding-top: 3.2rem !important;
padding-bottom: 3.2rem !important;
@media (min-width: 480px)
.sm-p6
padding: 4rem !important;
@media (min-width: 480px)
.sm-pt6
padding-top: 4rem !important;
@media (min-width: 480px)
.sm-pr6
padding-right: 4rem !important;
@media (min-width: 480px)
.sm-pb6
padding-bottom: 4rem !important;
@media (min-width: 480px)
.sm-pl6
padding-left: 4rem !important;
@media (min-width: 480px)
.sm-px6
padding-left: 4rem !important;
padding-right: 4rem !important;
@media (min-width: 480px)
.sm-py6
padding-top: 4rem !important;
padding-bottom: 4rem !important;
@media (min-width: 480px)
.sm-p7
padding: 4.8rem !important;
@media (min-width: 480px)
.sm-pt7
padding-top: 4.8rem !important;
@media (min-width: 480px)
.sm-pr7
padding-right: 4.8rem !important;
@media (min-width: 480px)
.sm-pb7
padding-bottom: 4.8rem !important;
@media (min-width: 480px)
.sm-pl7
padding-left: 4.8rem !important;
@media (min-width: 480px)
.sm-px7
padding-left: 4.8rem !important;
padding-right: 4.8rem !important;
@media (min-width: 480px)
.sm-py7
padding-top: 4.8rem !important;
padding-bottom: 4.8rem !important;
@media (min-width: 480px)
.sm-p8
padding: 5.6rem !important;
@media (min-width: 480px)
.sm-pt8
padding-top: 5.6rem !important;
@media (min-width: 480px)
.sm-pr8
padding-right: 5.6rem !important;
@media (min-width: 480px)
.sm-pb8
padding-bottom: 5.6rem !important;
@media (min-width: 480px)
.sm-pl8
padding-left: 5.6rem !important;
@media (min-width: 480px)
.sm-px8
padding-left: 5.6rem !important;
padding-right: 5.6rem !important;
@media (min-width: 480px)
.sm-py8
padding-top: 5.6rem !important;
padding-bottom: 5.6rem !important;
@media (min-width: 480px)
.sm-p9
padding: 6.4rem !important;
@media (min-width: 480px)
.sm-pt9
padding-top: 6.4rem !important;
@media (min-width: 480px)
.sm-pr9
padding-right: 6.4rem !important;
@media (min-width: 480px)
.sm-pb9
padding-bottom: 6.4rem !important;
@media (min-width: 480px)
.sm-pl9
padding-left: 6.4rem !important;
@media (min-width: 480px)
.sm-px9
padding-left: 6.4rem !important;
padding-right: 6.4rem !important;
@media (min-width: 480px)
.sm-py9
padding-top: 6.4rem !important;
padding-bottom: 6.4rem !important;
@media (min-width: 480px)
.md-p0
padding: 0 !important;
@media (min-width: 768px)
.md-pt0
padding-top: 0 !important;
@media (min-width: 768px)
.md-pr0
padding-right: 0 !important;
@media (min-width: 768px)
.md-pb0
padding-bottom: 0 !important;
@media (min-width: 768px)
.md-pl0
padding-left: 0 !important;
@media (min-width: 768px)
.md-px0
padding-left: 0 !important;
padding-right: 0 !important;
@media (min-width: 768px)
.md-py0
padding-top: 0 !important;
padding-bottom: 0 !important;
@media (min-width: 768px)
.md-p1
padding: .4rem !important;
@media (min-width: 768px)
.md-pt1
padding-top: .4rem !important;
@media (min-width: 768px)
.md-pr1
padding-right: .4rem !important;
@media (min-width: 768px)
.md-pb1
padding-bottom: .4rem !important;
@media (min-width: 768px)
.md-pl1
padding-left: .4rem !important;
@media (min-width: 768px)
.md-px1
padding-left: .4rem !important;
padding-right: .4rem !important;
@media (min-width: 768px)
.md-py1
padding-top: .4rem !important;
padding-bottom: .4rem !important;
@media (min-width: 768px)
.md-p2
padding: .8rem !important;
@media (min-width: 768px)
.md-pt2
padding-top: .8rem !important;
@media (min-width: 768px)
.md-pr2
padding-right: .8rem !important;
@media (min-width: 768px)
.md-pb2
padding-bottom: .8rem !important;
@media (min-width: 768px)
.md-pl2
padding-left: .8rem !important;
@media (min-width: 768px)
.md-px2
padding-left: .8rem !important;
padding-right: .8rem !important;
@media (min-width: 768px)
.md-py2
padding-top: .8rem !important;
padding-bottom: .8rem !important;
@media (min-width: 768px)
.md-p3
padding: 1.6rem !important;
@media (min-width: 768px)
.md-pt3
padding-top: 1.6rem !important;
@media (min-width: 768px)
.md-pr3
padding-right: 1.6rem !important;
@media (min-width: 768px)
.md-pb3
padding-bottom: 1.6rem !important;
@media (min-width: 768px)
.md-pl3
padding-left: 1.6rem !important;
@media (min-width: 768px)
.md-px3
padding-left: 1.6rem !important;
padding-right: 1.6rem !important;
@media (min-width: 768px)
.md-py3
padding-top: 1.6rem !important;
padding-bottom: 1.6rem !important;
@media (min-width: 768px)
.md-p4
padding: 2.4rem !important;
@media (min-width: 768px)
.md-pt4
padding-top: 2.4rem !important;
@media (min-width: 768px)
.md-pr4
padding-right: 2.4rem !important;
@media (min-width: 768px)
.md-pb4
padding-bottom: 2.4rem !important;
@media (min-width: 768px)
.md-pl4
padding-left: 2.4rem !important;
@media (min-width: 768px)
.md-px4
padding-left: 2.4rem !important;
padding-right: 2.4rem !important;
@media (min-width: 768px)
.md-py4
padding-top: 2.4rem !important;
padding-bottom: 2.4rem !important;
@media (min-width: 768px)
.md-p5
padding: 3.2rem !important;
@media (min-width: 768px)
.md-pt5
padding-top: 3.2rem !important;
@media (min-width: 768px)
.md-pr5
padding-right: 3.2rem !important;
@media (min-width: 768px)
.md-pb5
padding-bottom: 3.2rem !important;
@media (min-width: 768px)
.md-pl5
padding-left: 3.2rem !important;
@media (min-width: 768px)
.md-px5
padding-left: 3.2rem !important;
padding-right: 3.2rem !important;
@media (min-width: 768px)
.md-py5
padding-top: 3.2rem !important;
padding-bottom: 3.2rem !important;
@media (min-width: 768px)
.md-p6
padding: 4rem !important;
@media (min-width: 768px)
.md-pt6
padding-top: 4rem !important;
@media (min-width: 768px)
.md-pr6
padding-right: 4rem !important;
@media (min-width: 768px)
.md-pb6
padding-bottom: 4rem !important;
@media (min-width: 768px)
.md-pl6
padding-left: 4rem !important;
@media (min-width: 768px)
.md-px6
padding-left: 4rem !important;
padding-right: 4rem !important;
@media (min-width: 768px)
.md-py6
padding-top: 4rem !important;
padding-bottom: 4rem !important;
@media (min-width: 768px)
.md-p7
padding: 4.8rem !important;
@media (min-width: 768px)
.md-pt7
padding-top: 4.8rem !important;
@media (min-width: 768px)
.md-pr7
padding-right: 4.8rem !important;
@media (min-width: 768px)
.md-pb7
padding-bottom: 4.8rem !important;
@media (min-width: 768px)
.md-pl7
padding-left: 4.8rem !important;
@media (min-width: 768px)
.md-px7
padding-left: 4.8rem !important;
padding-right: 4.8rem !important;
@media (min-width: 768px)
.md-py7
padding-top: 4.8rem !important;
padding-bottom: 4.8rem !important;
@media (min-width: 768px)
.md-p8
padding: 5.6rem !important;
@media (min-width: 768px)
.md-pt8
padding-top: 5.6rem !important;
@media (min-width: 768px)
.md-pr8
padding-right: 5.6rem !important;
@media (min-width: 768px)
.md-pb8
padding-bottom: 5.6rem !important;
@media (min-width: 768px)
.md-pl8
padding-left: 5.6rem !important;
@media (min-width: 768px)
.md-px8
padding-left: 5.6rem !important;
padding-right: 5.6rem !important;
@media (min-width: 768px)
.md-py8
padding-top: 5.6rem !important;
padding-bottom: 5.6rem !important;
@media (min-width: 768px)
.md-p9
padding: 6.4rem !important;
@media (min-width: 768px)
.md-pt9
padding-top: 6.4rem !important;
@media (min-width: 768px)
.md-pr9
padding-right: 6.4rem !important;
@media (min-width: 768px)
.md-pb9
padding-bottom: 6.4rem !important;
@media (min-width: 768px)
.md-pl9
padding-left: 6.4rem !important;
@media (min-width: 768px)
.md-px9
padding-left: 6.4rem !important;
padding-right: 6.4rem !important;
@media (min-width: 768px)
.md-py9
padding-top: 6.4rem !important;
padding-bottom: 6.4rem !important;
@media (min-width: 768px)
.lg-p0
padding: 0 !important;
@media (min-width: 1024px)
.lg-pt0
padding-top: 0 !important;
@media (min-width: 1024px)
.lg-pr0
padding-right: 0 !important;
@media (min-width: 1024px)
.lg-pb0
padding-bottom: 0 !important;
@media (min-width: 1024px)
.lg-pl0
padding-left: 0 !important;
@media (min-width: 1024px)
.lg-px0
padding-left: 0 !important;
padding-right: 0 !important;
@media (min-width: 1024px)
.lg-py0
padding-top: 0 !important;
padding-bottom: 0 !important;
@media (min-width: 1024px)
.lg-p1
padding: .4rem !important;
@media (min-width: 1024px)
.lg-pt1
padding-top: .4rem !important;
@media (min-width: 1024px)
.lg-pr1
padding-right: .4rem !important;
@media (min-width: 1024px)
.lg-pb1
padding-bottom: .4rem !important;
@media (min-width: 1024px)
.lg-pl1
padding-left: .4rem !important;
@media (min-width: 1024px)
.lg-px1
padding-left: .4rem !important;
padding-right: .4rem !important;
@media (min-width: 1024px)
.lg-py1
padding-top: .4rem !important;
padding-bottom: .4rem !important;
@media (min-width: 1024px)
.lg-p2
padding: .8rem !important;
@media (min-width: 1024px)
.lg-pt2
padding-top: .8rem !important;
@media (min-width: 1024px)
.lg-pr2
padding-right: .8rem !important;
@media (min-width: 1024px)
.lg-pb2
padding-bottom: .8rem !important;
@media (min-width: 1024px)
.lg-pl2
padding-left: .8rem !important;
@media (min-width: 1024px)
.lg-px2
padding-left: .8rem !important;
padding-right: .8rem !important;
@media (min-width: 1024px)
.lg-py2
padding-top: .8rem !important;
padding-bottom: .8rem !important;
@media (min-width: 1024px)
.lg-p3
padding: 1.6rem !important;
@media (min-width: 1024px)
.lg-pt3
padding-top: 1.6rem !important;
@media (min-width: 1024px)
.lg-pr3
padding-right: 1.6rem !important;
@media (min-width: 1024px)
.lg-pb3
padding-bottom: 1.6rem !important;
@media (min-width: 1024px)
.lg-pl3
padding-left: 1.6rem !important;
@media (min-width: 1024px)
.lg-px3
padding-left: 1.6rem !important;
padding-right: 1.6rem !important;
@media (min-width: 1024px)
.lg-py3
padding-top: 1.6rem !important;
padding-bottom: 1.6rem !important;
@media (min-width: 1024px)
.lg-p4
padding: 2.4rem !important;
@media (min-width: 1024px)
.lg-pt4
padding-top: 2.4rem !important;
@media (min-width: 1024px)
.lg-pr4
padding-right: 2.4rem !important;
@media (min-width: 1024px)
.lg-pb4
padding-bottom: 2.4rem !important;
@media (min-width: 1024px)
.lg-pl4
padding-left: 2.4rem !important;
@media (min-width: 1024px)
.lg-px4
padding-left: 2.4rem !important;
padding-right: 2.4rem !important;
@media (min-width: 1024px)
.lg-py4
padding-top: 2.4rem !important;
padding-bottom: 2.4rem !important;
@media (min-width: 1024px)
.lg-p5
padding: 3.2rem !important;
@media (min-width: 1024px)
.lg-pt5
padding-top: 3.2rem !important;
@media (min-width: 1024px)
.lg-pr5
padding-right: 3.2rem !important;
@media (min-width: 1024px)
.lg-pb5
padding-bottom: 3.2rem !important;
@media (min-width: 1024px)
.lg-pl5
padding-left: 3.2rem !important;
@media (min-width: 1024px)
.lg-px5
padding-left: 3.2rem !important;
padding-right: 3.2rem !important;
@media (min-width: 1024px)
.lg-py5
padding-top: 3.2rem !important;
padding-bottom: 3.2rem !important;
@media (min-width: 1024px)
.lg-p6
padding: 4rem !important;
@media (min-width: 1024px)
.lg-pt6
padding-top: 4rem !important;
@media (min-width: 1024px)
.lg-pr6
padding-right: 4rem !important;
@media (min-width: 1024px)
.lg-pb6
padding-bottom: 4rem !important;
@media (min-width: 1024px)
.lg-pl6
padding-left: 4rem !important;
@media (min-width: 1024px)
.lg-px6
padding-left: 4rem !important;
padding-right: 4rem !important;
@media (min-width: 1024px)
.lg-py6
padding-top: 4rem !important;
padding-bottom: 4rem !important;
@media (min-width: 1024px)
.lg-p7
padding: 4.8rem !important;
@media (min-width: 1024px)
.lg-pt7
padding-top: 4.8rem !important;
@media (min-width: 1024px)
.lg-pr7
padding-right: 4.8rem !important;
@media (min-width: 1024px)
.lg-pb7
padding-bottom: 4.8rem !important;
@media (min-width: 1024px)
.lg-pl7
padding-left: 4.8rem !important;
@media (min-width: 1024px)
.lg-px7
padding-left: 4.8rem !important;
padding-right: 4.8rem !important;
@media (min-width: 1024px)
.lg-py7
padding-top: 4.8rem !important;
padding-bottom: 4.8rem !important;
@media (min-width: 1024px)
.lg-p8
padding: 5.6rem !important;
@media (min-width: 1024px)
.lg-pt8
padding-top: 5.6rem !important;
@media (min-width: 1024px)
.lg-pr8
padding-right: 5.6rem !important;
@media (min-width: 1024px)
.lg-pb8
padding-bottom: 5.6rem !important;
@media (min-width: 1024px)
.lg-pl8
padding-left: 5.6rem !important;
@media (min-width: 1024px)
.lg-px8
padding-left: 5.6rem !important;
padding-right: 5.6rem !important;
@media (min-width: 1024px)
.lg-py8
padding-top: 5.6rem !important;
padding-bottom: 5.6rem !important;
@media (min-width: 1024px)
.lg-p9
padding: 6.4rem !important;
@media (min-width: 1024px)
.lg-pt9
padding-top: 6.4rem !important;
@media (min-width: 1024px)
.lg-pr9
padding-right: 6.4rem !important;
@media (min-width: 1024px)
.lg-pb9
padding-bottom: 6.4rem !important;
@media (min-width: 1024px)
.lg-pl9
padding-left: 6.4rem !important;
@media (min-width: 1024px)
.lg-px9
padding-left: 6.4rem !important;
padding-right: 6.4rem !important;
@media (min-width: 1024px)
.lg-py9
padding-top: 6.4rem !important;
padding-bottom: 6.4rem !important;
@media (min-width: 1024px)
.xl-p0
padding: 0 !important;
@media (min-width: 1280px)
.xl-pt0
padding-top: 0 !important;
@media (min-width: 1280px)
.xl-pr0
padding-right: 0 !important;
@media (min-width: 1280px)
.xl-pb0
padding-bottom: 0 !important;
@media (min-width: 1280px)
.xl-pl0
padding-left: 0 !important;
@media (min-width: 1280px)
.xl-px0
padding-left: 0 !important;
padding-right: 0 !important;
@media (min-width: 1280px)
.xl-py0
padding-top: 0 !important;
padding-bottom: 0 !important;
@media (min-width: 1280px)
.xl-p1
padding: .4rem !important;
@media (min-width: 1280px)
.xl-pt1
padding-top: .4rem !important;
@media (min-width: 1280px)
.xl-pr1
padding-right: .4rem !important;
@media (min-width: 1280px)
.xl-pb1
padding-bottom: .4rem !important;
@media (min-width: 1280px)
.xl-pl1
padding-left: .4rem !important;
@media (min-width: 1280px)
.xl-px1
padding-left: .4rem !important;
padding-right: .4rem !important;
@media (min-width: 1280px)
.xl-py1
padding-top: .4rem !important;
padding-bottom: .4rem !important;
@media (min-width: 1280px)
.xl-p2
padding: .8rem !important;
@media (min-width: 1280px)
.xl-pt2
padding-top: .8rem !important;
@media (min-width: 1280px)
.xl-pr2
padding-right: .8rem !important;
@media (min-width: 1280px)
.xl-pb2
padding-bottom: .8rem !important;
@media (min-width: 1280px)
.xl-pl2
padding-left: .8rem !important;
@media (min-width: 1280px)
.xl-px2
padding-left: .8rem !important;
padding-right: .8rem !important;
@media (min-width: 1280px)
.xl-py2
padding-top: .8rem !important;
padding-bottom: .8rem !important;
@media (min-width: 1280px)
.xl-p3
padding: 1.6rem !important;
@media (min-width: 1280px)
.xl-pt3
padding-top: 1.6rem !important;
@media (min-width: 1280px)
.xl-pr3
padding-right: 1.6rem !important;
@media (min-width: 1280px)
.xl-pb3
padding-bottom: 1.6rem !important;
@media (min-width: 1280px)
.xl-pl3
padding-left: 1.6rem !important;
@media (min-width: 1280px)
.xl-px3
padding-left: 1.6rem !important;
padding-right: 1.6rem !important;
@media (min-width: 1280px)
.xl-py3
padding-top: 1.6rem !important;
padding-bottom: 1.6rem !important;
@media (min-width: 1280px)
.xl-p4
padding: 2.4rem !important;
@media (min-width: 1280px)
.xl-pt4
padding-top: 2.4rem !important;
@media (min-width: 1280px)
.xl-pr4
padding-right: 2.4rem !important;
@media (min-width: 1280px)
.xl-pb4
padding-bottom: 2.4rem !important;
@media (min-width: 1280px)
.xl-pl4
padding-left: 2.4rem !important;
@media (min-width: 1280px)
.xl-px4
padding-left: 2.4rem !important;
padding-right: 2.4rem !important;
@media (min-width: 1280px)
.xl-py4
padding-top: 2.4rem !important;
padding-bottom: 2.4rem !important;
@media (min-width: 1280px)
.xl-p5
padding: 3.2rem !important;
@media (min-width: 1280px)
.xl-pt5
padding-top: 3.2rem !important;
@media (min-width: 1280px)
.xl-pr5
padding-right: 3.2rem !important;
@media (min-width: 1280px)
.xl-pb5
padding-bottom: 3.2rem !important;
@media (min-width: 1280px)
.xl-pl5
padding-left: 3.2rem !important;
@media (min-width: 1280px)
.xl-px5
padding-left: 3.2rem !important;
padding-right: 3.2rem !important;
@media (min-width: 1280px)
.xl-py5
padding-top: 3.2rem !important;
padding-bottom: 3.2rem !important;
@media (min-width: 1280px)
.xl-p6
padding: 4rem !important;
@media (min-width: 1280px)
.xl-pt6
padding-top: 4rem !important;
@media (min-width: 1280px)
.xl-pr6
padding-right: 4rem !important;
@media (min-width: 1280px)
.xl-pb6
padding-bottom: 4rem !important;
@media (min-width: 1280px)
.xl-pl6
padding-left: 4rem !important;
@media (min-width: 1280px)
.xl-px6
padding-left: 4rem !important;
padding-right: 4rem !important;
@media (min-width: 1280px)
.xl-py6
padding-top: 4rem !important;
padding-bottom: 4rem !important;
@media (min-width: 1280px)
.xl-p7
padding: 4.8rem !important;
@media (min-width: 1280px)
.xl-pt7
padding-top: 4.8rem !important;
@media (min-width: 1280px)
.xl-pr7
padding-right: 4.8rem !important;
@media (min-width: 1280px)
.xl-pb7
padding-bottom: 4.8rem !important;
@media (min-width: 1280px)
.xl-pl7
padding-left: 4.8rem !important;
@media (min-width: 1280px)
.xl-px7
padding-left: 4.8rem !important;
padding-right: 4.8rem !important;
@media (min-width: 1280px)
.xl-py7
padding-top: 4.8rem !important;
padding-bottom: 4.8rem !important;
@media (min-width: 1280px)
.xl-p8
padding: 5.6rem !important;
@media (min-width: 1280px)
.xl-pt8
padding-top: 5.6rem !important;
@media (min-width: 1280px)
.xl-pr8
padding-right: 5.6rem !important;
@media (min-width: 1280px)
.xl-pb8
padding-bottom: 5.6rem !important;
@media (min-width: 1280px)
.xl-pl8
padding-left: 5.6rem !important;
@media (min-width: 1280px)
.xl-px8
padding-left: 5.6rem !important;
padding-right: 5.6rem !important;
@media (min-width: 1280px)
.xl-py8
padding-top: 5.6rem !important;
padding-bottom: 5.6rem !important;
@media (min-width: 1280px)
.xl-p9
padding: 6.4rem !important;
@media (min-width: 1280px)
.xl-pt9
padding-top: 6.4rem !important;
@media (min-width: 1280px)
.xl-pr9
padding-right: 6.4rem !important;
@media (min-width: 1280px)
.xl-pb9
padding-bottom: 6.4rem !important;
@media (min-width: 1280px)
.xl-pl9
padding-left: 6.4rem !important;
@media (min-width: 1280px)
.xl-px9
padding-left: 6.4rem !important;
padding-right: 6.4rem !important;
@media (min-width: 1280px)
.xl-py9
padding-top: 6.4rem !important;
padding-bottom: 6.4rem !important;
@media (min-width: 1280px)
.xxl-p0
padding: 0 !important;
@media (min-width: 1600px)
.xxl-pt0
padding-top: 0 !important;
@media (min-width: 1600px)
.xxl-pr0
padding-right: 0 !important;
@media (min-width: 1600px)
.xxl-pb0
padding-bottom: 0 !important;
@media (min-width: 1600px)
.xxl-pl0
padding-left: 0 !important;
@media (min-width: 1600px)
.xxl-px0
padding-left: 0 !important;
padding-right: 0 !important;
@media (min-width: 1600px)
.xxl-py0
padding-top: 0 !important;
padding-bottom: 0 !important;
@media (min-width: 1600px)
.xxl-p1
padding: .4rem !important;
@media (min-width: 1600px)
.xxl-pt1
padding-top: .4rem !important;
@media (min-width: 1600px)
.xxl-pr1
padding-right: .4rem !important;
@media (min-width: 1600px)
.xxl-pb1
padding-bottom: .4rem !important;
@media (min-width: 1600px)
.xxl-pl1
padding-left: .4rem !important;
@media (min-width: 1600px)
.xxl-px1
padding-left: .4rem !important;
padding-right: .4rem !important;
@media (min-width: 1600px)
.xxl-py1
padding-top: .4rem !important;
padding-bottom: .4rem !important;
@media (min-width: 1600px)
.xxl-p2
padding: .8rem !important;
@media (min-width: 1600px)
.xxl-pt2
padding-top: .8rem !important;
@media (min-width: 1600px)
.xxl-pr2
padding-right: .8rem !important;
@media (min-width: 1600px)
.xxl-pb2
padding-bottom: .8rem !important;
@media (min-width: 1600px)
.xxl-pl2
padding-left: .8rem !important;
@media (min-width: 1600px)
.xxl-px2
padding-left: .8rem !important;
padding-right: .8rem !important;
@media (min-width: 1600px)
.xxl-py2
padding-top: .8rem !important;
padding-bottom: .8rem !important;
@media (min-width: 1600px)
.xxl-p3
padding: 1.6rem !important;
@media (min-width: 1600px)
.xxl-pt3
padding-top: 1.6rem !important;
@media (min-width: 1600px)
.xxl-pr3
padding-right: 1.6rem !important;
@media (min-width: 1600px)
.xxl-pb3
padding-bottom: 1.6rem !important;
@media (min-width: 1600px)
.xxl-pl3
padding-left: 1.6rem !important;
@media (min-width: 1600px)
.xxl-px3
padding-left: 1.6rem !important;
padding-right: 1.6rem !important;
@media (min-width: 1600px)
.xxl-py3
padding-top: 1.6rem !important;
padding-bottom: 1.6rem !important;
@media (min-width: 1600px)
.xxl-p4
padding: 2.4rem !important;
@media (min-width: 1600px)
.xxl-pt4
padding-top: 2.4rem !important;
@media (min-width: 1600px)
.xxl-pr4
padding-right: 2.4rem !important;
@media (min-width: 1600px)
.xxl-pb4
padding-bottom: 2.4rem !important;
@media (min-width: 1600px)
.xxl-pl4
padding-left: 2.4rem !important;
@media (min-width: 1600px)
.xxl-px4
padding-left: 2.4rem !important;
padding-right: 2.4rem !important;
@media (min-width: 1600px)
.xxl-py4
padding-top: 2.4rem !important;
padding-bottom: 2.4rem !important;
@media (min-width: 1600px)
.xxl-p5
padding: 3.2rem !important;
@media (min-width: 1600px)
.xxl-pt5
padding-top: 3.2rem !important;
@media (min-width: 1600px)
.xxl-pr5
padding-right: 3.2rem !important;
@media (min-width: 1600px)
.xxl-pb5
padding-bottom: 3.2rem !important;
@media (min-width: 1600px)
.xxl-pl5
padding-left: 3.2rem !important;
@media (min-width: 1600px)
.xxl-px5
padding-left: 3.2rem !important;
padding-right: 3.2rem !important;
@media (min-width: 1600px)
.xxl-py5
padding-top: 3.2rem !important;
padding-bottom: 3.2rem !important;
@media (min-width: 1600px)
.xxl-p6
padding: 4rem !important;
@media (min-width: 1600px)
.xxl-pt6
padding-top: 4rem !important;
@media (min-width: 1600px)
.xxl-pr6
padding-right: 4rem !important;
@media (min-width: 1600px)
.xxl-pb6
padding-bottom: 4rem !important;
@media (min-width: 1600px)
.xxl-pl6
padding-left: 4rem !important;
@media (min-width: 1600px)
.xxl-px6
padding-left: 4rem !important;
padding-right: 4rem !important;
@media (min-width: 1600px)
.xxl-py6
padding-top: 4rem !important;
padding-bottom: 4rem !important;
@media (min-width: 1600px)
.xxl-p7
padding: 4.8rem !important;
@media (min-width: 1600px)
.xxl-pt7
padding-top: 4.8rem !important;
@media (min-width: 1600px)
.xxl-pr7
padding-right: 4.8rem !important;
@media (min-width: 1600px)
.xxl-pb7
padding-bottom: 4.8rem !important;
@media (min-width: 1600px)
.xxl-pl7
padding-left: 4.8rem !important;
@media (min-width: 1600px)
.xxl-px7
padding-left: 4.8rem !important;
padding-right: 4.8rem !important;
@media (min-width: 1600px)
.xxl-py7
padding-top: 4.8rem !important;
padding-bottom: 4.8rem !important;
@media (min-width: 1600px)
.xxl-p8
padding: 5.6rem !important;
@media (min-width: 1600px)
.xxl-pt8
padding-top: 5.6rem !important;
@media (min-width: 1600px)
.xxl-pr8
padding-right: 5.6rem !important;
@media (min-width: 1600px)
.xxl-pb8
padding-bottom: 5.6rem !important;
@media (min-width: 1600px)
.xxl-pl8
padding-left: 5.6rem !important;
@media (min-width: 1600px)
.xxl-px8
padding-left: 5.6rem !important;
padding-right: 5.6rem !important;
@media (min-width: 1600px)
.xxl-py8
padding-top: 5.6rem !important;
padding-bottom: 5.6rem !important;
@media (min-width: 1600px)
.xxl-p9
padding: 6.4rem !important;
@media (min-width: 1600px)
.xxl-pt9
padding-top: 6.4rem !important;
@media (min-width: 1600px)
.xxl-pr9
padding-right: 6.4rem !important;
@media (min-width: 1600px)
.xxl-pb9
padding-bottom: 6.4rem !important;
@media (min-width: 1600px)
.xxl-pl9
padding-left: 6.4rem !important;
@media (min-width: 1600px)
.xxl-px9
padding-left: 6.4rem !important;
padding-right: 6.4rem !important;
@media (min-width: 1600px)
.xxl-py9
padding-top: 6.4rem !important;
padding-bottom: 6.4rem !important;
@media (min-width: 1600px)

position

.relative
position: relative !important;
.absolute
position: absolute !important;
.fixed
position: fixed !important;
.absoluteCenter
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.absoluteCenter-x
position: absolute;
left: 50%;
transform: translateX(-50%);
.absoluteCenter-y
position: absolute;
top: 50%;
transform: translateY(-50%);
.absoluteSpread
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

size

.size1of12
width: calc(100% * (1 / 12));
.size2of12
width: calc(100% * (2 / 12));
.size3of12
width: calc(100% * (3 / 12));
.size4of12
width: calc(100% * (4 / 12));
.size5of12
width: calc(100% * (5 / 12));
.size6of12
width: calc(100% * (6 / 12));
.size7of12
width: calc(100% * (7 / 12));
.size8of12
width: calc(100% * (8 / 12));
.size9of12
width: calc(100% * (9 / 12));
.size10of12
width: calc(100% * (10 / 12));
.size11of12
width: calc(100% * (11 / 12));
.size12of12
width: calc(100% * (12 / 12));
.size1of5
width: calc(100% * (1 / 5));
.size2of5
width: calc(100% * (2 / 5));
.size3of5
width: calc(100% * (3 / 5));
.size4of5
width: calc(100% * (4 / 5));
.size5of5
width: calc(100% * (5 / 5));
.size-auto
width: auto;
.height-100
height: 100% !important;
.sm-size1of12
width: calc(100% * (1 / 12));
@media (min-width: 480px)
.sm-size2of12
width: calc(100% * (2 / 12));
@media (min-width: 480px)
.sm-size3of12
width: calc(100% * (3 / 12));
@media (min-width: 480px)
.sm-size4of12
width: calc(100% * (4 / 12));
@media (min-width: 480px)
.sm-size5of12
width: calc(100% * (5 / 12));
@media (min-width: 480px)
.sm-size6of12
width: calc(100% * (6 / 12));
@media (min-width: 480px)
.sm-size7of12
width: calc(100% * (7 / 12));
@media (min-width: 480px)
.sm-size8of12
width: calc(100% * (8 / 12));
@media (min-width: 480px)
.sm-size9of12
width: calc(100% * (9 / 12));
@media (min-width: 480px)
.sm-size10of12
width: calc(100% * (10 / 12));
@media (min-width: 480px)
.sm-size11of12
width: calc(100% * (11 / 12));
@media (min-width: 480px)
.sm-size12of12
width: calc(100% * (12 / 12));
@media (min-width: 480px)
.sm-size1of5
width: calc(100% * (1 / 5));
@media (min-width: 480px)
.sm-size2of5
width: calc(100% * (2 / 5));
@media (min-width: 480px)
.sm-size3of5
width: calc(100% * (3 / 5));
@media (min-width: 480px)
.sm-size4of5
width: calc(100% * (4 / 5));
@media (min-width: 480px)
.sm-size5of5
width: calc(100% * (5 / 5));
@media (min-width: 480px)
.sm-size-auto
width: auto;
@media (min-width: 480px)
.md-size1of12
width: calc(100% * (1 / 12));
@media (min-width: 768px)
.md-size2of12
width: calc(100% * (2 / 12));
@media (min-width: 768px)
.md-size3of12
width: calc(100% * (3 / 12));
@media (min-width: 768px)
.md-size4of12
width: calc(100% * (4 / 12));
@media (min-width: 768px)
.md-size5of12
width: calc(100% * (5 / 12));
@media (min-width: 768px)
.md-size6of12
width: calc(100% * (6 / 12));
@media (min-width: 768px)
.md-size7of12
width: calc(100% * (7 / 12));
@media (min-width: 768px)
.md-size8of12
width: calc(100% * (8 / 12));
@media (min-width: 768px)
.md-size9of12
width: calc(100% * (9 / 12));
@media (min-width: 768px)
.md-size10of12
width: calc(100% * (10 / 12));
@media (min-width: 768px)
.md-size11of12
width: calc(100% * (11 / 12));
@media (min-width: 768px)
.md-size12of12
width: calc(100% * (12 / 12));
@media (min-width: 768px)
.md-size1of5
width: calc(100% * (1 / 5));
@media (min-width: 768px)
.md-size2of5
width: calc(100% * (2 / 5));
@media (min-width: 768px)
.md-size3of5
width: calc(100% * (3 / 5));
@media (min-width: 768px)
.md-size4of5
width: calc(100% * (4 / 5));
@media (min-width: 768px)
.md-size5of5
width: calc(100% * (5 / 5));
@media (min-width: 768px)
.md-size-auto
width: auto;
@media (min-width: 768px)
.lg-size1of12
width: calc(100% * (1 / 12));
@media (min-width: 1024px)
.lg-size2of12
width: calc(100% * (2 / 12));
@media (min-width: 1024px)
.lg-size3of12
width: calc(100% * (3 / 12));
@media (min-width: 1024px)
.lg-size4of12
width: calc(100% * (4 / 12));
@media (min-width: 1024px)
.lg-size5of12
width: calc(100% * (5 / 12));
@media (min-width: 1024px)
.lg-size6of12
width: calc(100% * (6 / 12));
@media (min-width: 1024px)
.lg-size7of12
width: calc(100% * (7 / 12));
@media (min-width: 1024px)
.lg-size8of12
width: calc(100% * (8 / 12));
@media (min-width: 1024px)
.lg-size9of12
width: calc(100% * (9 / 12));
@media (min-width: 1024px)
.lg-size10of12
width: calc(100% * (10 / 12));
@media (min-width: 1024px)
.lg-size11of12
width: calc(100% * (11 / 12));
@media (min-width: 1024px)
.lg-size12of12
width: calc(100% * (12 / 12));
@media (min-width: 1024px)
.lg-size1of5
width: calc(100% * (1 / 5));
@media (min-width: 1024px)
.lg-size2of5
width: calc(100% * (2 / 5));
@media (min-width: 1024px)
.lg-size3of5
width: calc(100% * (3 / 5));
@media (min-width: 1024px)
.lg-size4of5
width: calc(100% * (4 / 5));
@media (min-width: 1024px)
.lg-size5of5
width: calc(100% * (5 / 5));
@media (min-width: 1024px)
.lg-size-auto
width: auto;
@media (min-width: 1024px)
.xl-size1of12
width: calc(100% * (1 / 12));
@media (min-width: 1280px)
.xl-size2of12
width: calc(100% * (2 / 12));
@media (min-width: 1280px)
.xl-size3of12
width: calc(100% * (3 / 12));
@media (min-width: 1280px)
.xl-size4of12
width: calc(100% * (4 / 12));
@media (min-width: 1280px)
.xl-size5of12
width: calc(100% * (5 / 12));
@media (min-width: 1280px)
.xl-size6of12
width: calc(100% * (6 / 12));
@media (min-width: 1280px)
.xl-size7of12
width: calc(100% * (7 / 12));
@media (min-width: 1280px)
.xl-size8of12
width: calc(100% * (8 / 12));
@media (min-width: 1280px)
.xl-size9of12
width: calc(100% * (9 / 12));
@media (min-width: 1280px)
.xl-size10of12
width: calc(100% * (10 / 12));
@media (min-width: 1280px)
.xl-size11of12
width: calc(100% * (11 / 12));
@media (min-width: 1280px)
.xl-size12of12
width: calc(100% * (12 / 12));
@media (min-width: 1280px)
.xl-size1of5
width: calc(100% * (1 / 5));
@media (min-width: 1280px)
.xl-size2of5
width: calc(100% * (2 / 5));
@media (min-width: 1280px)
.xl-size3of5
width: calc(100% * (3 / 5));
@media (min-width: 1280px)
.xl-size4of5
width: calc(100% * (4 / 5));
@media (min-width: 1280px)
.xl-size5of5
width: calc(100% * (5 / 5));
@media (min-width: 1280px)
.xl-size-auto
width: auto;
@media (min-width: 1280px)
.xxl-size1of12
width: calc(100% * (1 / 12));
@media (min-width: 1600px)
.xxl-size2of12
width: calc(100% * (2 / 12));
@media (min-width: 1600px)
.xxl-size3of12
width: calc(100% * (3 / 12));
@media (min-width: 1600px)
.xxl-size4of12
width: calc(100% * (4 / 12));
@media (min-width: 1600px)
.xxl-size5of12
width: calc(100% * (5 / 12));
@media (min-width: 1600px)
.xxl-size6of12
width: calc(100% * (6 / 12));
@media (min-width: 1600px)
.xxl-size7of12
width: calc(100% * (7 / 12));
@media (min-width: 1600px)
.xxl-size8of12
width: calc(100% * (8 / 12));
@media (min-width: 1600px)
.xxl-size9of12
width: calc(100% * (9 / 12));
@media (min-width: 1600px)
.xxl-size10of12
width: calc(100% * (10 / 12));
@media (min-width: 1600px)
.xxl-size11of12
width: calc(100% * (11 / 12));
@media (min-width: 1600px)
.xxl-size12of12
width: calc(100% * (12 / 12));
@media (min-width: 1600px)
.xxl-size1of5
width: calc(100% * (1 / 5));
@media (min-width: 1600px)
.xxl-size2of5
width: calc(100% * (2 / 5));
@media (min-width: 1600px)
.xxl-size3of5
width: calc(100% * (3 / 5));
@media (min-width: 1600px)
.xxl-size4of5
width: calc(100% * (4 / 5));
@media (min-width: 1600px)
.xxl-size5of5
width: calc(100% * (5 / 5));
@media (min-width: 1600px)
.xxl-size-auto
width: auto;
@media (min-width: 1600px)

speech

.speak-digits
speak: digits;

text

.text-xxs
font-size: 1.3rem !important;
.text-xxs
font-size: 1.4rem !important;
@media (min-width: 768px)
.text-xs
font-size: 1.4rem !important;
.text-xs
font-size: 1.6rem !important;
@media (min-width: 768px)
.text-sm
font-size: 1.6rem !important;
.text-sm
font-size: 1.9rem !important;
@media (min-width: 768px)
.text-md
font-size: 1.9rem !important;
.text-md
font-size: 2.4rem !important;
@media (min-width: 768px)
.text-lg
font-size: 2.0rem !important;
line-height: 1.385;
.text-lg
font-size: 2.4rem !important;
@media (min-width: 375px)
.text-lg
font-size: 2.8rem !important;
@media (min-width: 768px)
.text-xl
font-size: 2.2rem !important;
line-height: 1.29;
.text-xl
font-size: 2.8rem !important;
@media (min-width: 375px)
.text-xl
font-size: 3.6rem !important;
@media (min-width: 768px)
.text-xxl
font-size: 2.4rem !important;
line-height: 1.2;
.text-xxl
font-size: 2.8rem !important;
@media (min-width: 375px)
.text-xxl
font-size: 3.6rem !important;
@media (min-width: 768px)
.text-xxl
font-size: 5.0rem !important;
letter-spacing: 2px;
@media (min-width: 1024px)
.text-bold
font-weight: 700 !important;
.text-semibold
font-weight: 600 !important;
.text-normal
font-weight: 400 !important;
.text-upper
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
.text-underline
text-decoration: underline !important;
.text-noUnderline
text-decoration: none !important;
.whiteSpace-normal
white-space: normal !important;
.whiteSpace-noWrap
white-space: nowrap !important;
.whiteSpace-truncate
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.letterSpacing-loose
letter-spacing: 0.1em !important;
.letterSpacing-looser
letter-spacing: 0.15em !important;
.lineHeight-normal
line-height: normal !important;

visibility

.hiddenVisually
position: absolute !important;
overflow: hidden !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
.invisible
visibility: hidden !important;
.visible
visibility: visible !important;