/* VAR */

:root{
    --light: white;
    --dark: #1d1d1d;
    --accent: #371b46;
    --accent-2: #d1a83b;
    --color-1: #b89bc9;
    --color-2: #f0d59a;
    --color-3: #fffaed;
    --jump-size: 8px; /* only for vertical spacing */
    --h-jump-size: 8px; /* only for horizontal spacing */
    --fa-li-width: 48px;
    --fa-li-margin: 40px;
    --s-column-gap: 16px;
    --md-column-gap: 16px;
    --lg-column-gap: 40px;
    --s-section-top-padding: 40px;
    --md-section-top-padding: 60px;
    --lg-section-top-padding: 80px;
    --xl-section-top-padding: 80px;
    --s-section-bottom-padding: 40px;
    --md-section-bottom-padding: 60px;
    --lg-section-bottom-padding: 80px;
    --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-sizes */
.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}

/* font-align and styles */
.uppercase{text-transform: uppercase}
.left-align{text-align: left}
.center-align{text-align: center}
.right-align{text-align: right}
.underline{text-decoration: underline;}
.italic{font-style: italic;}

/* Display */ 
.inline-block{display: inline-block;}
.block{display: block;}
.flex{display: flex;}
.flex.column{flex-direction: column;}
.none{display: none;}

/* width & height */
.h-100{ height: 100% }
.h-auto{ height: auto }
.w-100{width: 100%}
.w-auto{width: auto}

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

/* Positions */
.relative{position: relative}
#content .absolute, .absolute{position: absolute}

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

/* Paddings - With Convention */
.p0 {padding:0}
.pt0, .py0{padding-top:0}
.pt1, .py1{padding-top:var(--jump-size, 10px)}
.pt2, .py2{padding-top:calc(var(--jump-size, 10px) * 2)}
.pt3, .py3{padding-top:calc(var(--jump-size, 10px) * 3)}
.pt4, .py4{padding-top:calc(var(--jump-size, 10px) * 4)}
.pt5, .py5{padding-top:calc(var(--jump-size, 10px) * 5)}
.pt6, .py6{padding-top:calc(var(--jump-size, 10px) * 6)}
.pt7, .py7{padding-top:calc(var(--jump-size, 10px) * 7)}
.pt8, .py8{padding-top:calc(var(--jump-size, 10px) * 8)}
.pt9, .py9{padding-top:calc(var(--jump-size, 10px) * 9)}
.pt10, .py10{padding-top:calc(var(--jump-size, 10px) * 10)}
#content .pt5, .py5{padding-top: calc(var(--jump-size, 10px) * 5)}
.pt10{padding-top: calc(var(--jump-size, 10px) * 10)}
.pb0, .py0{padding-bottom:0}
.pb1, .py1{padding-bottom:var(--jump-size, 10px)}
.pb2, .py2{padding-bottom:calc(var(--jump-size, 10px) * 2)}
.pb3, .py3{padding-bottom:calc(var(--jump-size, 10px) * 3)}
.pb4, .py4{padding-bottom:calc(var(--jump-size, 10px) * 4)}
.pb5, .py5{padding-bottom:calc(var(--jump-size, 10px) * 5)}
.pb6, .py6{padding-bottom:calc(var(--jump-size, 10px) * 6)}
.pb7, .py7{padding-bottom:calc(var(--jump-size, 10px) * 7)}
.pb8, .py8{padding-bottom:calc(var(--jump-size, 10px) * 8)}
.pb9, .py9{padding-bottom:calc(var(--jump-size, 10px) * 9)}
.pb10, .py10{padding-bottom:calc(var(--jump-size, 10px) * 10)}
#content .pl0, .pl0, .px0{padding-left: 0}
.pl1, .px1{padding-left: var(--h-jump-size, 10px)}
.pl2, .px2{padding-left: calc(var(--jump-size, 10px) * 2)}
.pl3, .px3{padding-left: calc(var(--jump-size, 10px) * 3)}
.pl4, .px4{padding-left: calc(var(--jump-size, 10px) * 4)}
.pl5, .px5{padding-left: calc(var(--jump-size, 10px) * 5)}
#content .pr0, .pr0, .px0{padding-right: 0}
.pr1, .px1{padding-right: var(--h-jump-size, 10px)}
.pr2, .px2{padding-right: calc(var(--jump-size, 10px) * 2)}
.pr3, .px3{padding-right: calc(var(--jump-size, 10px) * 3)}
.pr4, .px4{padding-right: calc(var(--jump-size, 10px) * 4)}
.pr5, .px5{padding-right: calc(var(--jump-size, 10px) * 5)}

/* Margins - With Convention */

#content .m0{margin:0}
.mt0{margin-top:0}
.mt1{margin-top:var(--jump-size, 10px)}
.mt2{margin-top:calc(var(--jump-size, 10px) * 2)}
.mt3{margin-top:calc(var(--jump-size, 10px) * 3)}
.mt4{margin-top:calc(var(--jump-size, 10px) * 4)}
.mt5{margin-top:calc(var(--jump-size, 10px) * 5)}
.mb0,#content .mb0, #colophon .mb0{margin-bottom:0}
.mb1{margin-bottom:var(--jump-size, 10px)}
.mb2{margin-bottom:calc(var(--jump-size, 10px) * 2)}
.mb3{margin-bottom:calc(var(--jump-size, 10px) * 3)}
.mb4{margin-bottom:calc(var(--jump-size, 10px) * 4)}
.mb5{margin-bottom:calc(var(--jump-size, 10px) * 5)}
.mb6{margin-bottom:calc(var(--jump-size, 10px) * 6)}
.mb7{margin-bottom:calc(var(--jump-size, 10px) * 7)}
.mb8{margin-bottom:calc(var(--jump-size, 10px) * 8)}
.mb9{margin-bottom:calc(var(--jump-size, 10px) * 9)}
.mb10{margin-bottom:calc(var(--jump-size, 10px) * 10)}
#content .ml0, .mx0{margin-left: 0}
.ml1, .mx1{margin-left: var(--jump-size, 10px)}
.ml2, .mx2{margin-left: calc(var(--jump-size, 10px) * 2)}
.ml3, .mx3{margin-left: calc(var(--jump-size, 10px) * 3)}
.ml4, .mx4{margin-left: calc(var(--jump-size, 10px) * 4)}
.ml5, .mx5{margin-left: calc(var(--jump-size, 10px) * 5)}
#content .mr0, .mx0{margin-right: 0}
.mr1, .mx1{margin-right: var(--jump-size, 10px)}
.mr2, .mx2{margin-right: calc(var(--jump-size, 10px) * 2)}
.mr3, .mx3{margin-right: calc(var(--jump-size, 10px) * 3)}
.mr4, .mx4{margin-right: calc(var(--jump-size, 10px) * 4)}
.mr5, .mx5{margin-right: calc(var(--jump-size, 10px) * 5)}
.ml-auto, .mx-auto { margin-left: auto }
.mr-auto, .mx-auto { margin-right: auto }
.mb-auto, .my-auto {margin-bottom: auto }
.mt-auto, .my-auto {margin-top: auto }

/* 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%;
    /* box-shadow: 0px 3px 6px 0px #0000004f; */
}
.iframe-container{
    width: auto;
    position: relative;
    padding: 0
}

.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){
    /* Display */
    .md-none{display:none}
    .md-block{display: block;}
    .md-flex{display: flex;}
    .md-row-reverse{flex-direction: row-reverse;}

    #content .md-absolute{position:absolute}
    #content .md-relative{position: relative}
    #content .md-block{position: block}

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

    /* Typography */
    .md-bold, .md-h2-span{font-weight: bold}
    .md-regular{font-weight: 400}
    #content .md-medium{font-weight: 500;}
    .md-semibold{font-weight: 600;}
    .md-uppercase{text-transform: uppercase}
    .md-left-align{text-align: left}
    .md-center-align{text-align: center}
    .md-right-align{text-align: right}
    .md-justify-align{text-align: justify}

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

    /* Margins - With Convention */
    .md-m0{margin:0}
    .md-mt0{margin-top:0}
    .md-mt1{margin-top:var(--jump-size, 10px)}
    .md-mt2{margin-top:calc(var(--jump-size, 10px) * 2)}
    .md-mt3{margin-top:3calc(var(--jump-size, 10px) * 3)}
    .md-mt4{margin-top:calc(var(--jump-size, 10px) * 4)}
    .md-mt5{margin-top:calc(var(--jump-size, 10px) * 5)}
    .md-mb0{margin-bottom:0}
    .md-mb1{margin-bottom: var(--jump-size, 10px)}
    .md-mb2{margin-bottom: calc(var(--jump-size, 10px) * 2)}
    .md-mb3{margin-bottom: calc(var(--jump-size, 10px) * 3)}
    .md-mb4{margin-bottom: calc(var(--jump-size, 10px) * 4)}
    .md-mb5{margin-bottom: calc(var(--jump-size, 10px) * 5)}
    .md-mb6{margin-bottom: calc(var(--jump-size, 10px) * 6)}
    .md-mb7{margin-bottom: calc(var(--jump-size, 10px) * 7)}
    .md-mb8{margin-bottom: calc(var(--jump-size, 10px) * 8)}
    .md-mb9{margin-bottom: calc(var(--jump-size, 10px) * 9)}
    .md-mb10{margin-bottom: calc(var(--jump-size, 10px) * 10)}
    .md-ml0, .md-mx0{margin-left: 0}
    .md-ml1, .md-mx1{margin-left: var(--h-jump-size, 10px)}
    .md-ml2, .md-mx2{margin-left: calc(var(--h-jump-size, 10px) * 2)}
    .md-ml3, .md-mx3{margin-left: calc(var(--h-jump-size, 10px) * 3)}
    .md-ml4, .md-mx4{margin-left: calc(var(--h-jump-size, 10px) * 4)}
    .md-ml5, .md-mx5{margin-left: calc(var(--h-jump-size, 10px) * 5)}
    .md-mr0, .md-mx0{margin-left: 0}
    .md-mr1, .md-mx1{margin-right: var(--h-jump-size, 10px)}
    .md-mr2, .md-mx2{margin-right: calc(var(--h-jump-size, 10px) * 2)}
    .md-mr3, .md-mx3{margin-right: calc(var(--h-jump-size, 10px) * 3)}
    .md-mr4, .md-mx4{margin-right: calc(var(--h-jump-size, 10px) * 4)}
    .md-mr5, .md-mx5{margin-right: calc(var(--h-jump-size, 10px) * 5)}
    .md-ml-auto, .md-mx-auto, #content .md-mx-auto { margin-left: auto }
    .md-mr-auto, .md-mx-auto, #content .md-mx-auto { margin-right: auto }
    .md-mt-auto, .md-my-auto, #content .md-my-auto {margin-top: auto}
    .md-mb-auto, .md-my-auto, #content .md-my-auto {margin-bottom:auto}

    /* Paddings - With Convention */

    #content .md-p0 {padding:0}
    #content .md-pt0, #content .md-py0, .md-pt0, .md-py0{padding-top:0}
    #content .md-pt1, #content .md-py1, .md-pt1, .md-py1{padding-top:var(--jump-size, 10px)}
    #content .md-pt2, #content .md-py2, .md-pt2, .md-py2{padding-top:calc(var(--jump-size, 10px) * 2)}
    #content .md-pt3, #content .md-py3, .md-pt3, .md-py3{padding-top:calc(var(--jump-size, 10px) * 3)}
    #content .md-pt4, #content .md-py4, .md-pt4, .md-py4{padding-top:calc(var(--jump-size, 10px) * 4)}
    #content .md-pt5, #content .md-py5, .md-pt5, .md-py5{padding-top:calc(var(--jump-size, 10px) * 5)}
    #content .md-pt6, #content .md-py6, .md-pt6, .md-py6{padding-top:calc(var(--jump-size, 10px) * 6)}
    #content .md-pt7, #content .md-py7, .md-pt7, .md-py7{padding-top:calc(var(--jump-size, 10px) * 7)}
    #content .md-pt8, #content .md-py8, .md-pt8, .md-py8{padding-top:calc(var(--jump-size, 10px) * 8)}
    #content .md-pt9, #content .md-py9, .md-pt9, .md-py9{padding-top:calc(var(--jump-size, 10px) * 9)}
    #content .md-pt10, #content .md-py10, .md-pt10, .md-py10{padding-top:calc(var(--jump-size, 10px) * 10)}
    #content .md-pb0, #content .md-py0, .md-pb0, .md-py0{padding-bottom:0}
    #content .md-pb1, #content .md-py1, .md-pb1, .md-py1{padding-bottom:var(--jump-size, 10px)}
    #content .md-pb2, #content .md-py2, .md-pb2, .md-py2{padding-bottom:calc(var(--jump-size, 10px) * 2)}
    #content .md-pb3, #content .md-py3, .md-pb3, .md-py3{padding-bottom:calc(var(--jump-size, 10px) * 3)}
    #content .md-pb4, #content .md-py4, .md-pb4, .md-py4{padding-bottom:calc(var(--jump-size, 10px) * 4)}
    #content .md-pb5, #content .md-py5, .md-pb5, .md-py5{padding-bottom:calc(var(--jump-size, 10px) * 5)}
    #content .md-pb6, #content .md-py6, .md-pb6, .md-py6{padding-bottom:calc(var(--jump-size, 10px) * 6)}
    #content .md-pb7, #content .md-py7, .md-pb7, .md-py7{padding-bottom:calc(var(--jump-size, 10px) * 7)}
    #content .md-pb8, #content .md-py8, .md-pb8, .md-py8{padding-bottom:calc(var(--jump-size, 10px) * 8)}
    #content .md-pb9, #content .md-py9, .md-pb9, .md-py9{padding-bottom:calc(var(--jump-size, 10px) * 9)}
    #content .md-pb10, #content .md-py10, .md-pb10, .md-py10{padding-bottom:calc(var(--jump-size, 10px) * 10)}
    #content .md-pl0, #content .md-px0, .md-pl0,  .md-px0{padding-left: 0}
    #content .md-pl1, #content .md-px1, .md-pl1, .md-px1{padding-left: var(--h-jump-size, 10px)}
    #content .md-pl2, #content .md-px2, .md-pl2, .md-px2{padding-left: calc(var(--h-jump-size, 10px) * 2)}
    #content .md-pl3, #content .md-px3, .md-pl3, .md-px3{padding-left: calc(var(--h-jump-size, 10px) * 3)}
    #content .md-pl4, #content .md-px4, .md-pl4, .md-px4{padding-left: calc(var(--h-jump-size, 10px) * 4)}
    #content .md-pl5, #content .md-px5, .md-pl5, .md-px5{padding-left: calc(var(--h-jump-size, 10px) * 5)}
    #content .md-pr0, #content .md-px0, .md-pr0, .md-px0{padding-right: 0}
    #content .md-pr1, #content .md-px1, .md-pr1, .md-px1{padding-right: var(--h-jump-size, 10px)}
    #content .md-pr2, #content .md-px2, .md-pr2, .md-px2{padding-right: calc(var(--h-jump-size, 10px) * 2)}
    #content .md-pr3, #content .md-px3, .md-pr3, .md-px3{padding-right: calc(var(--h-jump-size, 10px) * 3)}
    #content .md-pr4, #content .md-px4, .md-pr4, .md-px4{padding-right: calc(var(--h-jump-size, 10px) * 4)}
    #content .md-pr5, #content .md-px5, .md-pr5, .md-px5{padding-right: calc(var(--h-jump-size, 10px) * 5)}

    /* 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: 1024px){
    /* Display */ 
    .lg-block{display: block;}
    .lg-flex{display: flex;}
    .lg-flex.column{flex-direction: column;}
    .lg-none{display: none;}
    .lg-absolute{position: absolute}
    .lg-row-reverse{flex-direction: row-reverse;}

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

    /* width & height */
    .lg-h-100{ height: 100% }
    .lg-h-auto{ height: auto }
    .lg-w-100{width: 100%}
    .lg-w-auto{width: auto}

    /* Typography */
    .lg-bold, .lg-h2-span{font-weight: bold}
    .lg-regular{font-weight: 400}
    #content .lg-medium{font-weight: 500;}
    .lg-semibold{font-weight: 600;}
    .gl-uppercase{text-transform: uppercase}
    .lg-left-align{text-align: left}
    .lg-center-align{text-align: center}
    .lg-right-align{text-align: right}
    .lg-justify-align{text-align: justify}

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

    /* Margins - With Convention */
    .lg-m0{margin:0}
    .lg-mt0{margin-top:0}
    .lg-mt1{margin-top:var(--jump-size, 10px)}
    .lg-mt2{margin-top:calc(var(--jump-size, 10px) * 2)}
    .lg-mt3{margin-top:3calc(var(--jump-size, 10px) * 3)}
    .lg-mt4{margin-top:calc(var(--jump-size, 10px) * 4)}
    .lg-mt5{margin-top:calc(var(--jump-size, 10px) * 5)}
    .lg-mb0{margin-bottom:0}
    .lg-mb1{margin-bottom:var(--jump-size, 10px)}
    .lg-mb2, #content .lg-mb2{margin-bottom:calc(var(--jump-size, 10px) * 2)}
    .lg-mb3{margin-bottom:calc(var(--jump-size, 10px) * 3)}
    .lg-mb4{margin-bottom:calc(var(--jump-size, 10px) * 4)}
    .lg-mb5{margin-bottom: calc(var(--jump-size, 10px) * 5)}
    .lg-mb6{margin-bottom: calc(var(--jump-size, 10px) * 6)}
    .lg-mb7{margin-bottom: calc(var(--jump-size, 10px) * 7)}
    .lg-mb8{margin-bottom: calc(var(--jump-size, 10px) * 8)}
    .lg-mb9{margin-bottom: calc(var(--jump-size, 10px) * 9)}
    .lg-mb10{margin-bottom: calc(var(--jump-size, 10px) * 10)}
    .lg-ml0{margin-left: 0}
    .lg-ml1{margin-left: var(--h-jump-size, 10px)}
    .lg-ml2{margin-left: calc(var(--h-jump-size, 10px) * 2)}
    .lg-ml3{margin-left: calc(var(--h-jump-size, 10px) * 3)}
    .lg-ml4{margin-left: calc(var(--h-jump-size, 10px) * 4)}
    .lg-ml5{margin-left: calc(var(--h-jump-size, 10px) * 5)}
    .lg-mr0{margin-right: 0}
    .lg-mr1{margin-right: var(--h-jump-size, 10px)}
    .lg-mr2{margin-right: calc(var(--h-jump-size, 10px) * 2)}
    .lg-mr3{margin-right: calc(var(--h-jump-size, 10px) * 3)}
    .lg-mr4{margin-right: calc(var(--h-jump-size, 10px) * 4)}
    .lg-mr5{margin-right: calc(var(--h-jump-size, 10px) * 5)}
    
    .lg-ml-auto, .lg-mx-auto {margin-left: auto}
    .lg-mr-auto, .lg-mx-auto {margin-right: auto}
    .lg-mt-auto, .lg-my-auto {margin-top: auto}
    .lg-mb-auto, .lg-my-auto {margin-bottom: auto}

    /* Paddings - With Convention */

    #content .lg-p0 {padding:0}
    #content .lg-pt0, #content .lg-py0, .lg-py0, #colophon .lg-py0{padding-top:0}
    .lg-pt1{padding-top:var(--jump-size, 10px)}
    .lg-pt2{padding-top:calc(var(--jump-size, 10px) * 2)}
    .lg-pt3{padding-top:calc(var(--jump-size, 10px) * 3)}
    .lg-pt4{padding-top:calc(var(--jump-size, 10px) * 4)}
    .lg-pt5{padding-top:calc(var(--jump-size, 10px) * 5)}
    .lg-pt6{padding-top:calc(var(--jump-size, 10px) * 6)}
    .lg-pt7{padding-top:calc(var(--jump-size, 10px) * 7)}
    .lg-pt8{padding-top:calc(var(--jump-size, 10px) * 8)}
    .lg-pt9{padding-top:calc(var(--jump-size, 10px) * 9)}
    .lg-pt10{padding-top:calc(var(--jump-size, 10px) * 10)}
    .lg-pb0, .lg-py0, #colophon .lg-py0{padding-bottom:0}
    .lg-pb1{padding-bottom:var(--jump-size, 10px)}
    .lg-pb2{padding-bottom:calc(var(--jump-size, 10px) * 2)}
    .lg-pb3{padding-bottom:calc(var(--jump-size, 10px) * 3)}
    .lg-pb4{padding-bottom:calc(var(--jump-size, 10px) * 4)}
    .lg-pb5{padding-bottom:calc(var(--jump-size, 10px) * 5)}
    .lg-pb6{padding-bottom:calc(var(--jump-size, 10px) * 6)}
    .lg-pb7{padding-bottom:calc(var(--jump-size, 10px) * 7)}
    .lg-pb8{padding-bottom:calc(var(--jump-size, 10px) * 8)}
    .lg-pb9{padding-bottom:calc(var(--jump-size, 10px) * 9)}
    .lg-pb10{padding-bottom:calc(var(--jump-size, 10px) * 10)}
    .lg-pl0, .lg-px0, #content .lg-px0{padding-left: 0}
    .lg-pl1, .lg-px1, #content .lg-px1{padding-left: var(--h-jump-size, 10px)}
    .lg-pl2, .lg-px2, #content .lg-px2{padding-left: calc(var(--h-jump-size, 10px) * 2)}
    .lg-pl3, .lg-px3, #content .lg-px3{padding-left: calc(var(--h-jump-size, 10px) * 3)}
    .lg-pl4, .lg-px4, #content .lg-px4{padding-left: calc(var(--h-jump-size, 10px) * 4)}
    .lg-pl5, .lg-px5, #content .lg-px5{padding-left: calc(var(--h-jump-size, 10px) * 5)}
    #content .lg-pr0, .lg-pr0, .lg-px0, #content .lg-px0, #colophon .lg-pr0{padding-right: 0}
    .lg-pr1, .lg-px1, #content .lg-px1{padding-right: var(--h-jump-size, 10px)}
    .lg-pr2, .lg-px2, #content .lg-px2{padding-right: calc(var(--h-jump-size, 10px) * 2)}
    .lg-pr3, .lg-px3, #content .lg-px3{padding-right: calc(var(--h-jump-size, 10px) * 3)}
    .lg-pr4, .lg-px4, #content .lg-px4{padding-right: calc(var(--h-jump-size, 10px) * 4)}
    .lg-pr5, .lg-px5, #content .lg-px5{padding-right: calc(var(--h-jump-size, 10px) * 5)}

    /* 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: 1440px){
    /* Font-sizes */
    #content .xl-thin, #colophon .xl--thin{font-weight: 100}
    #content .xl-extra-light, #colophon .xl-extra-light{font-weight: 200}
    #content .xl-light, #colophon .xl-light{font-weight: 300}
    #content .xl-regular, #colophon .xl-regular{font-weight: 400}
    #content .xl-medium, #colophon .xl-medium{font-weight: 500;}
    #content .xl-semibold, #colophon .xl-semibold{font-weight: 600;}
    #content .xl-bold, #colophon .xl-bold{font-weight: 700}

    /* font-align and styles */
    .xl-uppercase{text-transform: uppercase}
    .xl-left-align{text-align: left}
    .xl-center-align{text-align: center}
    .xl-right-align{text-align: right}
    .xl-justify-align{text-align: justify}
    .xl-underline{text-decoration: underline;}
    .xl-italic{font-style: italic;}

    /* Display */ 
    #content .xl-block, .xl-block{display: block;}
    #content .xl-flex, .xl-flex{display: flex;}
    #content .xl-none, .xl-none{display: none;}
    #content .xl-inline-block, .inline-block{display: inline-block}

    /* width & height */
    .xl-h-100{ height: 100% }
    .xl-h-auto{ height: auto }
    .xl-w-100{height: 100%}
    .xl-w-auto{width: auto}

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

    #content .xl-absolute{position:absolute}
    #content .xl-relative{position: relative}
    #content .xl-block{position: block}
    #content .xl-static{position: static}

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

    /* Margins - With Convention */
    .xl-m0{margin:0}
    .xl-mt0{margin-top:0}
    .xl-mt1{margin-top:var(--jump-size, 10px)}
    .xl-mt2{margin-top:calc(var(--jump-size, 10px) * 2)}
    .xl-mt3{margin-top:3calc(var(--jump-size, 10px) * 3)}
    .xl-mt4{margin-top:calc(var(--jump-size, 10px) * 4)}
    .xl-mt5{margin-top:calc(var(--jump-size, 10px) * 5)}
    .xl-mb0{margin-bottom:0}
    .xl-mb1{margin-bottom:var(--jump-size, 10px)}
    .xl-mb2{margin-bottom:calc(var(--jump-size, 10px) * 2)}
    .xl-mb3{margin-bottom:calc(var(--jump-size, 10px) * 3)}
    .xl-mb4{margin-bottom:calc(var(--jump-size, 10px) * 4)}
    .xl-mb5{margin-bottom: calc(var(--jump-size, 10px) * 5)}
    .xl-mb6{margin-bottom: calc(var(--jump-size, 10px) * 6)}
    .xl-mb7{margin-bottom: calc(var(--jump-size, 10px) * 7)}
    .xl-mb8{margin-bottom: calc(var(--jump-size, 10px) * 8)}
    .xl-mb9{margin-bottom: calc(var(--jump-size, 10px) * 9)}
    .xl-mb10{margin-bottom: calc(var(--jump-size, 10px) * 10)}
    .xl-ml0{margin-left: 0}
    .xl-ml1{margin-left: var(--h-jump-size, 10px)}
    .xl-ml2{margin-left: calc(var(--h-jump-size, 10px) * 2)}
    .xl-ml3{margin-left: calc(var(--h-jump-size, 10px) * 3)}
    .xl-ml4{margin-left: calc(var(--h-jump-size, 10px) * 4)}
    .xl-ml5{margin-left: calc(var(--h-jump-size, 10px) * 5)}
    .xl-mr0{margin-right: 0}
    .xl-mr1{margin-right: var(--h-jump-size, 10px)}
    .xl-mr2{margin-right: calc(var(--h-jump-size, 10px) * 2)}
    .xl-mr3{margin-right: calc(var(--h-jump-size, 10px) * 3)}
    .xl-mr4{margin-right: calc(var(--h-jump-size, 10px) * 4)}
    .xl-mr5{margin-right: calc(var(--h-jump-size, 10px) * 5)}
    .xl-ml-auto, .xl-mx-auto {margin-left: auto}
    .xl-mr-auto, .xl-mx-auto {margin-right: auto}
    .xl-mt-auto, .xl-my-auto {margin-top: auto}
    .xl-mb-auto, .xl-my-auto {margin-bottom:auto}

    /* Paddings - With Convention */

    #content .xl-p0 {padding:0}
    #content .xl-pt0, #content .xl-py0{padding-top:0}
    .xl-pt1, #content .xl-py1{padding-top:var(--jump-size, 10px)}
    .xl-pt2, #content .xl-py2{padding-top:calc(var(--jump-size, 10px) * 2)}
    .xl-pt3, #content .xl-py3{padding-top:calc(var(--jump-size, 10px) * 3)}
    .xl-pt4, #content .xl-py4{padding-top:calc(var(--jump-size, 10px) * 4)}
    .xl-pt5, #content .xl-py5{padding-top:calc(var(--jump-size, 10px) * 5)}
    .xl-pt6, #content .xl-py6{padding-top:calc(var(--jump-size, 10px) * 6)}
    #content .xl-pt8, #content .xl-py8{padding-top:calc(var(--jump-size, 10px) * 8)}
    .xl-pb0, #content .xl-py0{padding-bottom:0}
    .xl-pb1, #content .xl-py1{padding-bottom:var(--jump-size, 10px)}
    .xl-pb2, #content .xl-py2{padding-bottom:calc(var(--jump-size, 10px) * 2)}
    .xl-pb3, #content .xl-py3{padding-bottom:calc(var(--jump-size, 10px) * 3)}
    .xl-pb4, #content .xl-py4{padding-bottom:calc(var(--jump-size, 10px) * 4)}
    .xl-pb5, #content .xl-py5{padding-bottom:calc(var(--jump-size, 10px) * 5)}
    .xl-pb6, #content .xl-py6{padding-bottom:calc(var(--jump-size, 10px) * 6)}
    .xl-pl0, #content .xl-px0, .xl-px0{padding-left: 0}
    .xl-pl1, #content .xl-px1, .xl-px1{padding-left: var(--h-jump-size, 10px)}
    .xl-pl2, #content .xl-px2, .xl-px2{padding-left: calc(var(--h-jump-size, 10px) * 2)}
    .xl-pl3, #content .xl-px3, .xl-px3{padding-left: calc(var(--h-jump-size, 10px) * 3)}
    .xl-pl4, #content .xl-px4, .xl-px4{padding-left: calc(var(--h-jump-size, 10px) * 4)}
    .xl-pl5, #content .xl-px5, .xl-px5{padding-left: calc(var(--h-jump-size, 10px) * 5)}
    #content .xl-pr0, .xl-pr0, #content .xl-px0, .xl-px0{padding-right: 0}
    .xl-pr1, #content .xl-px1, .xl-px1{padding-right: var(--h-jump-size, 10px)}
    #content .xl-pr2, .xl-pr2, .xl-px2{padding-right: calc(var(--h-jump-size, 10px) * 2)}
    .xl-pr3, #content .xl-px3, .xl-px3{padding-right: calc(var(--h-jump-size, 10px) * 3)}
    .xl-pr4, #content .xl-px4, .xl-px4{padding-right: calc(var(--h-jump-size, 10px) * 4)}
    .xl-pr5, #content .xl-px5, .xl-px5{padding-right: calc(var(--h-jump-size, 10px) * 5)}

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

    /* section > .container, #content .container, footer .container,
    section > .md-container, #content .md-container,
    section > .lg-container, #content .lg-container,
    section > .xl-container, #content .xl-container{
        max-width: var(--xl-container, 1120px);
    } */
    #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)
    }
}