/*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; }
.block{display: block; }
.flex{display: flex; }
.grid { display: grid; }
.none{display: none; }

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

/*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-100 { height: 100% }
.h-auto { height: auto }
.h-fit {height: fit-content }

.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-content { width: fit-content; }
.w-auto{ width: auto; }

/* 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, .grid{    
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--s-column-gap, 16px);
}
.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, .row-padding {
    padding-left: var(--s-lateral-padding, 5vw);
    padding-right: var(--s-lateral-padding, 5vw)
}
section > .row.fullwidth, section > .row[class*="container"]{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%;
    /* box-shadow: 0px 3px 6px 0px #0000004f; */
}
.iframe-container{
    width: auto;
    position: relative;
    padding: 0
}

.ar-3-4{aspect-ratio: 3/4}
.ar-4-3{aspect-ratio: 4/3}
.ar-16-9{aspect-ratio: 16/9}
.ar-9-16{aspect-ratio: 9/16}
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    color: white;
}

/* 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-block { display: block }
    .md-flex { display: flex }
    .md-none { display: none }

    /*FLEX*/
    .md-fd-row { flex-direction: row}
    .md-fd-col { flex-direction: column}
    .md-fd-reverse { flex-direction: row-reverse}
    .md-fd-col-reverse{flex-direction: column-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-100 { height: 100%; }
    .md-h-fit{height: fit-content}
    .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; }

    /* Sections and Rows */
    main > section, .section-padding, #content .md-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, .row-padding, 
    #content .md-row-padding, .row .lateral-padding, #content .md-right-row-padding{
        padding-right: var(--md-lateral-padding, 30px);
    }
    section > .row, .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, section > .row.fullwidth,
    section > .row[class*="container"]{padding-left:0; padding-right: 0}

    /* 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);
    } */

    .md-grid, footer .md-grid{    
        display: grid;
        grid-template-rows: repeat(1, 1fr);
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--md-column-gap, 20px);
    }

    .md-col-gap-1{column-gap: var(--h-jump-size, 10px)}
    .md-col-gap-2{column-gap: calc(var(--h-jump-size, 10px) * 2)}
    .md-col-gap-3{column-gap: calc(var(--h-jump-size, 10px) * 3)}
    .md-col-gap-4{column-gap: calc(var(--h-jump-size, 10px) * 4)}
    .md-col-gap-5{column-gap: calc(var(--h-jump-size, 10px) * 5)}


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

    .md-ar-16-9{aspect-ratio: 16/9}

}

/* Devices largen than 1024 */
/* Prefix: lg- */
@media screen and (min-width: 1024px) {
    /*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-block { display: block; }
    .lg-flex { display: flex; }
    .lg-none { display: none; }

    /*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-100 { height: 100%; }
    .lg-h-fit{height: fit-content}
    .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; }

    /* 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, .row-padding, #content .md-row-padding,
    #content .lg-row-padding, #content .md-right-row-padding, #content .lg-right-row-padding, #template-footer .lg-right-row-padding, .lg-right-row-padding{
        padding-right: var(--lg-lateral-padding, 13.07vw);
    }
    section > .row, .row-padding, #content .md-row-padding,
    #content .lg-row-padding, #content .md-left-row-padding, #content .lg-left-row-padding, #template-footer .lg-left-row-padding, .lg-left-row-padding{
        padding-left: var(--lg-lateral-padding, 13.07vw); 
    }
    section > .row.lg-fullwidth, section > .row.md-fullwidth, 
    section > .row.fullwidth, section > .row[class*="container"]{padding-left:0; padding-right: 0}

    /*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 > .lg-grid, footer .lg-grid, .lg-grid,
    section > .md-grid, footer .md-grid, .md-grid{    
        display: grid;
        grid-template-rows: repeat(1, 1fr);
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--lg-column-gap, 20px);
    } */

    .lg-grid, footer .lg-grid,
    .md-grid, footer .md-grid{    
        display: grid;
        grid-template-rows: repeat(1, 1fr);
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--lg-column-gap, 20px);
    } 

    .lg-col-gap-1{column-gap: var(--h-jump-size, 10px)}
    .lg-col-gap-2{column-gap: calc(var(--h-jump-size, 10px) * 2)}
    .lg-col-gap-3{column-gap: calc(var(--h-jump-size, 10px) * 3)}
    .lg-col-gap-4{column-gap: calc(var(--h-jump-size, 10px) * 4)}
    .lg-col-gap-5{column-gap: calc(var(--h-jump-size, 10px) * 5)}


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

    

}

@media screen and (min-width: 1440px){
    /*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-block { display: block; }
    .xl-flex { display: flex; }
    .xl-grid { display: grid; }
    .xl-none { display: none; }

    /*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-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; }

    /* 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)
    }

    section > .row, .row-padding, #content .md-row-padding,
    #content .lg-row-padding, #content .md-right-row-padding, 
    #content .lg-right-row-padding, #template-footer .lg-right-row-padding, 
    .xl-right-row-padding, .xl-row-padding,
    .blog .site-content > .ast-container,
    .archive #page #content.site-content > .ast-container{
        padding-right: var(--xl-lateral-padding, 13.07vw);
        padding-right: clamp(40px, calc(-560.0005px + 41.6667vw), 240px)
    }
    section > .row, .row-padding, #content .md-row-padding,
    #content .lg-row-padding, .row .lateral-padding, #content .md-left-row-padding, 
    #content .lg-left-row-padding, #template-footer .lg-left-row-padding,
    .xl-right-row-padding, .xl-row-padding,
    .blog .site-content > .ast-container,
    .archive #page #content.site-content > .ast-container{
        padding-left: var(--xl-lateral-padding, 13.07vw); 
        padding-left: clamp(40px, calc(-560.0005px + 41.6667vw), 240px)
    }

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

    /* Astra Override */
    body.blog .site-content > .ast-container,
    body.archive .site-content > .ast-container{
        margin-left: 0;
        margin-right: 0;
        max-width: 100%
    }

    /* General */
    section > .row.xl-fullwidth, section > .row.lg-fullwidth, section > .row.md-fullwidth,
    section > .row.fullwidth, section > .row[class*="container"]{padding-left:0; padding-right:0}

    /*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)}

    /* LG 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% }

    /* CSS GRID */
    /* section > .xl-grid, footer .xl-grid, #content .xl-grid,
    section > .lg-grid, footer .lg-grid, #content .lg-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(--xl-column-gap, 20px);
    } */

    .xl-grid, footer .xl-grid,
    .lg-grid, footer .lg-grid, 
    .md-grid, footer .md-grid{
        display: grid;
        grid-template-rows: repeat(1, 1fr);
        grid-template-columns: repeat(12, 1fr);
        column-gap: var(--xl-column-gap, 20px);
    }

    .xl-col-gap-1{column-gap: var(--h-jump-size, 10px)}
    .xl-col-gap-2{column-gap: calc(var(--h-jump-size, 10px) * 2)}
    .xl-col-gap-3{column-gap: calc(var(--h-jump-size, 10px) * 3)}
    .xl-col-gap-4{column-gap: calc(var(--h-jump-size, 10px) * 4)}
    .xl-col-gap-5{column-gap: calc(var(--h-jump-size, 10px) * 5)}

    [class*="xl-grid"] > [class*="-col-"]{flex: unset; width: unset;}
    [class*="-grid"] > .xl-col-12{ grid-column: auto/span 12}
    [class*="-grid"] > .xl-col-11{ grid-column: auto/span 11}
    [class*="-grid"] > .xl-col-10{ grid-column: auto/span 10}
    [class*="-grid"] > .xl-col-9{ grid-column: auto/span 9}
    [class*="-grid"] > .xl-col-8{ grid-column: auto/span 8}
    [class*="-grid"] > .xl-col-7{ grid-column: auto/span 7}
    [class*="-grid"] > .xl-col-6{ grid-column: auto/span 6}
    [class*="-grid"] > .xl-col-5{ grid-column: auto/span 5}
    [class*="-grid"] > .xl-col-4{ grid-column: auto/span 4}
    [class*="-grid"] > .xl-col-3{ grid-column: auto/span 3}
    [class*="-grid"] > .xl-col-2{ grid-column: auto/span 2}
    [class*="-grid"] > .xl-col-1{ grid-column: auto/span 1}

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