/**
 * @file
 * Global Variables
 */
/* Custom typography settings for prose (See _prose.scss for explanation). */
/* Establish custom spacing variables based on line height to facilitate vertical rhythm */
/* Black/white colour variables */
/* Brand visited & focused styles */
/* Brand border */
/**
 * Specify your site domain here. Used to override detection of off-site links
 * if a link has been created that uses the sites full absolute href. Removes the external
 * link icon.
*/
/**
 * @file
 * Custom mixins
 */
/* Intrinsic ratios (eg: Used by _responsive-ratio) */
/* Cross browser opacity */
/* Font smoothing */
/* Px to Em https://web-design-weekly.com/snippets/converts-pixels-to-ems-with-sass/ */
/* WebKit-style focus */
/* To handle long words and URLs */
/**
 * @file
 * Map Bootstrap breakpoints to nice mixins.
 */
.view-header .market-finder {
  display: none;
}

.masonry-item .market-finder {
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 30px;
}

.market-finder__graphic {
  background-color: #074207;
  text-align: center;
}

.market-finder__graphic > svg {
  margin-left: auto;
  margin-right: auto;
  vertical-align: top;
  margin: 3rem;
}

.market-finder__form {
  text-align: center;
  padding: 3.5rem;
  background-color: #158415;
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
  color: white;
  position: relative;
}

.market-finder__form label {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Bree", Georgia, "Times New Roman", Times, serif;
  font-size: 3rem;
  font-weight: normal;
  display: block;
  cursor: pointer;
  margin-bottom: 0;
  line-height: 1.15;
}

.market-finder__form select {
  background-color: rgba(255, 255, 255, 0.8);
  background-repeat: no-repeat;
  background-image: url("../images/select.svg");
  background-position: right 8px center;
  background-size: auto 6px;
  color: #158415;
  border: none;
  border-radius: 2px;
  height: 40px;
  line-height: 40px;
  padding: 0 40px 0 .75em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  font-weight: bold;
  font-size: .9em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 768px) {
  .market-finder__form select {
    display: none;
  }
}

.market-finder__form label + select {
  margin-top: 1.5em;
}

.market-finder__select {
  background-color: rgba(255, 255, 255, 0.8);
  background-repeat: no-repeat;
  background-image: url("../images/select.svg");
  background-position: right 1em center;
  background-size: 12px auto;
  color: #158415;
  border: none;
  border-radius: 2px;
  height: 40px;
  line-height: 40px;
  padding: 0 40px 0 .75em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  font-weight: bold;
  font-size: .9em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: none;
}

@media (min-width: 768px) {
  .market-finder__select {
    display: inline-block;
  }
}

.market-finder__select:hover, .market-finder__select:focus {
  background-color: white;
}

* + .market-finder__select {
  margin-top: 1.5em;
}

.market-finder__map {
  overflow: hidden;
  max-height: 0;
  position: absolute;
  z-index: 499;
  width: 100%;
  height: 100%;
  left: 0;
  background-color: #158415;
  opacity: 0;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.reveal-map + .market-finder__map {
  height: 450px;
  max-height: inherit;
  padding: 1.444em;
  opacity: 1;
}

.market-finder__map .outline {
  fill: #158415;
}

.market-finder__map .label {
  fill: white;
  opacity: 0;
  font-size: 18px;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.market-finder__map .shape {
  fill: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  -webkit-transition: fill .2s ease;
  transition: fill .2s ease;
}

.market-finder__map .shape:hover {
  fill: white;
}

.market-finder__map .shape:hover ~ .label {
  opacity: 1;
}

.market-finder__map svg {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.market-finder__map > a {
  color: white;
  position: absolute;
  bottom: 2.166em;
  right: 2.166em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 1px rgba(255, 255, 255, 0.8) solid;
}

.market-finder__map > a:link, .market-finder__map > a:visited {
  color: white;
  text-decoration: none;
}

.market-finder__map > a:hover, .market-finder__map > a:focus {
  opacity: .8;
}