:root {
    --page-color-dark: #5785B1;
    --page-color-light: #B4DEE8;


    /* site brand */
    --brand-text-color: #FFF;


    /* menu */
    --menu-item-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

    --menu-item-color-bg: transparent;
    --menu-item-color-bg-hover: white;

    --menu-item-color-tx: white;
    --menu-item-color-tx-hover: var(--page-color-dark);


    /* submenu */
    --submenu-item-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

    --submenu-item-color-bg: red;
    --submenu-item-color-bg-hover: pink;

    --submenu-item-color-tx: #111;
    --submenu-item-color-tx-hover: #111;


    --widget-border-top-color: var(--page-color-dark);

    --menu-buttons-div-padding-right: 16px;

}

body.awcontrast {
    --page-color-dark: #3b3b3b;
    --page-color-light: #f3f3f3;
    --menu-item-color-tx-hover: var(--page-color-dark);
    --widget-border-top-color: var(--page-color-dark);
}





body.vars_red {
    --page-color-dark: #b15762;
    --page-color-light: #e8b4df;
}

body.vars_bw {
    --page-color-dark: #2f2f2f;
    --page-color-light: #9e9e9e;
}








/*  */

body {
    /* zoptymalizowac body */
    background-color: var(--page-color-dark) !important;
}



/* ---------------------------------------------------------------------------------------------- */
/* top trans */
/* ---------------------------------------------------------------------------------------------- */

.top-trans {
    background-color: var(--page-color-light);
    height: 100px;
    line-height: 0;
}

.top-trans svg {
    width: 100%;
    height: 150px;
    transform: rotate(180deg);
}

.monte_divider_style {
    fill: var(--page-color-dark);
}

.fo33 {
    fill-opacity: 0.33;
}

.fo66 {
    fill-opacity: 0.66;
}

.fo100 {
    fill-opacity: 1.00;
}

/* ---------------------------------------------------------------------------------------------- */
/* bottom trans */
/* ---------------------------------------------------------------------------------------------- */

.bottom-trans {
    background-color: var(--page-color-light);
    line-height: 0;
}

.bottom-trans svg {
    width: 100%;
    height: 200px;
}

/* ---------------------------------------------------------------------------------------------- */







div#page.site {
    background-color: var(--page-color-light);
}



header#masthead {
    margin-top: 20px;
    margin-bottom: 20px;
}




div#content.site-content {
    padding-top: 2em;
}