/* #region - background */
.bg-primary {
    background-color: var(--color1);
}
.bg-primary-light {
    background-color: var(--color1-light);
}
.bg-primary-dark {
    background-color: var(--color1-dark);
}

.bg-secondary {
    background-color: var(--color2);
}
.bg-secondary-light {
    background-color: var(--color2-light);
}
.bg-secondary-dark {
    background-color: var(--color2-dark);
}

.bg-tertiary {
    background-color: var(--color3);
}
.bg-tertiary-light {
    background-color: var(--color3-light);
}
.bg-tertiary-dark {
    background-color: var(--color3-dark);
}

/* #endregion - background */


/* #region - Display */
.d-none {
    display: none;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

/* #endregion - Display */


/* #region - Flex */
.flexCenter {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;

    justify-content: center;
    align-items: center;
}

.rowFlex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;

    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.rowFlexPx {
    padding: 0px 15px;
}

.d-flex {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
}

.flex-wrap {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
}

.flex-1 {
    flex: 1;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-column {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}


.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: end;
}

.justify-center {
    justify-content: center;
}

.align-center {
    align-items: center;
}

.align-end {
    align-items: end;
}

.align-baseline {
    align-items: baseline;
}

.gap-auto {
    gap: auto;
}
.gap-1 {
    gap: .25rem;
}
.gap-2 {
    gap: .5rem;
}
.gap-3 {
    gap: 1rem;
}
.gap-4 {
    gap: 1.5rem;
}
.gap-5 {
    gap: 3rem;
}

/* #endregion - Flex */


/* #region - Position */
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.position-sticky {
    position: sticky;
}

.position-unset {
    position: unset;
}

/* #endregion - Position */


/* #region - Spacing */

/* #region - Margin */
    .m-auto {
        margin: auto;
    }
    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }
    .my-auto {
        margin-top: auto;
        margin-bottom: auto;
    }


    .m-0 {
        margin: 0!important;
    }

    .my-1 {
        margin: 1rem 0!important;
    }
    .my-2 {
        margin: 2rem 0!important;
    }
    .my-3 {
        margin: 3rem 0!important;
    }
    .my-4 {
        margin: 4rem 0!important;
    }

    .mt-0 {
        margin-top: 0!important;
    }
    .mt-1 {
        margin-top: 1rem!important;
    }
    .mt-2 {
        margin-top: 2rem!important;
    }
    .mt-3 {
        margin-top: 3rem!important;
    }
    .mt-4 {
        margin-top: 4rem!important;
    }

    .mb-0 {
        margin-bottom: 0!important;
    }
    .mb-1 {
        margin-bottom: 1rem!important;
    }
    .mb-2 {
        margin-bottom: 2rem!important;
    }
    .mb-3 {
        margin-bottom: 3rem!important;
    }
    .mb-4 {
        margin-bottom: 4rem!important;
    }

    .ms-0 {
        margin-left: 0!important;
    }
    .ms-1 {
        margin-left: 1rem;
    }
    .ms-2 {
        margin-left: 2rem;
    }
    .ms-3 {
        margin-left: 3rem;
    }
    .ms-4 {
        margin-left: 4rem;
    }

    .me-0 {
        margin-right: 0rem;
    }
    .me-1 {
        margin-right: 1rem;
    }
    .me-2 {
        margin-right: 2rem;
    }
    .me-3 {
        margin-right: 3rem;
    }
    .me-4 {
        margin-right: 4rem;
    }

    .scroll-mt-1 {
        scroll-margin-top: 1rem;
    }
    .scroll-mt-2 {
        scroll-margin-top: 2rem;
    }
    .scroll-mt-3 {
        scroll-margin-top: 3rem;
    }
    .scroll-mt-4 {
        scroll-margin-top: 4rem;
    }
    .scroll-mt-5 {
        scroll-margin-top: 5rem;
    }
/* #endregion - Margin */


/* #region - Padding */
    .p-0 {
        padding: 0;
    }


    .py-0 {
        padding: 0 0;
    }
    .py-1 {
        padding: 1rem 0;
    }
    .py-2 {
        padding: 2rem 0;
    }
    .py-3 {
        padding: 3rem 0;
    }
    .py-4 {
        padding: 4rem 0;
    }

    .pt-0 {
        padding-top: 0;
    }
    .pt-1 {
        padding-top: 1rem;
    }
    .pt-2 {
        padding-top: 2rem;
    }
    .pt-3 {
        padding-top: 3rem;
    }
    .pt-4 {
        padding-top: 4rem;
    }

    .pb-0 {
        padding-bottom: 0;
    }
    .pb-1 {
        padding-bottom: 1rem;
    }
    .pb-2 {
        padding-bottom: 2rem;
    }
    .pb-3 {
        padding-bottom: 3rem;
    }
    .pb-4 {
        padding-bottom: 4rem;
    }

    .ps-0 {
        padding-left: 0;
    }
    .ps-1 {
        padding-left: 1rem;
    }
    .ps-2 {
        padding-left: 2rem;
    }
    .ps-3 {
        padding-left: 3rem;
    }
    .ps-4 {
        padding-left: 4rem;
    }

    .pe-0 {
        padding-right: 0;
    }
    .pe-1 {
        padding-right: 1rem;
    }
    .pe-2 {
        padding-right: 2rem;
    }
    .pe-3 {
        padding-right: 3rem;
    }
    .pe-4 {
        padding-right: 4rem;
    }
/* #endregion - Padding */

/* #endregion - Spacing */


/* #region - Visibility */
.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

/* #endregion - Visibility */


/* #region - Sizing */
.h-auto {
    height: auto;
}

.h-25 {
    height: 25%;
}

.h-50 {
    height: 50%;
}

.h-75 {
    height: 75%;
}

.h-100 {
    height: 100%;
}

.vh-100 {
    height: 100vh;
}


.w-auto {
    width: auto;
}

.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

.mw-100 {
    max-width: 100%;
}

.vw-100 {
    width: 100vw;
}

/* #endregion - Sizing */


/* #region - Text */
.text-start {
    text-align: start;
}
.text-center {
    text-align: center;
}
.text-end {
    text-align: end;
}


.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}


.fw-bold {
    font-weight: bold;
}
.fw-bolder {
    font-weight: bolder;
}
.fw-normal {
    font-weight: normal;
}
.fw-light {
    font-weight: light;
}
.fw-lighter {
    font-weight: lighter;
}
.fst-italic {
    font-style: italic !important;
}
.fst-normal {
    font-style: normal !important;
}


.text-decoration-underline {
    text-decoration: underline;
}
.text-decoration-line-through {
    text-decoration: line-through;
}
.text-decoration-none {
    text-decoration: none;
}


.text-white {
    color: white;
}
.text-black {
    color: white;
}
.text-primary {
    color: var(--color1)!important;
}


.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important;
}
.fs-2 {
    font-size: calc(1.325rem + .9vw) !important;
}
.fs-3 {
    font-size: calc(1.3rem + .6vw) !important;
}
.fs-4 {
    font-size: calc(1.275rem + .3vw) !important;
}
.fs-5 {
    font-size: 1.25rem !important;
}
.fs-6 {
    font-size: 1rem !important;
}

.sbarrato {
    position: relative;
}
.sbarrato:before {
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    right: 0;
    border-top: 1px solid;
    border-color: inherit;
    
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);
}
/* #endregion - Text */





@media (min-width: 1200px) {
    .fs-1 {
        font-size: 2.5rem !important;
    }
    .fs-2 {
        font-size: 2rem !important;
    }
    .fs-3 {
        font-size: 1.75rem !important;
    }
    .fs-4 {
        font-size: 1.5rem !important;
    }
}