@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #221704;
    --textDark: rgba(61, 44, 14, 1); /* dark accent */
    --textMedium: rgba(61, 44, 14, 0.7);
    --borderMedium: rgba(61, 44, 14, 0.2);
    --borderLight: rgba(61, 44, 14, 0.075);
    --accent: #E2A53A;
    --accentDarker: #9F7224;
    --light: rgba(61, 44, 14, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.9) brightness(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0) sepia(1) hue-rotate(-30deg) contrast(1) brightness(1.2)!important;}


/*------------------------ CSS overrides below ------------------------*/

section.about .container.small, section.features .container.small, section.title .container.small  {
    max-width: 65rem;
}

section.about .container p img {
    width: 17rem;
}

section.bgimage .overlay {
    background: rgba(0, 0, 0, 0.54);
}

section.bgimage .container p {
    font-size: 1.25rem;
}