.interactive-img .interactive-img-copy .heading {
  font-family: "Work Sans", sans-serif;
  margin: 0;
  line-height: 1;
  letter-spacing: -1px; }
  
  .interactive-img .interactive-img-copy .heading:after {
    content: "";
    display: block;
    width: 60px;
    height: 0;
    border-top: 1px solid #7D868C;
    margin: 20px 0; }


.interactive-img .interactive-img-copy .heading {
  font-size: calc(24px + (38 - 24) * ((100vw - 300px) / (1600 - 300))); }

.interactive-img .imagepin > button:before, .interactive-img .imagepin > button:after, .interactive-img .imagepin-widget .close-slide:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.interactive-img .imagepin-widget a {
  display: inline;
  background-image: linear-gradient(180deg, transparent 90%, #B31B1B 0);
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .4s ease; }
  .user-is-tabbing .interactive-img .imagepin-widget a:focus, .interactive-img .imagepin-widget .user-is-tabbing a:focus, .interactive-img .imagepin-widget a:hover {
    background-size: 100% 100%;
    text-decoration: none; }

.user-is-tabbing :focus {
  outline: 1px dotted currentColor;
  outline-offset: 2px; }

.interactive-img {
  position: relative;
  display: -ms-grid !important;
  display: grid !important;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto;
  grid-template-rows: auto; }

.interactive-img > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1; }
  .interactive-img .container-fluid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100px 1fr 1fr;
    grid-template-columns: 100px 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -ms-grid-row: 2; }
  .interactive-img .container-fluid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1; }
  .interactive-img .container-fluid > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2; }
  .interactive-img .container-fluid > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 3; }
    .interactive-img .container-fluid > :nth-child(1) {
      -ms-grid-column: 2; }
    @media (min-width: 768px) and (max-width: 991.98px) {
      .interactive-img .container-fluid {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        -ms-grid-rows: auto;
        grid-template-rows: auto; }
      .interactive-img .container-fluid > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
      .interactive-img .container-fluid > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2; } }
    @media (max-width: 767.98px) {
      .interactive-img .container-fluid {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -ms-grid-rows: auto;
        grid-template-rows: auto; }
      .interactive-img .container-fluid > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; } }
  .interactive-img .imagepin {
    display: block;
    position: absolute !important;
    z-index: 5;
    opacity: 0; }
    .interactive-img .imagepin.animate {
      opacity: 1;
      transition: opacity .3s ease; }
    .interactive-img .imagepin > button {
      width: 60px;
      height: 60px;
      background: #fff;
      border: 1px solid #B31B1B;
      border-radius: 50%;
      position: relative;
      cursor: pointer; }
      .interactive-img .imagepin > button:before {
        content: "\e90a";
        position: absolute;
        color: #B31B1B;
        transform: rotate(45deg);
        top: calc(50% - 9px);
        left: calc(50% - 9px); }
      .interactive-img .imagepin > button:after {
        content: "\e90e";
        display: none;
        position: absolute;
        font-size: 1rem;
        transform: rotate(-90deg);
        top: calc(50% - 8px);
        right: 0;
        color: #B31B1B; }
      .interactive-img .imagepin > button:hover, .interactive-img .user-is-tabbing .imagepin > button:focus, .user-is-tabbing .interactive-img .imagepin > button:focus {
        background: #B31B1B; }
        .interactive-img .imagepin > button:hover:before, .interactive-img .user-is-tabbing .imagepin > button:focus:before, .user-is-tabbing .interactive-img .imagepin > button:focus:before {
          color: #fff; }
      .user-is-tabbing .interactive-img .imagepin > button:focus {
        outline: 1px dotted #000;
        outline-offset: 1px; }
  .interactive-img .interactive-img-copy {
    position: relative;
    background: #fff;
    box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.16);
    -ms-grid-row-align: end;
        align-self: end;
    padding: 50px;
    margin-top: -200px;
    -ms-grid-row: 1;
    grid-row: 1;
    -ms-grid-column: 2;
    grid-column: 2; }
    @media (max-width: 991.98px) {
      .interactive-img .interactive-img-copy {
        -ms-grid-column: 1;
        grid-column: 1; } }
  .interactive-img .imagepin-widget {
    background: #fff;
    position: absolute;
    top: 0;
    right: -100%;
    height: 100%;
    width: 30%;
    padding: 80px 50px 50px;
    transition: all .5s ease;
    visibility: hidden;
    box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.16);
    z-index: 99; }
    .interactive-img .imagepin-widget.open {
      right: 0;
      visibility: visible;
      transition: all .5s ease; }
    .interactive-img .imagepin-widget figure {
      width: auto;
      height: auto;
      position: relative;
      margin-bottom: 30px; }
    .interactive-img .imagepin-widget p {
      margin-bottom: 20px; }
      .interactive-img .imagepin-widget p.subhead {
        font-family: "Work Sans", sans-serif;
        font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));
        font-weight: 700; }
    .interactive-img .imagepin-widget a {
      font-family: "Work Sans", sans-serif;
      font-weight: 600; }
    .interactive-img .imagepin-widget .close-slide {
      background: transparent;
      border: none;
      cursor: pointer;
      position: absolute;
      top: 20px;
      right: 45px; }
      .interactive-img .imagepin-widget .close-slide:before {
        content: "\e90a";
        display: block;
        color: #B31B1B; }
  @media (max-width: 767.98px) {
    .interactive-img .container-fluid {
      -ms-grid-row: 2;
      grid-row: 2; }
    .interactive-img figure {
      height: auto;
      position: relative; }
    .interactive-img .imagepin {
      opacity: 1;
      position: relative !important;
      display: block;
      top: auto !important;
      left: auto !important; }
      .interactive-img .imagepin > button {
        width: 100%;
        height: auto;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid #BDBBBB;
        padding: 15px 30px;
        text-align: left;
        margin-left: -15px;
        font-family: "Work Sans", sans-serif;
        font-weight: 600;
        display: block !important; }
        .interactive-img .imagepin > button:before {
          display: none; }
        .interactive-img .imagepin > button:after {
          display: block; }
        .interactive-img .imagepin > button .visually-hidden {
          position: relative !important;
          width: auto !important;
          height: auto !important;
          margin: 0 !important;
          padding: 0 !important;
          overflow: visible !important; }
        .interactive-img .imagepin > button:hover, .interactive-img .user-is-tabbing .imagepin > button:focus, .user-is-tabbing .interactive-img .imagepin > button:focus {
          background: #fff; }
    .interactive-img .interactive-img-copy {
      margin: -20px 0 2px -15px;
      padding: 30px;
      top: 0 !important;
      z-index: 5; }
    .interactive-img .imagepin-widget {
      width: 100%;
      height: 100%;
      padding: 60px 30px 30px; }
      .interactive-img .imagepin-widget .close-slide {
        right: 20px; } }
  @media (min-width: 768px) and (max-width: 991.98px) {
    .interactive-img figure {
      height: 50vh; }
    .interactive-img .interactive-img-copy {
      margin: -60px -60px 0 0; }
    .interactive-img .imagepin-widget {
      width: 50%;
      height: 100%; } }