/*************************************************************************************************************** Dear Dev Pros, Only add non-renderable SASS in this file (no CSS selectors), otherwise any CSS will be rendered into any file that includes this one (spoiler alert: most files include this file) */
.gallery-row { display: -ms-flexbox; display: -webkit-box; display: flex; position: relative; -ms-flex-flow: row wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row wrap; }

.gallery-item { width: 100%; padding: 2px 0; }

.gallery-link { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; width: 100%; height: 254px; margin: 1px 0 0; background-color: #a5d27e; }

.gallery-link h2 { color: #fff; text-decoration: none; text-align: center; text-transform: uppercase; }

.gallery-link a:hover { text-decoration: none; }

.gallery-link-box { position: relative; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; height: 200px; }

.gallery-link-box::after { position: absolute; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; content: ''; }

.gallery-link-box:hover::after { font-family: "Arvo", Arial, sans-serif; font-weight: 400; font-size: 22px; background-color: #a5d27e; -webkit-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s; color: #fff; content: 'VIEW GALLERY'; -webkit-box-shadow: inset 0 0 12px 0 #5C7747; box-shadow: inset 0 0 12px 0 #5C7747; }

.gallery-image { position: relative; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; height: 200px; }

.gallery-image::after { position: absolute; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; text-align: center; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; top: 0; left: 0; width: 100%; height: 100%; content: ''; }

.gallery-image:hover::after { font-family: "Arvo", Arial, sans-serif; font-weight: 400; font-size: 26px; background-color: #a5d27e; color: #fff; content: 'CLICK TO ENLARGE'; -webkit-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; -webkit-box-shadow: inset 0 0 12px 0 #5C7747; box-shadow: inset 0 0 12px 0 #5C7747; }

@media (min-width: 768px) { .gallery-item { padding: 2px; -ms-flex-preferred-size: 50%; flex-basis: 50%; }
  .gallery-link { height: 100%; margin: 0; } }

@media (min-width: 992px) { .gallery-row { width: 70%; margin: 0 auto; } }

@media (min-width: 1200px) { .gallery-item { padding: 2px; -ms-flex-preferred-size: 25%; flex-basis: 25%; }
  .gallery-row { width: 100%; } }
/*# sourceMappingURL=elementgallery.css.map */