@charset "UTF-8";
/* ---------------------------------------------------------------------
 Modern Styles
------------------------------------------------------------------------ */
/* scss-lint:disable VendorPrefix */
/* scss-lint:enable VendorPrefix */
/* scss-lint:disable ImportantRule */
.isRelative {
  position: relative; }

.isScrollLocked {
  overflow: hidden; }

.isIconButton {
  border: 0;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none; }

/* explicit sizes */
.is160x160 {
  max-width: 160px; }

.isInTableCell {
  max-width: none; }

.isVertCenteredImg {
  box-sizing: border-box;
  width: 100%;
  white-space: nowrap;
  font-size: 0; }

.isVertCenteredImg:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: ""; }

.isVertCenteredImg > img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle; }

.isBlock {
  display: block; }

.isCircle {
  border-radius: 50%; }

.isAlignedCenterFlex {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.isAlignedRight {
  text-align: right !important; }

@media (min-width: 1024px) {
  .isAlignedRight\@lg {
    text-align: right !important; } }

.isAlignedCenter {
  text-align: center !important; }

.isVisuallyHidden {
  position: absolute;
  margin: -1px;
  border: 0;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0); }

.isHidden {
  display: none !important; }

@media (max-width: 1023px) {
  .isHidden\@sm {
    display: none !important; } }

@media (max-width: 1023px) {
  .isVisuallyHidden\@sm {
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0); } }

@media (min-width: 1024px) {
  .isHidden\@lg {
    display: none !important; } }

/* ---------------------------------------------------------------------
RESET CSS (thanks Eric Meyer)
------------------------------------------------------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

:focus {
  outline: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* ---------------------------------------------------------------------
 HTML5 Element Reset
------------------------------------------------------------------------ */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block; }

audio, canvas, video, progress, picture {
  display: inline-block; }

template {
  display: none; }

/* ---------------------------------------------------------------------
 Form Reset Styles
------------------------------------------------------------------------ */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none; }

input[type="search"] {
  -webkit-appearance: none;
  box-sizing: content-box; }

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical; }

::-moz-focus-inner {
  border: 0;
  padding: 0; }

@font-face {
  font-family: Gesta;
  src: url("/assets/media/fonts/Gesta/Rui%20Abreu%20-%20Gesta-Light.otf");
  font-style: normal;
  font-weight: 300; }

@font-face {
  font-family: Gesta;
  src: url("/assets/media/fonts/Gesta/Rui%20Abreu%20-%20Gesta-Regular.otf");
  font-style: normal;
  font-weight: 400; }

@font-face {
  font-family: Gesta;
  src: url("/assets/media/fonts/Gesta/Rui%20Abreu%20-%20Gesta-Medium.otf");
  font-style: normal;
  font-weight: 500; }

@font-face {
  font-family: Gesta;
  src: url("/assets/media/fonts/Gesta/Rui%20Abreu%20-%20Gesta-Bold.otf");
  font-style: normal;
  font-weight: 700; }

@font-face {
  font-family: Gesta;
  src: url("/assets/media/fonts/Gesta/Rui%20Abreu%20-%20Gesta-Italic.otf");
  font-style: italic;
  font-weight: 400; }

body {
  /* dev tools bug with -webkit-backface-visibility causes bg to be grey across
    large sections of the page, setting a bg color on body fixes this. */
  background-color: #ffffff;
  color: #412c36;
  font-family: "gesta", "Helvetica Neue", "Arial", sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased; }

svg,
path,
polygon {
  width: 100%;
  height: 100%;
  fill: inherit; }

input:focus,
button:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 1px 1px #8c317a; }

input::-ms-clear {
  display: none; }

select::-ms-expand {
  display: none; }

img {
  max-width: 100%; }

a {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  text-decoration: none;
  fill: #8c317a;
  color: #8c317a; }

a:hover {
  text-decoration: underline;
  fill: #ae6ea2;
  color: #ae6ea2; }

/**
@name Band
@description Adds bands of color behind sections and sets a default font color if necessary.

@markup
<div class="vr">
    <div class="band">
        Default
    </div>
</div>
<div class="vr">
    <div class="band band_head">
        Head
    </div>
</div>
<div class="vr">
    <div class="band band_white">
        White
    </div>
</div>
*/
.band {
  position: relative;
  width: 100%; }

.band_dropdown {
  position: relative;
  box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.3);
  background-color: #e9ebe9;
  overflow: hidden;
  color: #412c36; }

.band_head {
  position: relative;
  z-index: 50;
  background-color: #ffffff;
  overflow: visible; }

.band_highlight {
  /* scss-lint:disable DuplicateProperty */
  background: #531e6c;
  background: -webkit-linear-gradient(left, #8b317b 0%, #551e6c 100%);
  background: linear-gradient(to right, #8b317b 0%, #551e6c 100%);
  /* scss-lint:enable DuplicateProperty */
  color: #ffffff; }

.band_greyLightest {
  background-color: #e9ebe9; }

.band_white {
  z-index: 10;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
  background-color: #ffffff; }

.band_purple {
  background-color: #2d1263;
  color: #ffffff; }
  .band_purple:nth-of-type(2n) {
    background-color: #8c317a; }

.band_royal {
  background-color: #8c317a; }

.band_banded {
  background: -webkit-linear-gradient(top, #efeeef 0%, rgba(255, 255, 255, 0) 40%);
  background: linear-gradient(to bottom, #efeeef 0%, rgba(255, 255, 255, 0) 40%);
  /* scss-lint:enable DuplicateProperty */ }

.band_banded > * {
  position: relative;
  z-index: 2; }

.band_banded::before,
.band_banded::after {
  display: block;
  position: absolute;
  top: 0;
  z-index: -10;
  max-width: 100%;
  overflow: hidden; }

.band_banded::before {
  left: 0;
  content: url("/assets/media/images/banded-bg-lt.png"); }

.band_banded::after {
  right: 0;
  content: url("/assets/media/images/banded-bg-rt.png"); }
  @media (max-width: 1023px) {
    .band_banded::after {
      display: none; } }

.band_internalHero {
  background: url("../media/images/hero_inner_bg.jpg") center top;
  background-size: cover; }

.mix-band_noOverflow {
  overflow: hidden; }

  .dsc_para {
  width: 40%; 
  font-size: 80%;
  float: right;
text-align: right;}
  @media (max-width: 1024px) {
    .dsc_para {
          width: 280px;
          font-size: 80%;
          text-align: left;
          float: none;
          } }
          @media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    .dsc_para {
          width: 280px;
          font-size: 80%;
          float:right;
                 text-align: left;
                  }}

/*
@name Acelity Companies

@markup
<img src="/assets/media/images/Acelity_companies_identifier_lockup_3_gray.png" alt="" class="companies"/>
*/
.companies {
  width: 146px;
  height: 29px; }
  @media (min-width: 1024px) {
    .companies {
      width: 255px;
      height: 50px; } }

.companies_lg {
  display: block;
  margin: 18px auto 36px;
  width: 210px;
  height: auto; }
  @media (min-width: 1024px) {
    .companies_lg {
      width: 468px;
      height: auto; } }

/*
@name Curve Clip

@description A container that features a curved bottom that overlaps the content below it.

@markup
<div>Normal Curve</div>
<div class="vr">
    <div class="curveClip">
        <div class="curveClip-wrap">
            <div class="curveClip-wrap-inner">
                <div class="blocks blocks_2up mix-blocks_equal">
                    <div style="background: #aaa;">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl ex, aliquet eu neque ac, tempus pharetra neque. Quisque in est quis enim cursus vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis maximus vehicula ligula, in tristique lacus consequat non. Suspendisse sit amet porta magna. Maecenas purus felis, cursus id viverra aliquet, tempus sed lorem. Sed ultricies, purus ut vehicula euismod, ipsum risus tristique augue, a auctor orci massa a augue.
                        </p>
                    </div>
                    <div style="background: #999;">
                        <p>
                            Aenean eu libero ultricies, faucibus tortor ac, vehicula tellus. Aenean ut ligula eleifend, sollicitudin lectus nec, rhoncus magna. Phasellus vestibulum nec felis id convallis. Morbi mi augue, viverra finibus mollis nec, sodales sed ex. Donec porta gravida nunc at dictum.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="band band_highlight">
        <div class="wrap">
            <div class="vPad">
                Testing
            </div>
        </div>
    </div>
</div>
<div>Deep Curve</div>
<div class="vr">
    <div class="curveClip curveClip_deep">
        <div class="curveClip-wrap">
            <div class="curveClip-wrap-inner">
                <div class="blocks blocks_2up mix-blocks_equal">
                    <div style="background: #aaa;">
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl ex, aliquet eu neque ac, tempus pharetra neque. Quisque in est quis enim cursus vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis maximus vehicula ligula, in tristique lacus consequat non. Suspendisse sit amet porta magna. Maecenas purus felis, cursus id viverra aliquet, tempus sed lorem. Sed ultricies, purus ut vehicula euismod, ipsum risus tristique augue, a auctor orci massa a augue.
                        </p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl ex, aliquet eu neque ac, tempus pharetra neque. Quisque in est quis enim cursus vulputate. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis maximus vehicula ligula, in tristique lacus consequat non. Suspendisse sit amet porta magna. Maecenas purus felis, cursus id viverra aliquet, tempus sed lorem. Sed ultricies, purus ut vehicula euismod, ipsum risus tristique augue, a auctor orci massa a augue.
                        </p>
                    </div>
                    <div style="background: #999;">
                        <p>
                            Aenean eu libero ultricies, faucibus tortor ac, vehicula tellus. Aenean ut ligula eleifend, sollicitudin lectus nec, rhoncus magna. Phasellus vestibulum nec felis id convallis. Morbi mi augue, viverra finibus mollis nec, sodales sed ex. Donec porta gravida nunc at dictum.
                        </p>
                        <p>
                            Aenean eu libero ultricies, faucibus tortor ac, vehicula tellus. Aenean ut ligula eleifend, sollicitudin lectus nec, rhoncus magna. Phasellus vestibulum nec felis id convallis. Morbi mi augue, viverra finibus mollis nec, sodales sed ex. Donec porta gravida nunc at dictum.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="band band_highlight">
        <div class="wrap">
            <div class="vPad">
                Testing
            </div>
        </div>
    </div>
</div>
*/
.curveClip {
  position: relative;
  z-index: 1;
  margin-bottom: -14px;
  overflow: hidden; }

.curveClip-wrap {
  position: relative;
  margin-left: -50%;
  border-bottom-left-radius: 100% 200px;
  border-bottom-right-radius: 100% 200px;
  background-size: cover;
  width: 200%;
  height: 100%;
  overflow: hidden; }

.curveClip-wrap-inner {
  margin-left: 25%;
  width: 50%;
  height: 100%; }

.curveClip_deep {
  margin-bottom: -20px; }
  .curveClip_deep > .curveClip-wrap {
    border-bottom-left-radius: 100% 300px;
    border-bottom-right-radius: 100% 300px; }

@media (max-width: 1023px) {
  .curveClip_deepResp > .curveClip-wrap {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; } }

.curveClip_brands {
  z-index: 2;
  margin-top: -80px; }
  @media (max-width: 1023px) {
    .curveClip_brands {
      z-index: 1;
      margin-top: -100px; } }

.mix-curveClip_z1 {
  z-index: 1; }

.mix-curveClip_z2 {
  z-index: 2; }

.mix-curveClip_z3 {
  z-index: 3; }

/*
@name Hero
@description Large image at top of page

@markup
<div class="curveClip">
    <div class="curveClip-wrap">
        <div class="curveClip-wrap-inner">
            <div class="hero" style="background-image: url('/assets/media/images/surgeons_RT.jpg');">
                <div class="hero-content">
                    <div class="hero-content-title">
                        <h1 class="hdg hdg_1">Title</h1>
                    </div>
                    <div class="hero-content-bd">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="band band_highlight">
    <div class="wrap">
        <div class="vPad">
            Testing
        </div>
    </div>
</div>
*/
.hero {
  display: table;
  position: relative;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 150px; }
  @media (min-width: 512px) {
    .hero {
      height: 300px; } }
  @media (min-width: 1024px) {
    .hero {
      height: 470px; } }

@media (min-width: 512px) {
  .hero_short {
    height: 200px; } }

@media (min-width: 1024px) {
  .hero_short {
    height: 336px; } }

.hero-content {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  text-align: center;
  text-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
  color: #ffffff; }

.hero-content_video {
  cursor: pointer;
  padding: 50px 0 30px; }
  @media (min-width: 1024px) {
    .hero-content_video {
      padding: 94px 0 0; } }

.hero-content-hd {
display: none;
}

@media (max-width: 1023px) {
  .hero-content-lg {
    display: none; }
  .hero-content-hd {
    margin-bottom: 15px; } }

.hero-content-tag > * {
  width: auto;
  max-width: 80%;
  max-height: 60px;
  vertical-align: middle; }

@media (min-width: 1024px) {
  .hero-content {
    display: table-cell;
    background: -webkit-linear-gradient(rgba(123, 0, 99, 0), rgba(45, 18, 99, 0.5) 73%, rgba(45, 18, 99, 0.7));
    background: linear-gradient(rgba(123, 0, 99, 0), rgba(45, 18, 99, 0.5) 73%, rgba(45, 18, 99, 0.7));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff3236', endColorstr='#b32d1263',GradientType=0); }
  .hero-content_video {
    background: none; }
  .hero-content-lg {
    margin: 0 auto;
    width: 80%;
    max-width: 612px; } }

/*
@name Internal Hero
@description A shorter hero used for internal pages. The nav section is optional. There is a nunjucks macro available for use that allows for inserting arbitrary content on the right side.

@markup
<div class="vr vr_20">
    <div class="band band_internalHero isHidden@sm">
        <div class="wrap">
            <div class="heroSmall">
                <div class="heroSmall-nav">
                    <div class="heroSmall-nav-item">
                        <span class="txt txt_1 mix-txt_bold mix-txt_caps mix-txt_white">
                            Resources:
                        </span>
                    </div>

                    <div class="heroSmall-nav-item">
                        <a href="#" class="heroSmall-nav-item-link">
                            Instructions for Use
                        </a>
                    </div>

                    <div class="heroSmall-nav-item">
                        <a href="#" class="heroSmall-nav-item-link heroSmall-nav-item-link_active">
                            Clinical Evidence
                        </a>
                    </div>
                </div>
                <div class="heroSmall-hd">
                    <div class="heroSmall-hd-left">
                        <h1 class="hdg hdg_2 mix-hdg_light mix-hdg_white">Product Catalog</h1>
                    </div>
                    <div class="heroSmall-hd-right">
                        <form action="/" method="post">
                            <div class="searchAlt">
                                <label for="searchAlt" class="isVisuallyHidden">Search Product Catalog</label>
                                <input type="search" placeholder="Search Product Catalog" data-view="Placeholder" class="searchAlt-field">
                                <button class="searchAlt-submit" type="submit">
                                    <svg class="icon mix-icon_sm mix-icon_royal mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                                        <use xlink:href="#icon_search"></use>
                                    </svg>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- /.vr -->
<div class="vr vr_20">
    <div class="band band_internalHero">
        <div class="wrap">
            <div class="heroSmall">
                <div class="heroSmall-hd">
                    <div class="heroSmall-hd-left heroSmall-hd-left_stack@sm">
                        <h1 class="hdg hdg_3Resp mix-hdg_light mix-hdg_white">V.A.C. Ulta™ Negative Pressure Wound Therapy System</h1>
                    </div>
                    <div class="heroSmall-hd-right heroSmall-hd-right_stack@sm mix-heroSmall-hd-right_right@lg">
                        <div class="column column_lg">
                            <div>
                                <div class="txt txt_2">Manufactured by</div><!-- /.txt txt_2 -->
                            </div>
                            <div>
                                <img src="/assets/media/images/KCI.png" alt="" class="isBlock" />
                            </div>
                        </div><!-- /.column -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- /.vr -->
*/
.heroSmall {
  margin: auto;
  width: 100%;
  max-width: 1148px;
  box-sizing: border-box; }

.heroSmall-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 0 8px 0;
  width: 100%; }

.heroSmall-nav-item {
  display: inline-block; }

.heroSmall-nav-item-link {
  /* Styling for these links is contained here because they are unique and don't fit into the btn module. */
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 8px 18px;
  text-decoration: none;
  box-sizing: border-box;
  color: #ffffff;
  font-weight: bold; }
  .heroSmall-nav-item-link:hover {
    text-decoration: none;
    color: #ffffff; }
  .heroSmall-nav-item-link_active {
    background-color: rgba(45, 18, 99, 0.7); }

.heroSmall-hd {
  display: table;
  padding: 20px 0;
  width: 100%; }

.heroSmall-hd-left,
.heroSmall-hd-right {
  display: table-cell;
  vertical-align: middle;
  color: #ffffff; }

.heroSmall-hd-right_stack\@sm {
  margin-top: 12px; }

.heroSmall-hd-left {
  width: 70%; }

.heroSmall-hd-right {
  width: 30%; }

@media (max-width: 1023px) {
  .heroSmall-hd-left_stack\@sm,
  .heroSmall-hd-right_stack\@sm {
    display: block;
    width: 100%; } }

@media (min-width: 1024px) {
  .mix-heroSmall-hd-right_right\@lg {
    text-align: right; } }

/**
@name Icon
@description Icons generated using grunticon. Icons get served progressively. Fill color can be changed via css in browsers that support inline svg (IE10+).

@markup
<div class="vr">
    <div>UI Icons</div>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_alert"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_arrowDown"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_arrowForward"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_bulb"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_calendar"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_check"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_close"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_contact"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_globe"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_goArrow"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_goArrowDown"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_goArrowLeft"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_goArrowUp"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_info"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_mail"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_manuals"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_menu"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_minus"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_outside"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_person"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_picture"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_play"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_playCamo"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_plus"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_print"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_question"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_search"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_select"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_write"></use>
    </svg>
</div>

<div class="vr">
    <div>Social Icons</div>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_facebook"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_googlePlus"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_linkedin"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_rss"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_youtube"></use>
    </svg>
</div>

<div class="vr">
    <div>Size Mixins</div>
    <svg class="icon mix-icon_xs" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
    <svg class="icon mix-icon_ms" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
    <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
    <svg class="icon mix-icon_md" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
    <svg class="icon mix-icon_lg" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
</div>

<div class="vr">
    <div>Misc. Icons</div>
    <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_globeM"></use>
    </svg>
</div>

<div class="vr">
    <div>Colors (Only for inline svgs)</div>
    <svg class="icon mix-icon_green mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
    <svg class="icon mix-icon_magenta mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
    <svg class="icon mix-icon_red mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
    <svg class="icon mix-icon_royal mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
        <use xlink:href="#icon_personRound"></use>
    </svg>
</div>
*/
.icon {
  display: inline-block;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  text-align: center;
  font-size: 18px; }

.mix-icon_xs {
  font-size: 8px; }

.mix-icon_ms {
  font-size: 12px; }

.mix-icon_sm {
  font-size: 14px; }

.mix-icon_md {
  font-size: 20px; }

.mix-icon_lg {
  font-size: 34px; }

.mix-icon_xl {
  font-size: 46px; }

.mix-icon_xxl {
  font-size: 56px; }

.mix-icon_xxxl {
  font-size: 68px; }

@media (max-width: 1023px) {
  .mix-icon_xxl\@sm {
    font-size: 56px; } }

.mix-icon_media {
  font-size: 75px; }

.mix-icon_carousel {
  font-size: 20px; }
  @media (min-width: 1024px) {
    .mix-icon_carousel {
      font-size: 46px; } }

.mix-icon_brand {
  font-size: 24px; }

.mix-icon_column {
  width: 10px;
  height: 18px; }

.mix-icon_green {
  fill: #8caa4a; }

.mix-icon_magenta {
  fill: #ed217c; }

.mix-icon_red {
  fill: #cf344a; }

.mix-icon_royal {
  fill: #8c317a; }

.mix-icon_white {
  fill: #ffffff; }

.mix-icon_block {
  display: block; }

.mix-icon_clickable {
  cursor: pointer; }

.mix-icon_transition {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out; }

/*
@name Buttons
@description Styling for buttons on site.

@markup
<div class="wrap">
    <div class="blocks">
        <div>
            <a class="btn" href="/">
                <span>Default Button</span>
            </a>
        </div>
        <div>
            <a class="btn btn_border" href="/">
                <span>Border Button</span>
            </a>
        </div>
        <div>
            <a class="btn btn_mag" href="/">
                <span>Magenta Button</span>
            </a>
        </div>
        <div>
            <a class="btn btn_dark" href="/">
                <span>Dark Purple Button</span>
            </a>
        </div>
        <div>
            <a class="btn btn_round" href="/">
                <span>Round Button</span>
            </a>
        </div>
        <div>
            <a class="btn mix-btn_tight" href="/">
                <span>Tight Button</span>
            </a>
        </div>
    </div><!-- /.blocks -->

    <div class="vrTop">
        <a class="btn btn_dark mix-btn_full" href="/">
            <span>Full Width Button</span>
        </a>
    </div><!-- /.vrTop -->
</div>
*/
.btn {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 5px 5px 25px 5px;
  background-color: #8c317a;
  cursor: pointer;
  padding: 14px 43px;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  color: #ffffff;
  fill: #ffffff;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: 500; }

.btn_sm {
  padding: 14px 43px;
  line-height: 1.2; }

.btn:hover {
  background-color: #ae6ea2;
  text-decoration: none;
  color: #ffffff;
  fill: #ffffff; }

.btn_border {
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #ffffff; }

.btn_border:hover {
  background-color: #ffffff;
  color: #2d1263; }

.btn_mag {
  background-color: #ed217c; }

.btn_mag:hover {
  background-color: #f263a3; }

.btn_dark {
  background-color: #2d1263; }

.btn_dark:hover {
  background-color: #6c5991; }

.btn_round {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  border-color: #e9ebe9;
  background-color: #ffffff;
  padding: 8px 43px;
  min-width: 107px;
  color: #77787b;
  font-size: 14px; }

.btn_round:hover {
  border-color: #ffffff;
  color: #ffffff; }

.btn_roundSm {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  border-color: #e9ebe9;
  background-color: #ffffff;
  padding: 6px 14px;
  min-width: 82px;
  color: #77787b;
  font-size: 14px; }

.btn_roundSm:hover {
  border-color: #ffffff;
  color: #ffffff; }

.btn_pill {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 16px;
  border-color: #cecece;
  background-color: #ffffff;
  padding: 6px 14px;
  min-width: 107px;
  color: #77787b;
  font-family: "gesta", "Helvetica Neue", "Arial", sans-serif;
  font-size: 14px; }

.btn_pill:hover {
  border-color: #ffffff;
  color: #ffffff; }

.mix-btn_full {
  display: block;
  width: 100%; }

.mix-btn_tight {
  padding: 14px 26px; }

.btn_subNavLg {
  padding: 9px 11px 11px 11px; }

@media (max-width: 1023px) {
  .mix-btn_full\@sm {
    display: block;
    width: 100%; } }

@media (max-width: 580px) {
  .mix-btn_full\@xs {
    display: block;
    width: 100%; } }

/**
@name Circle
@description Circular object with vert and horiz centered content

@markup
<div class="vr vr_20">
    <div class="vr">Inspiration Module</div>
    <div class="blocks blocks_2up mix-blocks_4up@lg">
        <div>
            <a href=/"" class="circle">
                <div class="circle-bd">
                    <div class="circle-bd-hd">
                        <h2 class="hdg hdg_4">Innovation at Acelity</h2>
                    </div><!-- /.circle-hd-bd -->
                    <div class="circle-bd-bd">
                        <p class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, rem earum illum nam ducimus eligendi dolore nesciunt eaque molestias sequi.</p><!-- /.txt -->
                    </div><!-- /.circle-bd-bd -->
                    <div class="circle-bd-ft">
                        <div class="column">
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon mix-icon_block">
                                    <use xlink:href="#icon_arrowForward"></use>
                                </svg>
                            </div>
                            <div>
                                <span>Read more</span>
                            </div>
                        </div>
                    </div><!-- /.circle-bd-ft -->
                </div><!-- /.circle-bd -->
            </a>
        </div>
    </div>
</div>
*/
.circle {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  display: table;
  box-sizing: border-box;
  border-radius: 50%;
  background-color: #9f76b4;
  width: 350px;
  height: 350px;
  text-align: center;
  text-decoration: none;
  color: #ffffff; }

.circle:hover {
  background-color: #65518f;
  text-decoration: none;
  color: #ffffff; }

.mix-circle_dark {
  background-color: rgba(45, 18, 99, 0.7); }

@media (max-width: 579px) {
  .mix-circle_block\@sm {
    border-radius: 0;
    width: 100%;
    height: 100%; } }

.circle-bd {
  display: table-cell;
  padding: 20px;
  vertical-align: middle; }

.circle-bd-hd {
  margin-bottom: 12px; }

.circle-bd-bd {
  margin-bottom: 20px; }

.circle-bd-ft {
  font-weight: 700;
  fill: #ffffff;
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out; }

.circle:hover .circle-bd-ft {
  color: #c7b2d6;
  fill: #c7b2d6; }

/**
@name Field
@description Basic text and textarea fields with optional validation

@markup
<div class="vr vr_20">
    <div class="vr">Default</div>
    <div class="field">
        <div class="field-wrap">
            <input type="text" class="field-wrap-input" placeholder="Placeholder ipsum" data-view="Placeholder">
        </div>
    </div>
</div>
<div class="vr vr_20">
    <div class="vr">Successful</div>
    <div class="field">
        <div class="field-wrap">
            <input type="text" class="field-wrap-input isSuccessful" value="Some entered text" placeholder="Successful ipsum" data-view="Placeholder">
            <div class="field-wrap-icon">
                <svg class="icon mix-icon_green" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon_check"></use>
                </svg>
            </div>
        </div>
    </div>
</div>
<div class="vr vr_20">
    <div class="vr">Error</div>
    <div class="field">
        <div class="field-wrap">
            <input type="text" class="field-wrap-input hasError" value="Some entered text" placeholder="Error ipsum" data-view="Placeholder">
            <div class="field-wrap-icon">
                <svg class="icon mix-icon_red" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon_alert"></use>
                </svg>
            </div>
        </div>
        <div class="field-message field-message_tight hasError">Invalid form field message.</div>
    </div>
</div>
<div class="vr vr_20">
    <div class="vr">Character Limited with remaining count</div>
    <div class="field" data-view="CharCount">
        <label for="textarea" class="field-label">Your Message</label>
        <div class="field-wrap">
            <textarea type="text" class="field-wrap-input js-char-field" id="textarea" maxlength="500" placeholder="Error ipsum" data-view="Placeholder">Some Entered Text</textarea>
        </div>
        <div class="field-char"><span class="js-char-remaining">500</span> Characters Remaining</div>
        <div class="field-message hasError">Generic Error Message.</div>
    </div>
</div>
*/
@media (min-width: 1024px) {
  .field_70\@lg {
    width: 70%; } }

.field-label {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #8a8a8a;
  font-size: 16px; }

.field-wrap {
  position: relative; }

.field-wrap-input {
  display: block;
  box-sizing: border-box;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  background-color: #ffffff;
  padding: 12px 42px 12px 12px;
  width: 100%;
  color: #412c36;
  font-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none; }

.field-wrap-icon {
  position: absolute;
  top: 50%;
  right: 12px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%); }

.field-wrap-input.isSuccessful {
  border-color: #8caa4a; }

.field-wrap-input.hasError {
  border-color: #cf344a; }

.field-char {
  margin-top: 8px;
  text-align: right;
  text-transform: uppercase;
  color: #8a8a8a;
  font-size: 14px; }

.field-message {
  border: 1px solid #f6d7dc;
  border-radius: 5px;
  padding: 10px 14px;
  line-height: 1.2;
  font-size: 14px; }

.field-char ~ .field-message {
  margin-top: 20px; }

.field-message_tight {
  margin-top: -4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding-top: 14px; }

.field-message.hasError {
  background-color: #faeaed;
  color: #cf344a; }

.field-wrap-input.hasPlaceholder {
  color: #b4b8b8;
  font-size: 18px;
  font-style: italic; }

.field-wrap-input::-webkit-input-placeholder {
  color: #b4b8b8;
  font-size: 18px;
  font-style: italic; }

.field-wrap-input:-moz-placeholder {
  /* Firefox 18- */
  color: #b4b8b8;
  font-size: 18px;
  font-style: italic; }

.field-wrap-input::-moz-placeholder {
  /* Firefox 19+ */
  color: #b4b8b8;
  font-size: 18px;
  font-style: italic; }

.field-wrap-input:-ms-input-placeholder {
  color: #b4b8b8;
  font-size: 18px;
  font-style: italic; }

/**
@name Label
@description label styles to mimic specific object labels when used outside of them

@markup
<label for="select1" class="label">What type of Idea is this?</label>
<div class="select">
    <select name="select1" id="select1" class="select-field">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <div class="select-icon">
        <svg class="icon mix-icon_column mix-icon_royal" xmlns="http://www.w3.org/2000/svg">
            <use xlink:href="#icon_select"></use>
        </svg><!-- ./icon -->
    </div> <!-- ./select-icon -->
</div> <!-- /.select -->
*/
.label {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #8a8a8a;
  font-size: 16px; }

.label_inline {
  display: inline-block;
  vertical-align: middle; }

/*
@name Links
@description Text link styling.

@markup
<div class="vr">
    <a href="#0" class="link">Body Link</a>
</div>
<div class="vr">
    <a href="#0" class="link link_bold">Bold Body Link</a>
</div>
<div class="vr">
    <a href="#0" class="link mix-link_noUnderline">Link, no underline</a>
</div>
<div class="vr">
    <a href="#0" class="link mix-link_underline">Link, underline</a>
</div>
<div class="vr">
    <a href="#0" class="link link_brown">Brown, no underline</a>
</div>
<div class="vr">
    <a href="#0" class="link link_purpleDark">Dark Purple Link</a>
</div>
<div class="vr">
    <a href="#0" class="link link_greyDark">Grey Dark Link</a>
</div>
<div class="vr">
    <a href="#0" class="link link_secondary">Secondary Link</a>
</div>
<div class="vr">
    <a href="#0" class="link link_mainNav">Main Nav Link</a>
</div>
<div class="vr">
    <a href="#0" class="link link_hero">Hero Link</a>
</div>
<div class="vr">
    <a href="#0" class="link mix-link_bold">Bold Link</a>
</div>
<div class="vr">
    <a href="#0" class="link link_icon">
        <div>
            <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_arrowForward"></use>
            </svg>
        </div>
        <div>
            <span>Icon Link</span>
        </div>
    </a>
</div>
<div class="vr">
    <a href="#0" class="link link_icon mix-link_iconSplit">
        <div>
            <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_arrowForward"></use>
            </svg>
        </div>
        <div>
            <span class="txt txt_1">Icon Link</span>
        </div>
    </a>
</div>
*/
.link {
  /* don't want to transition all (specifically fill) because transitioning on
    properties which are inheriting causes a delay */
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  text-decoration: none;
  fill: #8c317a;
  color: #8c317a; }

.link:hover {
  text-decoration: underline;
  fill: #ae6ea2;
  color: #ae6ea2; }

.link_bold {
  font-weight: 700; }

.mix-link_underline {
  text-decoration: underline; }

.mix-link_noUnderline:hover {
  text-decoration: none; }

.link_brown {
  fill: #ed217c;
  color: #362f2d; }

.link_brown:hover {
  fill: #f263a3;
  color: #b4b8b8; }

.link_purpleDark {
  fill: #2d1263;
  color: #2d1263; }

.link_purpleDark:hover {
  fill: #412c36;
  color: #412c36; }

.link_greyDark {
  fill: #77787b;
  color: #77787b; }

.link_greyDark:hover {
  text-decoration: none;
  fill: #ed217c;
  color: #ed217c; }

.link_white {
  fill: #ffffff;
  color: #ffffff; }

.link_secondary {
  fill: #2d1263;
  color: #2d1263; }

.link_secondary:hover {
  text-decoration: underline;
  fill: #6c5991;
  color: #6c5991; }

.link_mainNav {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  display: inline-block;
  margin: 6px 0 12px 0;
  border-bottom: 3px solid transparent;
  padding-bottom: 12px;
  color: #8c317a; }

.link_mainNav:hover {
  border-bottom: 3px solid #8c317a;
  text-decoration: none;
  color: #8c317a; }

.link_hero {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  display: inline-block;
  margin: 6px 0 6px -15px;
  border-left: 3px solid transparent;
  padding-left: 12px;
  color: #2d1263;
  font-size: 16px;
  font-weight: 700; }

.link_hero:hover,
.link_hero.isActive {
  border-left: 3px solid #8c317a;
  text-decoration: none;
  color: #8c317a; }

.link_footer {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  color: #8c317a; }
  @media (min-width: 1024px) {
    .link_footer {
      color: #77787b; } }

.link_footer:hover {
  color: #ae6ea2; }
  @media (min-width: 1024px) {
    .link_footer:hover {
      color: #ed217c; } }

.link_white:hover {
  fill: #ffffff;
  color: #ffffff; }

.link_offWhite:hover {
  fill: #f0f1f0;
  color: #f0f1f0; }

.link_icon {
  font-size: 0; }

.link_icon > * {
  display: block;
  vertical-align: middle;
  font-size: 16px; }

.link_icon > *:first-child {
  float: left; }

.link_icon > * + * {
  margin-left: 12px;
  overflow: hidden; }

.mix-link_iconSplit {
  text-transform: uppercase;
  color: #412c36;
  fill: #ed217c; }

.mix-link_iconSplit:hover {
  color: #cebfc8;
  fill: #f7acad; }

.mix-link_uppercase {
  text-transform: uppercase; }

.mix-link_bold {
  font-weight: bold; }

.mix-link_flip {
  text-align: right; }

/**
@name Modal
@markup
<div class="vr vr_20">
    <div data-view="Modal" data-modal="1">Default Modal</div>
</div><!-- /.vr_20 -->
<div class="vr vr_20">
    <div data-view="Modal" data-modal="2">Transition Modal</div>
</div><!-- /.vr_20 -->
<div class="vr vr_20">
    <div data-view="Modal" data-modal="3">Youtube Modal</div>
</div><!-- /.vr_20 -->
<div class="vr vr_20">
    <div data-view="Modal" data-modal="4">Other video player Modal</div>
</div><!-- /.vr_20 -->
<div class="vr vr_20">
    <a href="http://google.com" class="link js-extLink" data-modal="5">External Link Modal</a>
</div><!-- /.vr_20 -->

<div class="modal js-modal" data-modal="1" role="dialog" aria-hidden="true">
    <div class="modal-bd js-modal-bd">
        <div class="modal-bd-close js-modal-close">
            <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_close"></use>
            </svg>
        </div><!-- /.modal-bd-close -->
        some body content
    </div><!-- /.modal-bd -->
</div><!-- /.modal -->
<div class="modal js-modal" data-modal="2" role="dialog" aria-hidden="true">
    <div class="modal-bd js-modal-bd">
        <div class="modal-bd-close js-modal-close">
            <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_close"></use>
            </svg>
        </div><!-- /.modal-bd-close -->
        <div class="vr vr_x2">
            <div class="hdg hdg_2 mix-hdg_light mix-hdg_purpleDark">LifeCell proudly joined Acelity!</div>
        </div><!-- /.vr -->
        <div class="vr vr_20">
            <p class="txt">Lifecell is now part of Acelity's integrated portfolio of regenerative medicine solutions. <a href="#0" class="link">Learn More</a></p><!-- /.txt -->
        </div><!-- /.vr -->
        <div class="vr vr_20">
            <div class="transition">
                <div class="transition-bd">
                    <div class="transition-bd-box">
                        <img src="/assets/media/images/LC_Acelity.svg" alt="">
                    </div><!-- /.transition-box -->
                    <div class="transition-bd-box transition-bd-box_dark">
                        <img src="/assets/media/images/acelity_logo_vert.png" alt="">
                    </div><!-- /.transition-box -->
                </div><!-- /.transition-bd -->
                <div class="transition-icon">
                    <svg class="icon mix-icon_magenta mix-icon_lg" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon_arrowForward"></use>
                    </svg>
                </div><!-- /.transition-icon -->
            </div><!-- /.transition -->
        </div><!-- /.vr -->
        <div class="isAlignedCenter">
            <button type="button" class="btn btn_dark js-modal-close">
                <span>Ok</span>
            </button>
        </div><!-- /.isAlignedCenter -->
    </div><!-- /.modal-bd -->
</div><!-- /.modal -->
<div class="modal js-modal" data-modal="3" role="dialog" aria-hidden="true">
    <div class="modal-bd js-modal-bd">
        <div class="modal-bd-close js-modal-close">
            <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_close"></use>
            </svg>
        </div><!-- /.modal-bd-close -->
        <div class="video js-modal-video">
            <iframe width="420" height="315" src="https://www.youtube.com/embed/9b_9PbuB2eg?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
        </div>
    </div><!-- /.modal-bd -->
</div><!-- /.modal -->
<div class="modal js-modal" data-modal="4" role="dialog" aria-hidden="true">
    <div class="modal-bd js-modal-bd">
        <div class="modal-bd-close js-modal-close">
            <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_close"></use>
            </svg>
        </div><!-- /.modal-bd-close -->
        <div class="video js-modal-video">
            Other video player
        </div>
    </div><!-- /.modal-bd -->
</div><!-- /.modal -->
<div class="modal js-modal" data-modal="5" role="dialog" aria-hidden="false">
    <div class="modal-bd js-modal-bd">
        <div class="modal-bd-close js-modal-close">
            <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_close"></use>
            </svg>
        </div>
        <div class="modal-bd-bd">
            <div class="vr vr_20">
                <div class="vr">
                    <p class="hdg  mix-hdg_bold isAlignedCenter">You are leaving acelity.com</p>
                </div>
                <p class="txt">You are now leaving the acelity.com web site. Links to other sites are provided as a convenience to users. These sites are not affiliated with Acelity, and Acelity accepts no responsibility for their content.</p>
            </div>
            <div class="blocks blocks_2up mix-blocks_1up@xs">
                <div class="isAlignedRight">
                    <a class="btn btn_mag mix-btn_full@xs js-modal-extLink" target="_blank" href="http://google.com">
                        <span>Continue</span>
                    </a>
                </div>
                <div class="">
                    <button class="btn btn_dark mix-btn_full@xs js-modal-close">
                        <span>Cancel</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
*/
.modal {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  visibility: hidden;
  opacity: 0;
  overflow-x: hidden;
  overflow-y: auto; }

.modal:before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(65, 44, 54, 0.8);
  content: ""; }

.modal.isActive {
  visibility: visible;
  opacity: 1;
  z-index: 100; }

.modal-bd {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  box-sizing: border-box;
  background-color: #e9ebe9;
  background-image: url("../media/images/banded-bg-rt.png");
  background-size: cover;
  padding: 55px 18px 30px 18px;
  width: 100%; }
  @media (min-width: 1024px) {
    .modal-bd {
      margin: auto;
      border-radius: 5px;
      padding: 55px 50px 30px 50px;
      max-width: 640px; }
      .modal-bd_large {
        max-width: 790px; } }

.modal-bd-close {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 15px;
  border-radius: 5px;
  background-color: #ed217c;
  cursor: pointer;
  padding: 10px;
  fill: #ffffff; }
  @media (min-width: 1024px) {
    .modal-bd-close {
      top: -6px;
      right: 10px;
      border-radius: 5px 5px 25px 5px;
      padding: 15px; } }

/**
@name Multi Select
@description Pattern for selecting multiple items. Small breakpoints are presented as a select like dropdown. On large breakpoints they are presented in a horizontal list of pill like buttons.

@markup
<div class="wrap" style="height: 200px;">
    <div class="multiSelect" data-view="MultiSelect">
        <button type="button" class="multiSelect-hd js-multiSelect-hd">
            <div class="cell">
                <div class="cell-item mix-cell-item_max">
                    <span class="multiSelect-hd-title">Category:</span>
                    <span class="multiSelect-hd-selected js-multiSelect-selected">All</span>
                </div>
                <div class="cell-item mix-cell-item_padL">
                    <svg class="icon mix-icon_royal mix-icon_sm mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon_plus" class="js-multiSelect-iconUse"></use>
                    </svg>
                </div>
            </div>
        </button>
        <ul class="multiSelect-list isInactive js-multiSelect-list">
            <li class="isActive">All</li>
            <li>Wound Management</li>
            <li>Plastic Surgery</li>
        </ul>
    </div>
</div>
*/
.multiSelect {
  cursor: pointer; }

@media (max-width: 1023px) {
  .multiSelect {
    position: relative; }
  .multiSelect-hd {
    margin: 0;
    border: 1px solid #cecece;
    background: -webkit-linear-gradient(top, #ffffff 0%, #e9ebe9 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #e9ebe9 100%);
    cursor: pointer;
    padding: 10px 13px;
    width: 100%;
    text-align: left;
    font-family: "gesta", "Helvetica Neue", "Arial", sans-serif;
    font-size: 16px; }
  .multiSelect-hd-title {
    color: #77787b; }
  .multiSelect-hd-selected {
    display: inline-block; }
  .multiSelect-hd-selected {
    color: #8c317a;
    font-weight: 700; }
  .multiSelect-list {
    -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    visibility: hidden;
    border: 1px solid #dfdfdf;
    height: 0;
    overflow: hidden; }
  .multiSelect-list.isActive {
    visibility: visible; }
  /* applied by default land used for measuring the expanded height, removed
    once measurement has been made */
  .multiSelect-list.isInactive {
    height: auto; }
  .multiSelect-list > * {
    background-color: #ffffff;
    padding: 13px 13px;
    color: #412c36;
    font-weight: 700; }
  .multiSelect-list > .isActive {
    color: #8c317a; }
  .multiSelect-list > *:active {
    background-color: #e9ebe9; }
  .multiSelect-list > * + * {
    border-top: 1px solid #dfdfdf; } }

@media (min-width: 1024px) {
  .multiSelect-hd {
    display: none; }
  .multiSelect-list {
    margin: -10px 0 0 -10px;
    font-size: 0; }
  .multiSelect-list > * {
    display: inline-block;
    margin: 10px 0 0 10px;
    border: 1px solid #cecece;
    border-radius: 25px;
    padding: 8px 20px;
    color: #77787b;
    font-size: 14px; }
  .multiSelect-list > :hover {
    border-color: #8c317a;
    color: #8c317a; }
  .multiSelect-list > .isActive {
    border-color: #8c317a;
    background-color: #8c317a;
    color: #ffffff; } }

input.search {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  display: block;
  position: relative;
  z-index: 20;
  border: 1px solid #dbdedc;
  border-radius: 20px;
  padding: 8px 18px;
  width: 100%;
  color: #412c36;
  font-size: 16px; }

.search.hasPlaceholder, .search::-webkit-input-placeholder {
  color: #b4b8b8;
  font-size: 16px;
  font-style: italic; }

.search.hasPlaceholder, .search:-moz-placeholder {
  /* Firefox 18- */
  color: #b4b8b8;
  font-size: 16px;
  font-style: italic; }

.search.hasPlaceholder, .search::-moz-placeholder {
  /* Firefox 19+ */
  color: #b4b8b8;
  font-size: 16px;
  font-style: italic; }

.search.hasPlaceholder, .search:-ms-input-placeholder {
  color: #b4b8b8;
  font-size: 16px;
  font-style: italic; }

/**
@name Search Alternate
@description Alternate version of search input

@markup
<div class="vr">
    <form action="/" method="post">
        <div class="searchAlt">
            <label for="searchAlt" class="isVisuallyHidden">Search Acelity</label>
            <input type="search" placeholder="Search Acelity" data-view="Placeholder" class="searchAlt-field" />
            <button class="searchAlt-submit" type="submit">
                <svg class="icon mix-icon_sm mix-icon_royal mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon_search"></use>
                </svg>
            </button>
        </div>
    </form>
</div>

<div class="vr">
    <form action="/" method="post">
        <div class="searchAlt">
            <label for="searchAlt" class="isVisuallyHidden">Search Acelity</label>
            <input type="search" placeholder="Search Acelity" data-view="Placeholder" class="searchAlt-field mix-searchAlt_border" />
            <button class="searchAlt-submit" type="submit">
                <svg class="icon mix-icon_sm mix-icon_royal mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon_search"></use>
                </svg>
            </button>
        </div>
    </form>
</div>
*/
.searchAlt {
  position: relative;
  width: 100%; }

input.searchAlt-field {
  display: block;
  box-sizing: border-box;
  border: 0;
  border-radius: 5px;
  padding: 12px 35px 12px 20px;
  width: 100%;
  color: #000000;
  font-size: 18px; }

.searchAlt-field.hasPlaceholder, .searchAlt-field::-webkit-input-placeholder {
  color: #b4b8b8;
  font-size: 18px;
  font-style: italic; }

.searchAlt-field.hasPlaceholder, .searchAlt-field:-moz-placeholder {
  /* Firefox 18- */
  color: #b4b8b8;
  font-size: 18px;
  font-style: italic; }

.searchAlt-field.hasPlaceholder, .searchAlt-field::-moz-placeholder {
  /* Firefox 19+ */
  color: #b4b8b8;
  font-size: 18px;
  font-style: italic; }

.searchAlt-field.hasPlaceholder, .searchAlt-field:-ms-input-placeholder {
  color: #b4b8b8;
  font-size: 18px;
  font-style: italic; }

.searchAlt-submit {
  position: absolute;
  top: 50%;
  right: 15px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 0;
  background-color: transparent;
  cursor: pointer;
  padding: 0; }

input.mix-searchAlt_border {
  border: 1px solid #dfdfdf; }

/**
@name Select
@description Custom select dropdown

@markup
<div class="vr">
    <div class="select">
        <label for="select" class="isVisuallyHidden"></label>
        <select name="select" id="select" class="select-field">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <div class="select-icon">
            <svg class="icon mix-icon_column mix-icon_royal" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_select"></use>
            </svg>
        </div>
    </div>
</div><!-- /.vr -->
<div class="vr">
    <div class="select select_70@lg">
        <label for="select" class="isVisuallyHidden"></label>
        <select name="select" id="select" class="select-field">
            <option value="1">70% Width at large</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <div class="select-icon">
            <svg class="icon mix-icon_column mix-icon_royal" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_select"></use>
            </svg>
        </div>
    </div>
</div><!-- /.vr -->

*/
.select {
  position: relative;
  color: #412c36; }
  @media (min-width: 1024px) {
    .select_70\@lg {
      width: 70%; } }

.select-field {
  display: inline-block;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  background-color: #ffffff;
  cursor: pointer;
  padding: 14px 29px 14px 14px;
  width: 100%;
  font-size: 18px;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none; }

.select-label {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: #8a8a8a;
  font-size: 16px; }

.select-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none; }

/**
@name Tabs
@description Tabbed content or list of jump links. Data-pane identifiers should be unique to the page

@markup
<div class="vr vr_20">
    <div class="vr">Jump Nav, No indicator (so no need for js)</div>
    <div class="tabs">
        <div class="tabs-list tabs-list_alt">
            <div class="tabs-list-items tabs-list-items_alt">
                <a href="#0">Deep commitment to the recontructive community</a>
                <a href="#0">Investing in science and education to improve care</a>
                <a href="#0">The science behind our therapies</a>
            </div>
            <a href="#0" class="tabs-list-link">
                <div class="column">
                    <span>
                        <svg class="icon mix-icon_magenta mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon_arrowForward"></use>
                        </svg>
                    </span>
                    <span>
                        View All Products
                    </span>
                </div>
            </a>
        </div>
    </div>
</div>
<div class="vr vr_20">
    <div class="vr">Default Tabbed Panes</div>
    <div class="tabs" data-view="Tabs">
        <div class="tabs-list js-tabs-list">
            <div class="tabs-list-indicator js-tabs-indicator"></div>
            <ul class="tabs-list-items js-tabs-items">
                <li class="isActive js-tabs-item" data-pane="1">About</li>
                <li class="js-tabs-item" data-pane="2">Specifications</li>
                <li class="js-tabs-item" data-pane="3">Materials For Download</li>
            </ul>
        </div>
        <div class="tabs-pane isActive js-tabs-pane" data-pane="1">Pane 1</div>
        <div class="tabs-pane js-tabs-pane" data-pane="2">Pane 2</div>
        <div class="tabs-pane js-tabs-pane" data-pane="3">Pane 3</div>
    </div>
</div>
<div class="vr vr_20">
    <div class="vr">Alternate Tabbed Panes</div>
    <div class="tabs" data-view="Tabs">
        <div class="tabs-list tabs-list_alt js-tabs-list">
            <div class="tabs-list-indicator tabs-list-indicator_alt js-tabs-indicator js-tabs-indicator_alt"></div>
            <ul class="tabs-list-items tabs-list-items_alt js-tabs-items">
                <li class="isActive js-tabs-item" data-pane="1">About</li>
                <li class="js-tabs-item" data-pane="2">Specifications</li>
                <li class="js-tabs-item" data-pane="3">Materials For Download</li>
            </ul>
        </div>
        <div class="tabs-pane isActive js-tabs-pane" data-pane="1">Pane 1</div>
        <div class="tabs-pane js-tabs-pane" data-pane="2">Pane 2</div>
        <div class="tabs-pane js-tabs-pane" data-pane="3">Pane 3</div>
    </div>
</div>
<div class="vr vr_20">
    <div class="vr">Alternate Tabbed Panes Table
    (display: table, this should be used if there is danger of the items breaking to multiple linies on lg breakpoint)</div>
    <div class="tabs" data-view="Tabs">
        <div class="tabs-list tabs-list_alt js-tabs-list">
            <div class="tabs-list-indicator tabs-list-indicator_alt js-tabs-indicator js-tabs-indicator_alt"></div>
            <ul class="tabs-list-items tabs-list-items_alt tabs-list-items_altTable js-tabs-items">
                <li class="isActive js-tabs-item" data-pane="1">About</li>
                <li class="js-tabs-item" data-pane="2">Specifications</li>
                <li class="js-tabs-item" data-pane="3">Lots of items</li>
                <li class="js-tabs-item" data-pane="3">Lots of items</li>
                <li class="js-tabs-item" data-pane="3">This would wrap if not d:t</li>
            </ul>
        </div>
        <div class="tabs-pane isActive js-tabs-pane" data-pane="1">Pane 1</div>
        <div class="tabs-pane js-tabs-pane" data-pane="2">Pane 2</div>
        <div class="tabs-pane js-tabs-pane" data-pane="3">Pane 3</div>
    </div>
</div>
*/
.tabs {
  font-size: 0; }

.tabs-list {
  font-size: 16px; }

.tabs-pane {
  display: none;
  font-size: 16px; }

.tabs-pane.isActive {
  display: block; }

.tabs-sidebar {
  box-sizing: border-box;
  display: inline-block;
  margin: -20px 0 -20px;
  padding: 20px 0 0 20px;
  vertical-align: top;
  font-size: 16px; }
  @media (min-width: 1024px) {
    .tabs-sidebar {
      width: 33.333333%; } }

.tabs-list-items > * {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  cursor: pointer;
  vertical-align: middle;
  -webkit-hyphens: none;
     -moz-hyphens: none;
      -ms-hyphens: none;
          hyphens: none; }

@media (max-width: 1023px) {
  .tabs-list-indicator {
    display: none; }
  .tabs-list-items > *,
  .tabs-list-link {
    display: block;
    border-top: 1px solid #ffffff;
    background-color: #e9ebe9;
    padding: 13px 15px;
    text-align: center;
    text-decoration: none;
    color: #412c36;
    font-size: 18px;
    font-weight: 700; }
    .tabs-list-items > *:hover,
    .tabs-list-link:hover {
      text-decoration: none;
      color: #412c36; }
  .tabs-list-items > .isActive {
    background-color: #8c317a;
    color: #ffffff; }
  .tabs-list-items_alt > *,
  .tabs-list-link {
    border-top: 1px solid #b8b8b8;
    background-color: transparent;
    text-transform: uppercase;
    font-size: 18px; }
  .tabs-list-items_alt > :last-child {
    border-bottom: 1px solid #b8b8b8; }
  .tabs-list-items_alt > .isActive {
    background-color: transparent;
    color: #ed217c; }
  .tabs-list-link {
    border-bottom: 1px solid #b8b8b8; } }

@media (min-width: 1024px) {
  .tabs-list {
    position: relative;
    border-top: 1px solid #dfdfdf;
    border-bottom: 4px solid #8c317a; }
  .tabs-list_alt {
    display: table;
    margin: auto;
    border-top: 0;
    border-bottom: 1px solid #b8b8b8;
    width: 100%;
    max-width: 1148px; }
  .tabs-list-link {
    padding-left: 20px; }
  .tabs-list-indicator {
    -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: -4px;
    left: 0;
    opacity: 0;
    z-index: 10;
    background-color: #ed217c;
    width: 0;
    height: 7px;
    content: ""; }
  .tabs-list-indicator:after {
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    border-top: 12px solid #ed217c;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    content: ""; }
  .tabs-list-indicator.isActive {
    opacity: 1; }
  .tabs-list-indicator_alt {
    bottom: -1px;
    height: 4px; }
  .tabs-list-indicator_alt:after {
    display: none; }
  .tabs-list-items {
    display: table;
    position: relative;
    margin: auto;
    width: 100%;
    max-width: 1148px; }
  .tabs-list-items_alt {
    display: table-cell;
    vertical-align: middle;
    font-size: 0; }
  .tabs-list-items_altTable {
    display: table;
    width: 100%; }
  .tabs-list-items > * {
    display: table-cell;
    position: relative;
    cursor: pointer;
    padding: 14px 45px;
    height: 44px;
    text-align: center;
    text-decoration: none;
    color: #412c36;
    font-weight: 700; }
    .tabs-list-items > *:hover {
      text-decoration: none;
      color: #412c36; }
  .tabs-list-items_alt > * {
    display: table-cell;
    padding: 12px 12px;
    height: auto;
    text-transform: uppercase;
    font-size: 16px; }
  .tabs-list-items_altTable > * {
    display: table-cell; }
  .tabs-list-items_alt:not('.js-tabs-items') > * + * {
    padding-left: 38px; }
  .tabs-list-items_altTable > * + * {
    margin: 0; }
  .tabs-list-items > :hover {
    color: #ed217c; }
  .tabs-list-items > .isActive {
    color: #ed217c; }
  .tabs-list-link {
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #412c36;
    font-size: 16px;
    font-weight: 700; }
  .tabs-list-link:hover {
    color: #ed217c; }
  .tabs-pane_8\@lg {
    box-sizing: border-box;
    margin: -20px 0 -20px;
    padding: 20px 0 0 20px;
    width: 66.6666666667%;
    vertical-align: top; }
    .tabs-pane_8\@lg.isActive {
      display: inline-block; } }

/**
@name Tile
@description Content tile with image, title, and paragraph

@markup
<div class="blocks blocks_4up mix-blocks_1up@sm mix-blocks_tightStack@sm">
    <div>
        <a href="#0" class="tile" data-view="Tile">
            <img src="//placehold.it/365/230" alt="" class="tile-img">
            <div class="tile-bd js-tile-bd">
                <div class="tile-bd-hd js-tile-bd-hd">
                    <div class="cell">
                        <div class="cell-item mix-cell-item_max">
                            <h4>Wound Management</h4>
                        </div>
                        <div class="cell-item mix-cell-item-padL isHidden@lg">
                            <svg class="icon mix-icon_block mix-icon_transition js-tile-arrow" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#icon_goArrow"></use>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="tile-bd-bd js-tile-bd-bd">
                    <p>Lorem ipsum about section information here second line as needed</p>
                    <div class="tile-bd-bd-ft">
                        <div class="column">
                            <div>
                                <svg class="icon mix-icon_block mix-icon_xs" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon_goArrow"></use>
                                </svg>
                            </div>
                            <div>
                                Wound Management
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div>
        <a href="#0" class="tile" data-view="Tile">
            <img src="//placehold.it/365/230" alt="" class="tile-img">
            <div class="tile-bd js-tile-bd">
                <div class="tile-bd-hd js-tile-bd-hd">
                    <div class="cell">
                        <div class="cell-item mix-cell-item_max">
                            <h4>Plastic Surgery</h4>
                        </div>
                        <div class="cell-item mix-cell-item-padL isHidden@lg">
                            <svg class="icon mix-icon_block mix-icon_transition js-tile-arrow" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#icon_goArrow"></use>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="tile-bd-bd js-tile-bd-bd">
                    <p>Lorem ipsum about section information here second line as needed</p>
                    <div class="tile-bd-bd-ft">
                        <div class="column">
                            <div>
                                <svg class="icon mix-icon_block mix-icon_xs" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon_goArrow"></use>
                                </svg>
                            </div>
                            <div>
                                Plastic Surgery
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
*/
.tile {
  display: block;
  position: relative;
  border-radius: 5px 5px 25px 5px;
  width: 100%;
  text-decoration: none; }

.tile:hover {
  /* override default link hover styles */
  text-decoration: none;
  color: inherit; }

@media (max-width: 1023px) {
  .tile-img {
    display: none; }
  .tile-bd-hd {
    position: relative;
    z-index: 1;
    border-radius: 5px;
    background-color: #8c317a;
    padding: 15px 20px;
    fill: #ffffff;
    color: #ffffff;
    font-size: 22px; }
  .tile-bd-bd {
    -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
    position: relative;
    top: -5px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
    padding: 0 25px 0 25px;
    max-height: 0;
    overflow: hidden;
    color: #412c36; }
  .tile-bd-bd.isActive {
    padding: 20px 25px 15px 25px;
    max-height: 10em; }
  .tile-bd-bd-ft {
    padding-top: 12px;
    fill: #8c317a;
    color: #8c317a; } }

@media (min-width: 1024px) {
  .tile {
    /* make sure it is at least tall enough to contain the tile-bd-hd while
        the image loads or in case the image fails to load */
    min-height: 3.5em; }
  .tile-img {
    display: block;
    border-radius: 5px 5px 25px 5px;
    width: 100%; }
  .tile-bd {
    -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 0 0 25px 5px;
    /* scss-lint:disable DuplicateProperty, PropertySortOrder */
    background-color: #2e1263;
    background-color: rgba(46, 18, 99, 0.65);
    /* scss-lint:enable DuplicateProperty, PropertySortOrder */
    padding: 16px 22px 16px 22px;
    width: 100%;
    color: #ffffff; }
  .tile-bd-hd {
    font-size: 24px; }
  .tile-bd-bd {
    -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
    line-height: 1.3;
    font-size: 18px; }
  .tile:hover .tile-bd-bd {
    padding-top: 14px;
    max-height: 5em; }
  .tile-bd-bd-ft {
    display: none; } }

/**
@name Tooltip
@description

@markup
<div class="vr">
    <div class="tip" data-view="Tip">
        <div class="tip-hd">
            <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_question"></use>
            </svg>
        </div><!-- /.tip-hd -->
        <div class="tip-bd js-tip-bd">
            <div>Short content doens't need to be width limited and has white-space: nowrap</div>
        </div><!-- /.tip-bd -->
    </div><!-- /.tip -->
</div><!-- /.vr -->
<div class="vr">
    <div class="tip" data-view="Tip">
        <div class="tip-hd">
            <svg class="icon mix-icon_xxxl" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_question"></use>
            </svg>
        </div><!-- /.tip-hd -->
        <div class="tip-bd js-tip-bd">
            <div>If content is too long to fit in the viewport it gets width limited. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error omnis iste, veritatis nulla, sint fugit, libero eius accusamus sequi facilis nemo quas provident. Vitae ab expedita rem modi praesentium, vel itaque omnis blanditiis nobis, ullam cumque distinctio dolor impedit tempora molestias odit, cupiditate tempore dicta molestiae error. Quo, atque.</div>
        </div><!-- /.tip-bd -->
    </div><!-- /.tip -->
</div><!-- /.vr -->
*/
.tip {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle; }

.tip_label {
  margin-bottom: 10px; }

.tip.isActive {
  overflow: visible; }

.tip-bd {
  position: absolute;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  margin-left: 20px;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.25);
  background-color: #e9ebe9;
  padding: 20px;
  white-space: nowrap; }
  .tip-bd:before {
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
    width: 20px;
    content: ""; }

.tip:hover > .tip-bd {
  visibility: visible;
  opacity: 1;
  z-index: 20; }

.toggle {
  padding-top: 35px;
  min-width: 53px;
  min-height: 53px;
  box-sizing: border-box; }

.toggle_closed {
  padding: 6px; }

.toggle_opened > .toggle-btn_close,
.toggle_opened > .toggle-content {
  display: block; }

.toggle_closed > .toggle-btn_open {
  display: block;
  position: relative;
  top: 0;
  margin: 0; }

.toggle-btn {
  display: none;
  width: 43px;
  height: 43px; }

.toggle-btn > * {
  padding: 8px 0;
  width: 100%;
  height: 100%; }

.toggle-content {
  display: none; }

.mix-toggle-btn_top {
  position: absolute;
  top: -5px;
  right: 0;
  margin-right: 10px; }

/**
@name Alert
@description alert bars

@markup
<div class="vr">
    <div class="alert">Default stateless alert message Lorem ipsum dolor sit.</div>
</div>
<div class="vr">
    <div class="alert alert_success">Success alert message Lorem ipsum dolor sit.</div>
</div>
<div class="vr">
    <div class="alert alert_error">Error alert message Lorem ipsum dolor sit.</div>
</div>
*/
.alert {
  border: 1px solid #000000;
  border-radius: 5px;
  padding: 10px 14px;
  line-height: 1.2; }

.alert_success {
  border: 1px solid #8caa4a;
  background-color: #e1e8d0;
  color: #517838; }

.alert_error {
  border: 1px solid #e76c80;
  background-color: #faeaed;
  color: #cf344a; }

/*
@name Bio
@description X-axis centered bio on mobile and Y-axis aligned side by side on Desktop

@markup
<div class="bio">
    <div class="bio-inner">
        <div class="bio-inner-media">
            <img src="/assets/media/images/bios/bios-FPO_1.jpg" alt=""/>
        </div> <!-- /.bio-media -->
        <div class="bio-inner-bd">
            <div class="vr">
                <h3 class="hdg hdg_3 mix-hdg_purpleDarker mix-hdg_med">Stephen Colenflaugenbauschengutz</h3>
                <div class="txt mix-txt_grey mix-txt_bold">Position or Title</div>
            </div> <!-- /.vr -->
            <div class="txt">Fusce vulputate eleifend sapien. Proin magna. Sed libero. Cras ultricies mi eu turpis hendrerit fringilla. neque eu enim. Sed fringilla.</div>
        </div> <!-- /.bio-bd -->
    </div> <!-- /.bio-inner -->
</div> <!-- /.bio -->
*/
.bio {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  background-color: #e9ebe9;
  padding: 30px 15px; }

.bio::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  background: url("../media/images/banded-bg-lt.png") scroll no-repeat 0 0 transparent;
  width: 100%;
  height: 100%;
  content: "\0020"; }

.bio-inner {
  margin: auto;
  max-width: 1148px; }

.bio-inner > * {
  display: block;
  margin: auto;
  text-align: center; }
  @media (min-width: 1024px) {
    .bio-inner > * {
      display: table-cell;
      vertical-align: top;
      text-align: left; } }

.bio-inner-media {
  width: 192px;
  text-align: center; }
  @media (min-width: 1024px) {
    .bio-inner-media {
      max-width: 16.724738676%; } }

.bio-inner-media > * {
  max-height: 192px; }

.bio-inner-bd {
  width: 83.275261324%; }
  @media (min-width: 1024px) {
    .bio-inner-bd {
      padding-left: 25px;
      box-sizing: border-box; } }

/**
@name Blocks
@description Similar to the grid module but only specifies children to have equal widths. (ex: 1up, 2up, 6up, and not 4of12 and 8of12).

@markup
<div class="vr vr_20">
    <div class="vr">Equal Height Blocks with equal height BG</div>
    <div class="blocks blocks_2up mix-blocks_4up@lg mix-blocks_equal mix-blocks_equalBg">
        <div>
            <div class="band">
                <img src="//unsplash.it/200/200" alt="">
            </div>
        </div>
        <div>
            <div class="band band_highlight"></div>
        </div>
        <div>
            <div class="band band_highlight"></div>
        </div>
        <div>
            <div class="band band_highlight"></div>
        </div>
    </div>
</div>
<div class="vr vr_20">
    <div class="vr">tightStack, stacks with 2px gutter on mobile</div>
    <div class="blocks mix-blocks_1up@sm mix-blocks_4up@lg mix-blocks_tightStack@sm">
        <div>
            <div class="band band_highlight">hi</div>
        </div>
        <div>
            <div class="band band_highlight">hi</div>
        </div>
    </div>
</div>
<div class="vr vr_20">
    <div class="vr">xScroll, sets up block items to not wrap and scroll on overflow x to create carousel like effect</div>
    <div class="blocks mix-blocks_40@sm mix-blocks_xScroll@sm mix-blocks_4up@lg">
        <div>
            <img src="//placehold.it/200x200" alt="">
        </div>
        <div>
            <img src="//placehold.it/200x200" alt="">
        </div>
        <div>
            <img src="//placehold.it/200x200" alt="">
        </div>
        <div>
            <img src="//placehold.it/200x200" alt="">
        </div>
    </div>
</div>
<div class="vr vr_20">
    <div class="vr">tightStack on mobile and vert40 (25h, 40v) on desktop. Layout used for blocks of tiles</div>
    <div class="blocks mix-blocks_tightStack@sm mix-blocks_vert40@lg">
        <div>
            <div class="band band_highlight">hi</div>
        </div>
        <div>
            <div class="band band_highlight">hi</div>
        </div>
    </div>
</div>
*/
.blocks {
  margin: 0 0 -25px -25px;
  font-size: 0; }
  .blocks > * {
    padding: 0 0 25px 25px; }

.mix-blocks_equal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }

.blocks > * {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
  font-size: 16px; }

.mix-blocks_middle > * {
  vertical-align: middle; }

/* same as equalBg but only forces blocks items to be same height,
up to next items down (block grandchildren) to fill height or not */
.mix-blocks_equalHeightItems > * {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }

.mix-blocks_equalBg > * {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }

/* tells wrapping element like band / box to stretch to full height of container
so that it can set full height separators between its blocks siblings content */
.mix-blocks_equalBg > * > * {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 100%; }

.mix-blocks_equalHeightRow {
  margin: 0 0 -10px -18px; }
  .mix-blocks_equalHeightRow > * {
    padding: 0 0 10px 18px; }
  @media (min-width: 1024px) {
    .mix-blocks_equalHeightRow {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex; }
      .mix-blocks_equalHeightRow > * {
        width: auto; } }

.mix-blocks_products {
  margin: 0 0 -20px -20px; }
  .mix-blocks_products > * {
    padding: 0 0 20px 20px; }

.mix-blocks_products > * {
  width: 40%; }

.blocks_1up > * {
  width: 100%; }

.blocks_2up > * {
  width: 50%; }

.blocks_3up > * {
  width: 33.3333333333%; }

.blocks_4up > * {
  width: 25%; }

.blocks_5up > * {
  width: 20%; }

.blocks_6up > * {
  width: 16.6666666667%; }

.blocks_7up > * {
  width: 14.2857142857%; }

.blocks_8up > * {
  width: 12.5%; }

@media (max-width: 580px) {
  .mix-blocks_1up\@xs > * {
    width: 100%; }
  .mix-blocks_2up\@xs > * {
    width: 50%; }
  .mix-blocks_3up\@xs > * {
    width: 33.3333333333%; }
  .mix-blocks_4up\@xs > * {
    width: 25%; }
  .mix-blocks_5up\@xs > * {
    width: 20%; }
  .mix-blocks_6up\@xs > * {
    width: 16.6666666667%; }
  .mix-blocks_7up\@xs > * {
    width: 14.2857142857%; }
  .mix-blocks_8up\@xs > * {
    width: 12.5%; } }

@media (max-width: 1023px) {
  .mix-blocks_1up\@sm > * {
    width: 100%; }
  .mix-blocks_2up\@sm > * {
    width: 50%; }
  .mix-blocks_3up\@sm > * {
    width: 33.3333333333%; }
  .mix-blocks_4up\@sm > * {
    width: 25%; }
  .mix-blocks_5up\@sm > * {
    width: 20%; }
  .mix-blocks_6up\@sm > * {
    width: 16.6666666667%; }
  .mix-blocks_7up\@sm > * {
    width: 14.2857142857%; }
  .mix-blocks_8up\@sm > * {
    width: 12.5%; }
  .mix-blocks_tightStack\@sm {
    margin: 0 0 -2px -2px; }
    .mix-blocks_tightStack\@sm > * {
      padding: 0 0 2px 2px; }
  .mix-blocks_xScroll\@sm {
    overflow-x: scroll;
    white-space: nowrap; } }

@media (min-width: 580px) and (max-width: 1023px) {
  .mix-blocks_1up\@md > * {
    width: 100%; }
  .mix-blocks_2up\@md > * {
    width: 50%; }
  .mix-blocks_3up\@md > * {
    width: 33.3333333333%; }
  .mix-blocks_4up\@md > * {
    width: 25%; }
  .mix-blocks_5up\@md > * {
    width: 20%; }
  .mix-blocks_6up\@md > * {
    width: 16.6666666667%; }
  .mix-blocks_7up\@md > * {
    width: 14.2857142857%; }
  .mix-blocks_8up\@md > * {
    width: 12.5%; } }

@media (min-width: 1024px) {
  .mix-blocks_1up\@lg > * {
    width: 100%; }
  .mix-blocks_2up\@lg > * {
    width: 50%; }
  .mix-blocks_3up\@lg > * {
    width: 33.3333333333%; }
  .mix-blocks_4up\@lg > * {
    width: 25%; }
  .mix-blocks_5up\@lg > * {
    width: 20%; }
  .mix-blocks_6up\@lg > * {
    width: 16.6666666667%; }
  .mix-blocks_7up\@lg > * {
    width: 14.2857142857%; }
  .mix-blocks_8up\@lg > * {
    width: 12.5%; }
  .mix-blocks_products {
    margin: 0 0 -35px -35px; }
    .mix-blocks_products > * {
      padding: 0 0 35px 35px; }
  .mix-blocks_vert40\@lg {
    margin: 0 0 -40px -25px; }
    .mix-blocks_vert40\@lg > * {
      padding: 0 0 40px 25px; }
  .mix-blocks_xlGutter\@lg {
    margin: 0 0 -20px -130px; }
    .mix-blocks_xlGutter\@lg > * {
      padding: 0 0 20px 130px; }
  .mix-blocks_separator\@lg > * {
    padding-right: 40px; }
  .mix-blocks_separator\@lg > * + * {
    position: relative; }
  .mix-blocks_separator\@lg > * + *:before {
    position: absolute;
    top: 25px;
    bottom: 0;
    left: -20px;
    background-color: #dfdfdf;
    width: 1px;
    content: ""; } }

/**
@name Box
@description Container that will generally set a background color, rounded edges, text color (if necessary), and some padding.

@markup
<div class="vr vr_20">
    <div class="blocks blocks_2up mix-blocks_4up@lg">
        <div>
            <div class="box">Default Box</div>
        </div>
        <div>
            <div class="box mix-box_login">Login Box</div>
        </div>
        <div>
            <div class="box box_brand">Brand Box</div>
        </div>
        <div>
            <div class="box box_brand mix-box_flatLeft mix-box_shadowHov">Some Stuff</div>
        </div>
        <div>
            <div class="box mix-box_sidebar">
                <div class="vr vr_x2">
                    <h3 class="hdg hdg_4 mix-hdg_light mix-hdg_purpleDark">Sidebar Box</h3>
                </div><!-- /.vr vr_x2 -->
                <div class="vr vr_x2">
                    <p class="txt mix-txt_1@sm">Sidebar sidebar sidebar sidebar sidebar</p>
                </div><!-- /.vr vr_x2 -->
                <a href="#0" class="btn">
                    <span>Read Sidebar Stuff</span>
                </a>
            </div><!-- /.box -->
        </div>
        <div>
            <div class="box mix-box_sidebar mix-box_sidebar@sm">
                <div class="vr vr_x2">
                    <h3 class="hdg hdg_4 mix-hdg_light mix-hdg_purpleDark">mix-box_sidebar mix-box_sidebar_fence@sm</h3>
                </div><!-- /.vr vr_x2 -->
                <div class="vr vr_x2">
                    <p class="txt mix-txt_1@sm">Changes to top and bottom bordered "box" on sm bp</p>
                </div><!-- /.vr vr_x2 -->
            </div><!-- /.box -->
        </div>
        <div>
            <div class="box mix-box_greySquare">
                <div class="vr vr_x2">
                    <h3 class="hdg hdg_4 mix-hdg_light mix-hdg_purpleDark">mix-box_greySquare, used for contact forms on contact page</h3>
                </div><!-- /.vr vr_x2 -->
            </div><!-- /.box -->
        </div>
        <div>
            <div class="box box_lg mix-box_border">
                <div class="vr vr_x2">
                    <h3 class="hdg">Large box</h3>
                </div><!-- /.vr vr_x2 -->
            </div><!-- /.box -->
        </div>
        <div>
            <div class="box box_sm mix-box_border">
                <div class="vr vr_x2">
                    <h3 class="hdg">Small box</h3>
                </div><!-- /.vr vr_x2 -->
            </div><!-- /.box -->
        </div>
    </div>
</div>
*/
.box {
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #ffffff;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.box_brand {
  border-radius: 5px 5px 25px 5px; }

.box_sm {
  padding: 12px 18px; }
  @media (min-width: 1024px) {
    .box_sm {
      padding: 14px 20px; } }

.box_lg {
  padding: 16px 14px 12px 14px; }
  @media (min-width: 1024px) {
    .box_lg {
      padding: 26px 40px 30px 40px; } }

.mix-box_equal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column; }

.mix-box_greySquare {
  border: 1px solid #cecece;
  border-radius: 0;
  background-color: #e9ebe9;
  padding: 15px 20px 20px 20px; }
  @media (min-width: 1024px) {
    .mix-box_greySquare {
      padding: 26px 40px 40px 40px; } }

.mix-box_brandGreySquare {
  border: 1px solid #cecece;
  background-color: #e9ebe9;
  padding: 15px 20px 20px 20px; }
  @media (min-width: 1024px) {
    .mix-box_brandGreySquare {
      padding: 26px 40px 40px 40px; } }

.mix-box_login {
  border-radius: 5px 0 5px 5px;
  background-color: #e9ebe9;
  padding: 20px 22px 10px 22px;
  min-width: 280px; }

.mix-box_sidebar {
  border: 1px solid #dfdfdf;
  border-radius: 5px 5px 25px 5px;
  padding: 20px 34px 28px 34px; }
  @media (max-width: 1023px) {
    .mix-box_sidebar_fence\@sm {
      border-top: 1px solid #dfdfdf;
      border-right: 0;
      border-bottom: 1px solid #dfdfdf;
      border-left: 0;
      padding: 15px 0 35px 0; } }

@media (max-width: 1023px) {
  .mix-box_subNav {
    border-radius: 0;
    box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.25); } }

@media (min-width: 1024px) {
  .mix-box_subNav {
    box-shadow: 0 1px 12px 1px rgba(0, 0, 0, 0.25); } }

.mix-box_flatLeft {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

.mix-box_shadow {
  box-shadow: 0 1px 12px 1px rgba(0, 0, 0, 0.25); }

.mix-box_shadowHov:hover {
  box-shadow: 0 1px 12px 1px rgba(0, 0, 0, 0.25); }

.mix-box_border {
  border: solid 1px #e9ebe9; }

.mix-box_flush {
  padding: 0; }

.mix-box_colorGrey {
  background-color: #e9ebe9; }

.mix-box_overlay {
  background-color: rgba(233, 235, 233, 0.9); }

.mix-box_breathe {
  padding: 30px; }

/*
@name Brand Carousel
@description Styling for the brand carousel container.

@markup
<div class="brandCarousel" data-view="BrandCarousel">
    <div class="brandCarousel-wrap">
        <ul class="brandList">
            <li class="brandList-brand" data-body="thumb" data-text="" data-thumb="/assets/media/images/brands/brand-image.png">
                <img class="brandList-brand-img" src="/assets/media/images/brands/prevena.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
            <li class="brandList-brand" data-body="text" data-text="Maecenas iaculis est in ipsum tristique, congue risus iaculis pellentesque scelerisque. Donec quis sollicitudin mi." data-thumb="">
                <img class="brandList-brand-img" src="/assets/media/images/brands/promogran.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
            <li class="brandList-brand" data-body="thumb" data-text="" data-thumb="/assets/media/images/brands/brand-image.png">
                <img class="brandList-brand-img" src="/assets/media/images/brands/strattice.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
            <li class="brandList-brand" data-body="thumb" data-text="" data-thumb="/assets/media/images/brands/brand-image.png">
                <img class="brandList-brand-img" src="/assets/media/images/brands/vaculta.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
            <li class="brandList-brand" data-body="text" data-text="Maecenas iaculis est in ipsum tristique, congue risus iaculis pellentesque scelerisque. Donec quis sollicitudin mi." data-thumb="">
                <img class="brandList-brand-img" src="/assets/media/images/brands/alloderm.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
            <li class="brandList-brand" data-body="thumb" data-text="" data-thumb="/assets/media/images/brands/brand-image.png">
                <img class="brandList-brand-img" src="/assets/media/images/brands/prevena.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
            <li class="brandList-brand isFeatured" data-body="text" data-text="Maecenas iaculis est in ipsum tristique, congue risus iaculis pellentesque scelerisque. Donec quis sollicitudin mi." data-thumb="">
                <img class="brandList-brand-img" src="/assets/media/images/brands/promogran.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
            <li class="brandList-brand" data-body="thumb" data-text="" data-thumb="/assets/media/images/brands/brand-image.png">
                <img class="brandList-brand-img" src="/assets/media/images/brands/strattice.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
            <li class="brandList-brand" data-body="thumb" data-text="" data-thumb="/assets/media/images/brands/brand-image.png">
                <img class="brandList-brand-img" src="/assets/media/images/brands/vaculta.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
            <li class="brandList-brand" data-body="text" data-text="Maecenas iaculis est in ipsum tristique, congue risus iaculis pellentesque scelerisque. Donec quis sollicitudin mi." data-thumb="">
                <img class="brandList-brand-img" src="/assets/media/images/brands/alloderm.png" alt="">
                <span class="brandList-brand-bd">
                    <a class="link mix-link_bold" href="#0">Learn more ›</a>
                </span>
            </li>
        </ul>
    </div>
</div>
*/
.brandCarousel {
  position: relative;
  margin-bottom: 80px; }

.brandCarousel-wrap {
  max-width: 100%;
  overflow-x: hidden;
  pointer-events: none; }

.brandCarousel-next,
.brandCarousel-prev {
  position: absolute;
  top: 90%;
  left: 100%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
  opacity: .3;
  z-index: 3;
  margin: 0 0 0 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer; }

.brandCarousel-prev {
  right: 100%;
  left: auto;
  margin: 0 5px 0 0; }

.brandCarousel-next:hover,
.brandCarousel-prev:hover {
  opacity: 0.7; }

@media (max-width: 1023px) {
  .brandCarousel {
    display: none; } }

/*
@name Brand List
@description Styling for the brand carousel items.

@markup

*/
.brandList {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  padding: 40px 0 0;
  height: 400px;
  white-space: nowrap;
  font-size: 0; }

.brandList-brand {
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
          transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
  z-index: 1;
  margin: .3%;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  background-color: #ffffff;
  cursor: pointer;
  padding: 21.5px;
  width: 19.4%;
  font-size: initial;
  pointer-events: all; }

.brandList-brand-bd {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 90%;
  left: 0;
  -webkit-transform: translate3d(0, -10%, 0);
          transform: translate3d(0, -10%, 0);
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
  opacity: 0;
  border-radius: 5px;
  box-shadow: 0 -10px 0 #ffffff, 0 0 8px rgba(0, 0, 0, 0.3);
  background-color: #ffffff;
  padding: 0 28.57px 21.5px;
  width: 100%;
  height: 0;
  overflow: hidden;
  white-space: normal;
  color: #77787b;
  font-size: 11px; }

.brandList-brand-bd > a {
  margin-top: 10px; }

.brandList-brand.isFeatured:hover > .brandList-brand-bd {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
  height: auto;
  overflow: hidden; }

.brandList-brand-bd-thumb {
  margin: auto;
  width: 100px;
  height: auto; }

.brandList-brand-bd > * {
  display: none; }

.brandList-brand.isFeatured:hover .brandList-brand-bd > * {
  display: block; }

.brandWrap {
  position: relative;
  background-color: transparent;
  background-image: url("../media/images/brands/brands-background.png");
  background-repeat: no-repeat;
  background-position: center 50px;
  background-size: cover;
  padding-bottom: 40px;
  text-align: center; }
  @media (min-width: 1024px) {
    .brandWrap {
      z-index: 10;
      /* slide up section on lg bp to hide whitespace between curved areas */
      margin-top: -20px; } }

.brandWrap > * {
  display: block; }

/**
@name Button Content
@description Container that keeps button at the bottom regardless of height

@markup
<div class="vr vr_20">
    <div class="blocks blocks_1up mix-blocks_3up@lg mix-blocks_1up@sm mix-blocks_equal mix-blocks_equalBg">
        <div>
            <div class="box box_brand mix-box_border mix-box_colorGrey mix-box_equal">
                <div class="btnContent">
                    <div class="btnContent-bd">
                        <h3 class="hdg hdg_3 mix-hdg_purpleDark">Leadership</h3>
                        <span class="txt">Lorem ipsum about section information here second line as needed Lorem ipsum dolor sit amet, consectetur adipisicing elit, dolore magna aliqua.</span>
                    </div>
                    <div class="btnContent-ft">
                        <a class="btn btn_dark">
                            <span>Learn More</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="box box_brand mix-box_border mix-box_colorGrey">
                <div class="btnContent">
                    <div class="btnContent-bd">
                        <h3 class="hdg hdg_3 mix-hdg_purpleDark">Leadership</h3>
                        <span class="txt">Lorem ipsum about section information here second line as needed Lorem ipsum dolor sit amet, consectetur adipisicing elit, dolore magna aliqua. Lorem ipsum about section information here second line as needed Lorem ipsum dolor sit amet, consectetur adipisicing elit, dolore magna aliqua.</span>
                    </div>
                    <div class="btnContent-ft">
                        <a class="btn btn_dark">
                            <span>Learn More</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
*/
.btnContent {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 25px;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.btnContent_tight {
  margin: 0; }

.btnContent_leftReset {
  margin: 0; }

.mix-btnContent_borderRt {
  position: relative; }

.mix-btnContent_borderRt::after {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #e9ebe9;
  width: 1px;
  height: 95%;
  content: ""; }

/**
@name Caddy
@description Collapsable banner that on default .

@markup
<div class="caddy" data-view="Collapsible">
    <div class="caddy-base" data-collapse-control>
        <div class="cell">
            <div class="cell-item mix-cell-item_max">
                <h3 class="hdg hdg_5">Caddy Title</h3>
            </div>
            <div class="cell-item mic-cell-item_padL">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon_plus" data-collapse-icon data-collapse-iconSwap="#icon_minus"></use>
                </svg>
            </div>
        </div>
    </div>
    <div class="caddy-cont caddy-cont_collapsed" data-collapse-content>
        <div class="caddy-cont-bd">
            <div class="vr">
                <a href="#0" class="link mix-link_noUnderline">
                    <div class="column column_media column_media_stack@sm">
                        <div>
                            <img src="//placehold.it/98x98" alt="">
                        </div>
                        <div>
                            <div class="txt mixt-txt_1@sm mix-txt_bold">Media (stacks on sm), V.A.C.Ulta™ Therapy Unit</div>
                        </div>
                    </div><!-- /.column -->
                </a><!-- /.link -->
            </div><!-- /.vr -->
        </div><!-- /.caddy-cont-bd -->
    </div>
</div>
*/
.caddy {
  box-sizing: border-box;
  border: solid 1px #e9ebe9;
  border-radius: 5px 5px 25px 5px;
  background-color: #ffffff;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.caddy-base {
  background-color: #e9ebe9;
  cursor: pointer;
  padding: 20px 33px 20px 20px;
  color: #8c317a;
  fill: #8c317a; }

.caddy-base_opaque {
  background-color: #ffffff; }

.caddy-cont_collapsed {
  display: none; }

/* extra element so that padding doesn't need to change between states and so
transition is smooth (different top and bottom padding transitions looks un-smooth) */
.caddy-cont-bd {
  padding: 20px 20px 30px 20px; }

/**
@name Caddy
@description Collapsable banner that on default .

@markup
<div class="caddy" data-view="Collapsible">
    <div class="caddy-base" data-collapse-control>
        <div class="cell">
            <div class="cell-item mix-cell-item_max">
                <h3 class="hdg hdg_5">Caddy Title</h3>
            </div>
            <div class="cell-item mic-cell-item_padL">
                <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon_plus" data-collapse-icon data-collapse-iconSwap="#icon_minus"></use>
                </svg>
            </div>
        </div>
    </div>
    <div class="caddy-cont caddy-cont_collapsed" data-collapse-content>
        <div class="caddy-cont-bd">
            <div class="vr">
                <a href="#0" class="link mix-link_noUnderline">
                    <div class="column column_media column_media_stack@sm">
                        <div>
                            <img src="//placehold.it/98x98" alt="">
                        </div>
                        <div>
                            <div class="txt mixt-txt_1@sm mix-txt_bold">Media (stacks on sm), V.A.C.Ulta™ Therapy Unit</div>
                        </div>
                    </div><!-- /.column -->
                </a><!-- /.link -->
            </div><!-- /.vr -->
        </div><!-- /.caddy-cont-bd -->
    </div>
</div>
*/
.caddy {
  box-sizing: border-box;
  border: solid 1px #e9ebe9;
  border-radius: 5px 5px 25px 5px;
  background-color: #ffffff;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.caddy-base {
  background-color: #e9ebe9;
  cursor: pointer;
  padding: 20px 33px 20px 20px;
  color: #8c317a;
  fill: #8c317a; }

.caddy-base_opaque {
  background-color: #ffffff; }

.caddy-cont_collapsed {
  display: none; }

/* extra element so that padding doesn't need to change between states and so
transition is smooth (different top and bottom padding transitions looks un-smooth) */
.caddy-cont-bd {
  padding: 20px 20px 30px 20px; }

/**
@name Callout
@description Hero-like module with large BG image, heading, copy, and optional link

@markup
<div class="callout" style="background-image: url('//placehold.it/1000x400')">
    <div class="wrap wrap_tight@lg">
        <div class="callout-hd">
            <h2 class="hdg hdg_3 mix-hdg_bold">Inspirational statement about Acelity's brand or outcomes related to Acelity supporting customers/HCPs</h2>
        </div><!-- /.callout-hd -->
        <div class="callout-bd">
            <p class="txt">Supporting statement if necessaryLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div><!-- /.callout-bd -->
        <div class="callout-ft">
            <a href="#0" class="link">
                <div class="column">
                    <div>
                        <svg class="icon mix-icon_xs mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon_goArrow"></use>
                        </svg>
                    </div>
                    <div>
                        Optional link to page or case study
                    </div>
                </div><!-- /.column -->
            </a>
        </div><!-- /.callout-ft -->
    </div><!-- /.wrap -->
</div><!-- /.callout -->
*/
.callout {
  background-size: cover;
  padding: 20px; }
  @media (min-width: 1024px) {
    .callout {
      padding: 30px; } }

.callout-hd {
  margin-bottom: 12px; }

@media (min-width: 1024px) {
  .callout-bd {
    max-width: 50%; } }

.callout-ft {
  margin-top: 30px; }

/*
@name Caption Image
@description Image with caption


@markup
<div class="vr vr_20">
    <div class="grid">
        <div class="grid-col grid-col_4">
            <div class="captionImage">
                <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="Product caption on hover. 50 character limit">
                <div class="captionImage-cap">Product caption on hover. 50 character limit</div>
            </div>
        </div>
    </div>
</div>
*/
.captionImage {
  position: relative; }

.captionImage[data-modal] {
  cursor: pointer; }

.captionImage-img {
  width: 100%;
  height: auto; }

.captionImage-cap {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transform: translate(0, 10px);
      -ms-transform: translate(0, 10px);
          transform: translate(0, 10px);
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
  opacity: 0;
  border-radius: 4px;
  background: #e9ebe9;
  padding: 14px 0;
  text-align: center;
  color: #77787b;
  font-family: "gesta", "Helvetica Neue", "Arial", sans-serif;
  font-size: 16px;
  will-change: opacity transform; }

.captionImage:hover .captionImage-cap {
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
  opacity: 1; }

.captionImage-cap:after {
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -5px;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e9ebe9;
  border-left: 10px solid transparent;
  width: 0;
  height: 0;
  content: ""; }

@media (max-width: 1023px) {
  .captionImage-cap {
    position: static;
    -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
    border-radius: 4px;
    background: #ffffff;
    padding: 8px 0 14px;
    white-space: wrap;
    font-size: 14px; }
  .captionImage-cap:after {
    display: none; } }

/**
@name Cell
@description Flexible layout module using display: table and table-cell. Great for splitting two items to the edge of their container.

@markup
<div class="vr vr_20">
    <div class="cell">
        <div class="cell-item">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_person"></use>
            </svg>
        </div>
        <div class="cell-item mix-cell-item_max mix-cell-item_padL">
            <div class="sg-greyBlock">Default gutter</div>
        </div>
    </div>
</div>
<div class="vr vr_20">
    <div class="cell">
        <div class="cell-item">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_person"></use>
            </svg>
        </div>
        <div class="cell-item mix-cell-item_max mix-cell-item_padL20">
            <div class="sg-greyBlock">20px gutter</div>
        </div>
    </div>
</div>
<div class="vr vr_20">
    <div class="cell mix-cell_stack@sm">
        <div class="cell-item">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_person"></use>
            </svg>
        </div>
        <div class="cell-item mix-cell-item_r@lg">
            <div class="sg-greyBlock">Stack at small</div>
        </div>
    </div>
</div>
*/
.cell {
  display: table;
  width: 100%; }

.cell > * {
  display: table-cell;
  vertical-align: middle; }

@media (max-width: 1023px) {
  .mix-cell_stack\@sm > * {
    display: block;
    text-align: center; }
    .mix-cell_stack\@sm > *:first-child {
      margin-bottom: 10px; } }

.mix-cell_bottom > * {
  vertical-align: bottom; }

.mix-cell-item_top {
  vertical-align: top; }

.cell-item_l {
  text-align: left; }

.cell-item_r {
  text-align: right; }

.cell-item_center {
  text-align: center; }

@media (min-width: 1024px) {
  .cell-item_r\@lg {
    text-align: right; } }

.mix-cell-item_max {
  width: 100%; }

.mix-cell-item_70 {
  width: 70%; }

.mix-cell-item_30 {
  width: 30%; }

.mix-cell-item_padL {
  padding-left: 10px; }

.mix-cell-item_padL20 {
  padding-left: 20px; }

.mix-cell-item_padR {
  padding-right: 10px; }

.mix-cell-item_sameLine\@lg {
  white-space: nowrap; }

/**
@name Color Strip
@description Full width background color strip

@markup
<div class="colorStrip">
    <div class="wrap">
        <span class="txt mix-txt_white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet.</span>
    </div> <!-- /.wrap -->
</div> <!-- /.colorStrip -->

<div class="colorStrip colorStrip_dark">
    <div class="wrap">
        <span class="txt mix-txt_white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet.</span>
    </div> <!-- /.wrap -->
</div> <!-- /.colorStrip -->
*/
.colorStrip {
  background-color: #8c317a; }

.colorStrip_dark {
  background-color: #2d1263; }

/**
@name Column
@description Lays out children inline and creates a gutter between them. Great for horizontal lists, vertically centering and positing icons/text next to each other, etc.

@markup
<div class="vr">
    <div class="column">
        <div>
        <svg class="icon" xmlns="http://www.w3.org/2000/svg">
            <use xlink:href="#icon_personRound"></use>
        </svg>
        </div>
        <div>
            <div>Default</div>
        </div>
    </div>
</div>
<div class="vr">
    <div class="column mix-column_top">
        <div>
        <svg class="icon" xmlns="http://www.w3.org/2000/svg">
            <use xlink:href="#icon_personRound"></use>
        </svg>
        </div>
        <div>
            <div>Vertically Aligned</div>
            <div>To the top</div>
        </div>
    </div>
</div>
<div class="vr">
    <div class="column column_sm">
        <div>
            <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_personRound"></use>
            </svg>
        </div>
        <div>
            <div>Small column</div>
        </div>
    </div>
</div>
<div class="vr">
    <div class="column column_lg">
        <div>
            <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_personRound"></use>
            </svg>
        </div>
        <div>
            <div>Large column</div>
        </div>
    </div>
</div>
<div class="vr">
    <div class="column column_xl">
        <div>
            <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_personRound"></use>
            </svg>
        </div>
        <div>
            <div>Extra Large column</div>
        </div>
    </div>
</div>
<div class="vr">
    <a href="#0" class="link mix-link_noUnderline">
        <div class="column column_media">
            <div>
                <img src="//placehold.it/98x98" alt="" />
            </div>
            <div>
                <div class="txt mix-txt_1@sm mix-txt_bold">Media V.A.C.Ulta™ Therapy Unit</div>
            </div>
        </div>
    </a>
</div>
<div class="vr">
    <a href="#0" class="link mix-link_noUnderline">
        <div class="column column_media mix-column_stack@sm">
            <div>
                <img src="//placehold.it/98x98" alt="" />
            </div>
            <div>
                <div class="txt mix-txt_1@sm mix-txt_bold">Media (stacks on sm), V.A.C.Ulta™ Therapy Unit</div>
            </div>
        </div>
    </a>
</div>
<div class="vr">
    <a href="#0" class="link mix-link_noUnderline">
        <div class="column column_media">
            <div>
                <img src="/assets/media/images/pdf.png" alt="PDF Icon">
            </div>
            <div>
                <div class="txt">PDF link Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, velit.</div>
            </div>
        </div>
    </a>
</div>
<a href="#" class="link">
    <div class="column mix-column_grid mix-column_top">
        <div>
            <svg class="icon mix-icon_xs" xmlns="http://www.w3.org/2000/svg">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_goArrow"></use>
            </svg>
        </div>
        <div>
            <span class="txt">Reimbursement &amp; Coding Information</span>
        </div>
    </div>
</a>
<a href="#0" class="link">
    <div class="column">
        <div>
            <svg class="icon mix-icon_xs mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_goArrow"></use>
            </svg>
        </div>
        <div>
            <div class="isVertCenteredImg">
                <img src="/assets/media/images/pdf.png" alt="PDF Icon">
            </div>
        </div>
        <div>
            <div class="txt">Linking to external PDF</div>
        </div>
    </div>
</a>
*/
.column {
  font-size: 0; }

.mix-column_inline {
  display: inline-block;
  vertical-align: middle; }

.column > * {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.4444444444;
  font-size: 16px; }

.mix-column_top > * {
  vertical-align: top; }

.mix-column_centered {
  text-align: center; }

.column > * + * {
  padding-left: 8px;
  box-sizing: border-box; }

.mix-column_grid > * {
  width: 3%; }

.mix-column_grid > * + * {
  width: 97%; }

.column_sm > * + * {
  padding-left: 12px; }

.column_lg > * + * {
  padding-left: 20px; }

.column_xl > * + * {
  padding-left: 50px; }

.column_media {
  overflow: hidden; }
  .column_media > * {
    display: block; }
  .column_media > *:first-child {
    float: left;
    margin-right: 18px; }
  .column_media > * + * {
    padding: 0;
    overflow: hidden; }

@media (max-width: 1023px) {
  .mix-column_stack\@sm > * {
    display: block; }
    .mix-column_stack\@sm > *:first-child {
      float: none;
      margin: 0 0 4px 0; }
  .mix-column_stack\@sm > * + * {
    margin: 0;
    padding: 0;
    overflow: visible; } }

@media (min-width: 1024px) {
  .columnWrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: -12px;
    height: 130px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start; } }

.columnWrap > * {
  margin-bottom: 12px; }

/**
@name Content
@description Container that will generally allow text blocks, headings, text and media blocks

@markup
<div class="vr">
    <div class="content mix-content_center">
        <div class="content-hd">
            <h2 class="hdg hdg_1 mix-hdg_light">Resources for continuing education</h2>
        </div>
        <div class="content-bd mix-content-spacing_lg">
            <span class="txt">General intro to company lorem ipsum contetnt continues. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</span>
        </div>
    </div>
</div>

<div class="vr">
    <div class="blocks blocks_1up mix-blocks_3up@lg mix-blocks_equal mix-blocks_equalBg">
        <div>
            <div class="content mix-content_divideRt mix-content_overlapBottom">
                <div class="content-hd">
                    <h3 class="hdg hdg_2 mix-hdg_light">Education Library</h3>
                </div>
                <div class="content-bd mix-content-vSpace_lg">
                    <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                </div>
                <div class="content-ft mix-content-ft_overlap">
                    <a class="btn btn_dark" href="/">
                        <span>Dark Purple Button</span>
                    </a>
                </div>
            </div>
        </div>
        <div>
            <div class="content mix-content_divideRt mix-content_overlapBottom">
                <div class="content-hd">
                    <h3 class="hdg hdg_2 mix-hdg_light">Medical Education Programs</h3>
                </div>
                <div class="content-bd mix-content-vSpace_lg">
                    <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                </div>
                <div class="content-ft mix-content-ft_overlap">
                    <a class="btn btn_dark" href="/">
                        <span>Dark Purple Button</span>
                    </a>
                </div>
            </div>
        </div>
        <div>
            <div class="content mix-content_overlapBottom">
                <div class="content-hd">
                    <h3 class="hdg hdg_2 mix-hdg_light">Education Events</h3>
                </div>
                <div class="content-bd mix-content-vSpace_lg">
                    <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                </div>
                <div class="content-ft mix-content-ft_overlap">
                    <a class="btn btn_dark" href="/">
                        <span>Dark Purple Button</span>
                    </a>
                </div>
            </div>
        </div>
        <div>
            <div class="content mix-content_flat">
                <div class="content-hd">
                    <h3 class="hdg hdg_2 mix-hdg_light">Education Other</h3>
                </div>
                <div class="content-bd">
                    <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="vr">
    <a href="/education.html" target="_blank">Education Page Example</a>
</div>
*/
/*
1. constrain to width of container so that children can have intrinsic width
   and then their child imgs can be contained to width of container containing
   this object.
*/
.content {
  margin: 0 auto;
  padding-top: 15px;
  max-width: 100%;
  /* 1 */
  text-align: left; }

.content_left {
  margin: 0; }

.content > * {
  padding-bottom: 15px; }

.content_mediaFlush {
  padding: 0 0 30px; }

.content_mediaFlush > * {
  padding-bottom: 0; }

.content_mediaFlush > * + * {
  padding: 0 25px 15px; }

.content_full {
  max-width: 100%; }

.content-media {
  position: relative;
  background-color: #e9ebe9;
  width: 100%;
  max-height: 169px; }

.content-hd {
  color: #2d1263;
  fill: #2d1263; }

.content-hd_media {
  overflow: hidden; }
  .content-hd_media > * {
    display: block;
    /* give intrinsic width value so that IE / FF know what to constrain
        children to */
    max-width: 100%; }
  .content-hd_media > *:first-child {
    float: left; }
  .content-hd_media > * + * {
    padding-left: 10px;
    overflow: hidden; }

.content-ft {
  padding-bottom: 0; }

.content-bd_push {
  padding-bottom: 24px; }

.mix-content-bd_flat {
  padding-bottom: 0; }

.mix-content_center {
  max-width: 840px;
  text-align: center; }

.mix-content_divideRt {
  border-right: solid 1px #e9ebe9;
  padding-right: 25px; }

.mix-content_overlapBottom {
  position: relative;
  margin-bottom: 15px; }

.mix-content-ft_overlap {
  position: absolute;
  bottom: 0;
  margin-bottom: -15px; }

.mix-content-hd_divider::before {
  display: block;
  margin-bottom: 15px;
  margin-left: -14%;
  background-color: #ed217c;
  width: 130%;
  height: 5px;
  content: " "; }

.mix-content-ft_grey {
  color: #77787b;
  fill: #77787b; }

.mix-content-vSpace_lg {
  padding-bottom: 66px; }

.mix-content-hGut_md {
  padding: 0 20px 0 40px; }

.mix-content_pushTop {
  padding-top: 30px; }

.mix-content_pushBottom {
  padding-bottom: 30px; }

.mix-content_pushBottomExtreme {
  padding-bottom: 110px; }

.mix-content_flat {
  padding-top: 0; }

.mix-content_divideRtLg {
  margin: 0; }

@media (min-width: 1024px) {
  .mix-content_divideRtLg {
    border-right: solid 1px #e9ebe9;
    padding-right: 25px; } }

/**
@name CTA
@description Call to action. Full width bar that contains icons, information, buttons that encourages the user to take action

@markup
<div class="cta">
    <div class="wrap">
        <div class="cta-cell">
            <div class="cta-cell-icon">
                <svg class="icon mix-icon_lg" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon_mail"></use>
                </svg>
            </div>
            <div>
                <p class="txt">Get in touch with an Acelity representative to learn more about this product.</p><!-- /.txt -->
            </div>
        </div><!-- /.cta-cell -->
        <div class="cta-btn">
            <a class="btn btn_mag mix-btn_tight mix-btn_full@sm" href="#0">
                <span>Request a rep follow up</span>
            </a>
        </div><!-- /.cta-btn -->
    </div><!-- /.wrap -->
</div><!-- /.cta -->
*/
.cta {
  background-color: #2d1263;
  padding: 18px 0;
  fill: #ffffff;
  color: #ffffff; }

@media (max-width: 1023px) {
  .cta-cell {
    display: table; }
    .cta-cell > * {
      display: table-cell;
      vertical-align: middle; }
    .cta-cell > :first-child {
      padding-right: 18px; }
    .cta-cell > :last-child {
      width: 100%; } }

@media (min-width: 1024px) {
  .cta-cell {
    display: inline-block;
    vertical-align: middle; }
    .cta-cell > * {
      display: inline-block;
      vertical-align: middle; }
    .cta-cell > * + * {
      margin-left: 18px; } }

.cta-cell-icon {
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(-30deg);
      -ms-transform: rotate(-30deg);
          transform: rotate(-30deg); }

@media (max-width: 1023px) {
  .cta-btn {
    display: block;
    margin-top: 22px; } }

@media (min-width: 1024px) {
  .cta-btn {
    display: inline-block;
    margin-left: 34px;
    vertical-align: middle; } }

/*
@name Detail Carousel
@description Carousel on product detail pages

@markup
<div class="wrap">
    <div class="float">
        <div class="float-right">
            <div class="detailCarousel" data-view="DetailCarousel">
                <div class="detailCarousel-view">
                    <div class="captionImage">
                        <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="Product caption on hover. 50 character limit">
                        <div class="captionImage-cap">Product caption on hover. 50 character limit</div>
                    </div>
                    <div class="captionImage">
                        <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="">
                    </div>
                    <div class="captionImage">
                        <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="">
                    </div>
                    <div class="captionImage">
                        <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="Product caption on hover. 50 character limit">
                        <div class="captionImage-cap">Product caption on hover. 50 character limit</div>
                    </div>
                    <div class="captionImage">
                        <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="">
                    </div>
                    <div class="captionImage">
                        <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="">
                    </div>
                    <div class="captionImage">
                        <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="Product caption on hover. 50 character limit">
                        <div class="captionImage-cap">Product caption on hover. 50 character limit</div>
                    </div>
                    <div class="captionImage">
                        <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="Product caption on hover. 50 character limit">
                        <div class="captionImage-cap">Product caption on hover. 50 character limit</div>
                    </div>
                    <div class="captionImage">
                        <img class="captionImage-img" src="/assets/media/images/product_details/product.png" data-thumb="/assets/media/images/product_details/thumb.png" alt="Product caption on hover. 50 character limit">
                        <div class="captionImage-cap">Product caption on hover. 50 character limit</div>
                    </div>
                </div>
                <div class="detailCarousel-thumbs">
                    <div class="detailCarousel-thumbs-rail"></div>
                </div>
            </div>
        </div>
    </div>
</div>
*/
.detailCarousel {
  font-size: 0; }

.detailCarousel-view {
  display: inline-block;
  width: 80%;
  overflow: hidden;
  vertical-align: top;
  white-space: nowrap;
  font-size: 0; }

.detailCarousel-view > * {
  display: inline-block;
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
  width: 100%;
  height: auto;
  font-size: initial;
  will-change: transform; }

@media (max-width: 1023px) {
  .detailCarousel-view {
    display: block;
    margin: auto;
    width: 85%;
    max-width: 380px; } }

.detailCarousel-thumbs {
  display: inline-block;
  position: relative;
  margin-top: 20px;
  width: 20%;
  vertical-align: top;
  text-align: right; }

.detailCarousel-thumbs-next,
.detailCarousel-thumbs-prev {
  display: block;
  position: absolute;
  right: 16px;
  bottom: -28px;
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
  opacity: 0.28;
  background-image: url("/assets/icons/png/goArrowDown.png");
  background-size: cover;
  cursor: pointer;
  width: 24px;
  height: 12px;
  content: ""; }

.detailCarousel-thumbs-prev {
  top: -18px;
  background-image: url("/assets/icons/png/goArrowUp.png"); }

.detailCarousel-thumbs-next:hover,
.detailCarousel-thumbs-prev:hover {
  opacity: 0.8; }

.detailCarousel-thumbs-rail {
  height: 315px;
  overflow: hidden; }

.detailCarousel-thumbs-rail > * {
  display: inline-block;
  margin-top: 9px; }

@media (max-width: 1023px) {
  .detailCarousel-thumbs {
    display: block;
    -webkit-transform: translate(-2.5px, 0);
        -ms-transform: translate(-2.5px, 0);
            transform: translate(-2.5px, 0);
    margin: auto auto 26px;
    width: 240px;
    text-align: left; }
  .detailCarousel-thumbs:after {
    position: absolute;
    bottom: -14px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    font-size: 10px; }
  .detailCarousel-thumbs-next,
  .detailCarousel-thumbs-prev {
    right: -22px;
    bottom: 12px;
    background-image: url("/assets/icons/png/goArrow.png");
    width: 24px;
    height: 24px; }
  .detailCarousel-thumbs-prev {
    top: auto;
    bottom: 12px;
    left: -22px;
    background-image: url("/assets/icons/png/goArrowLeft.png");
    width: 12px;
    height: 24px; }
  .detailCarousel-thumbs-rail {
    width: 240px;
    height: 54px;
    white-space: nowrap; }
  .detailCarousel-thumbs-rail > * {
    display: inline-block;
    margin-left: 5px; } }

/**
@name Featured Box
@description Featued boxes within header dropdowns

@markup
<div class="blocks blocks_5up">
    <div>
        <div class="band band_highlight">
            <div class="featBox">
                <div class="featBox-bd">
                    <div class="vr">
                        <h4 class="txt txt_1 mix-txt_bold mix-txt_caps mix-txt_greyLightest">Featured Products</h4>
                    </div>
                    <div class="vr">
                        <hr class="hr">
                    </div>
                    <ul class="vList">
                        <li>
                            <a href="#0" class="link link_white">
                                <span class="txt">Link 1</span>
                            </a>
                        </li>
                        <li>
                            <a href="#0" class="link link_white">
                                <span class="txt">Link 1</span>
                            </a>
                        </li>
                        <li>
                            <a href="#0" class="link link_white">
                                <span class="txt">Link 1</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="band band_highlight">
            <div class="featBox">
                <img src="//unsplash.it/300/150" alt="" class="featBox-img">
                <div class="featBox-bd">
                    <div class="vr vr_20">
                        <p class="txt txt_1">Access to in person and online resources for practice development</p>
                    </div>
                    <a href="#0" class="link link_white">
                        <div class="column">
                            <div>
                                <span class="icon icon_arrowForward" data-grunticon-embed></span>
                            </div>
                            <div>
                                <span class="txt mix-txt_bold">Education Resources</span>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
*/
.featBox-img {
  border-bottom: 4px solid #2d1263;
  width: 100%; }

.featBox-bd {
  padding: 25px; }

.featBox-img + .featBox-bd {
  padding: 10px 25px 25px 25px; }

.find {
  position: relative;
  width: 215px; }

.find-wrap {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%; }

.find-wrap.isActive {
  padding-right: 40px; }

.find-wrap.isActive:before {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: 100%;
  height: 20px;
  content: ""; }

.find-wrap-icon {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  position: absolute;
  top: 50%;
  right: 1px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 20;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: #8c317a;
  cursor: pointer;
  padding: 10px;
  fill: #ffffff; }

.find-wrap-icon_search.isActive {
  right: 40px;
  background-color: transparent;
  fill: #8c317a; }

.find-wrap-icon_close {
  position: absolute;
  right: 40px;
  visibility: hidden;
  opacity: 0;
  /* stack underneath search field and other icon so that when it becomes
    active it appears to slide out from below */
  z-index: 10;
  background-color: #ed217c; }

.find-wrap-icon_close.isActive {
  right: 0;
  visibility: visible;
  opacity: 1; }

.find-wrap-results {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  position: absolute;
  top: 50%;
  right: 40px;
  left: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  border: 1px solid #dbdedc;
  border-radius: 0 0 5px 5px;
  background-color: #e9ebe9; }

.find-wrap-results.isActive {
  visibility: visible;
  opacity: 1;
  padding-top: 20px; }

.find-wrap-results:not(.isActive) {
  -webkit-transition: none;
          transition: none; }

/**
@name Filter
@description Filter patterns for libraries, newsroom, search pages

@markup
<div class="vr">
    <div class="vr">Single Bar</div><!-- /.vr -->
    <a href="#0" class="link">
        <div class="filter">
            <div class="filter-hd filter-hd_single">
                <div class="filter-hd-title filter-hd-title_single">Introduction</div>
            </div><!-- /.filter-hd -->
        </div><!-- /.filter -->
    </a>
</div><!-- /.vr -->
<div class="vr">
    <div class="vr">Single Bar Active</div><!-- /.vr -->
    <a href="#0" class="link">
        <div class="filter">
            <div class="filter-hd filter-hd_single">
                <div class="filter-hd-title filter-hd-title_single isActive">Introduction</div>
            </div><!-- /.filter-hd -->
        </div><!-- /.filter -->
    </a>
</div><!-- /.vr -->
<div class="vr">
    <div class="vr">Links</div><!-- /.vr -->
    <!-- Start Filter -->
    <div class="filter" data-view="Collapsible" data-collapse-closeOnSmall>
        <div class="filter-hd" data-collapse-control>
            <div class="filter-hd-title">Negative Pressure Wound Therapy Systems</div><!-- /.filter-hd-title -->
            <div class="filter-hd-icon">
                <svg class="icon mix-icon_royal" xmlns="http://www.w3.org/2000/svg">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_goArrowDown" data-collapse-icon="" data-collapse-iconswap="#icon_goArrowUp"></use>
                </svg>
            </div><!-- /.filter-hd-icon -->
        </div><!-- /.filter-hd -->
        <div class="filter-bd isActive" data-collapse-content>
            <ul class="filter-bd-links">
                <li>
                    <a href="#0" class="filter-bd-links-link isActive">ActiV.A.C.®</a>
                </li>
                <li>
                    <a href="#0" class="filter-bd-links-link">InfoV.A.C.® Therapy System</a>
                </li>
                <li>
                    <a href="#0" class="filter-bd-links-link">V.A.C. Freedom® Therapy System</a>
                </li>
            </ul><!-- /.filter-bd-links -->
        </div><!-- /.filter-bd -->
    </div><!-- /.filter -->
    <!-- End Filter -->
</div><!-- /.vr -->
<div class="vr">
    <div class="vr">Nested Filters</div><!-- /.vr -->
    <!-- Start Filter -->
    <div class="filter" data-view="Collapsible" data-collapse-closeOnSmall>
        <div class="filter-hd" data-collapse-control>
            <div class="filter-hd-title">
                Product Category
            </div><!-- /.filter-hd-title -->
            <div class="filter-hd-icon">
                <svg class="icon mix-icon_royal" xmlns="http://www.w3.org/2000/svg">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_goArrowDown" data-collapse-icon data-collapse-iconswap="#icon_goArrowUp"></use>
                </svg>
            </div><!-- /.filter-hd-icon -->
        </div><!-- /.filter-hd -->
        <div class="filter-bd isActive" data-collapse-content>
        <div class="filter-bd-item">
            <div class="filter-bd-refine">
                Acellular Dermal Matrix <span class="filter-bd-item-hd-count">(<span>5</span>)</span>
                <div class="filter-bd-refine-close">
                    <svg class="icon mix-icon_white mix-icon_xs" xmlns="http://www.w3.org/2000/svg">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_close"></use>
                    </svg>
                </div><!-- /.filter-bd-item-hd-close -->
            </div><!-- /.filter-bd-item-hd -->
            <div class="filter-bd-item-filters">
                <label class="filter-bd-refine filter-bd-refine_check">
                    <input type="checkbox" class="filter-bd-refine-check"> Therapy Units <span class="mix-txt_grey">(<span>8</span>)</span>
                </label>
                <label class="filter-bd-refine filter-bd-refine_check">
                    <input type="checkbox" class="filter-bd-refine-check"> Dressings, Canisters, and Accessories <span class="mix-txt_grey">(<span>4</span>)</span>
                </label>
                <label class="filter-bd-refine filter-bd-refine_check">
                    <input type="checkbox" class="filter-bd-refine-check"> Single Patient Therapy Units <span class="mix-txt_grey">(<span>2</span>)</span>
                </label>
            </div><!-- /.filter-bd-items-filters -->
        </div> <!-- /.filter-bd-item -->
            <div class="filter-bd-item">
                <label class="filter-bd-refine">
                    <input type="checkbox"> Level 1 Checkbox <span class="mix-txt_grey">(<span>8</span>)</span>
                </label>
                <div class="filter-bd-refine isActive">
                    Negative Pressure Wound Therapy Systems <span class="filter-bd-item-hd-count">(<span>14</span>)</span>
                    <div class="filter-bd-refine-close">
                        <svg class="icon mix-icon_white mix-icon_xs" xmlns="http://www.w3.org/2000/svg">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_close"></use>
                        </svg>
                    </div><!-- /.filter-bd-item-hd-close -->
                </div><!-- /.filter-bd-item-hd -->
                <div class="filter-bd-item-filters isActive">
                    <label class="filter-bd-refine filter-bd-refine_check">
                        <input type="checkbox" class="filter-bd-refine-check"> Therapy Units <span class="filter-bd-refine-count">(<span>8</span>)</span>
                    </label>
                    <label class="filter-bd-refine filter-bd-refine_check">
                        <input type="checkbox" class="filter-bd-refine-check"> Dressings, Canisters, and Accessories <span class="filter-bd-refine-count">(<span>4</span>)</span>
                    </label>
                    <label class="filter-bd-refine filter-bd-refine_check">
                        <input type="checkbox" class="filter-bd-refine-check"> Single Patient Therapy Units <span class="filter-bd-refine-count">(<span>2</span>)</span>
                    </label>
                </div><!-- /.filter-bd-items-filters -->
            </div> <!-- /.filter-bd-item -->
        </div><!-- /.filter-bd -->
    </div><!-- /.filter -->
    <!-- End Filter -->
</div><!-- /.vr -->
*/
.filter-hd {
  display: table;
  box-sizing: border-box;
  background-color: #e3e3e3;
  padding: 12px 20px;
  width: 100%; }

.filter-hd_single {
  border-left: 4px solid #8c317a; }

.filter-hd > * {
  display: table-cell;
  vertical-align: top;
  line-height: 1.3; }

.filter-hd-title {
  width: 100%;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700; }

.filter-hd-title_single {
  position: relative;
  padding: 6px 0;
  text-transform: none;
  color: #8c317a;
  font-size: 18px;
  font-weight: 400; }

.filter-hd-title_single.isActive {
  font-weight: 700; }

.filter-hd-icon {
  padding-left: 10px; }

.filter-bd {
  display: none;
  background-color: #e9ebe9; }

.filter-bd.isActive {
  display: block; }

.filter-bd-refine {
  display: block;
  position: relative;
  cursor: pointer;
  padding: 12px 30px;
  color: #8c317a; }
  .filter-bd-refine:hover {
    background-color: #8c317a;
    color: #ffffff; }
  .filter-bd-refine.isActive {
    background-color: #8c317a;
    padding-right: 60px;
    color: #ffffff; }

.filter-bd-refine_disabled,
.filter-bd-refine_disabled:hover {
  display: block;
  position: relative;
  background-color: #e9ebe9;
  cursor: default;
  color: #77787b; }

.filter-bd-refine_check {
  padding-left: 50px; }

.filter-bd-refine-check {
  margin-left: -20px; }

.filter-bd-refine-name {
  margin-left: 4px; }

.filter-bd-refine-count {
  color: #77787b; }

.filter-bd-refine:hover .filter-bd-refine-count {
  color: #ffffff; }

.filter-bd-refine_disabled:hover .filter-bd-refine-count {
  color: #77787b; }

.filter-bd-refine.isActive .filter-bd-refine-count {
  display: none; }

.filter-bd-refine-close {
  display: none;
  position: absolute;
  top: 50%;
  right: 25px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%); }

.filter-bd-refine.isActive > .filter-bd-refine-close {
  display: block; }

.filter-bd-item-filters {
  display: none; }

.filter-bd-item-filters.isActive {
  display: block; }

.filter-bd-links > * {
  padding: 7px 30px; }

.filter-bd-links > :first-child {
  padding-top: 16px; }

.filter-bd-links > :last-child {
  padding-bottom: 16px; }

.filter-bd-links-link {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  text-decoration: none;
  color: #8c317a; }
  .filter-bd-links-link:hover {
    text-decoration: underline;
    color: #ae6ea2; }
  .filter-bd-links-link.isActive {
    color: #2d1263;
    font-weight: 700; }

.filterLayout {
  padding: 20px 0 35px 0; }
  @media (min-width: 1024px) {
    .filterLayout {
      margin-left: -25px;
      padding: 15px 0 40px 0;
      font-size: 0; } }

.filterLayout > * {
  box-sizing: border-box; }
  @media (min-width: 1024px) {
    .filterLayout > * {
      display: inline-block;
      padding-left: 25px;
      vertical-align: top;
      text-align: left;
      font-size: 16px; } }

@media (max-width: 1023px) {
  .filterLayout-filters {
    -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    z-index: 3;
    background-color: #ffffff; }
    .filterLayout-filters.isActive {
      visibility: visible;
      opacity: 1; } }

@media (min-width: 1024px) {
  .filterLayout-filters {
    width: 25%; } }

.filterLayout-filters-hd {
  margin-bottom: 10px;
  border-bottom: 3px solid #e9ebe9;
  padding: 15px 15px 12px 15px; }
  @media (min-width: 1024px) {
    .filterLayout-filters-hd {
      display: none; } }

.filterLayout-filters-items > * + * {
  margin-top: 1px; }
  @media (min-width: 1024px) {
    .filterLayout-filters-items > * + * {
      margin-top: 10px; } }

@media (min-width: 1024px) {
  .filterLayout-main {
    width: 75%; } }

.float {
  overflow: hidden; }

.float-left {
  float: left;
  width: 48%; }

.float-right {
  float: right;
  width: 42%; }

@media (max-width: 1023px) {
  .float > * {
    float: none;
    width: 100%; } }

.footer-links {
  border-top: 1px solid #dbdedc;
  padding: 15px 25px 18px 25px; }
  @media (min-width: 1024px) {
    .footer-links {
      padding: 35px 25px 20px 25px; } }

.footer-branding {
  padding: 20px 25px; }
  @media (max-width: 1023px) {
    .footer-branding {
      border-top: 1px solid #dbdedc; }
      .footer-branding > * {
        display: block;
        margin: auto; }
      .footer-branding > * + * {
        margin-top: 25px; } }
  @media (min-width: 1024px) {
    .footer-branding > * {
      vertical-align: middle; }
    .footer-branding > * + * {
      margin-left: 50px; } }

.footer-legal {
  border-top: 1px solid #dbdedc;
  padding: 10px 25px; }
  @media (min-width: 1024px) {
    .footer-legal {
      padding: 25px 25px; } }

@media (min-width: 1024px) {
  .footer-legal-links-item {
    display: inline-block; } }

@media (max-width: 1023px) {
  .footer-legal-links-item + .footer-legal-links-item {
    margin-top: 5px; } }

@media (min-width: 1024px) {
  .footer-legal-links-item + .footer-legal-links-item {
    margin-left: 20px; } }

.footer-legal-links-misc {
  line-height: 1.7142857143;
  color: #77787b; }
  @media (min-width: 1024px) {
    .footer-legal-links-misc {
      font-size: 14px; } }

.footer-legal-text {
  clear: both;
  padding-top: 30px; }
  @media (min-width: 1024px) {
    .footer-legal-text {
      padding-top: 10px; } }

/*
List of links in the footer that is vertical at desktop sizes but horizontal and centered on mobile.
*/
.footerLinkList > * + * {
  margin-top: 10px; }

@media (max-width: 1023px) {
  .footerLinkList {
    text-align: center; }
  .footerLinkList > * {
    display: inline-block; }
  .footerLinkList > * + * {
    margin-left: 18px; } }

/*
@name Grid
@description Grid layout for the site.

@markup
<div class="vr vr_20">
    <div class="grid">
        <div class="grid-col grid-col_4">
            <div class="sg-greyBlock">4 columns (12 columns on small by default)</div>
        </div>
        <div class="grid-col grid-col_8">
            <div class="sg-greyBlock">8 columns (12 columns on small by default)</div>
        </div>
    </div>
</div>
<div class="vr vr_20">
    <div class="grid">
        <div class="grid-col mix-grid-col_6@sm mix-grid-col_5@lg">
            <div class="sg-greyBlock">6 columns on sm, 5 columns on lg</div>
        </div>
        <div class="grid-col mix-grid-col_6@sm mix-grid-col_7@lg">
            <div class="sg-greyBlock">6 columns on sm, 7 columns on lg</div>
        </div>
    </div>
</div>

*/
.grid {
  margin: 0 0 -25px -25px;
  font-size: 0; }
  .grid > * {
    padding: 0 0 25px 25px; }

.mix-grid_noGutter {
  margin: 0 0 0 0; }
  .mix-grid_noGutter > * {
    padding: 0 0 0 0; }

.mix-grid_splitGutter-small {
  margin: -20px 0 -10px -20px; }
  .mix-grid_splitGutter-small > * {
    padding: 20px 0 20px 20px; }

.mix-grid_flush {
  margin-top: 0; }

.grid-col {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  vertical-align: top;
  font-size: 16px; }

.grid-col_1 {
  width: 8.3333333333%; }

.grid-col_2 {
  width: 16.6666666667%; }

.grid-col_3 {
  width: 25%; }

.grid-col_4 {
  width: 33.3333333333%; }

.grid-col_5 {
  width: 41.6666666667%; }

.grid-col_6 {
  width: 50%; }

.grid-col_7 {
  width: 58.3333333333%; }

.grid-col_8 {
  width: 66.6666666667%; }

.grid-col_9 {
  width: 75%; }

.grid-col_10 {
  width: 83.3333333333%; }

.grid-col_11 {
  width: 91.6666666667%; }

.grid-col_12 {
  width: 100%; }

.grid_flat {
  margin-top: 0; }

.grid_flat > *:first-child {
  padding-top: 0; }

.grid_flatAll {
  margin-top: 0; }

.grid_flatAll > * {
  padding-top: 0; }

@media (max-width: 1023px) {
  .grid-col {
    width: 100%; }
  .mix-grid-col_1\@sm {
    width: 8.3333333333%; }
  .mix-grid-col_2\@sm {
    width: 16.6666666667%; }
  .mix-grid-col_3\@sm {
    width: 25%; }
  .mix-grid-col_4\@sm {
    width: 33.3333333333%; }
  .mix-grid-col_5\@sm {
    width: 41.6666666667%; }
  .mix-grid-col_6\@sm {
    width: 50%; }
  .mix-grid-col_7\@sm {
    width: 58.3333333333%; }
  .mix-grid-col_8\@sm {
    width: 66.6666666667%; }
  .mix-grid-col_9\@sm {
    width: 75%; }
  .mix-grid-col_10\@sm {
    width: 83.3333333333%; }
  .mix-grid-col_11\@sm {
    width: 91.6666666667%; }
  .mix-grid-col_12\@sm {
    width: 100%; }
  .grid_flatAll {
    margin-top: 0; }
  .grid_flatAll > * {
    padding-top: 0; } }

@media (min-width: 580px) and (max-width: 1023px) {
  .mix-grid-col_1\@md {
    width: 8.3333333333%; }
  .mix-grid-col_2\@md {
    width: 16.6666666667%; }
  .mix-grid-col_3\@md {
    width: 25%; }
  .mix-grid-col_4\@md {
    width: 33.3333333333%; }
  .mix-grid-col_5\@md {
    width: 41.6666666667%; }
  .mix-grid-col_6\@md {
    width: 50%; }
  .mix-grid-col_7\@md {
    width: 58.3333333333%; }
  .mix-grid-col_8\@md {
    width: 66.6666666667%; }
  .mix-grid-col_9\@md {
    width: 75%; }
  .mix-grid-col_10\@md {
    width: 83.3333333333%; }
  .mix-grid-col_11\@md {
    width: 91.6666666667%; }
  .mix-grid-col_12\@md {
    width: 100%; } }

@media (min-width: 1024px) {
  .mix-grid-col_1\@lg {
    width: 8.3333333333%; }
  .mix-grid-col_2\@lg {
    width: 16.6666666667%; }
  .mix-grid-col_3\@lg {
    width: 25%; }
  .mix-grid-col_4\@lg {
    width: 33.3333333333%; }
  .mix-grid-col_5\@lg {
    width: 41.6666666667%; }
  .mix-grid-col_6\@lg {
    width: 50%; }
  .mix-grid-col_7\@lg {
    width: 58.3333333333%; }
  .mix-grid-col_8\@lg {
    width: 66.6666666667%; }
  .mix-grid-col_9\@lg {
    width: 75%; }
  .mix-grid-col_10\@lg {
    width: 83.3333333333%; }
  .mix-grid-col_11\@lg {
    width: 91.6666666667%; }
  .mix-grid-col_12\@lg {
    width: 100%; }
  .mix-grid-col_push1\@lg {
    margin-left: 8.3333333333%; }
  .grid_flat {
    margin-top: 0; }
  .grid_flat > * {
    padding-top: 0; } }

/*
@name hList
@description Horizontal list items - used for bread crumb module

@markup
<div class="wrap">

    <ul class="hList">
        <li class="hList-item">
            <a href="#" class="link">
                <div class="column">
                    <div>
                        <span class="txt txt_1">Home</span>
                    </div>
                    <div>
                        <svg class="icon mix-icon_ms" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon_goArrow"></use>
                        </svg>
                    </div>
                </div>
            </a>
        </li>
        <li class="hList-item">
            <a href="#" class="link">
                <div class="column">
                    <div>
                        <span class="txt txt_1">Healthcare Professionals</span>
                    </div>
                    <div>
                        <svg class="icon mix-icon_ms" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon_goArrow"></use>
                        </svg>
                    </div>
                </div>
            </a>
        </li>
        <li class="hList-item">
            <div class="column">
                <div>
                    <span class="txt txt_1 mix-txt_grey">Education &amp; Training</span>
                </div>
            </div>
        </li>
    </ul>
</div>
*/
.hList {
  width: 100%; }

.hList-item {
  display: inline-block; }

@media (max-width: 1023px) {
  .hList_crumb {
    display: none; } }

.hList-item_stopBeingSoClingy {
  padding-right: 8px; }

.head {
  display: table;
  margin: auto;
  width: 100%;
  max-width: 1200px; }

.head > * {
  display: table-cell; }

.head-logo {
  padding: 0 6px 0 25px;
  vertical-align: middle; }

.head-logo-link {
  display: block;
  width: 92px; }

.head-logo-link-img {
  width: 100%;
  max-width: 100%; }

.head-bd {
  width: 100%;
  text-align: right; }

.head-bd-top {
  position: relative;
  z-index: 100;
  margin-bottom: 26px; }

.head-bd-top-link {
  /* putting typography and box model styling here because it is pretty
    specific and not re-used elsewhere. Also if typography styling is changed elsewhere
    we likely wouldn't want that to persist through the main navigation */
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding: 12px 0;
  text-decoration: none;
  fill: #77787b;
  color: #77787b;
  font-size: 16px; }

.head-bd-top-link > * > * {
  line-height: 1; }

.head-bd-top-link:hover {
  fill: #8c317a;
  color: #8c317a; }

.head-bd-top-link_box {
  padding: 12px 20px; }

.mix-head-bd-top-link_hover {
  fill: #8c317a; }

.mix-head-bd-top-link_hover:hover {
  background-color: #e9ebe9;
  fill: #77787b;
  color: #77787b; }

.head-bd-main {
  padding-right: 25px; }

.header {
  box-sizing: border-box;
  display: table;
  position: relative;
  padding-left: 15px;
  width: 100%; }

.header-logo {
  display: table-cell;
  vertical-align: middle; }

.header-logo-link {
  display: block;
  width: 52px; }

.header-logo-link-img {
  width: 100%;
  max-width: 100%; }

.header-menu {
  display: table-cell;
  vertical-align: middle;
  text-align: right; }

.header-menu-btn {
  display: inline-block;
  cursor: pointer;
  padding: 25px 15px;
  fill: #8c317a;
  color: #8c317a;
  font-size: 16px; }

.header-menu-btn.isActive {
  background-color: #8c317a;
  fill: #ffffff;
  color: #ffffff; }

.header-dropdown {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 8px 8px -8px rgba(0, 0, 0, 0.5);
  background-color: #e9ebe9; }

.header-dropdown.isActive {
  visibility: visible;
  opacity: 1;
  z-index: 100; }

.header-dropdown-box {
  background-color: #e9ebe9;
  cursor: pointer;
  padding: 15px; }

.header-dropdown-box_bright {
  background-color: #8c317a;
  text-align: center;
  fill: #ffffff;
  color: #ffffff;
  font-size: 16px; }

/*
@name Hero Carousel
@description Carousel on home page

@markup
<div class="vPad vPad_double">
    <div class="heroCarousel" data-view="HeroCarousel">
        <div class="heroCarousel-slide" style="background-image: url(/assets/media/images/home-carousel.jpg);">
            <div class="heroCarousel-slide-bd">
                <div class="heroCarousel-slide-bd-vr">
                    <h2 class="hdg hdg_carousel">Restoring peoples lives</h2>
                </div>
                <a class="btn">About Acelity</a>
            </div>
        </div>
        <div class="heroCarousel-slide" style="background-image: url(/assets/media/images/home-carousel.jpg);">
            <div class="heroCarousel-slide-bd">
                <div class="heroCarousel-slide-bd-vr">
                    <h2 class="hdg hdg_carousel">Another slide right here</h2>
                </div>
                <a class="btn">Learn More</a>
            </div>
        </div>
        <div class="heroCarousel-slide" style="background-image: url(/assets/media/images/home-carousel.jpg);">
            <div class="heroCarousel-slide-bd">
                <div class="heroCarousel-slide-bd-vr">
                    <h2 class="hdg hdg_carousel">Yet another slide here</h2>
                </div>
                <a class="btn">Click Me</a>
            </div>
        </div>
    </div>
</div>
*/
.heroCarousel {
  position: relative;
  height: 670px; }

.heroCarousel-slide {
  position: absolute;
  top: 0;
  -webkit-transition: all 600ms ease-in-out;
          transition: all 600ms ease-in-out;
  visibility: none;
  opacity: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%; }

.heroCarousel-slide.isActive {
  visibility: visible;
  opacity: 1;
  z-index: 2; }

.heroCarousel-slide:first-child {
  display: block; }

.heroCarousel-slide-bd {
  position: absolute;
  top: 15%;
  left: 49.5%;
  width: 100%;
  max-width: 50%;
  color: #ffffff; }

.heroCarousel-slide-bd-vr {
  margin-bottom: 40px; }

.heroCarousel-slide-bd-vr_half {
  margin-bottom: 20px; }

.heroCarousel-next,
.heroCarousel-prev {
  position: absolute;
  top: 48%;
  right: 6%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
  opacity: 1;
  z-index: 3;
  cursor: pointer;
  width: 46px;
  height: 46px; }

.heroCarousel-prev {
  left: 6%; }

.heroCarousel-next:hover,
.heroCarousel-prev:hover {
  opacity: 0.7; }

@media (max-width: 1023px) {
  .heroCarousel {
    height: 256px; }
  .heroCarousel-slide-bd {
    top: 67%;
    bottom: 10%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 240px;
    max-width: 574px;
    text-align: center; }
  .heroCarousel-slide-bd-vr {
    margin-bottom: 14px; }
  .heroCarousel-next,
  .heroCarousel-prev {
    top: 48%;
    right: 2%;
    width: 20px;
    height: 20px; }
  .heroCarousel-prev {
    left: 2%; } }

@media (min-width: 580px) and (max-width: 1023px) {
  .heroCarousel {
    height: 400px; }
  .heroCarousel-slide-bd {
    top: 73%; } }

/**
@name hr
@description Horizontal Rule

@markup
<div class="band band_highlight">
    <div class="vPad">
        <div class="wrap">
            <hr class="hr">
        </div>
    </div>
    <div class="vPad">
        <div class="wrap">
            <hr class="hr hr_grey">
        </div>
    </div>
</div>
*/
.hr {
  margin: 0;
  border: 0;
  background-color: #ffffff;
  height: 1px; }

.hr_grey {
  margin: 0;
  border: 0;
  background-color: #dfdfdf;
  height: 1px; }

/**
@name Info Box
@description Box with a header (with bg color / image) and body content

@markup
<div class="vr">
    <div style="width: 365px;">
        <div class="infoBox">
            <div class="infoBox-hd">Global Offices</div><!-- /.infoBox-hd -->
            <div class="infoBox-bd">
                For office contact information and a list of Acelity worldwide mailing addresses, see <a href="#0" class="link mix-link_underline">Global Offices</a>
            </div><!-- /.infoBox-bd -->
        </div><!-- /.infoBox -->
    </div>
</div><!-- /.vr -->
*/
.infoBox {
  border: 1px solid #dfdfdf;
  border-radius: 5px 5px 0 0; }

.infoBox-hd {
  border-radius: 5px 5px 0 0;
  background-color: #2d1263;
  background-image: url("/assets/media/images/map.png");
  background-repeat: no-repeat;
  background-position: 110% 50%;
  padding: 12px 18px;
  line-height: 1.2;
  color: #ffffff;
  font-size: 32px; }
  @media (min-width: 1024px) {
    .infoBox-hd {
      padding: 20px 38px; } }

.infoBox-bd {
  border-radius: 0 0 25px 5px;
  background-color: #ffffff;
  padding: 12px 18px;
  line-height: 1.3;
  font-size: 18px; }
  @media (min-width: 1024px) {
    .infoBox-bd {
      padding: 22px 38px; } }

/**
@name inline
@description displays all children inline, vertically aligned to the middle, and puts a gutter between them. Used for chaining text + icons in any order and making sure the alignment and wrapping works as expected. Sets font-size to 0 in order to remove inline space.

@markup
<a href="#0" class="link">
    <div class="inline">
        <svg class="icon mix-icon_xs" xmlns="http://www.w3.org/2000/svg">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_goArrow"></use>
        </svg>
        <span class="txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad deserunt quos, magnam ab reiciendis esse quod in, dicta ea ex sunt doloremque error culpa nulla cupiditate sequi reprehenderit obcaecati ipsam!</span>
        <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_outside"></use>
        </svg>
    </div>
</a>
*/
.inline {
  /* remove inline space (mainly so text-decoration doesn't get ruined).
    Intentionally does not get reset on children as child elements will likley
    be setting their own font-size. If the font-size needs to be reset and
    the child isn't setting it you could add a extension / mixin for children
    that would allow optional resetting. */
  font-size: 0; }

.inline > * {
  display: inline;
  /* weird bug in FF that aligns the text-decoration depending on the
    vertical-align property. https://bugzilla.mozilla.org/show_bug.cgi?id=750917

    Using baseline as the size difference between text & icons in this object's
    most widespread usecase isn't large enough to create an imbalance. If
    vertical-align: middle is needed -> add an extension. */
  vertical-align: baseline; }

.inline > * + * {
  margin-left: 8px; }

/**
@name Lined List
@description List item with vert padding and top border on siblings after the 1st

@markup
<div className="linedList">
    <div className="txt">
        <a href="#0" className="link link_bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, at.</a>
    </div>
    <p className="txt mix-txt_grey"><span className="mix-txt_bold">Publication Date:</span> 12th Febtembrucember 5039</p>
    <p className="txt mix-txt_grey">Agent Michael Scoon, FBI</p>
    <p className="txt mix-txt_grey">Journal of Lorem Ipsum Medicine</p>
</div>
<div className="linedList">
    <div className="txt">
        <a href="#0" className="link link_bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, at.</a>
    </div>
    <p className="txt mix-txt_grey"><span className="mix-txt_bold">Publication Date:</span> 12th Febtembrucember 5039</p>
    <p className="txt mix-txt_grey">Agent Michael Scoon, FBI</p>
    <p className="txt mix-txt_grey">Journal of Lorem Ipsum Medicine</p>
</div>
<div className="linedList">
    <div className="txt">
        <a href="#0" className="link link_bold">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, at.</a>
    </div>
    <p className="txt mix-txt_grey"><span className="mix-txt_bold">Publication Date:</span> 12th Febtembrucember 5039</p>
    <p className="txt mix-txt_grey">Agent Michael Scoon, FBI</p>
    <p className="txt mix-txt_grey">Journal of Lorem Ipsum Medicine</p>
</div>

*/
.linedList {
  padding: 12px 0 14px 0; }

.linedList + .linedList {
  border-top: 1px solid #e9ebe9; }

/**
@name Link List
@description Vertical list of links. Adds separating border and surrounding padding for larger hover and click areas.

@markup
<div class="wrap">
    <ul class="linkList">
        <li>
            <a href="#0" class="link">
                <div class="linkList-item">
                    <div class="cell">
                        <div class="cell-item mix-cell-item_max">Link 1</div>
                        <div class="cell-item mix-cell-item_padL">
                            <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#icon_outside"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="#0" class="link">
                <div class="linkList-item">
                    <div class="cell">
                        <div class="cell-item mix-cell-item_max">Link 2</div>
                        <div class="cell-item mix-cell-item_padL">
                            <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#icon_outside"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="#0" class="link">
                <div class="linkList-item">
                    <div class="cell">
                        <div class="cell-item mix-cell-item_max">Link 3</div>
                        <div class="cell-item mix-cell-item_padL">
                            <svg class="icon mix-icon_sm" xmlns="http://www.w3.org/2000/svg">
                                <use xlink:href="#icon_outside"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>
*/
.linkList {
  font-size: 0; }

.linkList_tall {
  margin-bottom: 12px; }

.linkList > * {
  border-top: 1px solid #dbdedc;
  font-size: 16px; }

.linkList-item {
  display: block;
  padding: 12px 0; }

.linkList-item_short {
  padding-top: 8px;
  padding-bottom: 8px; }

.mix-linkList_noBorder > * {
  border: none; }

/*
@name LR Split
@description vertically centers the left and right children while children constitute width according to class.

@markup
<div class="vr">
    <div class="cta">
        <div class="wrap">
            <div class="lrSplit">
                <div class="lrSplit-fifty">
                    <div class="txt">Be first to hear of Acelity news, releases and articles.</div> <!-- /.txt -->
                    <div class="hdg hdg_4 mix-hdg_bold">Subscribe to our newsletter.</div> <!-- /.hdg hdg_4 -->
                </div> <!-- /.lrSplit-fifty -->
                <div class="lrSplit-fifty">
                    <form>
                        <fieldset>
                            <div class="lrSplit">
                                <div class="lrSplit-seventy">
                                    <div class="field">
                                        <label class="isVisuallyHidden" for="enterEmail">Enter E-mail</label> <!-- /.field-label -->
                                        <div class="field-wrap">
                                            <input class="field-wrap-input" id="enterEmail" name="enterEmail" type="text" placeholder="Enter E-mail" data-view="Placeholder">
                                        </div> <!-- /.field-wrap -->
                                    </div> <!-- /.field -->
                                </div> <!-- /.lrSplit-seventy -->
                                <div class="lrSplit-thirty">
                                    <input class="btn btn_mag mix-btn_tight mix-btn_full@sm" type="button" value="Subscribe Now" />
                                </div> <!-- /.lrSplit-thirty -->
                            </div> <!-- /.lrSplit -->
                        </fieldset>
                    </form>
                </div> <!-- /.lrSplit-fifty -->
            </div> <!-- /.lrSplit -->
        </div> <!-- /.wrap -->
    </div> <!-- /.cta -->
</div> <!-- /.vr -->
*/
.lrSplit > * {
  margin-bottom: 26px; }

.lrSplit > *:last-child {
  margin-bottom: 0; }

@media (min-width: 1024px) {
  .lrSplit {
    display: table;
    width: 100%; }
  .lrSplit > * {
    display: table-cell;
    margin-bottom: 0;
    vertical-align: middle; }
  .lrSplit > * + * {
    box-sizing: border-box;
    padding-left: 14px; }
  .lrSplit-thirty {
    width: 30%; }
  .lrSplit-forty {
    width: 40%; }
  .lrSplit-fifty {
    width: 50%; }
  .lrSplit-sixty {
    width: 60%; }
  .lrSplit-seventy {
    width: 70%; }
  .lrSplit-right {
    text-align: right; }
  .lrSplit-left {
    text-align: left; } }

.menuCont {
  display: block;
  padding: 0 35px; }

.menuCont > *:last-child {
  padding-bottom: 30px; }

.nav {
  display: inline-block;
  vertical-align: top;
  font-size: 0; }

.nav > * {
  display: inline-block;
  margin: 0 15px;
  vertical-align: top;
  font-size: 16px; }

.nav > :first-child {
  margin-left: 0; }

.nav-item {
  position: relative;
  fill: #8c317a; }

.nav-item_main {
  position: static;
  margin: 0 25px;
  text-align: left;
  font-size: 21px;
  font-weight: 500; }

.nav-item_main:first-child {
  margin-left: 0; }

.nav-item_main:last-child {
  margin-right: 0; }

.nav-item:hover {
  fill: #77787b; }

.nav-item-sub {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  position: absolute;
  top: 100%;
  visibility: hidden;
  opacity: 0; }

.nav-item-sub_right {
  right: 0; }

.nav-item-sub_main {
  right: 0;
  left: 0;
  width: 100%;
  font-weight: 400; }

.nav-item-sub_main:after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: -1;
  box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.3);
  content: ""; }

.nav-item:hover .nav-item-sub {
  visibility: visible;
  opacity: 1; }

/**
@name Notify
@description Dismissible notification bar

@markup
<div class="isRelative" style="height: 100px; background-color: #000000;">
    <div class="notify isActive isHidden@sm" data-view="Notify">
        <div class="wrap">
            <div class="cell">
                <div class="cell-item mix-cell-item_max">
                    <a href="#0" class="link link_brown">
                        <div class="column">
                            <div>
                                <div class="txt txt_1 mix-txt_caps mix-txt_bold mix-txt_magenta">Latest News:</div>
                            </div>
                            <div>
                                <div class="txt">Link text and link text and link text</div>
                            </div>
                            <div>
                                <svg class="icon mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                                    <use xlink:href="#icon_arrowForward"></use>
                                </svg>
                            </div>
                        </div><!-- /.column -->
                    </a>
                </div><!-- /.cell-item -->
                <div class="cell-item mix-cell-item_padL">
                    <button type="button" class="isIconButton js-notify-close">
                        <svg class="icon mix-icon_royal mix-icon_ms mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                            <use xlink:href="#icon_close"></use>
                        </svg>
                    </button>
                </div><!-- /.cell-item -->
            </div><!-- /.cell -->
        </div><!-- /.wrap -->
    </div><!-- /.notify -->
</div><!-- /.isRelative -->
*/
.notify {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  opacity: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 11px 0; }

.notify.isActive {
  opacity: 1; }

/**
@name Overlay
@description Similar to tile but with everything already expanded and equal height body content sections by default.

@markup
<div class="blocks blocks_3up">
    <div>
        <div class="overlay">
            <div class="overlay-img">
                <img src="https://placehold.it/600x300" alt="">
            </div> <!-- /.overlay-img -->
            <div class="overlay-bd">
                <div class="overlay-hd">
                    <h2 class="hdg hdg_2 mix-hdg_light">Header Text</h2>
                </div> <!-- /.overlay-hd -->
                <div class="overlay-bd-txt">
                    <span class="overlay-bd-txt-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit Aenean euismod bibendum laoreet. Proin gravida dolor sit Aenean euismod bibendum laoreet. Proin gravida dolor sit Aenean euismod bibendum laoreet. Proin gravida dolor sit</span>
                    <a class="overlay-bd-txt-cta" href="#">Example link</a>
                </div> <!-- /.overlay-bd-txt -->
            </div> <!-- /.overlay-bd -->
        </div>
    </div>
    <div>
        <div class="overlay">
            <div class="overlay-img">
                <img src="https://placehold.it/600x300" alt="">
            </div> <!-- /.overlay-img -->
            <div class="overlay-bd">
                <div class="overlay-hd">
                    <h2 class="hdg hdg_2 mix-hdg_light">Header Text</h2>
                </div> <!-- /.overlay-hd -->
                <div class="overlay-bd-txt">
                    <span class="overlay-bd-txt-copy">much shorter text length but sections are still equal.</span>
                    <a class="overlay-bd-txt-cta" href="#">Example link</a>
                </div> <!-- /.overlay-bd-txt -->
            </div> <!-- /.overlay-bd -->
        </div>
    </div>
</div>
*/
.overlay {
  position: relative;
  margin: auto;
  overflow: hidden; }

.overlay-bd {
  position: absolute;
  bottom: 0;
  left: 0;
  /* scss-lint:disable DuplicateProperty */
  background-color: #8c317a;
  background-color: rgba(140, 49, 122, 0.7);
  /* scss-lint:enable DuplicateProperty */
  padding: 14px 22px;
  width: 100%;
  line-height: 1.2;
  color: #ffffff;
  box-sizing: border-box; }

.overlay-bd-txt-copy {
  display: block;
  margin: auto;
  /* hide text if it is way past char limit so that at least the hd, part of
    the bd copy, and the link are still visible */
  min-height: 95px;
  max-height: 160px;
  overflow: hidden; }

.overlay-img img {
  display: block;
  width: 100%; }

/**
@name Overlay Content
@description content section that overlays a BG image on large breakpoints

@markup
<div class="overlayContent" style="background-image: url('//placehold.it/1000x500')">
    <div class="overlayContent-box">
        <div class="overlayContent-box-bd">
            <div class="vr vr_20">
                <p class="hdg hdg_3 mix-hdg_light mix-hdg_white">Inspirational statement about
                    Acelity's brand or outcomes related to Acelity supporting
                    customers/HCPs
                </p>
            </div>
            <p class="txt mix-txt_white">Supporting statement if necessasry. Lorem ipsum dolor
                sit amet, consectetur adipisicing elit. Ratione voluptas eligendi
                obcaecati cum neque excepturi?
            </p>
        </div>
    </div>
</div>
*/
.overlayContent {
  background-image: none;
  background-size: 0 0; }

.overlayContent-box {
  background-color: #8c317a;
  padding: 2em; }

@media (min-width: 1024px) {
  .overlayContent {
    background-position: 50% 50%;
    background-size: cover; }
  .overlayContent-box {
    box-sizing: border-box;
    background: -webkit-linear-gradient(left, rgba(140, 49, 122, 0.5) 0%, transparent 100%);
    background: linear-gradient(to right, rgba(140, 49, 122, 0.5) 0%, transparent 100%);
    padding: 4em 1em;
    width: 50%;
    text-align: center; }
  .overlayContent-box-bd {
    display: inline-block;
    width: 80%;
    text-align: left; } }

/**
@name Pagination
@description inline, vertically centered pagination for navigating via the arrow icons or numbers.

@markup
<div class="band band_banded">
    <div class="wrap">
        <div class="vr vr_26">
            <div class="pagination ">
                <span class="pagination-prev">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon_goArrowLeft"></use>
                    </svg>
                </span> <!-- /.pagination-prev -->
                <ol class="pagination-list">
                    <li class="isActive">1</li>
                    <li>2</li>
                </ol> <!-- /.pagination-list -->
                <span class="pagination-next">
                    <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                        <use xlink:href="#icon_goArrow"></use>
                    </svg>
                </span> <!-- /.pagination-next -->
            </div> <!-- /.pagination  -->
        </div> <!-- /.vr -->
    </div> <!-- /.wrap -->
</div> <!-- /.band -->
*/
.pagination {
  padding: 10px 0;
  text-align: center;
  font-size: 0; }

.pagination_left {
  text-align: left; }

.pagination > * {
  display: inline-block;
  vertical-align: middle;
  text-align: center; }

.pagination-item:hover > * {
  opacity: 0.8; }

.pagination-list {
  font-size: 0; }

.pagination-item,
.pagination-list > * {
  display: inline-block;
  margin: 0 2px;
  border: 1px solid #cecece;
  border-radius: 2px;
  box-sizing: border-box;
  background: -webkit-linear-gradient(top, #ffffff 0%, #e9ebe9 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #e9ebe9 100%);
  /* scss-lint:enable DuplicateProperty */
  background-color: #ffffff;
  cursor: pointer;
  padding: 15px 0;
  width: 48px;
  height: 48px;
  color: #8c317a;
  fill: #8c317a;
  font-size: 16px;
  font-weight: 700; }

.pagination-item:hover,
.pagination-list > *:hover,
.pagination-list > .isActive {
  background: none;
  background-color: #8c317a;
  color: #ffffff;
  fill: #ffffff; }

.pagination-item_isDisabled,
.pagination-item_isDisabled:hover {
  border-color: #e9ebe9;
  background: -webkit-linear-gradient(top, #ffffff 0%, #e9ebe9 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #e9ebe9 100%);
  /* scss-lint:enable DuplicateProperty */
  color: #b4b8b8;
  fill: #b4b8b8; }

/**
@name Parallax Block
@description Container that will flow full-width and contain a circle and a parallaxing background image.

@markup
<div class="parallaxBlock">
    <div class="vr vr_20">
        <div class="wrap">
            <div class="blocks blocks_2up mix-blocks_4up@lg">
                <div>
                    <a href="#0" class="circle">
                        <div class="circle-hd">
                            <h2 class="hdg hdg_4">Innovation at Acelity</h2>
                        </div>
                        <div class="circle-bd">
                            <span class="txt">Inspiration block message describes innovation as a key factor in Acelity's value proposition. Lorem ipsum dolor sit amet, consectetur.</span>
                        </div>
                        <div class="circle-ft">
                            <div class="column">
                                <div>
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon">
                                        <use xlink:href="#icon_arrowForward"></use>
                                    </svg>
                                </div>
                                <div>
                                    <span>Read more</span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <img class="parallaxBlock-img" src="/assets/media/images/lab_lady_RT.jpg" alt="">
</div>

<div class="vr">
    <a href="/products.html" target="_blank">Product Page Example</a>
</div>
*/
.parallaxBlock {
  position: relative;
  overflow: hidden;
  text-align: right;
  -webkit-backface-visbility: hidden; }

.parallaxBlock-img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1; }
  @media (max-width: 1023px) {
    .parallaxBlock-img {
      max-width: 180%; } }
  @media (min-width: 1024px) {
    .parallaxBlock-img {
      -webkit-transition: all 0.3s ease-in-out;
              transition: all 0.3s ease-in-out;
      -webkit-transform: translate(-50%, -35%) translateZ(0);
              transform: translate(-50%, -35%) translateZ(0);
      width: 100%;
      height: auto;
      -webkit-backface-visbility: hidden; } }

@media (min-width: 580px) {
  .parallaxBlock-bd {
    display: inline-block;
    padding: 40px 25px; } }

@media (min-width: 1024px) {
  .parallaxBlock-bd {
    display: block; } }

/**
@name Product
@description Layout module for product listing. Contains img, title, and optional description. Image is vertically and horizontally centered in container.

@markup
<div class="blocks blocks_6up">
    <div>
        <a href="#0" class="product">
            <div class="product-img">
                <img src="//placehold.it/120x80" alt="">
            </div>
            <div class="product-info">
                <h3 class="product-info-title">ACTISORB® Silver 220</h3>
            </div>
        </a>
    </div>
    <div>
        <a href="#0" class="product">
            <div class="product-img">
                <img src="//placehold.it/200x200" alt="">
            </div>
            <div class="product-info">
                <h3 class="product-info-title">ACTISORB® Silver 220</h3>
                <p class="product-info-desc">Activated charcoal dressing with silver. Don’t just mask the odor, address the cause</p>
            </div>
        </a>
    </div>
</div>
*/
.product {
  display: table;
  width: 100%;
  text-decoration: none;
  line-height: 1.333333;
  color: #8c317a;
  fill: #8c317a;
  font-size: 15px; }
  @media (min-width: 1024px) {
    .product {
      font-size: 18px; } }

.product:hover {
  text-decoration: none;
  color: #ae6ea2;
  fill: #ae6ea2; }

.product_link {
  /* use table layout for perfect vert centering of &-link when it scales to
    be less than full width / height */
  display: table;
  margin: auto;
  width: 120px; }
  @media (min-width: 1024px) {
    .product_link {
      width: 100%; } }

.product-img {
  box-sizing: border-box;
  border-bottom: 2px solid #dfdfdf;
  padding: 0 0 0 0;
  width: 100%;
  height: 120px;
  text-align: center;
  white-space: nowrap;
  font-size: 0; }
  @media (min-width: 1024px) {
    .product-img {
      padding: 0 0;
      height: 160px; } }

.product-img:before {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: ""; }

.product-img > img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle; }

.product-link {
  display: table-cell;
  height: 160px;
  vertical-align: middle; }
  @media (max-width: 1023px) {
    .product-link {
      height: 120px; } }

.product-link-box {
  display: block;
  position: relative;
  background-color: #dfdfdf;
  padding-top: 100%; }

.product-link-box-content {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 5px;
  text-align: center;
  white-space: normal; }

.product-info {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  white-space: normal; }
  @media (min-width: 1024px) {
    .product-info {
      padding: 0 5px; } }

.product-info-title {
  margin-top: 12px;
  font-weight: 700; }

.product-info-desc {
  margin-top: 6px;
  color: #77787b; }

/**
@name Re-style Box
@description This object assumes a maximum of two direct descendants/children in order for all of the styles to effectively be applied. All instances are covered so there are some fairly specific styling situations dependant upon variation required. This object takes into account that all styles may be applied to all instances, and rearranges source order in some instances.

@markup
<div class="vr vr_sec">
    <ul class="blocks mix-blocks_5up@lg">
        <li>
            <div class="reStyleBox reStyleBox_borderTop mix-reStyleBox_paddedHalf mix-reStyleBox_radialAccent">
                <div class="reStyleBox-media">
                    <img src="http://placehold.it/300x300" alt=""/>
                </div> <!-- /.reStyleBox-media -->
                <div class="reStyleBox-bd mix-reStyleBox-bd_padded">
                    <span class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</span>
                </div> <!-- /.reStyleBox-bd -->
            </div> <!-- /.reStyleBox -->
        </li>
        <li>
            <div class="reStyleBox reStyleBox_borderTop mix-reStyleBox_padded mix-reStyleBox_radialAccent">
                <div class="reStyleBox-media">
                    <img src="http://placehold.it/300x300" alt=""/>
                </div> <!-- /.reStyleBox-media -->
                <div class="reStyleBox-bd">
                    <span class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</span>
                </div> <!-- /.reStyleBox-bd -->
            </div> <!-- /.reStyleBox -->
        </li>
        <li>
            <div class="reStyleBox reStyleBox_borderSplit mix-reStyleBox_radialAccent">
                <div class="reStyleBox-media">
                    <img src="http://placehold.it/300x300" alt=""/>
                </div> <!-- /.reStyleBox-media -->
                <div class="reStyleBox-bd mix-reStyleBox-bd_padded">
                    <span class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</span>
                </div> <!-- /.reStyleBox-bd -->
            </div> <!-- /.reStyleBox -->
        </li>
        <li>
            <div class="reStyleBox reStyleBox_borderTop mix-reStyleBox_padded mix-reStyleBox_radialAccent">
                <div class="reStyleBox-bd mix-reStyleBox-bd_padded">
                    <span class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</span>
                </div> <!-- /.reStyleBox-bd -->
            </div> <!-- /.reStyleBox -->
        </li>
        <li>
            <div class="reStyleBox reStyleBox_borderLeft mix-reStyleBox_radialAccent">
                <div class="reStyleBox-bd mix-reStyleBox-bd_padded">
                    <span class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
                </div> <!-- /.reStyleBox-bd -->
            </div> <!-- /.reStyleBox -->
        </li>
    </ul> <!-- /.blocks -->
</div> <!-- /.vr -->
<div class="vr vr_sec">
    <div class="reStyleBox reStyleBox_borderTop mix-reStyleBox_leftMedia mix-reStyleBox_radialAccent">
        <div class="reStyleBox-media">
            <img src="http://placehold.it/300x300" alt=""/>
        </div> <!-- /.reStyleBox-media -->
        <div class="reStyleBox-bd mix-reStyleBox-bd_padded">
            <span class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</span>
        </div> <!-- /.reStyleBox-bd -->
    </div> <!-- /.reStyleBox -->
</div> <!-- /.vr vr_sec -->
<div class="vr vr_sec">
    <div class="reStyleBox reStyleBox_borderTop mix-reStyleBox_rightMedia mix-reStyleBox_radialAccent">
        <div class="reStyleBox-media">
            <img src="http://placehold.it/300x300" alt=""/>
        </div> <!-- /.reStyleBox-media -->
        <div class="reStyleBox-bd mix-reStyleBox-bd_padded">
            <span class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</span>
        </div> <!-- /.reStyleBox-bd -->
    </div> <!-- /.reStyleBox -->
</div> <!-- /.vr vr_sec -->
<div class="vr vr_sec">
    <div class="reStyleBox reStyleBox_borderTop mix-reStyleBox_rightMedia mix-reStyleBox_paddedComplete mix-reStyleBox_radialAccent">
        <div class="reStyleBox-media">
            <img src="http://placehold.it/300x300" alt=""/>
        </div> <!-- /.reStyleBox-media -->
        <div class="reStyleBox-bd">
            <span class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.</span>
        </div> <!-- /.reStyleBox-bd -->
    </div> <!-- /.reStyleBox -->
</div> <!-- /.vr vr_sec -->
*/
.reStyleBox {
  box-sizing: border-box;
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  background-color: #ffffff;
  width: 100%;
  /* scss-lint:disable PropertySpelling */
  *zoom: 1;
  /* scss-lint:enable PropertySpelling */ }
  .reStyleBox:after, .reStyleBox:before {
    display: table;
    content: " "; }
  .reStyleBox:after {
    clear: both; }

/* stretches to full height of parent */
.mix-reStyleBox_flex {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto; }

.reStyleBox-media {
  text-align: center;
  font-size: 0; }

.reStyleBox-bd-cta {
  padding-top: 25px; }

.reStyleBox_borderTop {
  border-top: 6px solid #ed217c; }

.reStyleBox_borderRight {
  border-right: 6px solid #ed217c; }

.reStyleBox_borderBottom {
  border-bottom: 6px solid #ed217c; }

.reStyleBox_borderLeft {
  border-left: 6px solid #ed217c; }

.reStyleBox_borderSplit > * + * {
  border-top: 6px solid #ed217c; }

.mix-reStyleBox_padded > * {
  padding: 25px; }

.mix-reStyleBox_padded > * + * {
  padding-top: 0; }

.mix-reStyleBox_paddedComplete {
  padding: 25px; }

.mix-reStyleBox-media_padded {
  padding: 25px; }

.mix-reStyleBox-bd_padded {
  padding: 25px; }

.mix-reStyleBox_radialAccent {
  border-bottom-right-radius: 25px; }

.mix-reStyleBox_radialAccent.mix-reStyleBox_rightMedia .reStyleBox-media img,
.mix-reStyleBox_radialAccent.mix-reStyleBox_rightMedia .reStyleBox-media video {
  border-bottom-right-radius: 25px; }

.mix-reStyleBox_leftMedia > .reStyleBox-media {
  float: left;
  padding-right: 25px;
  max-width: 40%; }

.mix-reStyleBox_leftMedia > .reStyleBox-bd {
  overflow: hidden; }

.mix-reStyleBox_rightMedia > .reStyleBox-media {
  float: right;
  padding-left: 25px;
  max-width: 40%; }

.mix-reStyleBox_rightMedia > .reStyleBox-bd {
  overflow: hidden; }

/**
@name Results List
@description Zebra styled results list for search in main header

@markup
<div class="resultsList">
    <div class="resultsList-hd">Products</div>
    <ol class="resultsList-items">
        <li>
            <a href="#0" class="resultsList-items-item">
                <div class="txt">VAC VIA Negative Pressure Wound Therapy System</div>
                <p class="txt txt_1 mix-txt_grey">Nullam sagittis. Fusce a quam. Nullam quis ante. Vestibulum ullamcorper mauris at ligula. Donec elit</p>
            </a>
        </li>
        <li>
            <a href="#0" class="resultsList-items-item">
                <div class="txt">VAC VIA Negative Pressure Wound Therapy System</div>
                <p class="txt txt_1 mix-txt_grey">Nullam sagittis. Fusce a quam. Nullam quis ante. Vestibulum ullamcorper mauris at ligula. Donec elit</p>
            </a>
        </li>
    </ol>
    <div class="resultsList-hd">Articles</div>
    <ol class="resultsList-items">
        <li>
            <a href="#0" class="resultsList-items-item">
                <div class="txt">VAC VIA Negative Pressure Wound Therapy System</div>
                <p class="txt txt_1 mix-txt_grey">Nullam sagittis. Fusce a quam. Nullam quis ante. Vestibulum ullamcorper mauris at ligula. Donec elit</p>
            </a>
        </li>
    </ol>
</div>
*/
.resultsList-hd {
  background-color: #e9ebe9;
  padding: 5px 20px;
  text-transform: uppercase;
  color: #b4b8b8;
  font-size: 14px;
  font-weight: 700; }

.resultsList-items > * + * {
  border-top: 1px solid #e9ebe9; }

.resultsList-items-item {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  display: block;
  background-color: #ffffff;
  padding: 8px 20px;
  text-decoration: none;
  color: inherit; }

.resultsList-items-item:hover {
  background-color: #f0f1f0;
  text-decoration: none;
  color: inherit; }

.resultsList-items:last-child > :last-child > * {
  border-radius: 0 0 5px 5px; }

/**
@name Side Flip
@description Takes two objects that are side by side and flips their source order so they are visually displayed on opposing sides

@markup
<div class="sideFlip">
    <div class="sideFlip-bd mix-sideFlip-bd_spaced">
        <div class="content content_full mix-content_flat">
            <div class="content-hd">
                <h3 class="hdg hdg_5 mix-hdg_bold mix-hdg_purpleDarker">Product Group Headline</h3>
            </div> <!-- /.content-hd -->
            <div class="content-bd">
                <span class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.  Proin sodales pulvinar tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.</span>
            </div> <!-- /.content-bd -->
        </div> <!-- /.content -->
    </div> <!-- /.sideFlip-bd -->

    <div class="sideFlip-img">
        <img src="http://placehold.it/600x400" alt=""/>
    </div> <!-- /.sideFlip-img -->
</div> <!-- /.sideFlip -->
*/
@media (min-width: 1024px) {
  .sideFlip {
    /* scss-lint:disable PropertySpelling */
    *zoom: 1;
    /* scss-lint:enable PropertySpelling */ }
    .sideFlip:after, .sideFlip:before {
      display: table;
      content: " "; }
    .sideFlip:after {
      clear: both; }
  .sideFlip-img {
    float: left;
    width: 60%; }
  .sideFlip-img > img {
    width: 100%; }
  .sideFlip-bd {
    float: right;
    width: 40%; }
  .mix-sideFlip-bd_spaced {
    padding-left: 20px;
    box-sizing: border-box; } }

/**
@name Split Block
@description Container that will flow full-width and allow for content on one side and an image on the other.

@markup
<div class="splitBlock">
    <div class="splitBlock-cell">
        <div class="splitBlock-cell-content">
            <div class="content">
                <div class="content-hd">
                    <h3 class="hdg hdg_2 mix-hdg_light mix-hdg_white">The science behind our products</h3>
                </div>
                <div class="content-bd content-bd_push">
                    <span class="txt mix-txt_white">Headline and short description describing the long history of scientific excellence, innovation, and the significant clinical evidence that exists. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</span>
                </div>
                <div class="content-ft">
                    <a class="btn btn_border mix-btn_full@sm">
                     <span>Core technologies</span>
                    </a>
                    <a class="btn btn_border mix-btn_full@sm">
                     <span>Clinical Evidence</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="splitBlock-cell-media" style="background-image: url(/assets/media/images/surgeons_RT_sm.jpg)"></div>
    </div> <!-- /.splitBlock-cell -->
</div><!-- /splitBlock -->

<div class="splitBlock splitBlock_dark">
    <div class="splitBlock-cell">
        <div class="splitBlock-cell-content">
            <div class="content">
                <div class="content-hd">
                    <h3 class="hdg hdg_2 mix-hdg_light mix-hdg_white">The science behind our products</h3>
                </div>
                <div class="content-bd content-bd_push">
                    <span class="txt mix-txt_white">Headline and short description describing the long history of scientific excellence, innovation, and the significant clinical evidence that exists. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</span>
                </div>
                <div class="content-ft">
                    <a class="btn btn_border mix-btn_full@sm">
                     <span>Core technologies</span>
                    </a>
                    <a class="btn btn_border mix-btn_full@sm">
                     <span>Clinical Evidence</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="splitBlock-cell-media" style="background-image: url(/assets/media/images/surgeons_RT_sm.jpg)"></div>
    </div> <!-- /.splitBlock-cell -->
</div><!-- /splitBlock -->
*/
.splitBlock {
  background-color: #8c317a;
  box-sizing: border-box;
  padding: 0 15px; }
  @media (min-width: 1024px) {
    .splitBlock {
      padding: 0 25px; } }

.splitBlock_dark {
  background-color: #2d1263; }

.splitBlock-cell {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin: auto;
  max-width: 1148px;
  overflow: hidden;
  font-size: 0; }

@media (min-width: 1024px) {
  .splitBlock-cell > * {
    display: inline-block;
    width: 50%;
    font-size: 16px; } }

.splitBlock-cell-content {
  position: relative;
  z-index: 10;
  background-color: #8c317a;
  padding: 20px 0 30px 0;
  text-align: center;
  box-sizing: border-box; }
  @media (min-width: 1024px) {
    .splitBlock-cell-content {
      padding: 20px 25px 40px 0; } }

.splitBlock_dark .splitBlock-cell-content {
  background-color: #2d1263; }

.splitBlock-cell-media {
  background-position: 50% 50%;
  background-size: cover; }
  @media (max-width: 1023px) {
    .splitBlock-cell-media {
      display: none; } }
  @media (min-width: 1024px) {
    .splitBlock-cell-media {
      min-height: 291px; } }

.splitBlock:nth-child(even) .splitBlock-cell-content {
  padding: 20px 0 30px 0; }
  @media (min-width: 1024px) {
    .splitBlock:nth-child(even) .splitBlock-cell-content {
      right: -50%;
      padding: 20px 0 40px 25px; } }

@media (min-width: 1024px) {
  .splitBlock:nth-child(even) .splitBlock-cell-media {
    position: inherit;
    left: -50%; } }

/**
@name Stat
@description Circle with statistic and description. Person image is positioned absolutely so that the circle can be centered via text-align

@markup
<div class="isAlignedCenter" style="width: 300px;">
    <div class="stat">
        <div class="stat-hd">97.7%</div>
        <div class="stat-bd">of Complex Wounds Closed Successfully</div>
    </div>
</div>
*/
.stat {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  border-radius: 100%;
  background-color: #2c5993;
  padding: 50px 35px;
  width: 172px;
  height: 172px;
  text-align: center;
  color: #ffffff; }
  .stat:before {
    position: absolute;
    right: 100%;
    bottom: 12px;
    background-image: url("../media/images/product_details/vanna.png");
    background-repeat: no-repeat;
    background-size: contain;
    width: 23px;
    height: 50px;
    content: ""; }
  @media (min-width: 1024px) {
    .stat {
      padding: 60px 40px;
      width: 220px;
      height: 220px; }
      .stat:before {
        width: 30px;
        height: 67px; } }

.stat-hd {
  margin-bottom: 10px;
  font-size: 46px;
  font-weight: 300; }
  @media (min-width: 1024px) {
    .stat-hd {
      margin-bottom: 14px;
      font-size: 60px; } }

.stat-bd {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700; }
  @media (min-width: 1024px) {
    .stat-bd {
      font-size: 14px; } }

.subNav {
  position: relative;
  z-index: 3; }

.subNav-title {
  background-color: #ffffff;
  padding: 10px 55px;
  text-align: center;
  color: #2d1263; }
  @media (min-width: 1024px) {
    .subNav-title {
      display: none; } }

.subNav-title_royal {
  background-color: #8c317a;
  color: #ffffff; }

.subNav-btn {
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 11px;
  right: 10px;
  border-radius: 3px;
  background-color: #ed217c;
  padding: 6px;
  color: #ffffff;
  fill: #ffffff; }

.subNav-menu {
  display: inline-block;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  width: 100%; }
  @media (min-width: 1024px) {
    .subNav-menu {
      top: 56px;
      right: auto;
      width: auto;
      max-width: 269px; } }

.subNav-menu-content {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.25);
  background-color: rgba(233, 235, 233, 0.9);
  padding-top: 40px; }
  @media (min-width: 1024px) {
    .subNav-menu-content {
      border-radius: 0 5px 25px 0;
      box-shadow: 0 1px 12px 1px rgba(0, 0, 0, 0.25);
      padding: 5px; } }

.subNav-menu-content-control {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  margin-top: -10px;
  text-align: right; }

.subNav-menu-content-bd {
  overflow: hidden; }

@media (min-width: 1024px) {
  .subNav-menu-content-bd-inner {
    width: 269px; }
  .subNav-menu_collapsedLg .subNav-menu-content-control {
    margin-top: 0; } }

@media (max-width: 1023px) {
  .subNav-menu_collapsedSm .subNav-menu-content-bd {
    display: none; }
  .subNav-menu_collapsedSm .subNav-menu-content {
    box-shadow: none;
    padding-top: 0;
    padding-bottom: 0; } }

/**
@name Table
@description Responsive data table

@markup
<table class="table">
    <thead class="table-thead isVisuallyHidden@sm">
        <tr>
            <th class="table-thead-th">Title</th>
            <th class="table-thead-th">Type</th>
            <th class="table-thead-th">Publication Date</th>
            <th class="table-thead-th">Author</th>
        </tr>
    </thead><!-- /.table-thead -->
    <tbody class="table-tbody">
        <tr class="table-tbody-tr">
            <td class="table-tbody-tr-td" data-label="Title">
                <div class="table-tbody-tr-td-bd">
                    <span class="txt txt_1 mix-txt_bold mix-txt_purpleDarker">Negative Pressure Wound Therapy in complex wounds</span>
                    <a href="#0" class="link mix-link_underline">
                        <div class="column">
                            <div>
                                <div class="txt txt_1">View Abstract on PubMed</div>
                            </div>
                            <div>
                                <svg class="icon mix-icon_sm mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_outside"></use>
                                </svg>
                            </div>
                        </div><!-- /.column -->
                    </a>
                </div>
            </td><!-- /.table-tbody-tr-td -->
            <td class="table-tbody-tr-td" data-label="Type">
                <div class="table-tbody-tr-td-bd">
                    <div class="txt txt_1 mix-txt_purpleDark">Clinical Trial</div>
                </div>
            </td><!-- /.table-tbody-tr-td -->
            <td class="table-tbody-tr-td" data-label="Date">
                <div class="table-tbody-tr-td-bd">
                    <div class="txt txt_1 mix-txt_purpleDark">Jun 2014</div>
                </div>
            </td><!-- /.table-tbody-tr-td -->
            <td class="table-tbody-tr-td" data-label="Author">
                <div class="table-tbody-tr-td-bd">
                    <div class="txt txt_1 mix-txt_purpleDark">Johnson &amp; Milroy</div>
                </div>
            </td><!-- /.table-tbody-tr-td -->
        </tr>
        <tr class="table-tbody-tr">
            <td class="table-tbody-tr-td" data-label="Title">
                <div class="table-tbody-tr-td-bd">
                    <span class="txt txt_1 mix-txt_bold mix-txt_purpleDarker">Negative Pressure Wound Therapy in complex wounds</span>
                    <a href="#0" class="link mix-link_underline">
                        <div class="column">
                            <div>
                                <div class="txt txt_1">View Abstract on PubMed</div>
                            </div>
                            <div>
                                <svg class="icon mix-icon_sm mix-icon_block" xmlns="http://www.w3.org/2000/svg">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon_outside"></use>
                                </svg>
                            </div>
                        </div><!-- /.column -->
                    </a>
                </div>
            </td><!-- /.table-tbody-tr-td -->
            <td class="table-tbody-tr-td" data-label="Type">
                <div class="table-tbody-tr-td-bd">
                    <div class="txt txt_1 mix-txt_purpleDark">Clinical Trial</div>
                </div>
            </td><!-- /.table-tbody-tr-td -->
            <td class="table-tbody-tr-td" data-label="Date">
                <div class="table-tbody-tr-td-bd">
                    <div class="txt txt_1 mix-txt_purpleDark">Jun 2014</div>
                </div>
            </td><!-- /.table-tbody-tr-td -->
            <td class="table-tbody-tr-td" data-label="Author">
                <div class="table-tbody-tr-td-bd">
                    <div class="txt txt_1 mix-txt_purpleDark">Johnson &amp; Milroy</div>
                </div>
            </td><!-- /.table-tbody-tr-td -->
        </tr>
    </tbody><!-- /.table-tbody -->
</table>
*/
.table {
  width: 100%;
  border-collapse: separate; }
  @media (min-width: 1024px) {
    .table_tight\@lg {
      width: auto; } }

.table-thead-th {
  background-color: #2d1263;
  padding: 18px 18px;
  text-align: left;
  text-transform: uppercase;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700; }
  .table-thead-th:first-child {
    border-top-left-radius: 5px; }
  .table-thead-th:last-child {
    border-top-right-radius: 5px; }

.table-tbody-tr {
  background-color: #ffffff; }
  .table-tbody-tr:nth-child(even) {
    background-color: #f0ecee; }
  .table-tbody-tr:hover {
    background-color: #e2d6e8; }
  @media (max-width: 1023px) {
    .table-tbody-tr {
      display: block;
      border-bottom: 1px solid #dfdfdf;
      padding: 22px 0; } }
  @media (min-width: 1024px) {
    .table-tbody-tr {
      padding: 22px 0; }
      .table-tbody-tr:last-child > .table-tbody-tr-td:first-child {
        border-bottom-left-radius: 5px; }
      .table-tbody-tr:last-child > .table-tbody-tr-td:last-child {
        border-bottom-right-radius: 5px; } }

@media (max-width: 1023px) {
  .table-tbody-tr-td {
    display: block;
    position: relative; }
    .table-tbody-tr-td + .table-tbody-tr-td {
      margin-top: 15px; }
    .table-tbody-tr-td:before {
      box-sizing: border-box;
      float: left;
      padding: 0 15px;
      min-width: 110px;
      text-align: right;
      text-transform: uppercase;
      line-height: 1.5;
      color: #77787b;
      font-size: 14px;
      font-weight: 700;
      content: attr(data-label); } }

@media (min-width: 1024px) {
  .table-tbody-tr-td {
    border: 1px solid #dfdfdf;
    padding: 18px 18px;
    vertical-align: middle; } }

@media (max-width: 1023px) {
  .table-tbody-tr-td-bd {
    display: block;
    padding-right: 10px;
    /* if no content, height should be at least as tall as the label so that
        the empty row doesn't jump up */
    min-height: 1.5em;
    overflow: hidden; } }

/*
Mixins for simplified table styling (without zebra striping). Style was added
late in the project and just for one area of the site. Ideally this module would
be refactored to make the plain table the base style however we wanted to avoid
markup changes everywhere else that normal tables are used.
*/
.mix-table-tbody-tr_plain:nth-child(even), .mix-table-tbody-tr_plain:hover {
  background-color: #ffffff; }

@media (min-width: 1024px) {
  .mix-table-tbody-tr-td_plain:first-child {
    border-left: 0; }
  .mix-table-tbody-tr-td_plain:last-child {
    border-right: 0; } }

@media (min-width: 1024px) {
  .table-tbody-tr:first-child > .mix-table-tbody-tr-td_plain {
    border-top: 0; } }

@media (min-width: 1024px) {
  .table-tbody-tr:last-child > .mix-table-tbody-tr-td_plain {
    border-bottom: 0; } }

/**
@name Tags
@description Creates generic rounded blocks for media tags to display in a list form.

@markup
<div class="column">
    <div>
        <h3 class="hdg hdg_5">Tagged as:</h3>
    </div>
    <div>
        <ul class="hList">
            <li class="hList-item">
                <div class="column">
                    <div>
                        <div class="tags">
                            <span class="txt txt_1">Webinar</span>
                        </div>
                    </div>
                </div>
            </li>
            <li class="hList-item">
                <div class="column">
                    <div>
                        <div class="tags">
                            <span class="txt txt_1">Abdominal Surgery</span>
                        </div>
                    </div>
                </div>
            </li>
            <li class="hList-item">
                <div class="column">
                    <div>
                        <div class="tags">
                            <span class="txt txt_1">Tag</span>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
*/
.tags {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 18px;
  background-color: #77787b;
  padding: 5px 33px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700; }

/*
@name Thumb
@description Thumbnail styles

@markup
<div class="vr">
    <img class="thumb" src="/assets/media/images/product_details/thumb.png" alt="">
</div>
<div class="vr">
    <img class="thumb current" src="/assets/media/images/product_details/thumb.png" alt="">
</div>
*/
.thumb {
  -webkit-transition: all 300ms ease-in-out;
          transition: all 300ms ease-in-out;
  border: 2px solid #dfdfdf;
  cursor: pointer;
  width: 50px;
  height: 50px;
  will-change: transform; }

.thumb.current {
  border: 2px solid #8c317a; }

@media (max-width: 1023px) {
  .thumb {
    width: 39px;
    height: 39px; } }

.tooltip {
  border-radius: 5px;
  background-color: #e9ebe9;
  padding: 20px 40px 20px 20px;
  text-align: left;
  white-space: nowrap; }

.tooltip:before {
  position: absolute;
  bottom: 100%;
  left: 10%;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #e9ebe9;
  border-left: 5px solid transparent;
  width: 0;
  height: 0;
  content: ""; }

/**
@name Transition
@description layout for brand transition

@markup
<div class="transition">
    <div class="transition-bd">
        <div class="transition-bd-box">
            <img src="/assets/media/images/LC_Acelity.svg" alt="">
        </div><!-- /.transition-box -->
        <div class="transition-bd-box transition-bd-box_dark">
            <img src="/assets/media/images/acelity_logo_vert.png" alt="">
        </div><!-- /.transition-box -->
    </div><!-- /.transition-bd -->
    <div class="transition-icon">
        <svg class="icon mix-icon_magenta mix-icon_lg" xmlns="http://www.w3.org/2000/svg">
            <use xlink:href="#icon_arrowForward"></use>
        </svg>
    </div><!-- /.transition-icon -->
</div><!-- /.transition -->
*/
.transition {
  position: relative; }

.transition-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 20;
  border-radius: 50%;
  background-color: #ffffff;
  padding: 8px; }

.transition-bd {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 0; }

.transition-bd-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  box-sizing: border-box;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 5px;
  background-color: #ffffff;
  padding: 5% 10%;
  width: 50%;
  text-align: center;
  font-size: 16px; }

.transition-bd-box:first-child {
  position: relative;
  z-index: 10; }

.transition-bd-box:last-child {
  margin-left: -2%;
  padding-left: 12%;
  width: 52%; }

.transition-bd-box_dark {
  background: -webkit-linear-gradient(left, #8c317a 0%, #c2287b 100%);
  background: linear-gradient(to right, #8c317a 0%, #c2287b 100%);
  background-color: #8c317a; }

.treeNav {
  line-height: 1.2;
  fill: #8c317a;
  color: #412c36;
  font-size: 18px;
  font-weight: 700; }

.treeNav-sub {
  -webkit-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
  height: 0;
  overflow: hidden; }

.treeNav-sub.isActive {
  position: relative;
  height: auto;
  overflow: visible; }

.treeNav-item {
  position: relative;
  overflow: hidden; }

.treeNav-item + .treeNav-item:before {
  position: absolute;
  top: 0;
  right: 15px;
  left: 15px;
  z-index: 20;
  border-bottom: 1px solid #cecece;
  content: ""; }

.treeNav-item_light + .treeNav-item_light:before {
  border-color: rgba(180, 184, 184, 0.25); }

.treeNav-item_noBorder:before {
  display: none; }

.treeNav-item.isActive:before {
  border-color: transparent; }

.treeNav-item.isActive + .treeNav-item:before {
  border-width: 3px; }

.treeNav-item_lvl2.isActive:before {
  right: 0;
  left: 0;
  border-color: #e9ebe9; }

.treeNav-item-text {
  display: block;
  position: relative;
  z-index: 10;
  background-color: #e9ebe9;
  cursor: pointer;
  padding: 12px 15px; }

.treeNav-item-text_dark {
  background-color: #412c36;
  fill: #ffffff;
  color: #ffffff; }

.treeNav-item-text_light {
  background-color: #806e79;
  text-decoration: none;
  fill: #ffffff;
  color: #ffffff;
  font-weight: 400; }

.treeNav-item-text.isActive {
  background-color: #dddfdd; }

.treeNav-item-text_dark.isActive {
  background-color: #412c36; }

.treeNav-item-text_lvl2 {
  padding: 12px 15px 12px 35px; }

.mix-treeNav-item-text_link {
  text-decoration: none;
  color: #412c36;
  font-weight: 400; }

.mix-treeNav-item-text_link:hover {
  text-decoration: none;
  color: #412c36; }

/**
@name Testimonials
@description Testimonial blocks one with a grey background and a full width layout and a second in a block layout with no background.

@markup
<div class="tstim tstim_mult">
    <div class="tstim-media">
        <div class="tstim-media-img" style="background-image: url('/assets/media/images/profile-pic1.jpg');"></div>
    </div>
    <div class="tstim-bd">
        <div class="content">
            <div class="content-hd">
                <h3 class="hdg hdg_3 mix-hdg_purpleDarker mix-hdg_med">Adelle C.</h3>
                <span class="txt mix-txt_grey mix-txt_bold">Lorem Ipsum Patient</span>
            </div>
            <div class="content-bd">
                <span class="txt">“Fusce vulputate eleifend sapien. Proin magna. Sed libero. Cras ultricies mi eu turpis hendrerit fringilla. neque eu enim. Sed fringilla.”</span>
            </div>
        </div>
    </div>
</div>
<div class="tstim tstim_mult">
    <div class="tstim-media">
        <div class="tstim-media-img" style="background-image: url('/assets/media/images/profile-pic2.jpg');"></div>
        <div class="tstim-media-icon">
            <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                <use xlink:href="#icon_play"></use>
            </svg>
        </div>
    </div>
    <div class="tstim-bd">
        <div class="content">
            <div class="content-hd">
                <h3 class="hdg hdg_3 mix-hdg_purpleDarker mix-hdg_med">Adelle C.</h3>
                <span class="txt mix-txt_grey mix-txt_bold">Lorem Ipsum Patient</span>
            </div>
            <div class="content-bd">
                <span class="txt">“Fusce vulputate eleifend sapien. Proin magna. Sed libero. Cras ultricies mi eu turpis hendrerit fringilla. neque eu enim. Sed fringilla.”</span>
            </div>
        </div>
    </div>
</div>

<div class="tstim">
    <div class="tstim-media">
        <div class="tstim-media-img" style="background-image: url('/assets/media/images/profile-pic1.jpg');"></div>
    </div>
    <div class="tstim-bd">
        <div class="content">
            <div class="content-hd">
                <h3 class="hdg hdg_3 mix-hdg_purpleDarker mix-hdg_med">Adelle C.</h3>
                <span class="txt mix-txt_grey mix-txt_bold">Lorem Ipsum Patient</span>
            </div>
            <div class="content-bd">
                <span class="txt">“Fusce vulputate eleifend sapien. Proin magna. Sed libero. Cras ultricies mi eu turpis hendrerit fringilla. neque eu enim. Sed fringilla.”</span>
            </div>
        </div>
    </div>
</div>
*/
.tstim {
  text-align: center; }

.tstim-media {
  display: inline-block;
  position: relative;
  border-radius: 50%;
  width: 212px;
  height: 212px; }

.tstim-media-img {
  border-radius: 50%;
  background-position: center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.tstim-media-icon > * {
  position: absolute;
  right: -2px;
  bottom: -2px;
  color: #ed217c;
  fill: #ed217c;
  font-size: 45px; }

.tstim-bd {
  margin-top: -106px;
  background-color: #e9ebe9;
  padding-top: 106px;
  padding-bottom: 42px; }

.tstim-bd_trans {
  background-color: transparent; }

.tstim-bd > * {
  max-width: 730px;
  text-align: center; }

.tstim_mult {
  display: inline-block; }

.tstim_mult .tstim-media {
  width: 160px;
  height: 160px; }

.tstim_mult .tstim-bd {
  display: inline-block;
  margin-top: 0;
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 25px;
  box-sizing: border-box; }

@media (min-width: 1024px) {
  .tstim_mult {
    display: inline-block;
    max-width: 47%;
    overflow: hidden;
    text-align: left; }
  .tstim_mult .tstim-bd {
    width: 60%; }
  .tstim_mult .tstim-bd > * {
    text-align: left; } }

/**
@name Twin Block
@description Content on left and right with different colored backgrounds and images in each cell

@markup
*/
.twinBlock {
  box-sizing: border-box;
  position: relative;
  z-index: 4;
  padding: 0 15px;
  text-align: center; }
  @media (min-width: 1024px) {
    .twinBlock {
      padding: 0 25px;
      white-space: nowrap; } }

.twinBlock-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 50%;
  left: 0;
  background-color: #8c317a;
  background-repeat: no-repeat; }
  @media (min-width: 1024px) {
    .twinBlock-bg {
      right: 50%;
      bottom: 0;
      left: 0; } }

.twinBlock-bg_alt {
  top: 50%;
  bottom: 0;
  background-color: #2d1263; }
  @media (min-width: 1024px) {
    .twinBlock-bg_alt {
      top: 0;
      right: 0;
      left: 50%; } }

.twinBlock-lineDrawing {
  position: absolute;
  bottom: -40px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  overflow: hidden; }

.mix-twinBlock-bg_people {
  background-image: url("../media/images/twinBlock-people.png");
  background-position: 600% 180%; }
  @media (min-width: 1024px) {
    .mix-twinBlock-bg_people {
      background-position: 90% 130%; } }

.mix-twinBlock-bg_stethescope {
  background-image: url("../media/images/twinBlock-stethescope.png");
  background-position: 220% 650%; }
  @media (min-width: 1024px) {
    .mix-twinBlock-bg_stethescope {
      background-position: 10% 330%; } }

.twinBlock-cellWrap {
  margin: auto;
  max-width: 1148px; }

.twinBlock-cellWrap-cell {
  display: inline-block;
  position: relative;
  overflow: hidden;
  white-space: normal;
  font-size: 0; }
  @media (min-width: 1024px) {
    .twinBlock-cellWrap-cell {
      max-width: 50%; } }

.twinBlock-cellWrap-cell > * {
  padding: 20px 12% 30px; }
  @media (min-width: 1024px) {
    .twinBlock-cellWrap-cell > * {
      display: inline-block;
      padding: 60px 12% 100px;
      width: 76%;
      font-size: 16px; } }

/**
@name Text Fold
@description Collapsable text block that on default is clooapsed.

@markup
<div class="txtFold" data-view="Collapsible">
    <div class="txtFold-base" data-collapse-control>
        <div class="column">
            <div>
                <svg class="icon" xmlns="http://www.w3.org/2000/svg">
                    <use xlink:href="#icon_plus" data-collapse-icon data-collapse-iconSwap="#icon_minus"></use>
                </svg>
            </div>
            <div>
                <span class="link">View Bio</span>
            </div>
        </div>
    </div>
    <div class="txtFold-cont txtFold-cont_collapsed" data-collapse-content>
        <div class="txtFold-cont-bd">
            <p>Dr. Demetriades has published extensively in the field of trauma and critical care [470 peer review publications, 7 books, 1 Trauma Atlas, 85 book chapters, and 5 monographs]. He has delivered nearly 400 invited lectures/visiting professorships in more than 30 countries. He is an honorary member of many national societies and serves on the editorial board of 7 journals. He served on numerous national committees, including chairman of the Committee on Trauma Education of the American College of Surgeons. He was the Scudder Orator in Trauma for the 2011 American College of Surgeons Clinical Congress. More than 100 international research fellows, from all over the world have graduated from Dr. Demetriades' program over the last 15 years.</p>
        </div><!-- /.caddy-cont-bd -->
    </div>
</div>
*/
.txtFold {
  box-sizing: border-box;
  background-color: #ffffff;
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; }

.txtFold-base {
  cursor: pointer;
  padding: 10px 20px;
  color: #8c317a;
  fill: #8c317a; }

.txtFold-base_opaque {
  background-color: #ffffff; }

.txtFold-cont_collapsed {
  display: none; }

/* extra element so that padding doesn't need to change between states and so
transition is smooth (different top and bottom padding transitions looks un-smooth) */
.txtFold-cont-bd {
  padding: 0 20px 30px 20px; }

/**
@name vList
@description Vertical List. Creates vertical space between list items

@markup
<div class="vr vr_20">
    <ul class="vList">
        <li>
            <a href="#" class="link link_greyDark">Item 1</a>
        </li>
        <li>
            <a href="#" class="link link_greyDark">Item 2</a>
        </li>
        <li>
            <a href="#" class="link link_greyDark">Item 3</a>
        </li>
    </ul>
</div>
<div class="vr vr_20">
    <ul class="vList vList_tighter">
        <li>Tighter item 1</li>
        <li>Tighter item 2</li>
        <li>Tighter item 3</li>
    </ul>
</div>
<div class="vr vr_20">
    <ul class="vList vList_tight mix-vList_bullets">
        <li>Tight, Bullets item 1</li>
        <li>Tight, Bullets item 2</li>
        <li>Tight, Bullets item 3</li>
    </ul>
</div>
<div class="vr vr_20">
    <ul class="vList vList_loose">
        <li>Loose item 1</li>
        <li>Loose item 2</li>
        <li>Loose item 3</li>
    </ul>
</div>
<div class="vr vr_20">
    <ul class="vList mix-vList_bullets mix-vList_half@lg">
        <li>Half width @lg</li>
        <li>V.A.C.Ulta™ Therapy System</li>
        <li>V.A.C.Ulta™ Therapy System</li>
        <li>V.A.C.Ulta™ Therapy System</li>
        <li>V.A.C.Ulta™ Therapy System</li>
        <li>V.A.C.Ulta™ Therapy System</li>
        <li>V.A.C.Ulta™ Therapy System</li>
    </ul>
</div>
*/
.vList > * + * {
  margin-top: 12px; }

.vList_looserThanLooseButJustByALittleBit > * + * {
  margin-top: 30px; }

.vList_tighter > * + * {
  margin-top: 4px; }

.vList_tight > * + * {
  margin-top: 8px; }

.vList_loose > * + * {
  margin-top: 20px; }

.mix-vList_bullets {
  padding-left: 35px;
  list-style: disc; }

@media (min-width: 1024px) {
  .mix-vList_half\@lg {
    /* scss-lint:disable PropertySpelling */
    *zoom: 1;
    /* scss-lint:enable PropertySpelling */
    margin-top: -20px; }
    .mix-vList_half\@lg:after, .mix-vList_half\@lg:before {
      display: table;
      content: " "; }
    .mix-vList_half\@lg:after {
      clear: both; }
  .mix-vList_half\@lg > * {
    float: left;
    box-sizing: border-box;
    padding-top: 20px;
    width: 50%; }
  .mix-vList_half\@lg > * + * {
    margin: 0; } }

/**
@name vPad
@description Wraps content and gives it some top and bottom padding.

@markup
<div class="vr">
    <div class="band band_highlight">
        <div class="wrap">
            <div class="vPad">
                Default (20px)
            </div>
        </div>
    </div>
</div>
<div class="vr">
    <div class="band band_highlight">
        <div class="wrap">
            <div class="vPad vPad_15">
                15px
            </div>
        </div>
    </div>
</div>
<div class="vr">
    <div class="band band_highlight">
        <div class="wrap">
            <div class="vPad vPad_double">
                Double (40px)
            </div>
        </div>
    </div>
</div>
<div class="vr">
    <div class="band band_highlight">
        <div class="wrap">
            <div class="vPad vPad_tab">
                Tab Content (20 on sm, 40 on lg)
            </div>
        </div>
    </div>
</div>
<div class="vr">
    <div class="band band_highlight">
        <div class="wrap">
            <div class="vPad vPad_section">
                Section
            </div>
        </div>
    </div>
</div>
*/
.vPad {
  padding: 20px 0; }

.vPad_lgTosm {
  padding-top: 25px;
  padding-bottom: 0; }
  @media (min-width: 1024px) {
    .vPad_lgTosm {
      padding-top: 15px;
      padding-bottom: 0; } }

.vPad_sm {
  padding: 0 0 8px 0; }

.vPad_8 {
  padding: 8px 0; }

.vPad_15 {
  padding: 15px 0; }

.vPad_double {
  padding: 40px 0; }

.vPad_doubleBtm {
  padding: 0 0 40px 0; }

.vPad_tab {
  padding: 40px 0; }
  @media (max-width: 1023px) {
    .vPad_tab {
      padding: 20px 0; } }

.vPad_tabTop {
  padding: 40px 0 0 0; }
  @media (max-width: 1023px) {
    .vPad_tabTop {
      padding: 20px 0 0 0; } }

/**
@name Video
@description Responsive container for youtube embeds

@markup
<div style="max-width: 500px;">
    <div class="video">
        <iframe width="420" height="315" src="https://www.youtube.com/embed/J---aiyznGQ" frameborder="0" allowfullscreen></iframe>
    </div>
</div>
*/
.video {
  position: relative;
  padding-top: 30px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden; }

.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/**
@name Vertical Rhythm
@description Adds vertical space between objects.

@markup
<div class="vr">Default (8)</div>
<div class="vr vr_x2">x2 (16) Lorem ipsum dolor sit amet.</div>
<div class="vr vr_20">20 Lorem ipsum dolor sit amet.</div>
<div class="vr vr_26">26 Lorem ipsum dolor sit amet.</div>
<div class="vr vr_30">30 Lorem ipsum dolor sit amet.</div>
<div class="vr vr_40">40 Lorem ipsum dolor sit amet.</div>
<div class="vr vr_para">Para Lorem ipsum dolor sit amet.</div>
<div class="vr vr_sec">Section Lorem ipsum dolor sit amet.</div>
<div class="vr">Lorem ipsum dolor sit amet.</div>
*/
.vr {
  margin-bottom: 8px; }

.vr_x2 {
  margin-bottom: 16px; }

.vr_15 {
  margin-bottom: 15px; }

.vr_20 {
  margin-bottom: 20px; }

.vr_26 {
  margin-bottom: 26px; }

.vr_30 {
  margin-bottom: 30px; }

.vr_40 {
  margin-bottom: 40px; }

.vr_80 {
  margin-bottom: 80px; }

.vr_para {
  margin-bottom: 12px; }
  @media (min-width: 1024px) {
    .vr_para {
      margin-bottom: 26px; } }

.vr_20\@sm {
  margin-bottom: 20px; }
  @media (min-width: 1024px) {
    .vr_20\@sm {
      margin-bottom: 0; } }

.vr_sec {
  margin-bottom: 47px; }

.vr_breathe {
  margin: 20px 0 8px 0; }

/**
@name VR Top
@description Vertical Rhythm but in the up direction. Useful for areas that need vertical space but are only show on certain breakpoints

@markup
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, soluta.</div>
<div class="vrTop">Default</div>
<div class="vrTop">Default</div>
<div class="vrTop vrTop_15">15</div>
<div class="vrTop vrTop_26">26</div>
<div class="vrTop vrTop_50">50</div>
<div class="vrTop vrTop_60">60</div>
*/
.vrTop {
  margin-top: 8px; }

.vrTop_15 {
  margin-top: 15px; }

.vrTop_26 {
  margin-top: 26px; }

.vrTop_35 {
  margin-top: 35px; }

.vrTop_50 {
  margin-top: 50px; }

.vrTop_60 {
  margin-top: 60px; }

.vrTop_negative {
  margin-top: -96px; }

/*
@name Wrap
@description Constrains content to a maximum width.

@markup
<div class="wrap">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo doloribus officiis facere soluta reprehenderit aut odio odit, cumque, voluptatem repudiandae blanditiis laboriosam ab fugiat quod ad. Commodi consequuntur, aliquam dolores.
</div>
<div class="wrap wrap_wide">
    Wide wrap (used for footer). Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo doloribus officiis facere soluta reprehenderit aut odio odit, cumque, voluptatem repudiandae blanditiis laboriosam ab fugiat quod ad. Commodi consequuntur, aliquam dolores.
</div>
<div class="wrap wrap_wide@sm">
    No padding on sm. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo doloribus officiis facere soluta reprehenderit aut odio odit, cumque, voluptatem repudiandae blanditiis laboriosam ab fugiat quod ad. Commodi consequuntur, aliquam dolores.
</div>
<div class="wrap wrap_wide@lg">
    No padding on lg. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo doloribus officiis facere soluta reprehenderit aut odio odit, cumque, voluptatem repudiandae blanditiis laboriosam ab fugiat quod ad. Commodi consequuntur, aliquam dolores.
</div>
<div class="wrap wrap_tight@lg">
    Smaller max-width on lg. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo doloribus officiis facere soluta reprehenderit aut odio odit, cumque, voluptatem repudiandae blanditiis laboriosam ab fugiat quod ad. Commodi consequuntur, aliquam dolores.
</div>
*/
.wrap {
  margin: auto;
  padding: 0 15px;
  max-width: 1148px; }
  @media (min-width: 1024px) {
    .wrap {
      padding: 0 25px; } }

.wrap_wide {
  padding: 0;
  max-width: 1200px; }

.wrap_narrow {
  max-width: 600px; }

@media (max-width: 1023px) {
  .wrap_wide\@sm {
    padding: 0; } }

@media (min-width: 1024px) {
  .wrap_wide\@lg {
    padding: 0; }
  .wrap_tight\@lg {
    max-width: 800px; } }

/**
@name Footnote
@description Type styles for footnotes. Broken out into its own object for easy updating

@markup
<p class="footnote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, quos.</p>
*/
.footnote {
  font-size: 14px; }

/*
@name Headings

@markup
<div class="vr">
    <h1 class="hdg hdg_1">Heading 1</h1>
</div>
<div class="vr">
    <h2 class="hdg hdg_2">Heading 2</h2>
</div>
<div class="vr">
    <h3 class="hdg hdg_3">Heading 3</h3>
</div>
<div class="vr">
    <h3 class="hdg hdg_3Resp">Heading 3 Responsive (responsive sizes, Heading 5 in comps)</h3>
</div>
<div class="vr">
    <h4 class="hdg hdg_4">Heading 4</h4>
</div>
<div class="vr">
    <h4 class="hdg hdg_5">Heading 5</h4>
</div>
<div class="vr">
    <h4 class="hdg hdg_5Resp">Heading 5 Responsive (responsive sizes, Heading 7 in comps)</h4>
</div>
<div class="vr">
    <h4 class="hdg hdg_6">Heading 6</h4>
</div>
*/
.hdg {
  line-height: 1.1666666667;
  font-size: 24px;
  font-weight: 400; }

.hdg_1 {
  line-height: 1.0555555556;
  font-size: 54px; }

.hdg_2 {
  line-height: 1.125;
  font-size: 40px; }

.hdg_3 {
  line-height: 1.1875;
  font-size: 32px; }

.hdg_3Resp {
  line-height: 1.1875;
  font-size: 32px; }
  @media (max-width: 1023px) {
    .hdg_3Resp {
      font-size: 26px; } }

.hdg_4 {
  line-height: 1.1333333333;
  font-size: 30px; }

.hdg_5 {
  line-height: 1.1666666667;
  font-size: 24px; }

.hdg_5Resp {
  line-height: 1.35;
  font-size: 20px; }
  @media (min-width: 1024px) {
    .hdg_5Resp {
      line-height: 1.1666666667;
      font-size: 24px; } }

.hdg_6 {
  line-height: 1.4444444444;
  font-size: 18px; }

.hdg_hero {
  line-height: normal;
  letter-spacing: -2.2px;
  font-size: 74px; }

.hdg_heroResp {
  line-height: 1;
  letter-spacing: -2.2px;
  font-size: 36px; }
  @media (min-width: 1024px) {
    .hdg_heroResp {
      line-height: normal;
      font-size: 74px; } }

.hdg_carousel {
  line-height: 30px;
  letter-spacing: -0.5px;
  font-size: 18px;
  font-weight: 300; }
  @media (min-width: 1024px) {
    .hdg_carousel {
      line-height: 1.1666666667;
      letter-spacing: -2.2px;
      font-size: 65px; } }

.hdg_brands {
  padding: 100px 0 12px;
  line-height: 1;
  font-size: 34px; }
  @media (min-width: 1024px) {
    .hdg_brands {
      padding: 0;
      line-height: normal;
      letter-spacing: -2.2px;
      font-size: 72px; } }

.hdg_callout {
  line-height: normal;
  letter-spacing: -2.2px;
  font-size: 72px; }

.hdg_subNav {
  line-height: normal;
  font-size: 26px; }

@media (min-width: 1024px) {
  .mix-hdg_40\@lg {
    line-height: 1.125;
    font-size: 40px; } }

.mix-hdg_purpleDarker {
  color: #412c36; }

.mix-hdg_purpleDark {
  color: #2d1263; }

.mix-hdg_white {
  color: #ffffff; }

.mix-hdg_grey {
  color: #77787b; }

.mix-hdg_light {
  font-weight: 300; }

.mix-hdg_med {
  font-weight: 500; }

.mix-hdg_bold {
  font-weight: 700; }

.mix-hdg_caps {
  text-transform: uppercase; }

/**
@name Sup
@description Superscript styling

@markup
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, dicta. <sup class="sup">9</sup></p>
*/
.sup {
  display: inline-block;
  position: relative;
  top: -0.5em;
  border-radius: 100%;
  background-color: #dfdfdf;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 14px;
  color: #8c317a;
  font-size: 10px;
  font-weight: 700; }

/**
@name Sup Text
@description superscript styling for normal text

@markup
<p>Lorem ipsum dolor sit amet, consectetur 10<sup class="supTxt">2</sup> adipisicing elit. Minima, incidunt.</p>
*/
.supTxt {
  display: inline-block;
  position: relative;
  top: -0.35em;
  padding: 0 0.2em;
  font-size: 0.8em; }

/**
@name Text
@description Typography for body copy and misc. UI text

@markup
<p class="txt">Default Size</p>
<p class="txt txt_1">Size 1</p>
<p class="txt txt_1">Size 2</p>
<p class="txt mix-txt_1@sm">Default Size (Size 1 on small)</p>
<p class="txt mix-txt_grey">Grey lorem ipsum dolor sit.</p>
<p class="txt mix-txt_greyLightest">Grey lightest lorem ipsum dolor sit.</p>
<p class="txt mix-txt_magenta">Magenta lorem ipsum dolor sit.</p>
<p class="txt mix-txt_purpleDarker">Darker Purple lorem ipsum dolor sit.</p>
<p class="txt mix-txt_red">Red lorem ipsum dolor sit.</p>
<p class="txt mix-txt_med">Medium lorem ipsum dolor sit.</p>
<p class="txt mix-txt_bold">Bold lorem ipsum dolor sit.</p>
<p class="txt mix-txt_caps">Caps lorem ipsum dolor sit.</p>
<p class="txt mix-txt_italic">Italic lorem ipsum dolor sit.</p>
*/
.txt {
  line-height: 1.4444444444;
  font-size: 18px; }

.txt_1 {
  line-height: 1.5;
  font-size: 16px; }

.txt_2 {
  line-height: 1.4285714286;
  font-size: 14px; }

.txt_lg {
  font-size: 22px; }

.txt_20 {
  font-size: 20px; }

@media (max-width: 1023px) {
  .mix-txt_1\@sm {
    line-height: 1.5;
    font-size: 16px; } }

.mix-txt_grey {
  color: #77787b; }

.mix-txt_greyLight {
  color: #b4b8b8; }

.mix-txt_greyLightest {
  color: #e9ebe9; }

.mix-txt_greyPurple {
  color: #806e79; }

.mix-txt_magenta {
  color: #ed217c; }

.mix-txt_purpleDarker {
  color: #412c36; }

.mix-txt_red {
  color: #cf344a; }

.mix-txt_royal {
  color: #8c317a; }

.mix-txt_white {
  color: #ffffff; }

.mix-txt_purpleGrey {
  color: #806e79; }

.mix-txt_italic {
  font-style: italic; }

.mix-txt_bold {
  font-weight: 700; }

.mix-txt_med {
  font-weight: 500; }

.mix-txt_caps {
  text-transform: uppercase; }

/*
@name User Content
@description Styling for user entered text and headings.

@markup
<div class="userContent">
    <div class="vr">
        <h1>Heading 1</h1>
    </div>
    <div class="vr">
        <h2>Heading 2</h2>
    </div>
    <div class="vr">
        <h3>Heading 3</h3>
    </div>
    <div class="vr">
        <h4>Heading 4</h4>
    </div>
    <div class="vr">
        <h5>Heading 5</h5>
    </div>
    <div class="vr">
        <h6>Heading 6</h6>
    </div>
    <div class="vr">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="vr">
        <p>Lorem ipsum dolor sit amet.<sup>Sup text</sup></p>
    </div>
    <div class="vr">
        <a href="#0">Link Lorem ipsum dolor sit amet.</a>
    </div>
    <div class="vr">
       <img src="/assets/media/images/surgeons_RT_sm.jpg" alt="Surgeons" />
    </div>
    <div class="vr" style="overflow: hidden;">
        <div>Image floated right</div>
       <img src="/assets/media/images/surgeons_RT_sm.jpg" alt="Surgeons" class="imgFloat imgFloat_right" />
    </div>
    <div class="vr">
        <hr/>
    </div>
</div>
*/
.userContent {
  line-height: 1.4444444444;
  color: #412c36;
  font-size: 18px;
  /* if multiple images are floated to the same side then use neg margin to
    for the margins to collapse to the desired height */ }
  .userContent h1 {
    margin-bottom: 20px;
    line-height: 1.125;
    color: #2d1263;
    font-size: 40px;
    font-weight: 300; }
  .userContent h2 {
    margin-bottom: 8px;
    line-height: 1.1875;
    color: #412c36;
    font-size: 32px;
    font-weight: 300; }
  .userContent h3 {
    margin-bottom: 8px;
    line-height: 1.1333333333;
    color: #2d1263;
    font-size: 30px;
    font-weight: 300; }
  .userContent h4 {
    margin-bottom: 8px;
    line-height: 1.1666666667;
    color: #412c36;
    font-size: 24px; }
  .userContent h5 {
    margin-bottom: 8px;
    text-transform: uppercase;
    line-height: 1.4444444444;
    color: #412c36;
    font-size: 18px;
    font-weight: 700; }
  .userContent h6 {
    margin-bottom: 8px;
    text-transform: uppercase;
    line-height: 1.375;
    color: #77787b;
    font-size: 16px;
    font-weight: 700; }
  .userContent p {
    margin-bottom: 20px; }
  .userContent ul,
  .userContent ol {
    margin-bottom: 20px; }
  .userContent a {
    -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
    color: #8c317a; }
  .userContent a:hover {
    color: #ae6ea2; }
  .userContent img {
    display: block;
    margin: 16px 0; }
    @media (min-width: 1024px) {
      .userContent img {
        display: inline; } }
  .userContent .imgFloat {
    margin: auto;
    max-width: 100%; }
    @media (min-width: 1024px) {
      .userContent .imgFloat {
        max-width: 250px; } }
  .userContent .imgFloat_right {
    margin-bottom: 10px; }
    @media (min-width: 1024px) {
      .userContent .imgFloat_right {
        float: right;
        clear: right;
        margin: 0 0 30px 40px; } }
  @media (min-width: 1024px) {
    .userContent .imgFloat_right + .imgFloat_right {
      margin-top: -18px; } }
  .userContent hr {
    margin-bottom: 20px;
    border: 0;
    background-color: #dfdfdf;
    height: 1px; }
  .userContent sup {
    display: inline-block;
    position: relative;
    top: -0.5em;
    text-align: center;
    line-height: 14px;
    font-size: 10px; }
  .userContent .video {
    margin: 16px 0 26px 0; }
  .userContent table {
    width: 100%; }
  .userContent td,
  .userContent th {
    padding: 10px; }
/* Added for social media icons to display on footer. */
.footer-branding {
  padding: 20px 25px;
}
@media (max-width: 1023px) {
  .footer-branding {
    border-top: 1px solid #dbdedc;
  }
}

@media (max-width: 1023px) {
  .footer-branding-images > * {
    display: block;
    margin: auto;
  }
  .footer-branding-images > * + * {
    margin-top: 25px;
  }
}
@media (min-width: 1024px) {
  .footer-branding-images > * {
    vertical-align: middle;
  }
  .footer-branding-images > * + * {
    margin-left: 50px;
  }
}

.footer-branding-social {
	text-align: center;
}

.footer-branding-social > * + * {
	margin-left: 18px;
}

.footer-branding-social > a {
	color: #a2a2a2;
	fill: #a2a2a2;
	text-decoration: none;
}

.footer-branding-social > a:hover {
	color: #ed217c;
	fill: #ed217c;
}

@media (min-width: 1024px) {
	.footer-branding-social {
		text-align: right;
		margin-top: 40px;
	}
}

/* Added for VERAFLO module toggle. */
.module-toggle-container {
  height: auto;
  width: auto;
  position: relative;
}

.module-toggle-caption-text {
  font-size: 1.25em;
  font-weight: bold;
}

.module-toggle-media {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.module-toggle-media.module-toggle-expand {
  flex-direction: column;
}

.module-toggle-image {
  position: relative;
  cursor: pointer;
  width: 100px;
  height: 100px;
}
.module-toggle-image img {
  width: 100%;
  height: 100%;
}

.module-toggle-image .module-toggle-image-control {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: #ed217b;
  text-align: center;
  line-height: 18px;
}
.module-toggle-image .module-toggle-image-control:before {
  content: '\0025aa';
  font-size: 40px;
}

.module-toggle-expand .module-toggle-image-control:before {
  content: 'x';
  font-size: 18px;
  font-weight: bold;
}

.module-toggle-expand .module-toggle-image {
  width: 100%;
  height: 100%;
}

.module-toggle-expand .module-toggle-header {
  width: auto;
}

.module-toggle-header {
  padding: 20px;
}

.module-toggle-text {
  background-color: #e9ebe9;
  padding: 18px 0px;
}
@media only screen and (max-width: 465px) {


	.module-toggle-header {
		padding: 10px;
	}

	.module-toggle-image {
		width: 75px;
		height: 75px;
	}

	.module-toggle-caption-text {
		font-size: 1.0em;
	}
	.module-toggle-vac-dressing-text{
	font-size: 0.8em;
	}

}

/* Below section is added for prevena-therapy-for-patients page*/
.fontSize16{font-size: 16px;}

.pdfIcon-link, .backgroundForpdflinks > div > a {
    background: transparent url(/assets/icons/png/pdf-icon.png) center left no-repeat;
    padding-left: 30px;
    background-size: 24px 24px;    
    display: inline-block;
    height: 24px;
    line-height: 24px; 
}
/* Added to remove filter on hero banner. */
.hero_noFilter .hero-content {
        
    }
	
/* Added for thankyou page content module footer text */
.footnoteFont > .txt > div {
	font-size: 12px;
	margin: 40px 0px 5px 0px; 
	font-weight: normal;
 }
 
 .capbox {
	background-color: #e9ebe9;
	border: #e9ebe9 0px solid;
	border-width: 0px 12px 0px 0px;
	display: inline-block;
	*display: inline; zoom: 1; /* FOR IE7-8 */
	padding: 8px 40px 8px 8px;
	}

.capbox-inner {
	font: bold 11px arial, sans-serif;
	color: #000000;
	background-color: #e9ebe9;
	margin: 5px auto 0px auto;
	padding: 3px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}

#CaptchaDiv {
	font: bold 17px verdana, arial, sans-serif;
	font-style: italic;
	color: #000000;
	background-color: #FFFFFF;
	padding: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}

#CaptchaInput { margin: 1px 0px 1px 0px; width: 135px; }

#CaptchaValMsg { 
   margin: 1px 0px 1px 0px; width: 135px;
   color: #FF0000;
   }