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

.block { display: block; }

.flex{ display: flex; }

.grid { display: grid; }

.none { display: none; }



/*FLEX - JUSTIFY CONTENT*/

.justify-start { justify-content: flex-start; }

.justify-center { justify-content: center; }

.justify-end { justify-content: flex-end; }

.justify-between { justify-content: space-between; }



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



/*ROUNDED*/

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

.left-rounded { border-radius: 20px 0px 0px 20px; }

.right-rounded { border-radius: 0px 20px 20px 0px; }
	
.top-rounded { border-radius: 20px 20px 0px 0px; }

.bottom-rounded { border-radius: 0px 0px 20px 20px; }



/*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-4{aspect-ratio: 4/4}
.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-block { display: block; }

    .md-flex { display: flex; }

    .md-grid { display: grid; }

    .md-none { display: none; }



    /*FLEX - JUSTIFY CONTENT*/

    .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 - 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-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; }
	
	.md-left-rounded { border-radius: 20px 0px 0px 20px; }

	.md-right-rounded { border-radius: 0px 20px 20px 0px; }
	
	.md-top-rounded { border-radius: 20px 20px 0px 0px; }

	.md-bottom-rounded { border-radius: 0px 0px 20px 20px; }



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

    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: 10px}

    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: 10px}

    .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-block { display: block; }

    .lg-flex { display: flex; }

    .lg-grid { display: grid; }

    .lg-none { display: none; }



    /*FLEX - JUSTIFY CONTENT*/

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



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

    .xl-flex { display: flex; }

    .xl-grid { display: grid; }

    .xl-none { display: none; }



    /*FLEX - JUSTIFY CONTENT*/

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



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



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



    .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)

    }

}