/* VAR */

:root{
    --light: white;
    --dark: #434342;
    --accent: #dcc05e;
    --color-1: #f9f9f9;
    --color-2: #7f7f7f;
    --color-3: #f9f9f9;
    --color-4: #acb6be;
    --jump-size: 10px; /* only for vertical spacing */
    --fa-li-width: 48px;
    --fa-li-margin: 40px;
    --s-section-top-padding: 48px;
    --md-section-top-padding: 80px;
    --lg-section-top-padding: 80px;
    --xl-section-top-padding: 120px;
    --s-section-bottom-padding: 24px;
    --md-section-bottom-padding: 48px;
    --lg-section-bottom-padding: 80px;
    --xl-section-bottom-padding: 80px;
    --s-lateral-padding: 6vw;
    --md-lateral-padding: 6vw;
    --lg-lateral-padding: 4vw;
    --xl-lateral-padding: 7.5vw;
    --sm-container: 350px;
    --md-container: 708px;
    --lg-container: 998px;
    --xl-container: 1340px;
}

/* Font-sizes */
#content .thin, #colophon .thin{font-weight: 100}
#content .extra-light, #colophon .extra-light{font-weight: 200}
#content .light, #colophon .light{font-weight: 300}
#content .regular, #colophon .regular{font-weight: 400}
#content .medium, #colophon .medium{font-weight: 500;}
#content .semibold, #colophon .semibold{font-weight: 600;}
#content .bold, #colophon .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}
.justify-align{text-align: justify}
.underline{text-decoration: underline;}
.italic{font-style: italic;}

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


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

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

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

/* 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, #content .pt0, #content .py0{padding-top:0}
.pt1, .py1, #content .pt1, #content .py1{padding-top:var(--jump-size, 10px)}
.pt2, .py2, #content .pt2, #content .py2{padding-top:calc(var(--jump-size, 10px) * 2)}
.pt3, .py3, #content .pt3, #content .py3{padding-top:calc(var(--jump-size, 10px) * 3)}
.pt4, .py4, #content .pt4, #content .py4{padding-top:calc(var(--jump-size, 10px) * 4)}
.pt5, .py5, #content .pt5, #content .py5{padding-top: calc(var(--jump-size, 10px) * 5)}
.pt6, .py6, #content .pt6, #content .py6{padding-top: calc(var(--jump-size, 10px) * 6)}
.pt10{padding-top: calc(var(--jump-size, 10px) * 10)}
.pb0, .py0, #content .pb0, #content .py0{padding-bottom:0}
.pb1, .py1, #content .pb1, #content .py1{padding-bottom:var(--jump-size, 10px)}
.pb2, .py2, #content .pb2, #content .py2{padding-bottom:calc(var(--jump-size, 10px) * 2)}
.pb3, .py3, #content .pb3, #content .py3{padding-bottom:calc(var(--jump-size, 10px) * 3)}
.pb4, .py4, #content .pb4, #content .py4{padding-bottom:calc(var(--jump-size, 10px) * 4)}
.pb5, .py5, #content .pb5, #content .py5{padding-bottom:calc(var(--jump-size, 10px) * 5)}
#content .pl0, .px0, #content .px0{padding-left: 0}
.pl1, .px1{padding-left:10px}
.pl2, .px2{padding-left:20px}
.pl3, .px3{padding-left:30px}
.pl4, .px6{padding-left:40px}
.pl5, .px6{padding-left:30px}
.pl6, .px6{padding-left:40px}
#content .pr0, .px0, #content .px0{padding-right: 0}
.pr1, .px1{padding-right:10px}
.pr2, .px2{padding-right:20px}
.pr3, .px3{padding-right:30px}
.pr4, .px4{padding-right:40px}

/* 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)}
.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{margin-left:0}
.ml1, .mx1{margin-left:10px}
.ml2, .mx2{margin-left:20px}
.ml3, .mx3{margin-left:30px}
.ml4, .mx4{margin-left:40px}
.mr1, .mx1{margin-right:10px}
.mr2, .mx2{margin-right:20px}
.mr3, .mx3{margin-right:30px}
.mr4, .mx4{margin-right:40px}
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-auto, .my-auto { margin-top: auto; }
.mb-auto, .my-auto { margin-bottom: auto;}

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

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

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


/* CSS Grid */
section > .row.grid, .grid{    
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(6, 1fr);
    column-gap: 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{
    padding-top: var(--s-section-top-padding, 48px);
    padding-bottom: var(--s-section-bottom-padding, 24px)
}

section > .row:not([class^="container"]), .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
}
.iframe-container > img{box-shadow: 0px 3px 6px 0px #0000004f}
.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 1023 */
/* Prefix: md- */
@media screen and (min-width: 768px){

    /* Font-sizes */
    #content .md-thin, #colophon .md-thin{font-weight: 100}
    #content .md-extra-light, #colophon .md-extra-light{font-weight: 200}
    #content .md-light, #colophon .md-light{font-weight: 300}
    #content .md-regular, #colophon .md-regular{font-weight: 400}
    #content .md-medium, #colophon .md-medium{font-weight: 500;}
    #content .md-semibold, #colophon .md-semibold{font-weight: 600;}
    #content .md-bold, #colophon .md-bold{font-weight: 700}

    /* font-align and styles */
    .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}
    .md-underline{text-decoration: underline;}
    .md-italic{font-style: italic;}

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

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

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

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

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

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

    .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{margin-left:0}
    .md-ml1{margin-left:10px}
    .md-ml2{margin-left:20px}
    .md-mr0{margin-right:0}
    .md-mr1{margin-right:10px}
    .md-mr2{margin-right:20px}
    .md-ml-auto { margin-left: auto }
    .md-mr-auto { margin-right: auto }
    .md-mt-auto {margin-top: auto}
    .md-mx-auto { margin-left: auto; margin-right: auto; }
    .md-my-auto {margin-top:auto; margin-bottom:auto}

    /* Paddings - With Convention */

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

    /* CSS GRID */
    section > .md-grid, footer .md-grid, .md-grid{    
        display: grid;
        grid-template-rows: repeat(1, 1fr);
        grid-template-columns: repeat(12, 1fr);
        column-gap: 20px 
    }
    .md-grid > .md-col-12, .md-grid > .col-12 {flex: unset; width: unset; grid-column: auto/span 12}
    .md-grid > .md-col-11, .md-grid > .col-11 {flex: unset; width: unset; grid-column: auto/span 11}
    .md-grid > .md-col-10, .md-grid > .col-10 {flex: unset; width: unset; grid-column: auto/span 10}
    .md-grid > .md-col-9, .md-grid > .col-9 {flex: unset; width: unset;grid-column: auto/span 9}
    .md-grid > .md-col-8, .md-grid > .col-8 {flex: unset; width: unset; grid-column: auto/span 8}
    .md-grid > .md-col-7, .md-grid > .col-7 {flex: unset; width: unset; grid-column: auto/span 7}
    .md-grid > .md-col-6, .md-grid > .col-6 {flex: unset; width: unset; grid-column: auto/span 6}
    .md-grid > .md-col-5, .md-grid > .col-5 {flex: unset; width: unset; grid-column: auto/span 5}
    .md-grid > .md-col-4, .md-grid > .col-4 {flex: unset; width: unset; grid-column: auto/span 4}
    .md-grid > .md-col-3, .md-grid > .col-3 {flex: unset; width: unset; grid-column: auto/span 3}
    .md-grid > .md-col-2, .md-grid > .col-2{ flex: unset; width: unset; grid-column: auto/span 2}
    .md-grid > .md-col-1, .md-grid > .col-1{ flex: unset; width: unset; grid-column: auto/span 1}
    .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{
        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%
    }

    

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

/* Devices larger than 1024px up to 1440 */
/* Prefix: lg- */
@media screen and (min-width: 1024px){
    /* Font-sizes */
    #content .lg-thin, #colophon .lg-thin{font-weight: 100}
    #content .lg-extra-light, #colophon .lg-extra-light{font-weight: 200}
    #content .lg-light, #colophon .lg-light{font-weight: 300}
    #content .lg-regular, #colophon .lg-regular{font-weight: 400}
    #content .lg-medium, #colophon .lg-medium{font-weight: 500;}
    #content .lg-semibold, #colophon .lg-semibold{font-weight: 600;}
    #content .lg-bold, #colophon .lg-bold{font-weight: 700}

    /* font-align and styles */
    .lg-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}
    .lg-underline{text-decoration: underline;}
    .lg-italic{font-style: italic;}

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

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

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

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

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

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

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

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

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

    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*="grid-reverse"] > div[class*="col"]:last-child {order: 1;}

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

    /* 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{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:10px}
    .lg-ml2{margin-left:20px}
    .lg-mr0{margin-right:0}
    .lg-mr1{margin-right:10px}
    .lg-mr2{margin-right:20px}
    .lg-ml-auto { margin-left: auto }
    .lg-mr-auto { margin-right: auto }
    .lg-mt-auto {margin-top: auto}
    .lg-mx-auto { margin-left: auto; margin-right: auto; }
    .lg-my-auto {margin-top:auto; margin-bottom:auto}

    /* Paddings - With Convention */
    

    #content .lg-p0 {padding:0}
    #content .lg-pt0, #content .lg-pt0, #content .lg-py0{padding-top:0}
    .lg-pt1, .lg-py1, #content .lg-pt1, #content .lg-py1{padding-top:var(--jump-size, 10px)}
    .lg-pt2, .lg-py2, #content .lg-pt2, #content .lg-py2{padding-top:calc(var(--jump-size, 10px) * 2)}
    .lg-pt3, .lg-py3, #content .lg-pt3, #content .lg-py3{padding-top:calc(var(--jump-size, 10px) * 3)}
    .lg-pt4, .lg-py4, #content .lg-pt4, #content .lg-py4{padding-top:calc(var(--jump-size, 10px) * 4)}
    .lg-pt5, .lg-py5, #content .lg-pt5, #content .lg-py5{padding-top:calc(var(--jump-size, 10px) * 5)}
    .lg-pt6, .lg-py6, #content .lg-pt6, #content .lg-py6{padding-top:calc(var(--jump-size, 10px) * 6)}
    .lg-pt7, .lg-py7, #content .lg-pt7, #content .lg-py7{padding-top:calc(var(--jump-size, 10px) * 7)}
    .lg-pt8, .lg-py8, #content .lg-pt8, #content .lg-py8{padding-top:calc(var(--jump-size, 10px) * 8)}
    .lg-pt9, .lg-py9, #content .lg-pt9, #content .lg-py9{padding-top:calc(var(--jump-size, 10px) * 9)}
    .lg-pt10, .lg-py10, #content .lg-pt10, #content .lg-py10{padding-top:calc(var(--jump-size, 10px) * 10)}
    .lg-pb0, .lg-py0, #content .lg-pb0, #content .lg-py0{padding-bottom:0}
    .lg-pb1, .lg-py1, #content .lg-pb1, #content .lg-py1{padding-bottom:var(--jump-size, 10px)}
    .lg-pb2, .lg-py2, #content .lg-pb2, #content .lg-py2{padding-bottom:calc(var(--jump-size, 10px) * 2)}
    .lg-pb3, .lg-py3, #content .lg-pb3, #content .lg-py3{padding-bottom:calc(var(--jump-size, 10px) * 3)}
    .lg-pb4, .lg-py4, #content .lg-pb4, #content .lg-py4{padding-bottom:calc(var(--jump-size, 10px) * 4)}
    .lg-pb5, .lg-py5, #content .lg-pb5, #content .lg-py5{padding-bottom:calc(var(--jump-size, 10px) * 5)}
    .lg-pb6, .lg-py6, #content .lg-pb6, #content .lg-py6{padding-bottom:calc(var(--jump-size, 10px) * 6)}
    .lg-pb7, .lg-py7, #content .lg-pb7, #content .lg-py7{padding-bottom:calc(var(--jump-size, 10px) * 7)}
    .lg-pb8, .lg-py8, #content .lg-pb8, #content .lg-py8{padding-bottom:calc(var(--jump-size, 10px) * 8)}
    .lg-pb9, .lg-py9, #content .lg-pb9, #content .lg-py9{padding-bottom:calc(var(--jump-size, 10px) * 9)}
    .lg-pb10, .lg-py10, #content .lg-pb10, #content .lg-py10{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:10px}
    .lg-pl2, .lg-px2, #content .lg-px2{padding-left:20px}
    .lg-pl3, .lg-px3, #content .lg-px3{padding-left:30px}
    .lg-pl4, #content .lg-pl4, .lg-px4, #content .lg-px4{padding-left:40px}
    .lg-pl5, .lg-px5, #content .lg-px5{padding-left:50px}
    .lg-pl6, .lg-px6, #content .lg-px6{padding-left:60px}
    .lg-pl7, .lg-px7, #content .lg-px7{padding-left:70px}
    .lg-pl8, .lg-px8, #content .lg-px8{padding-left:80px}
    .lg-pr0, .lg-px0, #content .lg-px0{padding-right: 0}
    .lg-pr1, .lg-px1, #content .lg-px1{padding-right:10px}
    .lg-pr2, .lg-px2, #content .lg-px2{padding-right:20px}
    .lg-pr3, .lg-px3, #content .lg-px3{padding-right:30px}
    .lg-pr4, #content .lg-pr4, .lg-px4, #content .lg-px4{padding-right:40px}
    .lg-pr5, .lg-px5, #content .lg-px5{padding-right:50px}
    .lg-pr6, .lg-px6, #content .lg-px6{padding-right:60px}
    .lg-pr7, .lg-px7, #content .lg-px7{padding-right:70px}
    .lg-pr8, .lg-px8, #content .lg-px8{padding-right: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);
    }
    #content .lg-container-fluid{
        max-width: 100%;
        width: 100%
    }

    


}

/* Devices largen than 1440 up to 1920 */
/* Prefix: xl- */
@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-h-fit { height: fit-content }

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

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

    

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

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

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

    /* 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:10px}
    .xl-ml2{margin-left:20px}
    .xl-mr0{margin-right:0}
    .xl-mr1{margin-right:10px}
    .xl-mr2{margin-right:20px}
    .xl-ml-auto { margin-left: auto }
    .xl-mr-auto { margin-right: auto }
    .xl-mt-auto {margin-top: auto}
    .xl-mx-auto { margin-left: auto; margin-right: auto; }
    .xl-my-auto {margin-top: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)}
    .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, .xl-px0, #content .xl-px0{padding-left: 0}
    .xl-pl1, .xl-px1, #content .xl-px1{padding-left:10px}
    .xl-pl2, .xl-px2, #content .xl-px2{padding-left:20px}
    .xl-pl3, .xl-px3, #content .xl-px3{padding-left:30px}
    .xl-pl4, #content .xl-pl4, .xl-px4, #content .xl-px4{padding-left:40px}
    .xl-pl5, .xl-px5, #content .xl-px5{padding-left:50px}
    .xl-pl6, .xl-px6, #content .xl-px6{padding-left:60px}
    .xl-pl7, .xl-px7, #content .xl-px7{padding-left:70px}
    .xl-pl8, .xl-px8, #content .xl-px8{padding-left:80px}
    .xl-pr0, .xl-px0, #content .xl-px0{padding-right: 0}
    .xl-pr1, .xl-px1, #content .xl-px1{padding-right:10px}
    .xl-pr2, .xl-px2, #content .xl-px2{padding-right:20px}
    .xl-pr3, .xl-px3, #content .xl-px3{padding-right:30px}
    .xl-pr4, #content .xl-pr4, .xl-px4, #content .xl-px4{padding-right:40px}
    .xl-pr5, .xl-px5, #content .xl-px5{padding-right:50px}
    .xl-pr6, .xl-px6, #content .xl-px6{padding-right:60px}
    .xl-pr7, .xl-px7, #content .xl-px7{padding-right:70px}
    .xl-pr8, .xl-px8, #content .xl-px8{padding-right:80px}

    

    

    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 {
        padding-right: var(--xl-column-padding, 20px);
        padding-left: var(--xl-column-padding, 20px)
    } */
}

/* Devices largen than 1980px */
/* Prefix: xxl- */
@media screen and (min-width: 1921px){
    #page{background-color: var(--color-1)}
    #content, footer#colophon > div, body #page header {
        max-width: 1920px;
        width: 100%;
        margin: 0 auto;
    }
    #content{ background-color: var(--light);}
    section > .row, section > .row.xl-normal-padding {padding-left: 17.18%; padding-right: 17.18%;}
    div[class*="floating-right lg-col-"] {padding-right: 17.18%}
    div[class*="floating-left lg-col-"] {padding-left: 17.18vw}
}
.only-numbers{
	text-align: center;
}