:root {
    /* colors are found in color-themes.css*/

    /* fonts */
    --ITCStoneBold: ITCStoneSansCom-Semi, sans-serif;
    --ITCStoneRegular: ITCStoneSansCom-Medium, sans-serif;
    --Roboto: 'Roboto', 'Arial', sans-serif;
    /* sizes */
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;

    /* Commonly used styles */
    --shadom-sm: 1px 1px 4px 0 #00000033;
    --shadow-lg: 0 0 25px 0 #00000033;
    /* --outline:; */
}


main p,
main li,
main a:not(.btn) {
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.8rem;
}


/* CONTAINER OFFSET */
.container-offset-left {
    margin-right: auto;
}

.container-offset-right {
    margin-left: auto;
}

.container-offset-left .container {
    margin-left: auto;
    margin-right: 0;
}

.container-offset-right .container {
    margin-left: 0;
    margin-right: auto;
}

@media (min-width: 576px) {

    .container-offset-left,
    .container-offset-right {
        max-width: calc(100vw/2 + 270px);
    }
}

@media (min-width: 768px) {

    .container-offset-left,
    .container-offset-right {
        max-width: calc(100vw/2 + 360px);
    }
}

@media (min-width: 992px) {

    .container-offset-left,
    .container-offset-right {
        max-width: calc(100vw/2 + 480px);
    }
}

@media (min-width: 1200px) {

    .container-offset-left,
    .container-offset-right {
        max-width: calc(100vw/2 + 570px);
    }
}