/* VAR */
:root{
    --jump-size: 10px; /* only for vertical spacing */
    --h-jump-size: 10px; /* only for horizontal spacing */
    --s-column-gap: 16px;
    --md-column-gap: 16px;
    --lg-column-gap: 40px;
    --xl-column-gap: 45px;

    --s-section-top-padding: 40px;
    --md-section-top-padding: 40px;
    --lg-section-top-padding: 40px;
    --xl-section-top-padding: 80px;
    --s-section-bottom-padding: 40px;
    --md-section-bottom-padding: 40px;
    --lg-section-bottom-padding: 40px;
    --xl-section-bottom-padding: 80px;

    --s-lateral-padding: 3.72vw;
    --md-lateral-padding: 4vw;
    --lg-lateral-padding: 6.5vw;
    --xl-lateral-padding: 7.81px;

    --sm-container: 350px;
    --md-container: 708px;
    --lg-container: 1120px;
    --xl-container: 1400px,
}

/*FONT-WEIGHT*/
.thin{font-weight: 100}
.extra-light{font-weight: 200}
.light{font-weight: 300}
.regular{font-weight: 400}
.medium{font-weight: 500}
.semibold{font-weight: 600}
.bold{font-weight: 700}
.extra-bold{font-weight: 800}

/*TEXT-ALIGN*/
.left-align{text-align: left}
.center-align{text-align: center}
.right-align{text-align: right}
.justify-align{text-align: justify}

/*TEXT STYLE*/
.underline{text-decoration: underline}
.italic{font-style: italic}
.normal{font-style: normal}

/*TEXT-TYPE*/
.uppercase{text-transform: uppercase}
.lowercase{text-transform: lowercase}

/*DISPLAY*/ 
.inline-block{display: inline-block}
.inline-flex{display: inline-flex}
.block{display: block}
.flex{display: flex}
.grid{display: grid}
.none{display: none}

/*FLEX - JUSTIFY CONTENT*/
.justify-normal{justify-content: normal}
.justify-start{justify-content: flex-start}
.justify-center{justify-content: center}
.justify-end{justify-content: flex-end}
.justify-between{justify-content: space-between}

/*FLEX - JUSTIFY ITEM*/
.justify-items-start{justify-items: start}
.justify-items-center{justify-items: center}
.justify-items-end{justify-items: end}
.justify-items-stretch{justify-items: stretch}

/*FLEX - ALIGN ITEM*/
.item-start{align-items: flex-start}
.item-center{align-items: center}
.item-end{align-items: flex-end}

/*ALIGN CONTENT*/
.align-content-center{align-content: center}
.align-content-start{align-content: start}
.align-content-end{align-content: end}

/*FLEX*/
.fd-row{flex-direction: row}
.fd-reverse{flex-direction: row-reverse}
.fd-col{flex-direction: column}

/*POSITIONS*/
.relative{position: relative}
.absolute{position: absolute}
.static{position: static}

.t0{top: 0}
.r0{right: 0}
.b0{bottom: 0}
.l0{left: 0}

/*OVERFLOW*/
.overflow-hidden{overflow: hidden}
.overflow-visible{overflow: visible}

/*WIDTH & HEIGHT */
.h-50{height: 50%}
.h-100{height: 100%}
.h-auto{height: auto}

.w-10{width: 10%}
.w-15{width: 15%}
.w-20{width: 20%}
.w-25{width: 25%}
.w-30{width: 30%}
.w-35{width: 35%}
.w-40{width: 40%}
.w-45{width: 45%}
.w-50{width: 50%}
.w-55{width: 55%}
.w-60{width: 60%}
.w-65{width: 65%}
.w-70{width: 70%}
.w-75{width: 75%}
.w-80{width: 80%}
.w-85{width: 85%}
.w-90{width: 90%}
.w-95{width: 95%}
.w-100{width: 100%}
.w-fit-conten{width: fit-content}
.w-auto{width: auto}

/*ROUNDED*/
.rounded-0{border-radius: 0}
.rounded-1{border-radius: 8px}
.rounded-2{border-radius: 15px}
.rounded-3{border-radius: 20px}
.rounded-4{border-radius: 25px}
.rounded-5{border-radius: 30px}

/*ROUNDED TOP ↑*/
.rounded-start-top-0{border-top-left-radius: 0}
.rounded-top-1, .rounded-start-1{border-top-left-radius: 8px}
.rounded-top-2, .rounded-start-2{border-top-left-radius: 15px}
.rounded-top-3, .rounded-start-3{border-top-left-radius: 20px}
.rounded-top-4, .rounded-start-4{border-top-left-radius: 25px}
.rounded-top-5, .rounded-start-5{border-top-left-radius: 30px}

/*ROUNDED RIGHT →*/
.rounded-end-top-0{border-top-right-radius: 0}
.rounded-end-1, .rounded-top-1{border-top-right-radius: 8px}
.rounded-end-2, .rounded-top-2{border-top-right-radius: 15px}
.rounded-end-3, .rounded-top-3{border-top-right-radius: 20px}
.rounded-end-4, .rounded-top-4{border-top-right-radius: 25px}
.rounded-end-5, .rounded-top-5{border-top-right-radius: 30px}

/*ROUNDED BOTTOM ↓*/
.rounded-end-bottom-0{border-bottom-right-radius: 0}
.rounded-bottom-1, .rounded-end-1{border-bottom-right-radius: 8px}
.rounded-bottom-2, .rounded-end-2{border-bottom-right-radius: 15px}
.rounded-bottom-3, .rounded-end-3{border-bottom-right-radius: 20px}
.rounded-bottom-4, .rounded-end-4{border-bottom-right-radius: 25px}
.rounded-bottom-5, .rounded-end-5{border-bottom-right-radius: 30px}

/*ROUNDED LEFT ←*/
.rounded-start-bottom-0{border-bottom-left-radius: 0}
.rounded-start-1, .rounded-bottom-1{border-bottom-left-radius: 8px}
.rounded-start-2, .rounded-bottom-2{border-bottom-left-radius: 15px}
.rounded-start-3, .rounded-bottom-3{border-bottom-left-radius: 20px}
.rounded-start-4, .rounded-bottom-4{border-bottom-left-radius: 25px}
.rounded-start-5, .rounded-bottom-5{border-bottom-left-radius: 30px}

/*ORDER*/
.order-0{order: 0}
.order-1{order: 1}
.order-2{order: 2}
.order-3{order: 3}
.order-4{order: 4}
.order-5{order: 5}
.order-6{order: 6}
.order-first{order: -1}
.order-last{order: 999}

/* PADDING - WITH CONVENTION */
/*PADDING TOP*/
.pt0,.py0,.p0{padding-top: 0}
.pt1,.py1,.p1{padding-top: var(--jump-size, 10px)}
.pt2,.py2,.p2{padding-top: calc(var(--jump-size, 10px) * 2)}
.pt3,.py3,.p3{padding-top: calc(var(--jump-size, 10px) * 3)}
.pt4,.py4,.p4{padding-top: calc(var(--jump-size, 10px) * 4)}
.pt5,.py5,.p5{padding-top: calc(var(--jump-size, 10px) * 5)}
.pt6,.py6,.p6{padding-top: calc(var(--jump-size, 10px) * 6)}
.pt7,.py7,.p7{padding-top: calc(var(--jump-size, 10px) * 7)}
.pt8,.py8,.p8{padding-top: calc(var(--jump-size, 10px) * 8)}
.pt9,.py9,.p9{padding-top: calc(var(--jump-size, 10px) * 9)}
.pt10,.py10,.p10{padding-top:calc(var(--jump-size, 10px) * 10)}

/*PADDING LEFT*/
.pl0, .px0, .p0{padding-left: 0}
.pl1, .px1, .p1{padding-left: var(--h-jump-size, 10px)}
.pl2, .px2, .p2{padding-left: calc(var(--h-jump-size, 10px) * 2)}
.pl3, .px3, .p3{padding-left: calc(var(--h-jump-size, 10px) * 3)}
.pl4, .px4, .p4{padding-left: calc(var(--h-jump-size, 10px) * 4)}
.pl5, .px5, .p5{padding-left: calc(var(--h-jump-size, 10px) * 5)}
.pl6, .px6, .p6{padding-left: calc(var(--h-jump-size, 10px) * 6)}
.pl7, .px7, .p7{padding-left: calc(var(--h-jump-size, 10px) * 7)}
.pl8, .px8, .p8{padding-left: calc(var(--h-jump-size, 10px) * 8)}
.pl9, .px9, .p9{padding-left: calc(var(--h-jump-size, 10px) * 9)}
.pl10, .px10, .p10{padding-left: calc(var(--h-jump-size, 10px) * 10)}

/*PADDING BOT*/
.pb0, .py0, .p0{padding-bottom:0}
.pb1, .py1, .p1{padding-bottom: var(--jump-size, 10px)}
.pb2, .py2, .p2{padding-bottom: calc(var(--jump-size, 10px) * 2)}
.pb3, .py3, .p3{padding-bottom: calc(var(--jump-size, 10px) * 3)}
.pb4, .py4, .p4{padding-bottom: calc(var(--jump-size, 10px) * 4)}
.pb5, .py5, .p5{padding-bottom: calc(var(--jump-size, 10px) * 5)}
.pb6, .py6, .p6{padding-bottom: calc(var(--jump-size, 10px) * 6)}
.pb7, .py7, .p7{padding-bottom: calc(var(--jump-size, 10px) * 7)}
.pb8, .py8, .p8{padding-bottom: calc(var(--jump-size, 10px) * 8)}
.pb9, .py9, .p9{padding-bottom: calc(var(--jump-size, 10px) * 9)}
.pb10, .py10, .p10{padding-bottom: calc(var(--jump-size, 10px) * 10)}

/*PADDING RIGHT*/
.pr0, .px0, .p0{padding-right: 0}
.pr1, .px1, .p1{padding-right: var(--h-jump-size, 10px)}
.pr2, .px2, .p2{padding-right: calc(var(--h-jump-size, 10px) * 2)}
.pr3, .px3, .p3{padding-right: calc(var(--h-jump-size, 10px) * 3)}
.pr4, .px4, .p4{padding-right: calc(var(--h-jump-size, 10px) * 4)}
.pr5, .px5, .p5{padding-right: calc(var(--h-jump-size, 10px) * 5)}
.pr6, .px6, .p6{padding-right: calc(var(--h-jump-size, 10px) * 6)}
.pr7, .px7, .p7{padding-right: calc(var(--h-jump-size, 10px) * 7)}
.pr8, .px8, .p8{padding-right: calc(var(--h-jump-size, 10px) * 8)}
.pr9, .px9, .p9{padding-right: calc(var(--h-jump-size, 10px) * 9)}
.pr10, .px10, .p10{padding-right: calc(var(--h-jump-size, 10px) * 10)}

/* MARGIN - WITH CONVENTION */

/*MARGING AUTO*/
.mt-auto, .my-auto, .m-auto{margin-top: auto}
.mr-auto, .mx-auto, .m-auto{margin-right: auto}
.mb-auto, .my-auto, .m-auto{margin-bottom: auto}
.ml-auto, .mx-auto, .m-auto{margin-left: auto}

/*MARGING TOP*/
.mt0, .my0, .m0{margin-top: 0}
.mt1, .my1, .m1{margin-top: var(--jump-size, 10px) }
.mt2, .my2, .m2{margin-top: calc(var(--jump-size, 10px) * 2)}
.mt3, .my3, .m3{margin-top: calc(var(--jump-size, 10px) * 3)}
.mt4, .my4, .m4{margin-top: calc(var(--jump-size, 10px) * 4)}
.mt5, .my5, .m5{margin-top: calc(var(--jump-size, 10px) * 5)}
.mt6, .my6, .m6{margin-top: calc(var(--jump-size, 10px) * 6)}
.mt7, .my7, .m7{margin-top: calc(var(--jump-size, 10px) * 7)}
.mt8, .my8, .m8{margin-top: calc(var(--jump-size, 10px) * 8)}
.mt9, .my9, .m9{margin-top: calc(var(--jump-size, 10px) * 9)}
.mt10, .my10, .m10{margin-top: calc(var(--jump-size, 10px) * 10)}

/*MARGING RIGHT*/
.mr0, .mx0, .m0{margin-right: 0}
.mr1, .mx1, .m1{margin-right: var(--h-jump-size, 10px) }
.mr2, .mx2, .m2{margin-right: calc(var(--h-jump-size, 10px) * 2)}
.mr3, .mx3, .m3{margin-right: calc(var(--h-jump-size, 10px) * 3)}
.mr4, .mx4, .m4{margin-right: calc(var(--h-jump-size, 10px) * 4)}
.mr5, .mx5, .m5{margin-right: calc(var(--h-jump-size, 10px) * 5)}
.mr6, .mx6, .m6{margin-right: calc(var(--h-jump-size, 10px) * 6)}
.mr7, .mx7, .m7{margin-right: calc(var(--h-jump-size, 10px) * 7)}
.mr8, .mx8, .m8{margin-right: calc(var(--h-jump-size, 10px) * 8)}
.mr9, .mx9, .m9{margin-right: calc(var(--h-jump-size, 10px) * 9)}
.mr10, .mx10, .m10{margin-right: calc(var(--h-jump-size, 10px) * 10)}

/*MARGING BOTTOM*/
.mb0, .my0, .m0{margin-bottom: 0}
.mb1, .my1, .m1{margin-bottom: var(--jump-size, 10px) }
.mb2, .my2, .m2{margin-bottom: calc(var(--jump-size, 10px) * 2)}
.mb3, .my3, .m3{margin-bottom: calc(var(--jump-size, 10px) * 3)}
.mb4, .my4, .m4{margin-bottom: calc(var(--jump-size, 10px) * 4)}
.mb5, .my5, .m5{margin-bottom: calc(var(--jump-size, 10px) * 5)}
.mb6, .my6, .m6{margin-bottom: calc(var(--jump-size, 10px) * 6)}
.mb7, .my7, .m7{margin-bottom: calc(var(--jump-size, 10px) * 7)}
.mb8, .my8, .m8{margin-bottom: calc(var(--jump-size, 10px) * 8)}
.mb9, .my9, .m9{margin-bottom: calc(var(--jump-size, 10px) * 9)}
.mb10, .my10, .m10{margin-bottom: calc(var(--jump-size, 10px) * 10)}

/*MARGING LEFT*/
.ml0, .mx0, .m0{margin-left: 0}
.ml1, .mx1, .m1{margin-left: var(--h-jump-size, 10px) }
.ml2, .mx2, .m2{margin-left: calc(var(--h-jump-size, 10px) * 2)}
.ml3, .mx3, .m3{margin-left: calc(var(--h-jump-size, 10px) * 3)}
.ml4, .mx4, .m4{margin-left: calc(var(--h-jump-size, 10px) * 4)}
.ml5, .mx5, .m5{margin-left: calc(var(--h-jump-size, 10px) * 5)}
.ml6, .mx6, .m6{margin-left: calc(var(--h-jump-size, 10px) * 6)}
.ml7, .mx7, .m7{margin-left: calc(var(--h-jump-size, 10px) * 7)}
.ml8, .mx8, .m8{margin-left: calc(var(--h-jump-size, 10px) * 8)}
.ml9, .mx9, .m9{margin-left: calc(var(--h-jump-size, 10px) * 9)}
.ml10, .mx10, .m10{margin-left: calc(var(--h-jump-size, 10px) * 10)}

/* Bootstrap like Grid convention*/
.row{display: flex; flex-wrap: wrap }
.row > * {width: 100% }

/* Columns */
.col{flex: 1 0 0%;}
.col-1{flex: 0 0 auto; width: 8.33333333%}
.col-2{flex: 0 0 auto; width: 16.66666667%}
.col-3{flex: 0 0 auto; width: 25%}
.col-4{flex: 0 0 auto; width: 33.33333333%}
.col-5{flex: 0 0 auto; width: 41.66666667%}
.col-6{flex: 0 0 auto; width: 50%}
.col-7{flex: 0 0 auto; width: 58.33333333%}
.col-8{flex: 0 0 auto; width: 66.66666667%}
.col-9{flex: 0 0 auto; width: 75%}
.col-10{flex: 0 0 auto; width: 83.33333333%}
.col-11{flex: 0 0 auto; width: 91.66666667%}
.col-12{flex: 0 0 auto; width: 100%}

/* CSS Grid */
section > .row.grid, #content .grid{
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--s-column-gap, 20px);
}

.grid > .col-6{flex: unset; width: unset; grid-column: auto/span 6}
.grid > .col-5{flex: unset; width: unset; grid-column: auto/span 5}
.grid > .col-4{flex: unset; width: unset; grid-column: auto/span 4}
.grid > .col-3{flex: unset; width: unset; grid-column: auto/span 3}
.grid > .col-2{flex: unset; width: unset; grid-column: auto/span 2}
.grid > .col-1{flex: unset; width: unset; grid-column: auto/span 1}
.grid > .col{flex: unset}

#content .container-fluid{
    max-width: 100%;
    width: 100%
}

/* Sections and Rows */
main > section, #content .section-padding, .section-padding{
    padding-top: var(--s-section-top-padding, 48px);
    padding-bottom: var(--s-section-bottom-padding, 24px)
}

section > .container, #content .container, footer .container{
    max-width: var(--sm-container, 320px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

section > .row:not([class*="container"]), #content .row-padding{
    padding-left: var(--s-lateral-padding, 5vw);
    padding-right: var(--s-lateral-padding, 5vw)
}

section > .row.fullwidth{padding-right: 0; padding-left: 0}

/* Tables */
table, th, td{
    line-height: 1em;
    border: none;
}

/*------ VIDEOS YOUTUBE ------*/
iframe.responsive-iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.iframe-container{
    width: auto;
    position: relative;
    padding: 0
}

.iframe-container > img{box-shadow: 0 8px 30px -7px #c9dff0; border-radius: 25px;}

.ar-16-9{aspect-ratio: 16/9}
.ar-9-16{aspect-ratio: 9/16}
.ar-4-3{aspect-ratio: 4/3}

.play-button{
    padding: 10%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.play-button:hover{
    cursor: pointer !important;
}

/* IMAGES */
img.responsive{
    width: 100%;
    height: auto;
}

/* Devices larger than 768px up to 1440 */
/* Prefix: md- */

@media screen and (min-width: 768px){
    /*FONT-WEIGHT*/
    .md-thin{font-weight: 100}
    .md-extra-light{font-weight: 200}
    .md-light{font-weight: 300}
    .md-regular{font-weight: 400}
    .md-medium{font-weight: 500}
    .md-semibold{font-weight: 600}
    .md-bold{font-weight: 700}
    .md-extra-bold{font-weight: 800}

    /*TEXT-ALIGN*/
    .md-left-align{text-align: left}
    .md-center-align{text-align: center}
    .md-right-align{text-align: right}
    .md-justify-align{text-align: justify}

    /*TEXT STYLE*/
    .md-underline{text-decoration: underline}
    .md-italic{font-style: italic}
    .md-normal{font-style: normal}

    /*TEXT-TYPE*/
    .md-uppercase{text-transform: uppercase}
    .md-lowercase{text-transform: lowercase}

    /*DISPLAY*/ 
    .md-inline-block{display: inline-block}
    .md-inline-flex{display: inline-flex}
    .md-block{display: block}
    .md-flex{display: flex}
    .md-grid{display: grid}
    .md-none{display: none}

    /*FLEX - JUSTIFY CONTENT*/
    .md-justify-normal{justify-content: normal}
    .md-justify-start{justify-content: flex-start}
    .md-justify-center{justify-content: center}
    .md-justify-end{justify-content: flex-end}
    .md-justify-between{justify-content: space-between}

    /*FLEX - JUSTIFY ITEM*/
    .md-justify-items-start{justify-items: start}
    .md-justify-items-center{justify-items: center}
    .md-justify-items-end{justify-items: end}
    .md-justify-items-stretch{justify-items: stretch}

    /*FLEX - ALIGN ITEM*/
    .md-item-start{align-items: flex-start}
    .md-item-center{align-items: center}
    .md-item-end{align-items: flex-end}

    /*ALIGN CONTENT*/
    .md-align-content-center{align-content: center }
    .md-align-content-start{align-content: start;}
    .md-align-content-end{align-content: end;}

    /*FLEX*/
    .md-fd-row{flex-direction: row}
    .md-fd-col{flex-direction: column}
    .md-fd-reverse{flex-direction: row-reverse}

    /* POSITIONS*/
    .md-absolute{position: absolute}
    .md-relative{position: relative}
    .md-static{position: static}

    .md-t0{top: 0}
    .md-r0{right: 0}
    .md-b0{bottom: 0}
    .md-l0{left: 0}

    /*OVERFLOW*/
    .md-overflow-hidden{overflow: hidden}
    .md-overflow-visible{overflow: visible}

    /*WIDTH & HEIGHT */
	.md-h-50{height: 50%}
    .md-h-100{height: 100%}
    .md-h-auto{height: auto}

    .md-w-10{width: 10%}
    .md-w-15{width: 15%}
    .md-w-20{width: 20%}
    .md-w-25{width: 25%}
    .md-w-30{width: 30%}
    .md-w-35{width: 35%}
    .md-w-40{width: 40%}
    .md-w-45{width: 45%}
    .md-w-50{width: 50%}
    .md-w-55{width: 55%}
    .md-w-60{width: 60%}
    .md-w-65{width: 65%}
    .md-w-70{width: 70%}
    .md-w-75{width: 75%}
    .md-w-80{width: 80%}
    .md-w-85{width: 85%}
    .md-w-90{width: 90%}
    .md-w-95{width: 95%}
    .md-w-100{width: 100%}
    .md-w-fit-content{width: fit-content}
    .md-w-auto{width: auto}

    /*ROUNDED*/
    .md-rounded-0{border-radius: 0}
    .md-rounded-1{border-radius: 10px}
    .md-rounded-2{border-radius: 15px}
    .md-rounded-3{border-radius: 20px}
    .md-rounded-4{border-radius: 25px}
    .md-rounded-5{border-radius: 30px}

    /*ROUNDED TOP ↑*/
    .md-rounded-start-top-0{border-top-left-radius: 0}
    .md-rounded-top-1, .md-rounded-start-1{border-top-left-radius: 8px}
    .md-rounded-top-2, .md-rounded-start-2{border-top-left-radius: 15px}
    .md-rounded-top-3, .md-rounded-start-3{border-top-left-radius: 20px}
    .md-rounded-top-4, .md-rounded-start-4{border-top-left-radius: 25px}
    .md-rounded-top-5, .md-rounded-start-5{border-top-left-radius: 30px}

    /*ROUNDED RIGHT →*/
    .md-rounded-end-top-0{border-top-right-radius: 0}
    .md-rounded-end-1, .md-rounded-top-1{border-top-right-radius: 8px}
    .md-rounded-end-2, .md-rounded-top-2{border-top-right-radius: 15px}
    .md-rounded-end-3, .md-rounded-top-3{border-top-right-radius: 20px}
    .md-rounded-end-4, .md-rounded-top-4{border-top-right-radius: 25px}
    .md-rounded-end-5, .md-rounded-top-5{border-top-right-radius: 30px}
    
    /*ROUNDED BOTTOM ↓*/
    .md-rounded-end-bottom-0{border-bottom-right-radius: 0}
    .md-rounded-bottom-1, .md-rounded-end-1{border-bottom-right-radius: 8px}
    .md-rounded-bottom-2, .md-rounded-end-2{border-bottom-right-radius: 15px}
    .md-rounded-bottom-3, .md-rounded-end-3{border-bottom-right-radius: 20px}
    .md-rounded-bottom-4, .md-rounded-end-4{border-bottom-right-radius: 25px}
    .md-rounded-bottom-5, .md-rounded-end-5{border-bottom-right-radius: 30px}

    /*ROUNDED LEFT ←*/
    .md-rounded-start-bottom-0{border-bottom-left-radius: 0}
    .md-rounded-start-1, .md-rounded-bottom-1{border-bottom-left-radius: 8px}
    .md-rounded-start-2, .md-rounded-bottom-2{border-bottom-left-radius: 15px}
    .md-rounded-start-3, .md-rounded-bottom-3{border-bottom-left-radius: 20px}
    .md-rounded-start-4, .md-rounded-bottom-4{border-bottom-left-radius: 25px}
    .md-rounded-start-5, .md-rounded-bottom-5{border-bottom-left-radius: 30px}

    /*ORDER*/
    .md-order-0{order: 0}
    .md-order-1{order: 1}
    .md-order-2{order: 2}
    .md-order-3{order: 3}
    .md-order-4{order: 4}
    .md-order-5{order: 5}
    .md-order-6{order: 6}
    .md-order-first{order: -1}
    .md-order-last{order: 999}

    /* MD MARGIN - WITH CONVENTION */

    /*MARGING AUTO*/
    .md-mt-auto, .md-my-auto, .md-m-auto{margin-top: auto}
    .md-mr-auto, .md-mx-auto, .md-m-auto{margin-right: auto}
    .md-mb-auto, .md-my-auto, .md-m-auto{margin-bottom: auto}
    .md-ml-auto, .md-mx-auto, .md-m-auto{margin-left: auto}

    /*MARGING TOP*/
    .md-mt0, .md-my0, .md-m0{margin-top: 0}
    .md-mt1, .md-my1, .md-m1{margin-top: var(--jump-size, 10px) }
    .md-mt2, .md-my2, .md-m2{margin-top: calc(var(--jump-size, 10px) * 2)}
    .md-mt3, .md-my3, .md-m3{margin-top: calc(var(--jump-size, 10px) * 3)}
    .md-mt4, .md-my4, .md-m4{margin-top: calc(var(--jump-size, 10px) * 4)}
    .md-mt5, .md-my5, .md-m5{margin-top: calc(var(--jump-size, 10px) * 5)}
    .md-mt6, .md-my6, .md-m6{margin-top: calc(var(--jump-size, 10px) * 6)}
    .md-mt7, .md-my7, .md-m7{margin-top: calc(var(--jump-size, 10px) * 7)}
    .md-mt8, .md-my8, .md-m8{margin-top: calc(var(--jump-size, 10px) * 8)}
    .md-mt9, .md-my9, .md-m9{margin-top: calc(var(--jump-size, 10px) * 9)}
    .md-mt10, .md-my10, .md-m10{margin-top: calc(var(--jump-size, 10px) * 10)}

    /*MARGING RIGHT*/
    .md-mr0, .md-mx0, .md-m0{margin-right: 0}
    .md-mr1, .md-mx1, .md-m1{margin-right: var(--h-jump-size, 10px) }
    .md-mr2, .md-mx2, .md-m2{margin-right: calc(var(--h-jump-size, 10px) * 2)}
    .md-mr3, .md-mx3, .md-m3{margin-right: calc(var(--h-jump-size, 10px) * 3)}
    .md-mr4, .md-mx4, .md-m4{margin-right: calc(var(--h-jump-size, 10px) * 4)}
    .md-mr5, .md-mx5, .md-m5{margin-right: calc(var(--h-jump-size, 10px) * 5)}
    .md-mr6, .md-mx6, .md-m6{margin-right: calc(var(--h-jump-size, 10px) * 6)}
    .md-mr7, .md-mx7, .md-m7{margin-right: calc(var(--h-jump-size, 10px) * 7)}
    .md-mr8, .md-mx8, .md-m8{margin-right: calc(var(--h-jump-size, 10px) * 8)}
    .md-mr9, .md-mx9, .md-m9{margin-right: calc(var(--h-jump-size, 10px) * 9)}
    .md-mr10, .md-mx10, .md-m10{margin-right: calc(var(--h-jump-size, 10px) * 10)}

    /*MARGING BOTTOM*/
    .md-mb0, .md-my0, .md-m0{margin-bottom: 0}
    .md-mb1, .md-my1, .md-m1{margin-bottom: var(--jump-size, 10px) }
    .md-mb2, .md-my2, .md-m2{margin-bottom: calc(var(--jump-size, 10px) * 2)}
    .md-mb3, .md-my3, .md-m3{margin-bottom: calc(var(--jump-size, 10px) * 3)}
    .md-mb4, .md-my4, .md-m4{margin-bottom: calc(var(--jump-size, 10px) * 4)}
    .md-mb5, .md-my5, .md-m5{margin-bottom: calc(var(--jump-size, 10px) * 5)}
    .md-mb6, .md-my6, .md-m6{margin-bottom: calc(var(--jump-size, 10px) * 6)}
    .md-mb7, .md-my7, .md-m7{margin-bottom: calc(var(--jump-size, 10px) * 7)}
    .md-mb8, .md-my8, .md-m8{margin-bottom: calc(var(--jump-size, 10px) * 8)}
    .md-mb9, .md-my9, .md-m9{margin-bottom: calc(var(--jump-size, 10px) * 9)}
    .md-mb10, .md-my10, .md-m10{margin-bottom: calc(var(--jump-size, 10px) * 10)}

    /*MARGING LEFT*/
    .md-ml0, .md-mx0, .md-m0{margin-left: 0}
    .md-ml1, .md-mx1, .md-m1{margin-left: var(--h-jump-size, 10px) }
    .md-ml2, .md-mx2, .md-m2{margin-left: calc(var(--h-jump-size, 10px) * 2)}
    .md-ml3, .md-mx3, .md-m3{margin-left: calc(var(--h-jump-size, 10px) * 3)}
    .md-ml4, .md-mx4, .md-m4{margin-left: calc(var(--h-jump-size, 10px) * 4)}
    .md-ml5, .md-mx5, .md-m5{margin-left: calc(var(--h-jump-size, 10px) * 5)}
    .md-ml6, .md-mx6, .md-m6{margin-left: calc(var(--h-jump-size, 10px) * 6)}
    .md-ml7, .md-mx7, .md-m7{margin-left: calc(var(--h-jump-size, 10px) * 7)}
    .md-ml8, .md-mx8, .md-m8{margin-left: calc(var(--h-jump-size, 10px) * 8)}
    .md-ml9, .md-mx9, .md-m9{margin-left: calc(var(--h-jump-size, 10px) * 9)}
    .md-ml10, .md-mx10, .md-m10{margin-left: calc(var(--h-jump-size, 10px) * 10)}

    /*MD PADDING - WITH CONVENTION*/

    /*PADDING TOP*/
    .md-pt0, .md-py0, .md-p0{padding-top: 0}
    .md-pt1, .md-py1, .md-p1{padding-top: var(--jump-size, 10px) }
    .md-pt2, .md-py2, .md-p2{padding-top: calc(var(--jump-size, 10px) * 2)}
    .md-pt3, .md-py3, .md-p3{padding-top: calc(var(--jump-size, 10px) * 3)}
    .md-pt4, .md-py4, .md-p4{padding-top: calc(var(--jump-size, 10px) * 4)}
    .md-pt5, .md-py5, .md-p5{padding-top: calc(var(--jump-size, 10px) * 5)}
    .md-pt6, .md-py6, .md-p6{padding-top: calc(var(--jump-size, 10px) * 6)}
    .md-pt7, .md-py7, .md-p7{padding-top: calc(var(--jump-size, 10px) * 7)}
    .md-pt8, .md-py8, .md-p8{padding-top: calc(var(--jump-size, 10px) * 8)}
    .md-pt9, .md-py9, .md-p9{padding-top: calc(var(--jump-size, 10px) * 9)}
    .md-pt10, .md-py10, .md-p10{padding-top:calc(var(--jump-size, 10px) * 10)}

    /*PADDING LEFT*/
    .md-pl0, .md-px0, .md-p0{padding-left: 0}
    .md-pl1, .md-px1, .md-p1{padding-left: var(--h-jump-size, 10px)}
    .md-pl2, .md-px2, .md-p2{padding-left: calc(var(--h-jump-size, 10px) * 2)} 
    .md-pl3, .md-px3, .md-p3{padding-left: calc(var(--h-jump-size, 10px) * 3)}
    .md-pl4, .md-px4, .md-p4{padding-left: calc(var(--h-jump-size, 10px) * 4)}
    .md-pl5, .md-px5, .md-p5{padding-left: calc(var(--h-jump-size, 10px) * 5)}
    .md-pl6, .md-px6, .md-p6{padding-left: calc(var(--h-jump-size, 10px) * 6)}
    .md-pl7, .md-px7, .md-p7{padding-left: calc(var(--h-jump-size, 10px) * 7)}
    .md-pl8, .md-px8, .md-p8{padding-left: calc(var(--h-jump-size, 10px) * 8)}
    .md-pl9, .md-px9, .md-p9{padding-left: calc(var(--h-jump-size, 10px) * 9)}
    .md-pl10, .md-px10, .md-p10{padding-left: calc(var(--h-jump-size, 10px) * 10)}

    /*PADDING BOT*/
    .md-pb0, .md-py0, .md-p0{padding-bottom:0 }
    .md-pb1, .md-py1, .md-p1{padding-bottom: var(--jump-size, 10px)}
    .md-pb2, .md-py2, .md-p2{padding-bottom: calc(var(--jump-size, 10px) * 2)}
    .md-pb3, .md-py3, .md-p3{padding-bottom: calc(var(--jump-size, 10px) * 3)}
    .md-pb4, .md-py4, .md-p4{padding-bottom: calc(var(--jump-size, 10px) * 4)}
    .md-pb5, .md-py5, .md-p5{padding-bottom: calc(var(--jump-size, 10px) * 5)}
    .md-pb6, .md-py6, .md-p6{padding-bottom: calc(var(--jump-size, 10px) * 6)}
    .md-pb7, .md-py7, .md-p7{padding-bottom: calc(var(--jump-size, 10px) * 7)}
    .md-pb8, .md-py8, .md-p8{padding-bottom: calc(var(--jump-size, 10px) * 8)}
    .md-pb9, .md-py9, .md-p9{padding-bottom: calc(var(--jump-size, 10px) * 9)}
    .md-pb10, .md-py10, .md-p10{padding-bottom: calc(var(--jump-size, 10px) * 10)}

    /*PADDING RIGHT*/
    .md-pr0, .md-px0, .md-p0{padding-right: 0}
    .md-pr1, .md-px1, .md-p1{padding-right: var(--h-jump-size, 10px)}
    .md-pr2, .md-px2, .md-p2{padding-right: calc(var(--h-jump-size, 10px) * 2)}
    .md-pr3, .md-px3, .md-p3{padding-right: calc(var(--h-jump-size, 10px) * 3)}
    .md-pr4, .md-px4, .md-p4{padding-right: calc(var(--h-jump-size, 10px) * 4)}
    .md-pr5, .md-px5, .md-p5{padding-right: calc(var(--h-jump-size, 10px) * 5)}
    .md-pr6, .md-px6, .md-p6{padding-right: calc(var(--h-jump-size, 10px) * 6)}
    .md-pr7, .md-px7, .md-p7{padding-right: calc(var(--h-jump-size, 10px) * 7)}
    .md-pr8, .md-px8, .md-p8{padding-right: calc(var(--h-jump-size, 10px) * 8)}
    .md-pr9, .md-px9, .md-p9{padding-right: calc(var(--h-jump-size, 10px) * 9)}
    .md-pr10, .md-px10, .md-p10{padding-right: calc(var(--h-jump-size, 10px) * 10)}

    /* Bootstrap like Grid convention*/
    .md-col{flex: 1 0 0%;}
    .md-col-1{flex: 0 0 auto; width: 8.33333333%}
    .md-col-2{flex: 0 0 auto; width: 16.66666667%}
    .md-col-3{flex: 0 0 auto; width: 25%}
    .md-col-4{flex: 0 0 auto; width: 33.33333333%}
    .md-col-5{flex: 0 0 auto; width: 41.66666667%}
    .md-col-6{flex: 0 0 auto; width: 50%}
    .md-col-7{flex: 0 0 auto; width: 58.33333333%}
    .md-col-8{flex: 0 0 auto; width: 66.66666667%}
    .md-col-9{flex: 0 0 auto; width: 75%}
    .md-col-10{flex: 0 0 auto; width: 83.33333333%}
    .md-col-11{flex: 0 0 auto; width: 91.66666667%}
    .md-col-12{flex: 0 0 auto; width: 100%}

    /* CSS GRID */
    section > .md-grid, footer .md-grid, #content .md-grid{
        display: grid;
        grid-template-rows: repeat(1, 1fr);
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--md-column-gap, 20px);
    }

    .grid > .md-col-12, .md-grid > .md-col-12, .md-grid > .col-12{flex: unset; width: unset; grid-column: auto/span 12}
    .grid > .md-col-11, .md-grid > .md-col-11, .md-grid > .col-11{flex: unset; width: unset; grid-column: auto/span 11}
    .grid > .md-col-10, .md-grid > .md-col-10, .md-grid > .col-10{flex: unset; width: unset; grid-column: auto/span 10}
    .grid > .md-col-9, .md-grid > .md-col-9, .md-grid > .col-9{flex: unset; width: unset;grid-column: auto/span 9}
    .grid > .md-col-8, .md-grid > .md-col-8, .md-grid > .col-8{flex: unset; width: unset; grid-column: auto/span 8}
    .grid > .md-col-7, .md-grid > .md-col-7, .md-grid > .col-7{flex: unset; width: unset; grid-column: auto/span 7}
    .grid > .md-col-6, .md-grid > .md-col-6, .md-grid > .col-6{flex: unset; width: unset; grid-column: auto/span 6}
    .grid > .md-col-5, .md-grid > .md-col-5, .md-grid > .col-5{flex: unset; width: unset; grid-column: auto/span 5}
    .grid > .md-col-4, .md-grid > .md-col-4, .md-grid > .col-4{flex: unset; width: unset; grid-column: auto/span 4}
    .grid > .md-col-3, .md-grid > .md-col-3, .md-grid > .col-3{flex: unset; width: unset; grid-column: auto/span 3}
    .grid > .md-col-2, .md-grid > .md-col-2, .md-grid > .col-2{flex: unset; width: unset; grid-column: auto/span 2}
    .grid > .md-col-1, .md-grid > .md-col-1, .md-grid > .col-1{flex: unset; width: unset; grid-column: auto/span 1}
    .grid > .md-col, .md-grid > .md-col, .md-grid > .col{flex: unset}

    div[class*="grid"].md-grid-reverse-2 > div[class*="col"]:first-child{order: 2;}
    div[class*="grid"].md-grid-reverse-3 > div[class*="col"]:first-child{order: 3;}
    div[class*="grid"].div[class*="md-grid-reverse"] > div[class*="col"]:last-child{order: 1;}

    /* Sections and Rows */
    main > section, #content .section-padding, #content .md-section-padding, .section-padding{
        padding-top: var(--md-section-top-padding, 80px);
        padding-bottom: var(--md-section-bottom-padding, 80px)
    }

    section > .container, #content .container, footer .container,
    section > .md-container, #content .md-container{
        max-width: var(--md-container, 720px);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #content .md-container-fluid{
        max-width: 100%;
        width: 100%
    }

    section > .row:not([class*="container"]), .row-padding, 
    #content .md-row-padding, .row .lateral-padding, #content .md-right-row-padding{
        padding-right: var(--md-lateral-padding, 30px);
    }

    section > .row:not([class*="container"]), .row-padding, 
    #content .md-row-padding, .row .lateral-padding, #content .md-left-row-padding{
        padding-left: var(--md-lateral-padding, 30px); 
    }

    section > .row.md-fullwidth{padding-left:0; padding-right: 0}

    /* General */
    .row.md-row-reverse > div:nth-child(odd){padding-right: 0}
    .row.md-row-reverse > div:nth-child(even){padding-left: 0}
}

/* Devices largen than 1024 */
/* Prefix: lg- */

@media screen and (min-width: 1440px){
    /*FONT-WEIGHT*/
    .lg-thin{font-weight: 100}
    .lg-extra-light{font-weight: 200}
    .lg-light{font-weight: 300}
    .lg-regular{font-weight: 400}
    .lg-medium{font-weight: 500}
    .lg-semibold{font-weight: 600}
    .lg-bold{font-weight: 700}
    .lg-extra-bold{font-weight: 800}

    /*TEXT-ALIGN*/
    .lg-left-align{text-align: left}
    .lg-center-align{text-align: center}
    .lg-right-align{text-align: right}
    .lg-justify-align{text-align: justify}

    /*TEXT STYLE*/
    .lg-underline{text-decoration: underline}
    .lg-italic{font-style: italic}
    .lg-normal{font-style: normal}

    /*TEXT-TYPE*/
    .lg-uppercase{text-transform: uppercase}
    .lg-lowercase{text-transform: lowercase}

    /* DISPLAY */ 
    .lg-inline-block{display: inline-block}
    .lg-inline-flex{display: inline-flex}
    .lg-block{display: block}
    .lg-flex{display: flex}
    .lg-grid{display: grid}
    .lg-none{display: none}

    /*FLEX - JUSTIFY CONTENT*/
    .lg-justify-normal{justify-content: normal}
    .lg-justify-start{justify-content: flex-start}
    .lg-justify-center{justify-content: center}
    .lg-justify-end{justify-content: flex-end}
    .lg-justify-between{justify-content: space-between}

    /*FLEX - JUSTIFY ITEM*/
    .lg-justify-items-start{justify-items: start}
    .lg-justify-items-center{justify-items: center}
    .lg-justify-items-end{justify-items: end}
    .lg-justify-items-stretch{justify-items: stretch}

    /*FLEX - ALIGN ITEM*/
    .lg-item-start{align-items: flex-start}
    .lg-item-center{align-items: center}
    .lg-item-end{align-items: flex-end}

    /*ALIGN CONTENT*/
    .lg-align-content-center{align-content: center }
    .lg-align-content-start{align-content: start;}
    .lg-align-content-end{align-content: end;}

    /*FLEX*/
    .lg-fd-row{flex-direction: row}
    .lg-fd-col{flex-direction: column}
    .lg-fd-reverse{flex-direction: row-reverse}

    /*POSITION*/
    .lg-absolute{position: absolute}
    .lg-relative{position: relative}
    .lg-static{position: static}

    .lg-t0{top: 0}
    .lg-r0{right: 0}
    .lg-b0{bottom: 0}
    .lg-l0{left: 0}

    /*OVERFLOW*/
    .lg-overflow-hidden{overflow: hidden}
    .lg-overflow-visible{overflow: visible}

    /*WIDTH & HEIGHT */
	.lg-h-50{height: 50%}
    .lg-h-100{height: 100%}
    .lg-h-auto{height: auto}

    .lg-w-10{width: 10%}
    .lg-w-15{width: 15%}
    .lg-w-20{width: 20%}
    .lg-w-25{width: 25%}
    .lg-w-30{width: 30%}
    .lg-w-35{width: 35%}
    .lg-w-40{width: 40%}
    .lg-w-45{width: 45%}
    .lg-w-50{width: 50%}
    .lg-w-55{width: 55%}
    .lg-w-60{width: 60%}
    .lg-w-65{width: 65%}
    .lg-w-70{width: 70%}
    .lg-w-75{width: 75%}
    .lg-w-80{width: 80%}
    .lg-w-85{width: 85%}
    .lg-w-90{width: 90%}
    .lg-w-95{width: 95%}
    .lg-w-100{width: 100%}
    .lg-w-fit-content{width: fit-content}
    .lg-w-auto{width: auto}

    /*ROUNDED*/
    .lg-rounded-0{border-radius: 0}
    .lg-rounded-1{border-radius: 10px}
    .lg-rounded-2{border-radius: 15px}
    .lg-rounded-3{border-radius: 20px}
    .lg-rounded-4{border-radius: 25px}
    .lg-rounded-5{border-radius: 30px}

    /*ROUNDED TOP ↑*/
    .lg-rounded-start-top-0{border-top-left-radius: 0}
    .lg-rounded-top-1, .lg-rounded-start-1{border-top-left-radius: 8px}
    .lg-rounded-top-2, .lg-rounded-start-2{border-top-left-radius: 15px}
    .lg-rounded-top-3, .lg-rounded-start-3{border-top-left-radius: 20px}
    .lg-rounded-top-4, .lg-rounded-start-4{border-top-left-radius: 25px}
    .lg-rounded-top-5, .lg-rounded-start-5{border-top-left-radius: 30px}

    /*ROUNDED RIGHT →*/
    .lg-rounded-end-top-0{border-top-right-radius: 0}
    .lg-rounded-end-1, .lg-rounded-top-1{border-top-right-radius: 8px}
    .lg-rounded-end-2, .lg-rounded-top-2{border-top-right-radius: 15px}
    .lg-rounded-end-3, .lg-rounded-top-3{border-top-right-radius: 20px}
    .lg-rounded-end-4, .lg-rounded-top-4{border-top-right-radius: 25px}
    .lg-rounded-end-5, .lg-rounded-top-5{border-top-right-radius: 30px}
    
    /*ROUNDED BOTTOM ↓*/
    .lg-rounded-end-bottom-0{border-bottom-right-radius: 0}
    .lg-rounded-bottom-1, .lg-rounded-end-1{border-bottom-right-radius: 8px}
    .lg-rounded-bottom-2, .lg-rounded-end-2{border-bottom-right-radius: 15px}
    .lg-rounded-bottom-3, .lg-rounded-end-3{border-bottom-right-radius: 20px}
    .lg-rounded-bottom-4, .lg-rounded-end-4{border-bottom-right-radius: 25px}
    .lg-rounded-bottom-5, .lg-rounded-end-5{border-bottom-right-radius: 30px}

    /*ROUNDED LEFT ←*/
    .lg-rounded-start-bottom-0{border-bottom-left-radius: 0}
    .lg-rounded-start-1, .lg-rounded-bottom-1{border-bottom-left-radius: 8px}
    .lg-rounded-start-2, .lg-rounded-bottom-2{border-bottom-left-radius: 15px}
    .lg-rounded-start-3, .lg-rounded-bottom-3{border-bottom-left-radius: 20px}
    .lg-rounded-start-4, .lg-rounded-bottom-4{border-bottom-left-radius: 25px}
    .lg-rounded-start-5, .lg-rounded-bottom-5{border-bottom-left-radius: 30px}

    /*ORDER*/
    .lg-order-0{order: 0}
    .lg-order-1{order: 1}
    .lg-order-2{order: 2}
    .lg-order-3{order: 3}
    .lg-order-4{order: 4}
    .lg-order-5{order: 5}
    .lg-order-6{order: 6}
    .lg-order-first{order: -1}
    .lg-order-last{order: 999}

    /*LG MARGIN - WITH CONVENTION*/

    /*MARGING AUTO*/
    .lg-mt-auto, .lg-my-auto, .lg-m-auto{margin-top: auto}
    .lg-mr-auto, .lg-mx-auto, .lg-m-auto{margin-right: auto}
    .lg-mb-auto, .lg-my-auto, .lg-m-auto{margin-bottom: auto}
    .lg-ml-auto, .lg-mx-auto, .lg-m-auto{margin-left: auto}

    /*MARGING TOP*/
    .lg-mt0, .lg-my0, .lg-m0{margin-top: 0}
    .lg-mt1, .lg-my1, .lg-m1{margin-top: var(--jump-size, 10px) }
    .lg-mt2, .lg-my2, .lg-m2{margin-top: calc(var(--jump-size, 10px) * 2)}
    .lg-mt3, .lg-my3, .lg-m3{margin-top: calc(var(--jump-size, 10px) * 3)}
    .lg-mt4, .lg-my4, .lg-m4{margin-top: calc(var(--jump-size, 10px) * 4)}
    .lg-mt5, .lg-my5, .lg-m5{margin-top: calc(var(--jump-size, 10px) * 5)}
    .lg-mt6, .lg-my6, .lg-m6{margin-top: calc(var(--jump-size, 10px) * 6)}
    .lg-mt7, .lg-my7, .lg-m7{margin-top: calc(var(--jump-size, 10px) * 7)}
    .lg-mt8, .lg-my8, .lg-m8{margin-top: calc(var(--jump-size, 10px) * 8)}
    .lg-mt9, .lg-my9, .lg-m9{margin-top: calc(var(--jump-size, 10px) * 9)}
    .lg-mt10, .lg-my10, .lg-m10{margin-top: calc(var(--jump-size, 10px) * 10)}

    /*MARGING RIGHT*/
    .lg-mr0, .lg-mx0, .lg-m0{margin-right: 0}
    .lg-mr1, .lg-mx1, .lg-m1{margin-right: var(--h-jump-size, 10px) }
    .lg-mr2, .lg-mx2, .lg-m2{margin-right: calc(var(--h-jump-size, 10px) * 2)}
    .lg-mr3, .lg-mx3, .lg-m3{margin-right: calc(var(--h-jump-size, 10px) * 3)}
    .lg-mr4, .lg-mx4, .lg-m4{margin-right: calc(var(--h-jump-size, 10px) * 4)}
    .lg-mr5, .lg-mx5, .lg-m5{margin-right: calc(var(--h-jump-size, 10px) * 5)}
    .lg-mr6, .lg-mx6, .lg-m6{margin-right: calc(var(--h-jump-size, 10px) * 6)}
    .lg-mr7, .lg-mx7, .lg-m7{margin-right: calc(var(--h-jump-size, 10px) * 7)}
    .lg-mr8, .lg-mx8, .lg-m8{margin-right: calc(var(--h-jump-size, 10px) * 8)}
    .lg-mr9, .lg-mx9, .lg-m9{margin-right: calc(var(--h-jump-size, 10px) * 9)}
    .lg-mr10, .lg-mx10, .lg-m10{margin-right: calc(var(--h-jump-size, 10px) * 10)}

    /*MARGING BOTTOM*/
    .lg-mb0, .lg-my0, .lg-m0{margin-bottom: 0}
    .lg-mb1, .lg-my1, .lg-m1{margin-bottom: var(--jump-size, 10px) }
    .lg-mb2, .lg-my2, .lg-m2{margin-bottom: calc(var(--jump-size, 10px) * 2)}
    .lg-mb3, .lg-my3, .lg-m3{margin-bottom: calc(var(--jump-size, 10px) * 3)}
    .lg-mb4, .lg-my4, .lg-m4{margin-bottom: calc(var(--jump-size, 10px) * 4)}
    .lg-mb5, .lg-my5, .lg-m5{margin-bottom: calc(var(--jump-size, 10px) * 5)}
    .lg-mb6, .lg-my6, .lg-m6{margin-bottom: calc(var(--jump-size, 10px) * 6)}
    .lg-mb7, .lg-my7, .lg-m7{margin-bottom: calc(var(--jump-size, 10px) * 7)}
    .lg-mb8, .lg-my8, .lg-m8{margin-bottom: calc(var(--jump-size, 10px) * 8)}
    .lg-mb9, .lg-my9, .lg-m9{margin-bottom: calc(var(--jump-size, 10px) * 9)}
    .lg-mb10, .lg-my10, .lg-m10{margin-bottom: calc(var(--jump-size, 10px) * 10)}

    /*MARGING LEFT*/
    .lg-ml0, .lg-mx0, .lg-m0{margin-left: 0}
    .lg-ml1, .lg-mx1, .lg-m1{margin-left: var(--h-jump-size, 10px)}
    .lg-ml2, .lg-mx2, .lg-m2{margin-left: calc(var(--h-jump-size, 10px) * 2)}
    .lg-ml3, .lg-mx3, .lg-m3{margin-left: calc(var(--h-jump-size, 10px) * 3)}
    .lg-ml4, .lg-mx4, .lg-m4{margin-left: calc(var(--h-jump-size, 10px) * 4)}
    .lg-ml5, .lg-mx5, .lg-m5{margin-left: calc(var(--h-jump-size, 10px) * 5)}
    .lg-ml6, .lg-mx6, .lg-m6{margin-left: calc(var(--h-jump-size, 10px) * 6)}
    .lg-ml7, .lg-mx7, .lg-m7{margin-left: calc(var(--h-jump-size, 10px) * 7)}
    .lg-ml8, .lg-mx8, .lg-m8{margin-left: calc(var(--h-jump-size, 10px) * 8)}
    .lg-ml9, .lg-mx9, .lg-m9{margin-left: calc(var(--h-jump-size, 10px) * 9)}
    .lg-ml10, .lg-mx10, .lg-m10{margin-left: calc(var(--h-jump-size, 10px) * 10)}

    /*LG PADDING - WITH CONVENTION*/

    /* PADDING TOP */
    .lg-pt0, .lg-py0, .lg-p0{padding-top: 0}
    .lg-pt1, .lg-py1, .lg-p1{padding-top: var(--jump-size, 10px) }
    .lg-pt2, .lg-py2, .lg-p2{padding-top: calc(var(--jump-size, 10px) * 2)}
    .lg-pt3, .lg-py3, .lg-p3{padding-top: calc(var(--jump-size, 10px) * 3)}
    .lg-pt4, .lg-py4, .lg-p4{padding-top: calc(var(--jump-size, 10px) * 4)}
    .lg-pt5, .lg-py5, .lg-p5{padding-top: calc(var(--jump-size, 10px) * 5)}
    .lg-pt6, .lg-py6, .lg-p6{padding-top: calc(var(--jump-size, 10px) * 6)}
    .lg-pt7, .lg-py7, .lg-p7{padding-top: calc(var(--jump-size, 10px) * 7)}
    .lg-pt8, .lg-py8, .lg-p8{padding-top: calc(var(--jump-size, 10px) * 8)}
    .lg-pt9, .lg-py9, .lg-p9{padding-top: calc(var(--jump-size, 10px) * 9)}
    .lg-pt10, .lg-py10, .lg-p10{padding-top:calc(var(--jump-size, 10px) * 10)}

    /*PADDING LEFT*/
    .lg-pl0, .lg-px0, .lg-p0{padding-left: 0}
    .lg-pl1, .lg-px1, .lg-p1{padding-left: var(--h-jump-size, 10px)}
    .lg-pl2, .lg-px2, .lg-p2{padding-left: calc(var(--h-jump-size, 10px) * 2)} 
    .lg-pl3, .lg-px3, .lg-p3{padding-left: calc(var(--h-jump-size, 10px) * 3)}
    .lg-pl4, .lg-px4, .lg-p4{padding-left: calc(var(--h-jump-size, 10px) * 4)}
    .lg-pl5, .lg-px5, .lg-p5{padding-left: calc(var(--h-jump-size, 10px) * 5)}
    .lg-pl6, .lg-px6, .lg-p6{padding-left: calc(var(--h-jump-size, 10px) * 6)}
    .lg-pl7, .lg-px7, .lg-p7{padding-left: calc(var(--h-jump-size, 10px) * 7)}
    .lg-pl8, .lg-px8, .lg-p8{padding-left: calc(var(--h-jump-size, 10px) * 8)}
    .lg-pl9, .lg-px9, .lg-p9{padding-left: calc(var(--h-jump-size, 10px) * 9)}
    .lg-pl10, .lg-px10, .lg-p10{padding-left: calc(var(--h-jump-size, 10px) * 10)}

    /*PADDING BOT*/
    .lg-pb0, .lg-py0, .lg-p0{padding-bottom:0 }
    .lg-pb1, .lg-py1, .lg-p1{padding-bottom: var(--jump-size, 10px)}
    .lg-pb2, .lg-py2, .lg-p2{padding-bottom: calc(var(--jump-size, 10px) * 2)}
    .lg-pb3, .lg-py3, .lg-p3{padding-bottom: calc(var(--jump-size, 10px) * 3)}
    .lg-pb4, .lg-py4, .lg-p4{padding-bottom: calc(var(--jump-size, 10px) * 4)}
    .lg-pb5, .lg-py5, .lg-p5{padding-bottom: calc(var(--jump-size, 10px) * 5)}
    .lg-pb6, .lg-py6, .lg-p6{padding-bottom: calc(var(--jump-size, 10px) * 6)}
    .lg-pb7, .lg-py7, .lg-p7{padding-bottom: calc(var(--jump-size, 10px) * 7)}
    .lg-pb8, .lg-py8, .lg-p8{padding-bottom: calc(var(--jump-size, 10px) * 8)}
    .lg-pb9, .lg-py9, .lg-p9{padding-bottom: calc(var(--jump-size, 10px) * 9)}
    .lg-pb10, .lg-py10, .lg-p10{padding-bottom: calc(var(--jump-size, 10px) * 10)}

    /*PADDING RIGHT*/
    .lg-pr0, .lg-px0, .lg-p0{padding-right: 0}
    .lg-pr1, .lg-px1, .lg-p1{padding-right: var(--h-jump-size, 10px)}
    .lg-pr2, .lg-px2, .lg-p2{padding-right: calc(var(--h-jump-size, 10px) * 2)}
    .lg-pr3, .lg-px3, .lg-p3{padding-right: calc(var(--h-jump-size, 10px) * 3)}
    .lg-pr4, .lg-px4, .lg-p4{padding-right: calc(var(--h-jump-size, 10px) * 4)}
    .lg-pr5, .lg-px5, .lg-p5{padding-right: calc(var(--h-jump-size, 10px) * 5)}
    .lg-pr6, .lg-px6, .lg-p6{padding-right: calc(var(--h-jump-size, 10px) * 6)}
    .lg-pr7, .lg-px7, .lg-p7{padding-right: calc(var(--h-jump-size, 10px) * 7)}
    .lg-pr8, .lg-px8, .lg-p8{padding-right: calc(var(--h-jump-size, 10px) * 8)}
    .lg-pr9, .lg-px9, .lg-p9{padding-right: calc(var(--h-jump-size, 10px) * 9)}
    .lg-pr10, .lg-px10, .lg-p10{padding-right: calc(var(--h-jump-size, 10px) * 10)}

    /* Bootstrap like Grid convention */
    .lg-col{flex: 1 0 0%;}
    .lg-col-1{flex: 0 0 auto; width: 8.33333333%}
    .lg-col-2{flex: 0 0 auto; width: 16.66666667%}
    .lg-col-3{flex: 0 0 auto; width: 25%}
    .lg-col-4{flex: 0 0 auto; width: 33.33333333%}
    .lg-col-5{flex: 0 0 auto; width: 41.66666667%}
    .lg-col-6{flex: 0 0 auto; width: 50%}
    .lg-col-7{flex: 0 0 auto; width: 58.33333333%}
    .lg-col-8{flex: 0 0 auto; width: 66.66666667%}
    .lg-col-9{flex: 0 0 auto; width: 75%}
    .lg-col-10{flex: 0 0 auto; width: 83.33333333%}
    .lg-col-11{flex: 0 0 auto; width: 91.66666667%}
    .lg-col-12{flex: 0 0 auto; width: 100%}

    /* CSS GRID */
    section > .md-grid, section > .lg-grid, footer .md-grid, footer .lg-grid, #content .lg-grid{
        display: grid;
        grid-template-rows: repeat(1, 1fr);
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--lg-column-gap, 20px);
    }

    .lg-grid > .lg-col-12, .md-grid > .lg-col-12, .lg-grid > .col-12{flex: unset; width: unset; grid-column: auto/span 12}
    .lg-grid > .lg-col-11, .md-grid > .lg-col-11, .lg-grid > .col-11{flex: unset; width: unset; grid-column: auto/span 11}
    .lg-grid > .lg-col-10, .md-grid > .lg-col-10, .lg-grid > .col-10{flex: unset; width: unset; grid-column: auto/span 10}
    .lg-grid > .lg-col-9, .md-grid > .lg-col-9, .lg-grid > .col-9{flex: unset; width: unset;grid-column: auto/span 9}
    .lg-grid > .lg-col-8, .md-grid > .lg-col-8, .lg-grid > .col-8{flex: unset; width: unset; grid-column: auto/span 8}
    .lg-grid > .lg-col-7, .md-grid > .lg-col-7, .lg-grid > .col-7{flex: unset; width: unset; grid-column: auto/span 7}
    .lg-grid > .lg-col-6, .md-grid > .lg-col-6, .lg-grid > .col-6{flex: unset; width: unset; grid-column: auto/span 6}
    .lg-grid > .lg-col-5, .md-grid > .lg-col-5, .lg-grid > .col-5{flex: unset; width: unset; grid-column: auto/span 5}
    .lg-grid > .lg-col-4, .md-grid > .lg-col-4, .lg-grid > .col-4{flex: unset; width: unset; grid-column: auto/span 4}
    .lg-grid > .lg-col-3, .md-grid > .lg-col-3, .lg-grid > .col-3{flex: unset; width: unset; grid-column: auto/span 3}
    .lg-grid > .lg-col-2, .md-grid > .lg-col-2, .lg-grid > .col-2{flex: unset; width: unset; grid-column: auto/span 2}
    .lg-grid > .lg-col-1, .md-grid > .lg-col-1, .lg-grid > .col-1{flex: unset; width: unset; grid-column: auto/span 1}
    .lg-grid > .lg-col, .md-grid > .lg-col{flex: unset}

    div[class*="grid"].lg-grid-reverse-2 > div[class*="col"]:first-child{order: 2;}
    div[class*="grid"].lg-grid-reverse-3 > div[class*="col"]:first-child{order: 3;}
    div[class*="grid"].div[class*="lg-grid-reverse"] > div[class*="col"]:last-child{order: 1;}

    /* Sections and Rows */
    main > section, #content .section-padding, #content .lg-section-padding, .section-padding{
        padding-top: var(--lg-section-top-padding, 120px);
        padding-bottom: var(--lg-section-bottom-padding, 80px)
    }

    section > .container, #content .container, footer .container,
    section > .md-container, #content .md-container,
    section > .lg-container, #content .lg-container{
        max-width: var(--lg-container, 1120px);
        margin-left: auto;
        margin-right: auto
    }

    #content .md-container-fluid{
        max-width: 100%;
        width: 100%
    }

    section > .row:not([class*="container"]), .row-padding, 
    #content .lg-row-padding, .row .lateral-padding, #content .md-right-row-padding, #content .lg-right-row-padding, #colophon .lg-right-row-padding, .lg-right-row-padding{
        padding-right: var(--lg-lateral-padding, 13.07vw);
    }

    section > .row:not([class*="container"]), .row-padding, 
    #content .lg-row-padding, .row .lateral-padding, #content .md-left-row-padding, #content .lg-left-row-padding, #colophon .lg-left-row-padding, .lg-left-row-padding{
        padding-left: var(--lg-lateral-padding, 13.07vw); 
    }
    
    section > .row.lg-fullwidth{padding-left:0; padding-right: 0}

    /* General */
    section > .row.lg-fullwidth{padding-left:0; padding-right:0}
    section > .row:not([class*="container"]) > div:nth-child(odd):not([class*="px0"]), section > .row.md-row-reverse > div:nth-child(even):not([class*="px0"]) {padding-right: 20px}
    section > .row:not([class*="container"]) > div:nth-child(even):not([class*="px0"]), section > .row.md-row-reverse > div:nth-child(odd):not([class*="px0"]) {padding-left: 20px}
}

@media screen and (min-width: 1800px){
    /*FONT-WEIGHT*/
    .xl-thin{font-weight: 100}
    .xl-extra-light{font-weight: 200}
    .xl-light{font-weight: 300}
    .xl-regular{font-weight: 400}
    .xl-medium{font-weight: 500}
    .xl-semibold{font-weight: 600}
    .xl-bold{font-weight: 700}
    .xl-extra-bold{font-weight: 800}

    /*TEXT-ALIGN*/
    .xl-left-align{text-align: left}
    .xl-center-align{text-align: center}
    .xl-right-align{text-align: right}
    .xl-justify-align{text-align: justify}

    /*TEXT STYLE*/
    .xl-underline{text-decoration: underline}
    .xl-italic{font-style: italic}
    .xl-normal{font-style: normal}

    /*TEXT-TYPE*/
    .xl-uppercase{text-transform: uppercase}
    .xl-lowercase{text-transform: lowercase}

    /*DISPLAY*/ 
    .xl-inline-block{display: inline-block}
    .xl-inline-flex{display: inline-flex}
    .xl-block{display: block}
    .xl-flex{display: flex}
    .xl-grid{display: grid}
    .xl-none{display: none}

    /*FLEX - JUSTIFY CONTENT*/
    .xl-justify-normal{justify-content: normal}
    .xl-justify-start{justify-content: flex-start}
    .xl-justify-center{justify-content: center}
    .xl-justify-end{justify-content: flex-end}
    .xl-justify-between{justify-content: space-between}

    /*FLEX - JUSTIFY ITEM*/
    .xl-justify-items-start{justify-items: start}
    .xl-justify-items-center{justify-items: center}
    .xl-justify-items-end{justify-items: end}
    .xl-justify-items-stretch{justify-items: stretch}

    /*FLEX - ALIGN ITEM*/
    .xl-item-start{align-items: flex-start}
    .xl-item-center{align-items: center}
    .xl-item-end{align-items: flex-end}

    /*ALIGN CONTENT*/
    .xl-align-content-center{align-content: center }
    .xl-align-content-start{align-content: start;}
    .xl-align-content-end{align-content: end;}

    /*FLEX*/
    .xl-fd-row{flex-direction: row}
    .xl-fd-col{flex-direction: column}
    .xl-fd-reverse{flex-direction: row-reverse}
    .xl-row-reverse{flex-direction: row-reverse} /*corregir en sistios para que se ajuste a la nomenclatura*/

    /*POSITION*/
    .xl-absolute{position: absolute}
    .xl-relative{position: relative}
    .xl-static{position: static}

    .xl-t0{top: 0}
    .xl-r0{right: 0}
    .xl-b0{bottom: 0}
    .xl-l0{left: 0}

    /*OVERFLOW*/
    .xl-overflow-hidden{overflow: hidden}
    .xl-overflow-visible{overflow: visible}

    /*WIDTH & HEIGHT */
	.xl-h-50{height: 50%}
    .xl-h-100{height: 100%}
    .xl-h-auto{height: auto}

    .xl-w-10{width: 10%}
    .xl-w-15{width: 15%}
    .xl-w-20{width: 20%}
    .xl-w-25{width: 25%}
    .xl-w-30{width: 30%}
    .xl-w-35{width: 35%}
    .xl-w-40{width: 40%}
    .xl-w-45{width: 45%}
    .xl-w-50{width: 50%}
    .xl-w-55{width: 55%}
    .xl-w-60{width: 60%}
    .xl-w-65{width: 65%}
    .xl-w-70{width: 70%}
    .xl-w-75{width: 75%}
    .xl-w-80{width: 80%}
    .xl-w-85{width: 85%}
    .xl-w-90{width: 90%}
    .xl-w-95{width: 95%}
    .xl-w-100{width: 100%}
    .xl-w-fit-content{width: fit-content}
    .xl-w-auto{width: auto}

    /*ROUNDED*/
    .xl-rounded-0{border-radius: 0}
    .xl-rounded-1{border-radius: 10px}
    .xl-rounded-2{border-radius: 15px}
    .xl-rounded-3{border-radius: 20px}
    .xl-rounded-4{border-radius: 25px}
    .xl-rounded-5{border-radius: 30px}

    /*ROUNDED TOP ↑*/
    .xl-rounded-start-top-0{border-top-left-radius: 0}
    .xl-rounded-top-1, .xl-rounded-start-1{border-top-left-radius: 8px}
    .xl-rounded-top-2, .xl-rounded-start-2{border-top-left-radius: 15px}
    .xl-rounded-top-3, .xl-rounded-start-3{border-top-left-radius: 20px}
    .xl-rounded-top-4, .xl-rounded-start-4{border-top-left-radius: 25px}
    .xl-rounded-top-5, .xl-rounded-start-5{border-top-left-radius: 30px}

    /*ROUNDED RIGHT →*/
    .xl-rounded-end-top-0{border-top-right-radius: 0}
    .xl-rounded-end-1, .xl-rounded-top-1{border-top-right-radius: 8px}
    .xl-rounded-end-2, .xl-rounded-top-2{border-top-right-radius: 15px}
    .xl-rounded-end-3, .xl-rounded-top-3{border-top-right-radius: 20px}
    .xl-rounded-end-4, .xl-rounded-top-4{border-top-right-radius: 25px}
    .xl-rounded-end-5, .xl-rounded-top-5{border-top-right-radius: 30px}
    
    /*ROUNDED BOTTOM ↓*/
    .xl-rounded-end-bottom-0{border-bottom-right-radius: 0}
    .xl-rounded-bottom-1, .xl-rounded-end-1{border-bottom-right-radius: 8px}
    .xl-rounded-bottom-2, .xl-rounded-end-2{border-bottom-right-radius: 15px}
    .xl-rounded-bottom-3, .xl-rounded-end-3{border-bottom-right-radius: 20px}
    .xl-rounded-bottom-4, .xl-rounded-end-4{border-bottom-right-radius: 25px}
    .xl-rounded-bottom-5, .xl-rounded-end-5{border-bottom-right-radius: 30px}

    /*ROUNDED LEFT ←*/
    .xl-rounded-start-bottom-0{border-bottom-left-radius: 0}
    .xl-rounded-start-1, .xl-rounded-bottom-1{border-bottom-left-radius: 8px}
    .xl-rounded-start-2, .xl-rounded-bottom-2{border-bottom-left-radius: 15px}
    .xl-rounded-start-3, .xl-rounded-bottom-3{border-bottom-left-radius: 20px}
    .xl-rounded-start-4, .xl-rounded-bottom-4{border-bottom-left-radius: 25px}
    .xl-rounded-start-5, .xl-rounded-bottom-5{border-bottom-left-radius: 30px}

    /*ORDER*/
    .xl-order-0{order: 0}
    .xl-order-1{order: 1}
    .xl-order-2{order: 2}
    .xl-order-3{order: 3}
    .xl-order-4{order: 4}
    .xl-order-5{order: 5}
    .xl-order-6{order: 6}
    .xl-order-first{order: -1}
    .xl-order-last{order: 999}

    /*XL MARGIN - WITH CONVENTION*/

    /*MARGING AUTO*/
    .xl-mt-auto, .xl-my-auto, .xl-m-auto{margin-top: auto}
    .xl-mr-auto, .xl-mx-auto, .xl-m-auto{margin-right: auto}
    .xl-mb-auto, .xl-my-auto, .xl-m-auto{margin-bottom: auto}
    .xl-ml-auto, .xl-mx-auto, .xl-m-auto{margin-left: auto}

    /*MARGING TOP*/
    .xl-mt0, .xl-my0, .xl-m0{margin-top: 0}
    .xl-mt1, .xl-my1, .xl-m1{margin-top: var(--jump-size, 10px) }
    .xl-mt2, .xl-my2, .xl-m2{margin-top: calc(var(--jump-size, 10px) * 2)}
    .xl-mt3, .xl-my3, .xl-m3{margin-top: calc(var(--jump-size, 10px) * 3)}
    .xl-mt4, .xl-my4, .xl-m4{margin-top: calc(var(--jump-size, 10px) * 4)}
    .xl-mt5, .xl-my5, .xl-m5{margin-top: calc(var(--jump-size, 10px) * 5)}
    .xl-mt6, .xl-my6, .xl-m6{margin-top: calc(var(--jump-size, 10px) * 6)}
    .xl-mt7, .xl-my7, .xl-m7{margin-top: calc(var(--jump-size, 10px) * 7)}
    .xl-mt8, .xl-my8, .xl-m8{margin-top: calc(var(--jump-size, 10px) * 8)}
    .xl-mt9, .xl-my9, .xl-m9{margin-top: calc(var(--jump-size, 10px) * 9)}
    .xl-mt10, .xl-my10, .xl-m10{margin-top: calc(var(--jump-size, 10px) * 10)}

    /*MARGING RIGHT*/
    .xl-mr0, .xl-mx0, .xl-m0{margin-right: 0}
    .xl-mr1, .xl-mx1, .xl-m1{margin-right: var(--h-jump-size, 10px) }
    .xl-mr2, .xl-mx2, .xl-m2{margin-right: calc(var(--h-jump-size, 10px) * 2)}
    .xl-mr3, .xl-mx3, .xl-m3{margin-right: calc(var(--h-jump-size, 10px) * 3)}
    .xl-mr4, .xl-mx4, .xl-m4{margin-right: calc(var(--h-jump-size, 10px) * 4)}
    .xl-mr5, .xl-mx5, .xl-m5{margin-right: calc(var(--h-jump-size, 10px) * 5)}
    .xl-mr6, .xl-mx6, .xl-m6{margin-right: calc(var(--h-jump-size, 10px) * 6)}
    .xl-mr7, .xl-mx7, .xl-m7{margin-right: calc(var(--h-jump-size, 10px) * 7)}
    .xl-mr8, .xl-mx8, .xl-m8{margin-right: calc(var(--h-jump-size, 10px) * 8)}
    .xl-mr9, .xl-mx9, .xl-m9{margin-right: calc(var(--h-jump-size, 10px) * 9)}
    .xl-mr10, .xl-mx10, .xl-m10{margin-right: calc(var(--h-jump-size, 10px) * 10)}

    /*MARGING BOTTOM*/
    .xl-mb0, .xl-my0, .xl-m0{margin-bottom: 0}
    .xl-mb1, .xl-my1, .xl-m1{margin-bottom: var(--jump-size, 10px)}
    .xl-mb2, .xl-my2, .xl-m2{margin-bottom: calc(var(--jump-size, 10px) * 2)}
    .xl-mb3, .xl-my3, .xl-m3{margin-bottom: calc(var(--jump-size, 10px) * 3)}
    .xl-mb4, .xl-my4, .xl-m4{margin-bottom: calc(var(--jump-size, 10px) * 4)}
    .xl-mb5, .xl-my5, .xl-m5{margin-bottom: calc(var(--jump-size, 10px) * 5)}
    .xl-mb6, .xl-my6, .xl-m6{margin-bottom: calc(var(--jump-size, 10px) * 6)}
    .xl-mb7, .xl-my7, .xl-m7{margin-bottom: calc(var(--jump-size, 10px) * 7)}
    .xl-mb8, .xl-my8, .xl-m8{margin-bottom: calc(var(--jump-size, 10px) * 8)}
    .xl-mb9, .xl-my9, .xl-m9{margin-bottom: calc(var(--jump-size, 10px) * 9)}
    .xl-mb10, .xl-my10, .xl-m10{margin-bottom: calc(var(--jump-size, 10px) * 10)}

    /*MARGING LEFT*/
    .xl-ml0, .xl-mx0, .xl-m0{margin-left: 0}
    .xl-ml1, .xl-mx1, .xl-m1{margin-left: var(--h-jump-size, 10px)}
    .xl-ml2, .xl-mx2, .xl-m2{margin-left: calc(var(--h-jump-size, 10px) * 2)}
    .xl-ml3, .xl-mx3, .xl-m3{margin-left: calc(var(--h-jump-size, 10px) * 3)}
    .xl-ml4, .xl-mx4, .xl-m4{margin-left: calc(var(--h-jump-size, 10px) * 4)}
    .xl-ml5, .xl-mx5, .xl-m5{margin-left: calc(var(--h-jump-size, 10px) * 5)}
    .xl-ml6, .xl-mx6, .xl-m6{margin-left: calc(var(--h-jump-size, 10px) * 6)}
    .xl-ml7, .xl-mx7, .xl-m7{margin-left: calc(var(--h-jump-size, 10px) * 7)}
    .xl-ml8, .xl-mx8, .xl-m8{margin-left: calc(var(--h-jump-size, 10px) * 8)}
    .xl-ml9, .xl-mx9, .xl-m9{margin-left: calc(var(--h-jump-size, 10px) * 9)}
    .xl-ml10, .xl-mx10, .xl-m10{margin-left: calc(var(--h-jump-size, 10px) * 10)}

    /* XL PADDING - WITH CONVENTION */

    /* PADDING TOP */
    .xl-pt0, .xl-py0, .xl-p0{padding-top: 0}
    .xl-pt1, .xl-py1, .xl-p1{padding-top: var(--jump-size, 10px)}
    .xl-pt2, .xl-py2, .xl-p2{padding-top: calc(var(--jump-size, 10px) * 2)}
    .xl-pt3, .xl-py3, .xl-p3{padding-top: calc(var(--jump-size, 10px) * 3)}
    .xl-pt4, .xl-py4, .xl-p4{padding-top: calc(var(--jump-size, 10px) * 4)}
    .xl-pt5, .xl-py5, .xl-p5{padding-top: calc(var(--jump-size, 10px) * 5)}
    .xl-pt6, .xl-py6, .xl-p6{padding-top: calc(var(--jump-size, 10px) * 6)}
    .xl-pt7, .xl-py7, .xl-p7{padding-top: calc(var(--jump-size, 10px) * 7)}
    .xl-pt8, .xl-py8, .xl-p8{padding-top: calc(var(--jump-size, 10px) * 8)}
    .xl-pt9, .xl-py9, .xl-p9{padding-top: calc(var(--jump-size, 10px) * 9)}
    .xl-pt10, .xl-py10, .xl-p10{padding-top:calc(var(--jump-size, 10px) * 10)}

    /*PADDING LEFT*/
    .xl-pl0, .xl-px0, .xl-p0{padding-left: 0}
    .xl-pl1, .xl-px1, .xl-p1{padding-left: var(--h-jump-size, 10px)}
    .xl-pl2, .xl-px2, .xl-p2{padding-left: calc(var(--h-jump-size, 10px) * 2)} 
    .xl-pl3, .xl-px3, .xl-p3{padding-left: calc(var(--h-jump-size, 10px) * 3)}
    .xl-pl4, .xl-px4, .xl-p4{padding-left: calc(var(--h-jump-size, 10px) * 4)}
    .xl-pl5, .xl-px5, .xl-p5{padding-left: calc(var(--h-jump-size, 10px) * 5)}
    .xl-pl6, .xl-px6, .xl-p6{padding-left: calc(var(--h-jump-size, 10px) * 6)}
    .xl-pl7, .xl-px7, .xl-p7{padding-left: calc(var(--h-jump-size, 10px) * 7)}
    .xl-pl8, .xl-px8, .xl-p8{padding-left: calc(var(--h-jump-size, 10px) * 8)}
    .xl-pl9, .xl-px9, .xl-p9{padding-left: calc(var(--h-jump-size, 10px) * 9)}
    .xl-pl10, .xl-px10, .xl-p10{padding-left: calc(var(--h-jump-size, 10px) * 10)}

    /*PADDING BOT*/
    .xl-pb0, .xl-py0, .xl-p0{padding-bottom:0}
    .xl-pb1, .xl-py1, .xl-p1{padding-bottom: var(--jump-size, 10px)}
    .xl-pb2, .xl-py2, .xl-p2{padding-bottom: calc(var(--jump-size, 10px) * 2)}
    .xl-pb3, .xl-py3, .xl-p3{padding-bottom: calc(var(--jump-size, 10px) * 3)}
    .xl-pb4, .xl-py4, .xl-p4{padding-bottom: calc(var(--jump-size, 10px) * 4)}
    .xl-pb5, .xl-py5, .xl-p5{padding-bottom: calc(var(--jump-size, 10px) * 5)}
    .xl-pb6, .xl-py6, .xl-p6{padding-bottom: calc(var(--jump-size, 10px) * 6)}
    .xl-pb7, .xl-py7, .xl-p7{padding-bottom: calc(var(--jump-size, 10px) * 7)}
    .xl-pb8, .xl-py8, .xl-p8{padding-bottom: calc(var(--jump-size, 10px) * 8)}
    .xl-pb9, .xl-py9, .xl-p9{padding-bottom: calc(var(--jump-size, 10px) * 9)}
    .xl-pb10, .xl-py10, .xl-p10{padding-bottom: calc(var(--jump-size, 10px) * 10)}

    /*PADDING RIGHT*/
    .xl-pr0, .xl-px0, .xl-p0{padding-right: 0}
    .xl-pr1, .xl-px1, .xl-p1{padding-right: var(--h-jump-size, 10px)}
    .xl-pr2, .xl-px2, .xl-p2{padding-right: calc(var(--h-jump-size, 10px) * 2)}
    .xl-pr3, .xl-px3, .xl-p3{padding-right: calc(var(--h-jump-size, 10px) * 3)}
    .xl-pr4, .xl-px4, .xl-p4{padding-right: calc(var(--h-jump-size, 10px) * 4)}
    .xl-pr5, .xl-px5, .xl-p5{padding-right: calc(var(--h-jump-size, 10px) * 5)}
    .xl-pr6, .xl-px6, .xl-p6{padding-right: calc(var(--h-jump-size, 10px) * 6)}
    .xl-pr7, .xl-px7, .xl-p7{padding-right: calc(var(--h-jump-size, 10px) * 7)}
    .xl-pr8, .xl-px8, .xl-p8{padding-right: calc(var(--h-jump-size, 10px) * 8)}
    .xl-pr9, .xl-px9, .xl-p9{padding-right: calc(var(--h-jump-size, 10px) * 9)}
    .xl-pr10, .xl-px10, .xl-p10{padding-right: calc(var(--h-jump-size, 10px) * 10)}

    /* Bootstrap like Grid convention */
    .xl-col{flex: 1 0 0%}
    .xl-col-1{flex: 0 0 auto; width: 8.33333333%}
    .xl-col-2{flex: 0 0 auto; width: 16.66666667%}
    .xl-col-3{flex: 0 0 auto; width: 25%}
    .xl-col-4{flex: 0 0 auto; width: 33.33333333%}
    .xl-col-5{flex: 0 0 auto; width: 41.66666667%}
    .xl-col-6{flex: 0 0 auto; width: 50%}
    .xl-col-7{flex: 0 0 auto; width: 58.33333333%}
    .xl-col-8{flex: 0 0 auto; width: 66.66666667%}
    .xl-col-9{flex: 0 0 auto; width: 75%}
    .xl-col-10{flex: 0 0 auto; width: 83.33333333%}
    .xl-col-11{flex: 0 0 auto; width: 91.66666667%}
    .xl-col-12{flex: 0 0 auto; width: 100%}

    .md-grid > .xl-col-12, .lg-grid > .lg-col-12, .md-grid > .lg-col-12, .lg-grid > .col-12{flex: unset; width: unset; grid-column: auto/span 12}
    .md-grid > .xl-col-11, .lg-grid > .lg-col-11, .md-grid > .lg-col-11, .lg-grid > .col-11{flex: unset; width: unset; grid-column: auto/span 11}
    .md-grid > .xl-col-10, .lg-grid > .lg-col-10, .md-grid > .lg-col-10, .lg-grid > .col-10{flex: unset; width: unset; grid-column: auto/span 10}
    .md-grid > .xl-col-9, .lg-grid > .lg-col-9, .md-grid > .lg-col-9, .lg-grid > .col-9{flex: unset; width: unset;grid-column: auto/span 9}
    .md-grid > .xl-col-8, .lg-grid > .lg-col-8, .md-grid > .lg-col-8, .lg-grid > .col-8{flex: unset; width: unset; grid-column: auto/span 8}
    .md-grid > .xl-col-7, .lg-grid > .lg-col-7, .md-grid > .lg-col-7, .lg-grid > .col-7{flex: unset; width: unset; grid-column: auto/span 7}
    .md-grid > .xl-col-6, .lg-grid > .lg-col-6, .md-grid > .lg-col-6, .lg-grid > .col-6{flex: unset; width: unset; grid-column: auto/span 6}
    .md-grid > .xl-col-5, .lg-grid > .lg-col-5, .md-grid > .lg-col-5, .lg-grid > .col-5{flex: unset; width: unset; grid-column: auto/span 5}
    .md-grid > .xl-col-4, .lg-grid > .lg-col-4, .md-grid > .lg-col-4, .lg-grid > .col-4{flex: unset; width: unset; grid-column: auto/span 4}
    .md-grid > .xl-col-3, .lg-grid > .lg-col-3, .md-grid > .lg-col-3, .lg-grid > .col-3{flex: unset; width: unset; grid-column: auto/span 3}
    .md-grid > .xl-col-2, .lg-grid > .lg-col-2, .md-grid > .lg-col-2, .lg-grid > .col-2{flex: unset; width: unset; grid-column: auto/span 2}
    .md-grid > .xl-col-1, .lg-grid > .lg-col-1, .md-grid > .lg-col-1, .lg-grid > .col-1{flex: unset; width: unset; grid-column: auto/span 1}
    .lg-grid > .xl-col, .md-grid > .xl-col, .lg-grid > .lg-col, .md-grid > .lg-col{flex: unset}

    /* Sections and Rows */
    main > section, #content .section-padding, #content .md-section-padding,

    #content .lg-section-padding, #content .xl-section-padding, .section-padding{
        padding-top: var(--xl-section-top-padding, 120px);
        padding-bottom: var(--xl-section-bottom-padding, 80px)
    }

    #content .xl-container-fluid{
        max-width: 100%;
        width: 100%
    }

    /* General */
    section > .row.xl-fullwidth{padding-left:0; padding-right:0}

    section > .row:not([class$="px0"]) > div:not([class*="px0"]){
        padding-right: var(--xl-row-padding, 20px);
        padding-left: var(--xl-row-padding, 20px)
    }
}