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

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

:root {
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2); 
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #008000;
    --textAccent: #008000;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

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

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

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

.map:not(section)::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.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}


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

header + section:not(.bgimage) {padding-top: 1rem !important;}

html {font-size: clamp(17px, 1.2vmax, 22px); }

/*------------------------*/
/* gallery
/*------------------------*/

.image-gallery {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; margin-left: 0;}
.image-gallery li {list-style: none;}
.image-gallery li a {display: block;  border-radius: 0.5rem; border: 2px solid #d9d9d9; overflow: hidden;}
.image-gallery li a img {width: 100%; height: auto; display: block; 
-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.image-gallery li a img:hover {-webkit-transform: scale(1.15);
	transform: scale(1.15);}

/*------------------------*/
/* brick extrawide
/*------------------------*/

section.extrawide {max-width: 90rem; margin-left: auto; margin-right: auto;}
section.extrawide h1 {text-align: center;}
section.extrawide h1 + * {padding-top: 1.25rem;}


/*------------------------*/
/* brick about
/*------------------------*/


 /* Three image containers (use 25% for four, and 50% for two, etc) */
section.about .column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
section.about .row {
  margin-bottom: 20px;
}
/* Clear floats after image containers */
section.about .row::after {
  content: "";
  clear: both;
  display: table;
}