/* ============================================= */
/* === classes for transition to Bootstrap 5 === */
/* ============================================= */

:root {
--size-1: .25rem;
--size-2: .5rem;
--size-3: 1rem;
--size-4: 1.5rem;
--size-5: 3rem;
}

.mt-0 {margin-top: 0!important;}
.mt-1 {margin-top: var(--size-1)!important;}
.mt-2 {margin-top: var(--size-2)!important;}
.mt-3 {margin-top: var(--size-3)!important;}
.mt-4 {margin-top: var(--size-4)!important;}
.mt-5 {margin-top: var(--size-5)!important;}

.me-0 {margin-right: 0!important;}
.me-1 {margin-right: var(--size-1)!important;}
.me-2 {margin-right: var(--size-2)!important;}
.me-3 {margin-right: var(--size-3)!important;}
.me-4 {margin-right: var(--size-4)!important;}
.me-5 {margin-right: var(--size-5)!important;}

.mb-0 {margin-bottom: 0!important;}
.mb-1 {margin-bottom: var(--size-1)!important;}
.mb-2 {margin-bottom: var(--size-2)!important;}
.mb-3 {margin-bottom: var(--size-3)!important;}
.mb-4 {margin-bottom: var(--size-4)!important;}
.mb-5 {margin-bottom: var(--size-5)!important;}

.ms-0 {margin-left: 0!important;}
.ms-1 {margin-left: var(--size-1)!important;}
.ms-2 {margin-left: var(--size-2)!important;}
.ms-3 {margin-left: var(--size-3)!important;}
.ms-4 {margin-left: var(--size-4)!important;}
.ms-5 {margin-left: var(--size-5)!important;}

.my-0 {margin-top: 0!important;margin-bottom: 0!important;}
.my-1 {margin-top: var(--size-1)!important;margin-bottom: var(--size-1)!important;}
.my-2 {margin-top: var(--size-2)!important;margin-bottom: var(--size-2)!important;}
.my-3 {margin-top: var(--size-3)!important;margin-bottom: var(--size-3)!important;}
.my-4 {margin-top: var(--size-4)!important;margin-bottom: var(--size-4)!important;}
.my-5 {margin-top: var(--size-5)!important;margin-bottom: var(--size-5)!important;}

.pt-0 {padding-top: 0!important;}
.pt-1 {padding-top: var(--size-1)!important;}
.pt-2 {padding-top: var(--size-2)!important;}
.pt-3 {padding-top: var(--size-3)!important;}
.pt-4 {padding-top: var(--size-4)!important;}
.pt-5 {padding-top: var(--size-5)!important;}

.pe-0 {padding-right: 0!important;}
.pe-1 {padding-right: var(--size-1)!important;}
.pe-2 {padding-right: var(--size-2)!important;}
.pe-3 {padding-right: var(--size-3)!important;}
.pe-4 {padding-right: var(--size-4)!important;}
.pe-5 {padding-right: var(--size-5)!important;}

.pb-0 {padding-bottom: 0!important;}
.pb-1 {padding-bottom: var(--size-1)!important;}
.pb-2 {padding-bottom: var(--size-2)!important;}
.pb-3 {padding-bottom: var(--size-3)!important;}
.pb-4 {padding-bottom: var(--size-4)!important;}
.pb-5 {padding-bottom: var(--size-5)!important;}

.ps-0 {padding-left: 0!important;}
.ps-1 {padding-left: var(--size-1)!important;}
.ps-2 {padding-left: var(--size-2)!important;}
.ps-3 {padding-left: var(--size-3)!important;}
.ps-4 {padding-left: var(--size-4)!important;}
.ps-5 {padding-left: var(--size-5)!important;}

.px-0 {padding-left: 0!important;padding-right: 0!important;}
.px-1 {padding-left: var(--size-1)!important;padding-right: var(--size-1)!important;}
.px-2 {padding-left: var(--size-2)!important;padding-right: var(--size-2)!important;}
.px-3 {padding-left: var(--size-3)!important;padding-right: var(--size-3)!important;}
.px-4 {padding-left: var(--size-4)!important;padding-right: var(--size-4)!important;}
.px-5 {padding-left: var(--size-5)!important;padding-right: var(--size-5)!important;}

.py-0 {padding-top: 0!important;padding-bottom: 0!important;}
.py-1 {padding-top: var(--size-1)!important;padding-bottom: var(--size-1)!important;}
.py-2 {padding-top: var(--size-2)!important;padding-bottom: var(--size-2)!important;}
.py-3 {padding-top: var(--size-3)!important;padding-bottom: var(--size-3)!important;}
.py-4 {padding-top: var(--size-4)!important;padding-bottom: var(--size-4)!important;}
.py-5 {padding-top: var(--size-5)!important;padding-bottom: var(--size-5)!important;}

.p-0 {padding: 0!important;}
.p-1 {padding: var(--size-1)!important;}
.p-2 {padding: var(--size-2)!important;}
.p-3 {padding: var(--size-3)!important;}
.p-4 {padding: var(--size-4)!important;}
.p-5 {padding: var(--size-5)!important;}

.alert {position: relative; padding: 1rem;}

.float-end {float: right!important;}

.mcg-site-footer .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.mcg-site-footer .row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.mcg-site-footer .row>.col {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.mcg-site-footer .row>.col {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.mcg-site-footer .col {
    flex: 1 0 0%;
}
.mcg-site-footer .col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.mcg-site-footer .row-cols-1>* {
    flex: 0 0 auto;
    width: 100%;
}

/*--- small ---*/
@media (min-width: 576px) {
    .mcg-site-footer .row-cols-sm-2>* {
        flex: 0 0 auto;
        width: 50%;
    }
}

/*--- medium ---*/
@media (min-width: 768px) {
    .mcg-site-footer .row-cols-md-3> * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .mcg-site-footer .row-cols-md-4>* {
        flex: 0 0 auto;
        width: 25%;
    }
    .mcg-site-footer .row-cols-md-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    
    .mcg-site-footer .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .mcg-site-footer .col-md-6 {
        -ms-flex: 0 0 25%;
        flex: 0 0 auto;
        width: 50%;
    }
    .mcg-site-footer .col-md-9 {
        -ms-flex: 0 0 25%;
        flex: 0 0 auto;
        width: 75%
    }
}

/* large */
@media (min-width: 992px) {
    .mcg-site-footer .col-lg-3 {
      flex: 0 0 auto;
      width: 25%;
    }
    .mcg-site-footer .col-lg-6 {
      flex: 0 0 auto;
      width: 50%;
    }
}

/*======================================================*/
/*=== wrap row in mcg-bootstrap5 to call Grid system ===*/
/*======================================================*/

.mcg-bootstrap5 .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.mcg-bootstrap5 .row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.mcg-bootstrap5 .row>.col {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.mcg-bootstrap5 .col {
  flex: 1 0 0%;
}

.mcg-bootstrap5 .col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.mcg-bootstrap5 .row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}

.mcg-bootstrap5 .row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}


@media (min-width: 576px) {
    .mcg-bootstrap5 .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    .mcg-bootstrap5 .row-cols-sm-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
}

@media (min-width: 768px) {
    .mcg-bootstrap5 .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .mcg-bootstrap5 .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
    .mcg-bootstrap5 .row-cols-md-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .mcg-bootstrap5 .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .mcg-bootstrap5 .col-md-6 {
        -ms-flex: 0 0 25%;
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .mcg-bootstrap5 .row-cols-lg-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .mcg-bootstrap5 .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
    .mcg-bootstrap5 .col-lg-6 {
        -ms-flex: 0 0 25%;
        flex: 0 0 auto;
        width: 50%;
    }
}