@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Removing the width will remove the distortion. Cropping is questionable though */
  .module--hero .picture-container picture,
  .module--hero .picture-container source,
  .module--hero .picture-container img {
    width: auto;
  }

  /* width of 413px inlined on the .drop-menu breaking on ie11. setting to auto fixes issue. */
  #nav--primary .drop-menu {
    width: auto !important;
  }

  /* Must explicitly set grid positioning. There is no auto layout */
  #nav--primary .drop-menu--wrap > .sub-menu > li:nth-child(2n + 1) {
    -ms-grid-column: 1;
  }
  #nav--primary .drop-menu--wrap > .sub-menu > li:nth-child(2n) {
    -ms-grid-column: 2;
  }
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(1),
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(2) {
    -ms-grid-row: 1;
  }
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(3),
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(4) {
    -ms-grid-row: 2;
  }
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(5),
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(6) {
    -ms-grid-row: 3;
  }
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(7),
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(8) {
    -ms-grid-row: 4;
  }
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(9),
  #nav--primary
    .drop-menu--wrap
    > .drop-menu--inside
    > .sub-menu
    > li:nth-child(10) {
    -ms-grid-row: 5;
  }

  /* Same height flexbox doesn't work on ie11. Will have to absolute position image container */
  .module--callout .column--image .picture-container {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 50%;
    left: auto;
  }

  /* Set hard height to svg in footer */
  .site-footer .site-id svg {
    height: 30px;
  }

  /* Input Submit button on form all borked */
  .gform_wrapper.gf_browser_ie .gform_footer input.button {
    padding: 12px 21px 13px !important;
  }

  /* Button transitions are borked on ie11 */
  input[type='submit'],
  button#catapultCookie,
  .site-header .cta--button a,
  .cta--button {
    box-shadow: none !important;
    transition: transform 600ms !important;
  }
  input[type='submit'],
  button#catapultCookie,
  .site-header .cta--button a,
  .cta--button:hover {
    box-shadow: none !important;
    transform: scale(1.1);
  }

  /* Reposition float label to align with placeholder text (can't re-style on ie11) */
  .gform_wrapper .top_label .gfield_label {
    padding: 0 4px 6px;
  }

  /* svg on image sizing is squished. */
  .module--product-highlight .column--image img {
    height: 100%;
  }

  /* Homepage Gradient reversed on ie11 */
  .module--hero_support .lello {
    background: linear-gradient(0deg, #ffffff 0%, #eaf1f5 100%);
    height: 30px;
  }
}