:root{
    /* common layout */
    --width-container: 1700px; /* .container:width */
    --width-content: 1140px; /* #content:width */
    --width-content-page-nosidebar: var(--width-content); /* body.no-sidebar .entry-content:width */
    --padding-content:40px 0 140px;
    --width-sidebar:425px; /* #sidebar:width */
    --padding-col-unit: 15px; /* unit used in any further cols */
    --mrgnbottom-col-unit: calc(2 * var(--padding-col-unit)); /* margin bottom on col */
    --padding-sidebar-desktop:30px; /* padding between #main & #sidebar. screens >1200px */
    --padding-separator:3rem; /* default padding for block like : .nav-links ; .btn-container ; hr */

    /* common typography */
    --fntfamily-body:'AvantGardeCTT', sans-serif;
    --fntsize-body:1.6rem; /* backup var for common <p><ul><ol> etc font-size */
    --lnheight-body: 1.56;
    --color-body: #594a42;
    --fntfamily-title:'HelveticaNeueCyr', sans-serif;
    --fntweight-title: 500; /* default h-tags & other titles */
    --color-title:inherit;
    --color-link:var(--color-featured-dark); /* common a */
    --color-link-hover:#b3b3b3; /* common a:hover */
    --color-active-elem:#ff8a00; /* .current-menu-item ; .nav-links .current ;  etc */
    --color-active-elem-parent: red; /* .current-cat-ancestor ; .current-menu-parent ; etc */
    --color-white: #fff;
    --color-separator: #eaeaea; /* border-color : #sidebar .widgetlist ; .nav-links ; #comments ; .wp-block-separator ; table border ; etc */
    --color-emphasize:#f3f3f3; /* color to highlight info. Example: bgcolor blockquote ; table.stripes ; .more-post-links .icon bg ;  */
    --color-underemphasize:#555d66; /* not to distract color. Example: figcaption ; cite ;  */
    --transduration-body: .3s;

    /* [.site-header] */
    --bgcolor-site-header:transparent;
    --fntsize-site-header: var(--fntsize-body);
    --bgcolor-mainnav:var(--color-featured-medium);
    --fntsize-mainnav: var(--fntsize-site-header);
    --color-mainnav: var(--color-body);
    --color-mainnav-hover:var(--color-link-hover);
    --padding-mainnav-a:1em .8em;
    --fntsize-mainnav-sbmenu: var(--fntsize-site-header);
    --color-mainnav-sbmenu: inherit;
    --color-mainnav-sbmenu-hover:var(--color-link-hover);
    --padding-mainnav-sbmenu-a:.5em 1em;
    --bgcolor-mainnav-sbmenu:whitesmoke;

    /* .site-footer */
    --padding-footer: 80px 0 50px;
    --color-footer:var(--color-white);
    --color-link-footer:var(--color-white);
    --color-link-footer-hover:var(--color-link-hover);
    --bgcolor-footer:#3d322d;
    --fntsize-footer:var(--fntsize-body);
    --fntsize-footer-wtitle:1.8rem;
    --width-footer-col:230px;

    /* #sidebar */
    --fntsize-sdbar: var(--fntsize-body);
    --fntsize-sdbar-wtitle:1.8rem;
    --color-sdbar:var(--color-body);
    --color-link-sbbar:var(--color-body);
    --color-link-sdbar-hover:var(--color-link-hover);
    --mrgnbottom-widget:3rem;


    /* common styles */
    --fntsize-page-title:3.2rem;
    --padding-page-header:30px;
    --fntsize-block-title:4.4rem;
    --padding-block-space: 4.5vw; /* blocks like : on Home ; #comment ; etc */

    /* archive pages */
    --fntsize-loop: calc(.875 * var(--fntsize-body));
    --lnheight-loop: 1.35;
    --padding-listing-unit: var(--padding-col-unit);
    --mrgnbottom-listing-unit: calc(3 * var(--padding-listing-unit));
    --mrgnbottom-listing-thumb: 65.25%;
    --fntsize-loop-title:1.285em;
    --lnheight-loop-title:1.2;
    --lnclamp-loop-title:2;


    /* .page-content */
    --fntsize-pgcontent: var(--fntsize-body);
    --margin-gtnblock:2em; /* unit for [.page-content > *] margins */


    /* social icons */
    --fntsize-social: 2rem;
    --color-social: var(--color-body);
    --padding-social: .2em;
    --bgcolor-social:transparent;
    --color-social-hover:var(--color-link-hover);
    --bgcolor-social-hover:transparent;

    /* btn */
    --fntsize-btn: 1.4rem;
    --fntweight-btn:700;
    --txttransform-btn:uppercase;
    --color-btn:var(--color-white);
    --bgcolor-btn:var(--color-body);
    --padding-btn:1.25em 2em;
    --margin-btn:4px;
    --border-btn:2px solid;
    --border-color:var(--bgcolor-btn);
    --minwidth-btn:200px;
    --transproperty-btn: color, background-color, border;
    --color-btn-hover:var(--color-body);
    --bgcolor-btn-hover:var(--color-featured-medium);

    /* <form> elements */
    --fontsize-form:1.4rem;
    --bgcolor-form:var(--color-emphasize);
    --padding-form:var(--padding-col-unit);
    --margin-form: var(--margin-gtnblock) 0;
    --width-form:600px;
    --mrgnbottom-form-block:15px;
    --color-input:inherit;
    --color-label:inherit;
    --bgcolor-input:var(--color-white);
    --padding-input:1.2em;
    --border-input: 1px solid #dddddd;
    --border-radius-input: 8px;
    --color-input-placeholder:inherit;
    --color-input-focus:var(--color-body);
    --bgcolor-input-focus:var(--bgcolor-input);
    --bxshadow-input-focus:none;
    --color-form-error:var(--color-featured-dark);
    --color-form-success:#fea02f;
    --select-icon:url('/wp-content/themes/sb-child/img/down.svg');
    --select-icon-width:.7em;
    --padding-select-top:10px;
    --padding-select-left:.6em;

    /** colors */
    --color-featured-light: #ffe7e7;
    --color-featured-medium: #ffd7d7;
    --color-featured-dark: #ec677a;
    --color-rating: #f39200;
}
/**
 * css variables to use on the site
 */
@media (max-width: 991px ) {
    :root {

        /** */
        --width-footer-col:33.333%;
    }
}
@media (max-width: 768px) {
    :root {
        /* common layout */
        --padding-content:25px 0 75px;
        --padding-separator: 2rem;

        /* common styles */
        --fntsize-page-title:2.4rem;
        --padding-page-header:20px;
        --fntsize-block-title:3.2rem;
        --padding-block-space: 50px;

        /** */
        --padding-footer: 25px 0;

    }
}

@media (max-width: 575px) {

    :root{

        /* archive pages */
        --padding-listing-unit:5px;

        /* btn */
        --minwidth-btn:unset;
        --padding-btn:1em;

        /* <form> elements */
        --margin-form: var(--margin-gtnblock) calc(-1 * var(--padding-col-unit));

        /** */
        --fntsize-footer:1.4rem;
        --fntsize-footer-wtitle:1.6rem;
        --width-footer-col:100%;
    }
}