:root {
    /* TEXT COLOR */
    --text-color-dark: black;
    --text-color-light: white;
    --text-color-theme: #cea40c;

    /* BACKGROUND COLOR */
    --bg-color-light: #c2c0b5;
    --bg-color-light-alt: #f2f2f2D1;
    --bg-color-dark: black;
    --bg-color-banner: #333333;
    /* --bg-color-accent: blue; */

    /* LOGO/THEME ACCENT */
    /* OLD --text-color-accent1: #a46d33;#D4AF37 */
    --text-color-accent1: #D4AF37;
    --text-color-accent2: #edb320;
    --text-color-accent3: #F5ED8B;
    --burger-color: var(--bg-color-light);

    /* OTHER COLORS */
    /* --bg-color-btn-alt: #408BD1; */
    /* --bg-color-btn-trash: #555; */
    --bg-color-active: #555;
    --bg-color-disabled: #a19d9d;
    /* --bg-color-on: #499e49; */
    /* --bg-color-off: #aaa2a2; */

    /*********************************************************/
    --strip-color-light1: white; /* table odd stripes */
    --strip-color-light2: #f2f2f2D1; /* table even stripes */
    /*********************************************************/
    --text-error-success: #1cab1c; /* form error message */
    --text-error-danger: #eb2d2d; /* form error message */
    /*********************************************************/

    /* OTHER */
    --font-primary: 'Roboto Slab', Arial, Helvetica, sans-serif;
    --font-secondary: 'Georgia', sans-serif; /* LOGO */
    --font-accent: 'Roslindale Display Narrow Light';

    /* --header-height: 92px; */
    /* --header-height: 200px; */
    /* --header-height: 100%; */

    --default-sub-content-width: 86%;
    --home-sub-content-width: 80%;
    --gallery-sub-content-width: 70%;
    --contact-sub-content-width: 96%;
    /* --contact-panel-width: 100%; */

    --header-opacity: 0.70;
    --footer-opacity: 0.85;

    font-size: 1.0rem;
}

/* ******************************* TEMPLATE STRUCTURE ******************************* */

* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

html, body {
    /* height: 100vh; */
    /* width: 100%; */
    line-height: 1.8;
    font-family: var(--font-primary);
    background-color: var(--bg-color-dark);
    /* overflow-y: scroll; */
    scroll-behavior: smooth;
}

/* body {
    background-image: url('/img/wall.webp');
    background-repeat: repeat-y;
    background-size: cover;
} */

/* *********************** APP ************************ */
#app {
    /* height: 100vh; */
    /* GRID container settings */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 'adminbar' 'header' 'main' 'footer';
}

#app > #adminbar {
    grid-area: adminbar;
    height: 30px;
    /* width: 100%; */
    display: none;
}

/* ********************** HEADER ********************** */
#app > header {
    grid-area: header;

    position: fixed;
    top: 0px;
    z-index: 100;
    opacity: var(--header-opacity);
    overflow: hidden;

    width: 100%;
    /* height: var(--header-height); */
    padding: 0.5em;
}

/* ********************** BANNER ********************** */
#app > header > #banner {
    background-color: var(--bg-color-dark);
    color: var(--text-color-light);
    border-radius: 10px;
    padding: 1em 2em;
    height: 100px;

    display: flex;
    justify-content: end;
    align-items: center;
    /* box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26); */
}

#app > header > #banner > div:first-child {
    margin-right: auto;
}

/* ********************** MAIN MENU NAV ************************ */
#app > header > #banner > nav#main-menu-links {
    background-color: none;
    font-size: 0.8em;
    display: inline;
}

#app > header > #banner > nav#main-menu-links > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#app > header > #banner > nav#main-menu-links > ul > li {
    float: left;
}

/* *********************** MAIN MENU NAV A ********************** */
#app > header > #banner > nav#main-menu-links > ul > li a {
    display: block;
    padding: 0.2em 1.2em;
    color: var(----text-color-light);
    text-decoration: none;
}

#app > header > #banner > nav#main-menu-links > ul > li a:hover {
    color: var(--text-color-accent1);
}

#app > header > #banner > nav#main-menu-links > ul > li a.active {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

#standout-menu-style {
    border: 1px solid var(--text-color-light);
    border-radius: 25px;
    margin-left: 1.2em;
    padding-left: 1.8em !important;
    padding-right: 1.8em !important;
    align-items: center;
    color: var(----text-color-light);
    text-decoration: none !important;
}

#standout-menu-style:hover {
    color: var(--text-color-dark) !important;
    background-color: var(--text-color-accent1);
}

/* ********************** BURGER ************************ */
/* ***** BURGER BAR ICON ***** */
.burger-icon {
    float: right;
    display: none;
    font-size:3em;
    color: var(--bg-color-light);
}

/* ***** BURGER MENU BOX ***** */
nav#burger-links {
    z-index: -1;
    position: relative;
    top: -10px;
    /* overflow: hidden; */
    padding-top: 2em;
    padding-bottom: 3em;
    display: none;
    background-color: var(--bg-color-dark);
    color: var(--text-color-light);
    text-align: center;
    /* transition: left 0.3s; */
    /* text-decoration: none; */
}

nav#burger-links li {
    padding: 1em 1em;
}

nav#burger-links li:hover {
    background-color: var(--text-color-accent1);
}

nav#burger-links a {
    color: var(--text-color-light) !important;
    font-size: 1em;
    text-decoration: none;
}

nav#burger-links a.active {
    color: var(--bg-color-active) !important;
}

/* *********************** MAIN *********************** */
#app > main {
    grid-area: main;
    height: 100% !important;
    position: relative;
    /* background-color: var(--bg-color-light);
    color: var(--text-color-dark); */
    /* margin-top: calc(var(--header-height) + 0.5em); */
    /* margin-top: calc(110px + 0.5em); */
    /* padding: 0 2em; */
    /* height: 100%; */
    /* box-sizing: border-box; */
}

.push-down {
    margin-top: calc(110px + 0.5em) !important;
    /* min-height: 100vh; */
}

/* ********************** FOOTER ********************** */
#app > footer {
    grid-area: footer;

    background-color: var(--bg-color-dark);
    color: var(--text-color-light);
    opacity: var(--footer-opacity);
    padding: 2em;
    /* margin-top: 1em; */

    text-align: center;
}

#app > footer a {
    text-decoration: none;
    color: var(--text-color-light);
}

#app .fadeout {
    color: var(--bg-color-active);
}

#app .footer-link a {
    color: var(--text-color-accent1);
}
/* ********************** FOOTER GRID ***************** */
#app > footer #grid-container {
    /* GRID container settings */
    display: grid;
    /* grid-auto-flow: column; */
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'social' 'terms' 'copyright';
    /* background-color: blue; */
    padding: 0 3%;
}

#app > footer > #grid-container > .social {
    grid-area: 'social';
    text-align: left;
    white-space: nowrap;
}

#app > footer > #grid-container > .terms {
    grid-area: 'terms';
    line-height: 1.3;
    white-space: nowrap;
}

/* #app > footer > #grid-container > .terms a {
    color: var(--text-color-accent1);
} */

#app > footer > #grid-container > .copyright {
    grid-area: 'copyright';
    text-align: right;
}

/* ******************************* TEMPLATE DETAILS ******************************* */
/* *********************** LOGO *********************** */
#logo {
    font-family: var(--font-secondary);
    white-space: nowrap;
    /* align-items: center; */
}

#logo .logo {
    font-size: 3em;
    font-weight: 900;
    position:relative;
    /* background: -webkit-linear-gradient(var(--text-color-accent1) 34%, var(--text-color-accent3) 70%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent; */
    /* color: #cea40c; */
}

#logo a {
    text-decoration: none;
    color: var(--text-color-theme);
}

#logo .slogan {
    font-size: 1em;
    color: var(--text-color-accent2);
    white-space: normal;
}

.sc-logo {
    /* width: 40px; */
    height: 2.5em;
    vertical-align: bottom;
    margin-bottom: 1.4em;
}

#microtime {
    font-size: 0.8em;
    color: var(--bg-color-active);
}

/* *********************** BACKGROUND *********************** */
.page-bg-home {
    background-image: url('/img/wall.webp');
    /* background-image: url('/img/chairsturned.webp'); */
    background-size: contain;
    /* background-repeat: no-repeat; */
    /* background-size: auto auto; */
    /* min-height:clamp(0px, 56.25vw, 100vh) !important; */
}

/* background-color: rgba(0,0,0,.3); */

/* .page-bg-services {
    background-image: url('/img/wall.webp');
    background-repeat: repeat-y;
    background-size: cover;
}

.page-bg-contact {
    background-image: url('/img/wall.webp');
    background-repeat: repeat-y;
    background-size: cover;
} */

/* ******************************* STYLE ***************************************** */
/* ********************** HEADINGS ********************* */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: var(--text-color-accent1);
    /* background-color: red; */
    /* margin-bottom: 0.2em; */
    /* text-shadow: -1px -1px 0 #ffffff, 1px -1pxrgb(255, 255, 255)000, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff; */
}

/* ********************** UNIVERSAL ******************** */
.shadow { box-shadow: 2px 2px 18px var(--bg-color-disabled); }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.v-center { vertical-align: middle; }
.f-left { float: left; }
.f-right { float: right; }
.no-wrap { white-space: nowrap; }

.margin-center {
    margin-left: auto;
    margin-right: auto;
  }

.invalid-feedback { color: var(--text-error-danger); }

/* ******************************* TABLE DATA (SERVICES) ************************** */
/* .service-table, .service-table th, .service-table td {
    border: solid 1px var(--bg-color-dark);
    border-collapse: collapse;
    padding: 1em;
} */

/* ******************************* CONTACT CONTACT ******************************** */

/* UNIVERSAL PANEL ATTRIBUTES */
.contact-panel {
    border-radius: 5px;
    background-color: var(--bg-color-light-alt);
    padding: 1.2em;
    /* width: var(--contact-panel-width); */
    width: 100%;
    margin: 0 auto 1em auto;
}

.contact-panel i {
    font-size: 2em;
    padding-right: 0.5em;
    color: var(--text-color-accent1);
}

/* ******************************* TERMS & COND ******************************** */
#terms {
    padding: 0 5%;
    background-color: var(--bg-color-light-alt);
}

#terms > h1, #contact > h1 {
    font-size: 3em;
    text-align: center;
    margin-bottom: 0.5em;
    color: var(--bg-color-dark);
}

#terms > h2, #contact > h2 {
    font-size: 1.7em;
    background-color: var(--text-color-accent1);
    color: var(--bg-color-dark);
    padding-left: 0.5em;
    margin: 0.5em 0;
}

#terms p, #terms li {
    padding: 0.5em;
}

#terms a {
    text-decoration: none;
    color: blue;
}

#terms ol, #terms ul {
    padding-left: 1.5em;
}

/* ************************************************************************************** */

/* .forceRed {
    background-color: red;
}

.forceBlue {
    background-color: blue;
}

.forceGreen {
    background-color: green;
}

.forceYellow {
    background-color: yellow;
}

.forceBlack {
    background-color: black;
}

.forceWhite {
    background-color: white;
} */

@font-face {
    font-family: 'Roslindale Display Narrow Light';
    font-style: normal;
    font-weight: normal;
    src: local('Roslindale Display Narrow Light'), url('/fonts/Roslindale-DisplayNarrowLight-Testing.woff') format('woff');
}

.rose-font {
    font-family: var(--font-accent);
    font-size: 3em;
    letter-spacing: -0.05em;
    /* line-height: 0.8em */
}

/* #multiIMG {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right top, left bottom;
    background-repeat: no-repeat, repeat;
    padding: 15px;
  } */