/* Global CSS variables */
:root {
    --spacing-company: 1rem;
    --font-weight: 400;
    --border-radius: 0.25rem;
}

/* Typography */
/*
h2,
h3,
hgroup> :last-child {
    font-weight: 200;
}
*/

small {
    color: var(--muted-color);
}

/* Header */
.hero {
/*
 */
    /* background-color: #394046; */


    background-image: url("../img/hero-1.jpg");

    /* background-image: url("../img/IMG_26452_ed.jpg"); */
    background-position: center;
    background-size: cover;

    background-color: rgba(0,0,0,.5);

/*
    background: linear-gradient( 142deg, rgba(30, 33, 36, 0) 45%, rgba(30, 33, 36, 0.9) 83% ), linear-gradient(180deg, rgba(30, 33, 36, 0) 71%, #1e2124 100%), linear-gradient(270deg, rgba(30, 33, 36, 0) 27%, rgba(30, 33, 36, 0.85) 70%);
*/
}




header {
    padding: var(--spacing-company) 0;
}

header hgroup> :last-child {
    color: var(--h3-color);
}

header hgroup {
    margin-bottom: var(--spacing-company);
}

/* Nav */
summary[role="link"].contrast:is([aria-current], :hover, :active, :focus) {
    background-color: transparent;
    color: var(--contrast-hover);
}

/* Main */
@media (min-width: 992px) {
    main .grid {
        grid-column-gap: var(--spacing-company);
        grid-template-columns: auto 25%;
    }
}

form.grid {
    grid-row-gap: 0;
}

/* Aside nav */
aside img {
    margin-bottom: 0.25rem;
}

aside p {
    margin-bottom: var(--spacing-company);
    line-height: 1.25;
}


/* */


.footer {
    background:#394046;
    color: #edf0f3;
    padding-top:2.5rem;
    padding-bottom:2rem;
}

.footer-logo {margin-bottom: 1.5rem;margin-left: -10px}
.footer-logo img {width: 120px}

.footer h3, .footer ul, .footer a {
    color: #edf0f3
}

.footer ul {padding-left: 0}
.footer ul li {
    list-style: none;
}

.grid.copyright div{
    padding-top:1rem
}






dialog{

    background-color: rgba(96, 96, 96, 0.83) !important; /* opacity .58 */

}