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

#smcc article, #smcc aside, #smcc details, #smcc figcaption, #smcc figure,
#smcc footer, #smcc header, #smcc hgroup, #smcc menu, #smcc nav, #smcc section {
  display: block;
}

#smcc body {
  line-height: 1;
}

#smcc ol, #smcc ul {
  list-style: none;
}

#smcc blockquote, #smcc q {
  quotes: none;
}

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

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

#smcc-app {
  background-color: white;
  color: black;
}

:root {
  font-size: 13px;
}

@media (min-width: 0px) {
  #smcc-app *,
  .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  #smcc-app,
  .smcc-popup {
    box-sizing: border-box;
  }

  #smcc-app *,
  .smcc-popup *,
  #smcc-app *:before,
  .smcc-popup *:before,
  .smcc-popup *:after,
  #smcc-app *:after {
    box-sizing: inherit;
  }

  #smcc-app,
  .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  #smcc-app h1,
  #smcc-app h2,
  #smcc-app h3,
  #smcc-app h4,
  #smcc-app h5,
  #smcc-app h6,
  .smcc-popup h1,
  .smcc-popup h2,
  .smcc-popup h3,
  .smcc-popup h4,
  .smcc-popup h5,
  .smcc-popup h6 {
    line-height: 1 !important;
    text-transform: uppercase;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  #smcc-app h1,
  .smcc-popup h1 {
    font-size: 3.07692rem !important;
  }

  #smcc-app h2,
  .smcc-popup h2 {
    font-size: 1.84615rem !important;
  }

  #smcc-app h3,
  .smcc-popup h3 {
    font-size: 1.38462rem !important;
  }

  #smcc-app button:not(.small),
  .smcc-popup button:not(.small) {
    font-family: "Helvetica Neue LT W01_25 UltLt","Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  #smcc-app a,
  .smcc-popup a {
    cursor: pointer !important;
    font-size: 1.07692rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  #smcc-app .app-container .primary-pane-start a {
    cursor: pointer !important;
    font-size: 1.07692rem !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }

  #smcc-app a:hover,
  .smcc-popup a:hover {
    color: #888 !important;
  }

  .smcc-popup h1 {
    font-size: 2.46154rem;
  }

  .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  .fadeList.ng-enter.ng-enter-active,
  .fadeList.ng-leave {
    opacity: 1;
  }

  .fadeList.ng-enter {
    opacity: 0;
  }

  .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

   /*! angularjs-slider - v6.0.0 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2017-01-02 */
  .rzslider {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 4px;
    margin: 35px 0 15px 0;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .rzslider.with-legend {
    margin-bottom: 40px;
  }

  .rzslider[disabled] {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-pointer {
    cursor: not-allowed;
    background-color: #d8e0f3;
  }

  .rzslider[disabled] .rz-draggable {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-selection {
    background: #8b91a2;
  }

  .rzslider[disabled] .rz-tick {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-tick.rz-selected {
    background: #8b91a2;
  }

  .rzslider span {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
  }

  .rzslider .rz-base {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .rzslider .rz-bar-wrapper {
    left: 0;
    z-index: 1;
    width: 100%;
    height: 32px;
    padding-top: 16px;
    margin-top: -16px;
    box-sizing: border-box;
  }

  .rzslider .rz-draggable {
    cursor: move;
  }

  .rzslider .rz-bar {
    left: 0;
    z-index: 1;
    width: 100%;
    height: 4px;
    background: #d8e0f3;
    border-radius: 2px;
  }

  .rzslider .rz-selection {
    z-index: 2;
    background: #0db9f0;
    border-radius: 2px;
  }

  .rzslider .rz-pointer {
    top: -14px;
    z-index: 3;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: #0db9f0;
    border-radius: 16px;
  }

  .rzslider .rz-pointer:after {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
    content: "";
  }

  .rzslider .rz-pointer:hover:after {
    background-color: #ffffff;
  }

  .rzslider .rz-pointer.rz-active {
    z-index: 4;
  }

  .rzslider .rz-pointer.rz-active:after {
    background-color: #451aff;
  }

  .rzslider .rz-bubble {
    bottom: 16px;
    padding: 1px 3px;
    color: #55637d;
    cursor: default;
  }

  .rzslider .rz-bubble.rz-limit {
    color: #55637d;
  }

  .rzslider .rz-ticks {
    position: absolute;
    top: -3px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .rzslider .rz-ticks-values-under .rz-tick-value {
    top: initial;
    bottom: -32px;
  }

  .rzslider .rz-tick {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin-left: 11px;
    text-align: center;
    cursor: pointer;
    background: #d8e0f3;
    border-radius: 50%;
  }

  .rzslider .rz-tick.rz-selected {
    background: #0db9f0;
  }

  .rzslider .rz-tick-value {
    position: absolute;
    top: -30px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  .rzslider .rz-tick-legend {
    position: absolute;
    top: 24px;
    max-width: 50px;
    white-space: normal;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  .rzslider.rz-vertical {
    position: relative;
    width: 4px;
    height: 100%;
    padding: 0;
    margin: 0 20px;
    vertical-align: baseline;
  }

  .rzslider.rz-vertical .rz-base {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .rzslider.rz-vertical .rz-bar-wrapper {
    top: auto;
    left: 0;
    width: 32px;
    height: 100%;
    padding: 0 0 0 16px;
    margin: 0 0 0 -16px;
  }

  .rzslider.rz-vertical .rz-bar {
    bottom: 0;
    left: auto;
    width: 4px;
    height: 100%;
  }

  .rzslider.rz-vertical .rz-pointer {
    top: auto;
    bottom: 0;
    left: -14px !important;
  }

  .rzslider.rz-vertical .rz-bubble {
    bottom: 0;
    left: 16px !important;
    margin-left: 3px;
  }

  .rzslider.rz-vertical .rz-ticks {
    top: 0;
    left: -3px;
    z-index: 1;
    width: 0;
    height: 100%;
  }

  .rzslider.rz-vertical .rz-tick {
    margin-top: 11px;
    margin-left: auto;
    vertical-align: middle;
  }

  .rzslider.rz-vertical .rz-tick-value {
    top: initial;
    left: 24px;
    -webkit-transform: translate(0, -28%);
    transform: translate(0, -28%);
  }

  .rzslider.rz-vertical .rz-tick-legend {
    top: initial;
    right: 24px;
    max-width: none;
    white-space: nowrap;
    -webkit-transform: translate(0, -28%);
    transform: translate(0, -28%);
  }

  .rzslider.rz-vertical .rz-ticks-values-under .rz-tick-value {
    right: 24px;
    bottom: initial;
    left: initial;
  }

  #smcc-app #smcc-app,
  #smcc-app .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  #smcc-app #smcc-app h1,
  #smcc-app #smcc-app h2,
  #smcc-app #smcc-app h3,
  #smcc-app #smcc-app h4,
  #smcc-app #smcc-app h5,
  #smcc-app #smcc-app h6,
  #smcc-app .smcc-popup h1,
  #smcc-app .smcc-popup h2,
  #smcc-app .smcc-popup h3,
  #smcc-app .smcc-popup h4,
  #smcc-app .smcc-popup h5,
  #smcc-app .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
  }

  #smcc-app #smcc-app h1,
  #smcc-app .smcc-popup h1 {
    font-size: 3.07692rem !important;
  }

  #smcc-app #smcc-app h2,
  #smcc-app .smcc-popup h2 {
    font-size: 1.84615rem !important;
  }

  #smcc-app #smcc-app h3,
  #smcc-app .smcc-popup h3 {
    font-size: 1.38462rem !important;
  }

  #smcc-app #smcc-app button:not(.small),
  #smcc-app .smcc-popup button:not(.small) {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
  }

  #smcc-app #smcc-app a,
  #smcc-app .smcc-popup a {
    cursor: pointer !important;
    font-size: 1.07692rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  #smcc-app #smcc-app a:hover,
  #smcc-app .smcc-popup a:hover {
    color: #888 !important;
  }

  #smcc-app .smcc-popup h1 {
    font-size: 2.46154rem;
  }

  #smcc-app .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  #smcc-app .fadeList.ng-enter.ng-enter-active,
  #smcc-app .fadeList.ng-leave {
    opacity: 1;
  }

  #smcc-app .fadeList.ng-enter {
    opacity: 0;
  }

  #smcc-app .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  #smcc-app .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  #smcc-app #smcc-app *,
  #smcc-app .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  #smcc-app #smcc-app,
  #smcc-app .smcc-popup {
    box-sizing: border-box;
  }

  #smcc-app #smcc-app *,
  #smcc-app .smcc-popup *,
  #smcc-app #smcc-app *:before,
  #smcc-app .smcc-popup *:before,
  #smcc-app .smcc-popup *:after,
  #smcc-app #smcc-app *:after {
    box-sizing: inherit;
  }

  #smcc-app h1:not(:last-child),
  #smcc-app h2:not(:last-child),
  #smcc-app h3:not(:last-child),
  #smcc-app h4:not(:last-child),
  #smcc-app h5:not(:last-child),
  #smcc-app h6:not(:last-child),
  #smcc-app p:not(:last-child),
  #smcc-app button:not(:last-child) {
    margin-bottom: 1.23077rem;
  }

  #smcc-app h1:not(:last-child) {
    margin-bottom: 2.46154rem;
  }

  #smcc-app header:not(:last-child),
  #smcc-app nav:not(:last-child) {
    margin-bottom: 2.46154rem;
  }

  #smcc-app .app-container {
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .app-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 620px;
  }
}
@media (min-width: 0px) and (min-width: 1024px) {
  #smcc-app .app-container {
    height: 675px;
  }
}
@media (min-width: 0px) and (min-width: 1194px) {
  #smcc-app .app-container {
    height: 760px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .secondary-pane {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    height: 100%;
  }
}
@media (min-width: 0px) {
  #smcc-app .menu-pane {
    display: none;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .menu-pane {
    display: block;
    -ms-flex-preferred-size: 3.69231rem;
    flex-basis: 3.69231rem;
    margin: 1.23077rem;
  }
}
@media (min-width: 0px) {
  #smcc-app .primary-pane {
    margin: 1.23077rem;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .primary-pane {
    -ms-flex-preferred-size: calc(50% - 3.69231rem);
    flex-basis: calc(50% - 3.69231rem);
  }

  #smcc-app .primary-pane.centered {
    margin-top: 12.30769rem;
  }
}
@media (min-width: 0px) {
  #smcc-app .start-image-container {
    padding-bottom: 90%;
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .start-image-container {
    height: 100%;
    padding-bottom: initial;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .primary-pane-start {
    min-width: calc(310px - 6.15385rem);
    max-width: 75%;
  }
}
@media (min-width: 0px) {
  #smcc-app .skin-tones {
    list-style: none;
  }

  #smcc-app .skin-tone {
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.23077rem;
    z-index: 1;
    opacity: 0.25;
  }

  #smcc-app .skin-tone.active {
    opacity: 1;
  }

  #smcc-app .skin-tone-name {
    display: none;
    position: absolute;
    z-index: 998;
    vertical-align: middle;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    padding-top: .61538rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-left: .61538rem;
    padding-right: .61538rem;
    border: 1px solid #bbb;
    border-right: none;
    background-color: #fff;
    text-align: right;
    cursor: default;
    max-width: none;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  #smcc-app .skin-tone .skin-tone-name.hover,
  #smcc-app .skin-tone:hover .skin-tone-name {
    display: block !important;
  }

  #smcc-app .skin-tone-image-container {
    z-index: 999;
    width: 100%;
    border: 1px solid transparent;
  }

  #smcc-app .skin-tone.active .skin-tone-image-container {
    border-color: #bbb;
  }

  #smcc-app .skin-tone:hover {
    opacity: 1;
  }

  #smcc-app .skin-tone:hover .skin-tone-name {
    border-color: #888;
  }

  #smcc-app .skin-tone:hover .skin-tone-image-container {
    border-color: #888;
  }

  #smcc-app .product-types {
    display: none;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .product-types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 0px) {
  #smcc-app .product-type {
    position: relative;
    -ms-flex-preferred-size: calc(100% / 3);
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    background-color: #fff;
    border-left: 1px solid transparent;
  }

  #smcc-app .product-type:first-child.active {
    border-left-color: #eee;
  }

  #smcc-app .product-type:first-child.hover {
    border-left-color: #bbb;
  }

  #smcc-app .product-type:not(:first-child) {
    border-left-color: #bbb;
  }

  #smcc-app .product-type:last-child {
    border-right: 1px solid transparent;
  }

  #smcc-app .product-type:last-child.active {
    border-right-color: #eee;
  }

  #smcc-app .product-type:last-child.hover {
    border-right-color: #bbb;
  }

  #smcc-app .product-shade-name {
    display: block !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type-name {
    position: absolute;
    z-index: 998;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    width: calc(100% + 2px);
    margin-left: -1px;
    max-width: none !important;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    padding: .61538rem;
    background-color: #fff;
    cursor: default;
    white-space: normal;
    display: block;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type-image-container {
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 120px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  #smcc-app .product-type-image {
    max-width: calc(100px - 1.23077rem);
    max-height: calc(120px - 1.23077rem);
    margin-left: auto;
    margin-right: auto;
  }

  #smcc-app .product-type.active .product-type-image-container {
    background-color: #eee;
  }

  #smcc-app .product-type.hover .product-type-name {
    border: 1px solid #bbb;
    border-width: 1px 1px 0;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type.active.hover .product-type-name {
    background-color: #eee;
  }

  #smcc-app header.product-header {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1.23077rem;
  }

  #smcc-app header.product-header h1 {
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.76923rem !important;
  }
}
@media (min-width: 0px) and (max-width: 767px) {
  #smcc-app .app-container h1:not(:last-child) {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.46154rem !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.23077rem !important;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app header.product-header h1 {
    margin-bottom: 0.61538rem !important;
  }
}
@media (min-width: 0px) {
  #smcc-app header.product-header .product-image-container {
    min-width: 90px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app header.product-header .product-image-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 120px;
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 0px) {
  #smcc-app header.product-header .product-image {
    max-height: 70px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app header.product-header .product-image {
    max-height: 120px;
    margin: initial;
  }
}
@media (min-width: 0px) {
  #smcc-app header.product-header h2 {
    text-transform: initial;
  }
}
@media (min-width: 0px) and (max-width: 767px) {
  #smcc-app .app-container h2 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 1.84615rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.23077rem;
    font-weight: 100;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app header.product-header h2 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 0px) and (min-width: 1024px) {
  #smcc-app header.product-header h2 {
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 0px) {
  #smcc-app .product-description {
    max-width: 500px;
  }
}
@media (min-width: 0px) and (max-width: 768px) {
  #smcc-app .product-description {
    padding-top: 1em;
    font-size: 1em;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .product-description {
    display: block;
  }
}
@media (min-width: 0px) {
  #smcc-app .product-description {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    text-shadow: 0 0 0;
  }

  #smcc-app .product-description br {
    content: " ";
    display: block;
    margin: 0.61538rem;
  }
}
@media (min-width: 0px) and (max-width: 768px) {
  #smcc-app .product-description br {
    margin: 1.23077rem;
  }
}
@media (min-width: 0px) {
  #smcc-app .product-actions {
    margin-top: 2.46154rem;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .product-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media (min-width: 0px) {
  #smcc-app .product-actions a {
    display: table;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 0px) and (max-width: 768px) {
  #smcc-app .product-actions a {
    font-size: 1em;
  }
}
@media (min-width: 0px) {
  #smcc-app .product-actions a:not(:last-child) {
    margin-bottom: 1.23077rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .product-actions a:not(:last-child) {
    margin-right: 1.23077rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .product-actions .learn-more-link {
    display: none;
  }
}
@media (min-width: 0px) {
  #smcc-app .upperlower {
    text-transform: none;
  }

  #smcc-app ul,
  #smcc-app li {
    list-style-type: none;
  }

  #smcc-app div#comparison * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #smcc-app div#comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  #smcc-app div#comparison,
  #smcc-app .text {
    height: 288px;
    background-size: contain !important;
  }
}
@media (min-width: 0px) and (min-width: 375px) {
  #smcc-app div#comparison,
  #smcc-app .text {
    height: 327px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app div#comparison,
  #smcc-app .text {
    height: calc(100% - 120px);
    background-size: cover !important;
  }
}
@media (min-width: 0px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-repeat: no-repeat;
    background-size: 330px;
  }
}
@media (min-width: 0px) and (min-width: 375px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 375px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 572px;
  }
}
@media (min-width: 0px) and (min-width: 1024px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 635px;
  }
}
@media (min-width: 0px) and (min-width: 1194px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 732px;
  }
}
@media (min-width: 0px) {
  #smcc-app div#comparison figure {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  #smcc-app div#comparison figure > img {
    position: relative;
    width: 100%;
  }

  #smcc-app div#comparison figure #divisor {
    position: absolute;
    width: 0%;
    border-right: 1px solid #eee;
    overflow: hidden;
    bottom: 0;
    height: 100%;
  }

  #smcc-app .rzslider {
    opacity: 0;
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 3.69231rem;
  }

  #smcc-app .rz-bubble {
    display: none;
  }

  #smcc-app .rz-pointer {
    opacity: 0.2;
  }

  #smcc-app .rz-bar-wrapper,
  #smcc-app .rz-bar {
    opacity: .2;
    background-color: transparent;
    height: 100%;
  }

  #smcc-app .text {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
  }

  #smcc-app .slider-overlays,
  #smcc-app .slider-overlays div {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
  }

  #smcc-app .instructions {
    font-size: 1.23rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3.69231rem;
    overflow: hidden;
    z-index: 0;
    line-height: 3.69231rem;
    padding-left: calc(10% + 3.07692rem);
    color: #fff;
    pointer-events: none;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.25);
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .instructions {
    padding-left: initial;
    text-align: center;
  }
}
@media (min-width: 0px) {
  #smcc-app .hold {
    opacity: 1;
  }

  #smcc-app .hold {
    opacity: 0;
  }

  #smcc-app #slider-thumb {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
  }

  #smcc-app .thumb {
    bottom: .61538rem;
    position: absolute;
    width: 2.46154rem;
    height: 2.46154rem;
    background: #fff;
    border-radius: 3.69231rem;
    border: 1px solid #bbb;
    z-index: 1;
    margin-left: -1.23077rem;
    left: 0%;
  }

  #smcc-app .track {
    width: 100%;
    height: 1px;
    background-color: #949494;
    display: block;
    bottom: 1.84615rem;
    position: absolute;
  }

  #smcc-app #lines {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  #smcc-app .slider-overlays {
    -webkit-transition: opacity 1s linear 1000ms;
    transition: opacity 1s linear 1000ms;
  }

  #smcc-app .thumb {
    -webkit-transition: opacity 1s linear 800ms;
    transition: opacity 1s linear 800ms;
  }

  #smcc-app .track {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  #smcc-app .instructions {
    -webkit-transition: opacity 1s linear 1800ms;
    transition: opacity 1s linear 1800ms;
  }

  #smcc-app input[type=range] {
    -webkit-transition: opacity 1s linear 400ms;
    transition: opacity 1s linear 400ms;
  }

  @-webkit-keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @-webkit-keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @-webkit-keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  #smcc-app .fadeOutInstructions {
    -webkit-transition: opacity 1s linear 0ms;
    transition: opacity 1s linear 0ms;
    opacity: 0;
  }

  #smcc-app .slideInScreen {
    -webkit-animation: slideInScreen 1.25s ease-in-out 1000ms;
    animation: slideInScreen 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  @keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  #smcc-app .slideInThumb {
    -webkit-animation: slideInThumb 1.25s ease-in-out 1000ms;
    animation: slideInThumb 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  @keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  #smcc-app .slideIn {
    -webkit-animation: slideIn 1.25s ease-in-out 1000ms;
    animation: slideIn 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  @keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  #smcc-app button {
    font-size: 1.84615rem;
    text-transform: uppercase;
    padding: 1.23077rem !important;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #bbb !important;
  }

  #smcc-app button:hover {
    background-color: #eee;
    border-color: #888 !important;
  }

  #smcc-app button.large {
    width: 100%;
  }

  #smcc-app button.small {
    padding: .61538rem 1.23077rem !important;
    font-size: 1.23077rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-shades {
    margin-bottom: 1.23077rem;
  }

  #smcc-app .shades {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5px -5px calc(1.23 - 8px) -5px;
  }
}
@media (min-width: 0px) and (min-width: 480px) {
  #smcc-app .shades {
    max-width: 80%;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .shades {
    max-width: 100%;
  }
}
@media (min-width: 0px) and (min-width: 1024px) {
  #smcc-app .shades {
    max-width: 90%;
  }
}
@media (min-width: 0px) and (min-width: 1194px) {
  #smcc-app .shades {
    max-width: 80%;
  }
}
@media (min-width: 0px) {
  #smcc-app .shade {
    width: 4.15385rem;
    height: 4.15385rem;
    margin: 2px;
    padding: 0;
    border: 3px solid #fff;
    font-size: 0;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .shade {
    width: 2.92308rem;
    height: 2.92308rem;
  }
}
@media (min-width: 0px) {
  #smcc-app .shade.hover,
  #smcc-app .shade.active {
    border-color: #fff;
    outline-width: 1px;
    outline-style: solid;
  }

  #smcc-app .shade.active {
    outline-color: #bbb;
  }

  #smcc-app .shade.hover {
    outline-color: #888;
  }

  #smcc-app .shade.spacer {
    display: none;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .shade.spacer {
    display: block;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: 0;
    outline: 0;
  }
}
@media (min-width: 0px) {
  #smcc-app .mobile-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  #smcc-app .mobile-menu {
    display: none;
  }
}
@media (min-width: 0px) {
  #smcc-app .mobile-menu-button {
    cursor: default;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 1.23077rem;
    text-transform: uppercase;
    background-image: url(../images/ui/down-arrow-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 1.23077rem) center;
    background-size: 1.23077rem;
  }

  #smcc-app .mobile-menu-button:not(:last-child) {
    border-right: 1px solid #bbb;
  }

  #smcc-app img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  #smcc-app,
  .smcc-popup {
    font-size: 1.23077rem;
  }

  .smcc-popup #smcc-app,
  .smcc-popup .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  .smcc-popup #smcc-app h1,
  .smcc-popup #smcc-app h2,
  .smcc-popup #smcc-app h3,
  .smcc-popup #smcc-app h4,
  .smcc-popup #smcc-app h5,
  .smcc-popup #smcc-app h6,
  .smcc-popup .smcc-popup h1,
  .smcc-popup .smcc-popup h2,
  .smcc-popup .smcc-popup h3,
  .smcc-popup .smcc-popup h4,
  .smcc-popup .smcc-popup h5,
  .smcc-popup .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
  }

  .smcc-popup #smcc-app h1,
  .smcc-popup .smcc-popup h1 {
    font-size: 3.07692rem !important;
  }

  .smcc-popup #smcc-app h2,
  .smcc-popup .smcc-popup h2 {
    font-size: 1.84615rem !important;
  }

  .smcc-popup #smcc-app h3,
  .smcc-popup .smcc-popup h3 {
    font-size: 1.38462rem !important;
  }

  .smcc-popup #smcc-app button:not(.small),
  .smcc-popup .smcc-popup button:not(.small) {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
  }

  .smcc-popup #smcc-app a,
  .smcc-popup .smcc-popup a {
    cursor: pointer !important;
    font-size: 1.07692rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  .smcc-popup #smcc-app a:hover,
  .smcc-popup .smcc-popup a:hover {
    color: #888 !important;
  }

  .smcc-popup .smcc-popup h1 {
    font-size: 2.46154rem;
  }

  .smcc-popup .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  .smcc-popup .fadeList.ng-enter.ng-enter-active,
  .smcc-popup .fadeList.ng-leave {
    opacity: 1;
  }

  .smcc-popup .fadeList.ng-enter {
    opacity: 0;
  }

  .smcc-popup .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .smcc-popup .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .smcc-popup #smcc-app *,
  .smcc-popup .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  .smcc-popup #smcc-app,
  .smcc-popup .smcc-popup {
    box-sizing: border-box;
  }

  .smcc-popup #smcc-app *,
  .smcc-popup .smcc-popup *,
  .smcc-popup #smcc-app *:before,
  .smcc-popup .smcc-popup *:before,
  .smcc-popup .smcc-popup *:after,
  .smcc-popup #smcc-app *:after {
    box-sizing: inherit;
  }

  .smcc-popup h1:not(:last-child),
  .smcc-popup h2:not(:last-child),
  .smcc-popup h3:not(:last-child),
  .smcc-popup h4:not(:last-child),
  .smcc-popup h5:not(:last-child),
  .smcc-popup h6:not(:last-child),
  .smcc-popup p:not(:last-child),
  .smcc-popup button:not(:last-child) {
    margin-bottom: 1.23077rem;
  }

  .smcc-popup h1:not(:last-child) {
    margin-bottom: 2.46154rem;
  }

  .smcc-popup header:not(:last-child),
  .smcc-popup nav:not(:last-child) {
    margin-bottom: 2.46154rem;
  }

  .smcc-popup .app-container {
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .app-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 620px;
  }
}
@media (min-width: 0px) and (min-width: 1024px) {
  .smcc-popup .app-container {
    height: 675px;
  }
}
@media (min-width: 0px) and (min-width: 1194px) {
  .smcc-popup .app-container {
    height: 760px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .secondary-pane {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    height: 100%;
  }
}
@media (min-width: 0px) {
  .smcc-popup .menu-pane {
    display: none;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .menu-pane {
    display: block;
    -ms-flex-preferred-size: 3.69231rem;
    flex-basis: 3.69231rem;
    margin: 1.23077rem;
  }
}
@media (min-width: 0px) {
  .smcc-popup .primary-pane {
    margin: 1.23077rem;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .primary-pane {
    -ms-flex-preferred-size: calc(50% - 3.69231rem);
    flex-basis: calc(50% - 3.69231rem);
  }

  .smcc-popup .primary-pane.centered {
    margin-top: 12.30769rem;
  }
}
@media (min-width: 0px) {
  .smcc-popup .start-image-container {
    padding-bottom: 90%;
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .start-image-container {
    height: 100%;
    padding-bottom: initial;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .primary-pane-start {
    min-width: calc(310px - 6.15385rem);
    max-width: 75%;
  }
}
@media (min-width: 0px) {
  .smcc-popup .skin-tones {
    list-style: none;
  }

  .smcc-popup .skin-tone {
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.23077rem;
    z-index: 1;
    opacity: 0.25;
  }

  .smcc-popup .skin-tone.active {
    opacity: 1;
  }

  .smcc-popup .skin-tone-name {
    display: none;
    position: absolute;
    z-index: 998;
    vertical-align: middle;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    padding-top: .61538rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-left: .61538rem;
    padding-right: .61538rem;
    border: 1px solid #bbb;
    border-right: none;
    background-color: #fff;
    text-align: right;
    cursor: default;
    max-width: none;
  }

  .smcc-popup .skin-tone .skin-tone-name.hover,
  .smcc-popup .skin-tone:hover .skin-tone-name {
    display: block !important;
  }

  .smcc-popup .skin-tone-image-container {
    z-index: 999;
    width: 100%;
    border: 1px solid transparent;
  }

  .smcc-popup .skin-tone.active .skin-tone-image-container {
    border-color: #bbb;
  }

  .smcc-popup .skin-tone:hover {
    opacity: 1;
  }

  .smcc-popup .skin-tone:hover .skin-tone-name {
    border-color: #888;
  }

  .smcc-popup .skin-tone:hover .skin-tone-image-container {
    border-color: #888;
  }

  .smcc-popup .product-types {
    display: none;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .product-types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 0px) {
  .smcc-popup .product-type {
    position: relative;
    -ms-flex-preferred-size: calc(100% / 3);
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    background-color: #fff;
    border-left: 1px solid transparent;
  }

  .smcc-popup .product-type:first-child.active {
    border-left-color: #eee;
  }

  .smcc-popup .product-type:first-child.hover {
    border-left-color: #bbb;
  }

  .smcc-popup .product-type:not(:first-child) {
    border-left-color: #bbb;
  }

  .smcc-popup .product-type:last-child {
    border-right: 1px solid transparent;
  }

  .smcc-popup .product-type:last-child.active {
    border-right-color: #eee;
  }

  .smcc-popup .product-type:last-child.hover {
    border-right-color: #bbb;
  }

  .smcc-popup .product-shade-name {
    display: block !important;
  }

  .smcc-popup .product-type-name {
    position: absolute;
    z-index: 998;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    width: calc(100% + 2px);
    margin-left: -1px;
    max-width: none !important;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    padding: .61538rem;
    background-color: #fff;
    cursor: default;
    white-space: normal;
    display: block;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  .smcc-popup .product-type-image-container {
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 120px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .smcc-popup .product-type-image {
    max-width: calc(100px - 1.23077rem);
    max-height: calc(120px - 1.23077rem);
    margin-left: auto;
    margin-right: auto;
  }

  .smcc-popup .product-type.active .product-type-image-container {
    background-color: #eee;
  }

  .smcc-popup .product-type.hover .product-type-name {
    border: 1px solid #bbb;
    border-width: 1px 1px 0;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  .smcc-popup .product-type.active.hover .product-type-name {
    background-color: #eee;
  }

  .smcc-popup header.product-header {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1.23077rem;
  }

  .smcc-popup header.product-header h1 {
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.76923rem !important;
  }
}
@media (min-width: 0px) and (max-width: 767px) {
  .smcc-popup header.product-header h1 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.46154rem !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.23077rem !important;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup header.product-header h1 {
    margin-bottom: 0.61538rem !important;
  }
}
@media (min-width: 0px) {
  .smcc-popup header.product-header .product-image-container {
    min-width: 90px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup header.product-header .product-image-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 120px;
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 0px) {
  .smcc-popup header.product-header .product-image {
    max-height: 70px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup header.product-header .product-image {
    max-height: 120px;
    margin: initial;
  }
}
@media (min-width: 0px) {
  .smcc-popup header.product-header h2 {
    text-transform: initial;
  }
}
@media (min-width: 0px) and (max-width: 767px) {
  .smcc-popup header.product-header h2 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 1.84615rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup header.product-header h2 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 0px) and (min-width: 1024px) {
  .smcc-popup header.product-header h2 {
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 0px) {
  .smcc-popup .product-description {
    max-width: 500px;
  }
}
@media (min-width: 0px) and (max-width: 768px) {
  .smcc-popup .product-description {
    padding-top: 1em;
    font-size: 1em;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .product-description {
    display: block;
  }
}
@media (min-width: 0px) {
  .smcc-popup .product-description span {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-shadow: 0 0 0;
  }

  .smcc-popup .product-description br {
    content: " ";
    display: block;
    margin: 0.61538rem;
  }
}
@media (min-width: 0px) and (max-width: 768px) {
  .smcc-popup .product-description br {
    margin: 1.23077rem;
  }
}
@media (min-width: 0px) {
  .smcc-popup .product-actions {
    margin-top: 2.46154rem;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .product-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media (min-width: 0px) {
  .smcc-popup .product-actions a {
    display: table;
  }
}
@media (min-width: 0px) and (max-width: 768px) {
  .smcc-popup .product-actions a {
    font-size: 1em;
  }
}
@media (min-width: 0px) {
  .smcc-popup .product-actions a:not(:last-child) {
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .product-actions a:not(:last-child) {
    margin-right: 1.23077rem;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .product-actions .learn-more-link {
    display: none;
  }
}
@media (min-width: 0px) {
  .smcc-popup .upperlower {
    text-transform: none;
  }

  .smcc-popup ul,
  .smcc-popup li {
    list-style-type: none;
  }

  .smcc-popup div#comparison * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .smcc-popup div#comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: 288px;
    background-size: contain !important;
  }
}
@media (min-width: 0px) and (min-width: 375px) {
  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: 327px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: calc(100% - 120px);
    background-size: cover !important;
  }
}
@media (min-width: 0px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-repeat: no-repeat;
    background-size: 330px;
  }
}
@media (min-width: 0px) and (min-width: 375px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 375px;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 572px;
  }
}
@media (min-width: 0px) and (min-width: 1024px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 635px;
  }
}
@media (min-width: 0px) and (min-width: 1194px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 732px;
  }
}
@media (min-width: 0px) {
  .smcc-popup div#comparison figure {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .smcc-popup div#comparison figure > img {
    position: relative;
    width: 100%;
  }

  .smcc-popup div#comparison figure #divisor {
    position: absolute;
    width: 0%;
    border-right: 1px solid #eee;
    overflow: hidden;
    bottom: 0;
    height: 100%;
  }

  .smcc-popup .rzslider {
    opacity: 0;
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 3.69231rem;
  }

  .smcc-popup .rz-bubble {
    display: none;
  }

  .smcc-popup .rz-pointer {
    opacity: 0.2;
  }

  .smcc-popup .rz-bar-wrapper,
  .smcc-popup .rz-bar {
    opacity: .2;
    background-color: transparent;
    height: 100%;
  }

  .smcc-popup .text {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
  }

  .smcc-popup .slider-overlays,
  .smcc-popup .slider-overlays div {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
  }

  .smcc-popup .instructions {
    font-size: 1.23rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3.69231rem;
    overflow: hidden;
    z-index: 0;
    line-height: 3.69231rem;
    padding-left: calc(10% + 3.07692rem);
    color: #fff;
    pointer-events: none;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.25);
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .instructions {
    padding-left: initial;
    text-align: center;
  }
}
@media (min-width: 0px) {
  .smcc-popup .hold {
    opacity: 1;
  }

  .smcc-popup .hold {
    opacity: 0;
  }

  .smcc-popup #slider-thumb {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
  }

  .smcc-popup .thumb {
    bottom: .61538rem;
    position: absolute;
    width: 2.46154rem;
    height: 2.46154rem;
    background: #fff;
    border-radius: 3.69231rem;
    border: 1px solid #bbb;
    z-index: 1;
    margin-left: -1.23077rem;
    left: 0%;
  }

  .smcc-popup .track {
    width: 100%;
    height: 1px;
    background-color: #949494;
    display: block;
    bottom: 1.84615rem;
    position: absolute;
  }

  .smcc-popup #lines {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  .smcc-popup .slider-overlays {
    -webkit-transition: opacity 1s linear 1000ms;
    transition: opacity 1s linear 1000ms;
  }

  .smcc-popup .thumb {
    -webkit-transition: opacity 1s linear 800ms;
    transition: opacity 1s linear 800ms;
  }

  .smcc-popup .track {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  .smcc-popup .instructions {
    -webkit-transition: opacity 1s linear 1800ms;
    transition: opacity 1s linear 1800ms;
  }

  .smcc-popup input[type=range] {
    -webkit-transition: opacity 1s linear 400ms;
    transition: opacity 1s linear 400ms;
  }

  @-webkit-keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @-webkit-keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @-webkit-keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  .smcc-popup .fadeOutInstructions {
    -webkit-transition: opacity 1s linear 0ms;
    transition: opacity 1s linear 0ms;
    opacity: 0;
  }

  .smcc-popup .slideInScreen {
    -webkit-animation: slideInScreen 1.25s ease-in-out 1000ms;
    animation: slideInScreen 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  @keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  .smcc-popup .slideInThumb {
    -webkit-animation: slideInThumb 1.25s ease-in-out 1000ms;
    animation: slideInThumb 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  @keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  .smcc-popup .slideIn {
    -webkit-animation: slideIn 1.25s ease-in-out 1000ms;
    animation: slideIn 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  @keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  .smcc-popup button {
    font-size: 1.84615rem;
    text-transform: uppercase;
    padding: 1.23077rem !important;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #bbb !important;
    color: #000;
  }

  .smcc-popup button:hover {
    background-color: #eee;
    border-color: #888;
  }

  .smcc-popup button.large {
    width: 100%;
  }

  .smcc-popup button.small {
    padding: .61538rem 1.23077rem !important;
    font-size: 1.23077rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  .smcc-popup .product-shades {
    margin-bottom: 1.23077rem;
  }

  .smcc-popup .shades {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5px -5px calc(1.23 - 8px) -5px;
  }
}
@media (min-width: 0px) and (min-width: 480px) {
  .smcc-popup .shades {
    max-width: 80%;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .shades {
    max-width: 100%;
  }
}
@media (min-width: 0px) and (min-width: 1024px) {
  .smcc-popup .shades {
    max-width: 90%;
  }
}
@media (min-width: 0px) and (min-width: 1194px) {
  .smcc-popup .shades {
    max-width: 80%;
  }
}
@media (min-width: 0px) {
  .smcc-popup .shade {
    width: 4.15385rem;
    height: 4.15385rem;
    margin: 2px;
    padding: 0;
    border: 3px solid #fff;
    font-size: 0;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .shade {
    width: 2.92308rem;
    height: 2.92308rem;
  }
}
@media (min-width: 0px) {
  .smcc-popup .shade.hover,
  .smcc-popup .shade.active {
    border-color: #fff;
    outline-width: 1px;
    outline-style: solid;
  }

  .smcc-popup .shade.active {
    outline-color: #bbb;
  }

  .smcc-popup .shade.hover {
    outline-color: #888;
  }

  .smcc-popup .shade.spacer {
    display: none;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .shade.spacer {
    display: block;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: 0;
    outline: 0;
  }
}
@media (min-width: 0px) {
  .smcc-popup .mobile-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .smcc-popup .mobile-menu {
    display: none;
  }
}
@media (min-width: 0px) {
  .smcc-popup .mobile-menu-button {
    cursor: default;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 1.23077rem;
    text-transform: uppercase;
    background-image: url(../images/ui/down-arrow-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 1.23077rem) center;
    background-size: 1.23077rem;
  }

  .smcc-popup .mobile-menu-button:not(:last-child) {
    border-right: 1px solid #bbb;
  }

  .smcc-popup img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .smcc-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: #000;
  }

  .modal-open .smcc-popup {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1100 !important;
  }

  .modal-open {
    overflow: hidden;
  }

  .modal-dialog {
    position: relative;
    width: 100%;
    max-width: 1280px;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .modal-content {
    position: relative;
    padding: 0 1.23077rem 3.07692rem 1.23077rem;
  }

  .modal-header {
    margin-top: .61538rem;
    background-color: #000;
  }

  .modal-header .close {
    display: block;
    width: 3.07692rem;
    height: 3.07692rem;
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    background-image: url(../images/ui/close-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    border: none !important;
  }

  .modal-header .close:hover {
    display: block;
    width: 3.07692rem;
    height: 3.07692rem;
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    background-image: url(../images/ui/close-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    border: none !important;
  }

  .modal-header .close span[aria-hidden="true"] {
    display: none;
  }

  .modal-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #fff;
  }

  .modal-look-figure {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    border-bottom: 1px solid #bbb;
  }

  .modal-look-tip span {
    display: block;
    max-width: 100%;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  .modal-look-tip,
  .modal-look-product {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding: 1.84615rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .modal-look-tip,
  .modal-look-product {
    width: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }
}
@media (min-width: 0px) {
  .modal-look-tip span {
    font-size: 0.938em;
  }
}
@media (min-width: 0px) and (max-width: 767px) {
  .modal-look-product {
    padding-bottom: 0;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .modal-look-product {
    border-right: 1px solid #bbb;
  }
}
@media (min-width: 0px) {
  .modal-look-product-figure {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 1.84615rem;
  }

  .modal-look-product-image {
    max-height: 120px;
    margin-left: auto;
    margin-right: auto;
  }

  .fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
  }

  .fade.in {
    opacity: 1;
  }

  .modal-embed-container {
    display: block;
  }

  .modal-embed {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }

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

  .modal-look-product-details {
    width: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .modal.choose-concealer,
  .modal.choose-skintone {
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
    background-color: #fff;
  }
}
@media (min-width: 0px) and (min-width: 768px) {
  .modal.choose-concealer,
  .modal.choose-skintone {
    display: none !important;
  }
}
@media (min-width: 0px) {
  .modal.choose-concealer .modal-header,
  .modal.choose-skintone .modal-header {
    background-color: initial;
  }

  .modal.choose-concealer .modal-header .close,
  .modal.choose-skintone .modal-header .close {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }

  .modal.choose-concealer .modal-body,
  .modal.choose-skintone .modal-body {
    margin-top: 0;
  }

  .modal.choose-concealer .modal-content,
  .modal.choose-skintone .modal-content {
    padding: 0 1.23077rem 1.23077rem;
  }

  .modal.choose-concealer .modal-title,
  .modal.choose-skintone .modal-title {
    margin-right: 6.15385rem;
  }

  .modal.choose-concealer .modal-list,
  .modal.choose-skintone .modal-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }

  .modal.choose-concealer .modal-list-item.modal-product,
  .modal.choose-skintone .modal-list-item.modal-product {
    height: 140px;
  }

  .modal.choose-concealer .modal-list-item.modal-skin-tone,
  .modal.choose-skintone .modal-list-item.modal-skin-tone {
    height: 100px;
  }

  .modal.choose-concealer .modal-list-item,
  .modal.choose-skintone .modal-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #bbb;
  }

  .modal.choose-concealer .modal-list-item:not(:last-child),
  .modal.choose-skintone .modal-list-item:not(:last-child) {
    margin-bottom: 1.23077rem;
  }

  .modal.choose-concealer .modal-list-item:hover,
  .modal.choose-skintone .modal-list-item:hover {
    border-color: #888;
  }

  .modal.choose-concealer .modal-list-item-section,
  .modal.choose-skintone .modal-list-item-section {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    max-height: 100%;
    margin: 1.84615rem 1.84615rem 1.84615rem 0;
  }

  .modal.choose-concealer .modal-product-type-figure,
  .modal.choose-concealer .modal-skin-tone-figure,
  .modal.choose-skintone .modal-product-type-figure,
  .modal.choose-skintone .modal-skin-tone-figure {
    height: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .modal.choose-concealer .modal-skin-tone-figure,
  .modal.choose-skintone .modal-skin-tone-figure {
    -ms-flex-preferred-size: calc(50% - 1.84615rem);
    flex-basis: calc(50% - 1.84615rem);
    margin-right: 1.84615rem;
    background-size: cover;
    background-position: center;
  }

  .modal.choose-concealer .modal-product-type-image,
  .modal.choose-concealer .modal-skin-tone-image,
  .modal.choose-skintone .modal-product-type-image,
  .modal.choose-skintone .modal-skin-tone-image {
    max-height: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: perspective(1px) translateY(-50%);
    transform: perspective(1px) translateY(-50%);
  }

  .modal.choose-concealer .modal-look-image,
  .modal.choose-skintone .modal-look-image {
    max-height: 60%;
    margin: auto;
  }

  .modal.choose-concealer .modal-product-type-image,
  .modal.choose-skintone .modal-product-type-image {
    margin-left: auto;
    margin-right: auto;
    padding: 1.23077rem 1.84615rem;
  }

  .modal.choose-concealer .modal-product-type-name,
  .modal.choose-concealer .modal-skin-tone-name,
  .modal.choose-skintone .modal-product-type-name,
  .modal.choose-skintone .modal-skin-tone-name {
    font-size: 1.38462rem;
    line-height: 1;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-transform: uppercase;
    margin-bottom: 1.23077rem;
    font-weight: 100;
  }

  .modal.choose-concealer .modal-shop-link,
  .modal.choose-skintone .modal-shop-link {
    font-size: 1.38462rem;
    line-height: 1;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-transform: uppercase;
    font-weight: 600;
  }
}
@media (min-width: 768px) {
  #smcc-app *,
  .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  #smcc-app,
  .smcc-popup {
    box-sizing: border-box;
  }

  #smcc-app *,
  .smcc-popup *,
  #smcc-app *:before,
  .smcc-popup *:before,
  .smcc-popup *:after,
  #smcc-app *:after {
    box-sizing: inherit;
  }

  #smcc-app,
  .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  #smcc-app h1,
  #smcc-app h2,
  #smcc-app h3,
  #smcc-app h4,
  #smcc-app h5,
  #smcc-app h6,
  .smcc-popup h1,
  .smcc-popup h2,
  .smcc-popup h3,
  .smcc-popup h4,
  .smcc-popup h5,
  .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
    font-weight: 100;
  }

  #smcc-app h1,
  .smcc-popup h1 {
    font-size: 2.69231rem !important;
  }

  #smcc-app h2,
  .smcc-popup h2 {
    font-size: 1.61538rem !important;
  }

  #smcc-app h3,
  .smcc-popup h3 {
    font-size: 1.21154rem !important;
  }

  #smcc-app button:not(.small),
  .smcc-popup button:not(.small) {
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  #smcc-app a,
  .smcc-popup a {
    cursor: pointer !important;
    font-size: .94231rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  #smcc-app .app-container .primary-pane-start a {
    cursor: pointer !important;
    font-size: .94231rem !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  #smcc-app a:hover,
  .smcc-popup a:hover {
    color: #888 !important;
  }

  .smcc-popup h1 {
    font-size: 2.15385rem;
  }

  .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  .fadeList.ng-enter.ng-enter-active,
  .fadeList.ng-leave {
    opacity: 1;
  }

  .fadeList.ng-enter {
    opacity: 0;
  }

  .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

   /*! angularjs-slider - v6.0.0 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2017-01-02 */
  .rzslider {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 4px;
    margin: 35px 0 15px 0;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .rzslider.with-legend {
    margin-bottom: 40px;
  }

  .rzslider[disabled] {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-pointer {
    cursor: not-allowed;
    background-color: #d8e0f3;
  }

  .rzslider[disabled] .rz-draggable {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-selection {
    background: #8b91a2;
  }

  .rzslider[disabled] .rz-tick {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-tick.rz-selected {
    background: #8b91a2;
  }

  .rzslider span {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
  }

  .rzslider .rz-base {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .rzslider .rz-bar-wrapper {
    left: 0;
    z-index: 1;
    width: 100%;
    height: 32px;
    padding-top: 16px;
    margin-top: -16px;
    box-sizing: border-box;
  }

  .rzslider .rz-draggable {
    cursor: move;
  }

  .rzslider .rz-bar {
    left: 0;
    z-index: 1;
    width: 100%;
    height: 4px;
    background: #d8e0f3;
    border-radius: 2px;
  }

  .rzslider .rz-selection {
    z-index: 2;
    background: #0db9f0;
    border-radius: 2px;
  }

  .rzslider .rz-pointer {
    top: -14px;
    z-index: 3;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: #0db9f0;
    border-radius: 16px;
  }

  .rzslider .rz-pointer:after {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
    content: "";
  }

  .rzslider .rz-pointer:hover:after {
    background-color: #ffffff;
  }

  .rzslider .rz-pointer.rz-active {
    z-index: 4;
  }

  .rzslider .rz-pointer.rz-active:after {
    background-color: #451aff;
  }

  .rzslider .rz-bubble {
    bottom: 16px;
    padding: 1px 3px;
    color: #55637d;
    cursor: default;
  }

  .rzslider .rz-bubble.rz-limit {
    color: #55637d;
  }

  .rzslider .rz-ticks {
    position: absolute;
    top: -3px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .rzslider .rz-ticks-values-under .rz-tick-value {
    top: initial;
    bottom: -32px;
  }

  .rzslider .rz-tick {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin-left: 11px;
    text-align: center;
    cursor: pointer;
    background: #d8e0f3;
    border-radius: 50%;
  }

  .rzslider .rz-tick.rz-selected {
    background: #0db9f0;
  }

  .rzslider .rz-tick-value {
    position: absolute;
    top: -30px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  .rzslider .rz-tick-legend {
    position: absolute;
    top: 24px;
    max-width: 50px;
    white-space: normal;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  .rzslider.rz-vertical {
    position: relative;
    width: 4px;
    height: 100%;
    padding: 0;
    margin: 0 20px;
    vertical-align: baseline;
  }

  .rzslider.rz-vertical .rz-base {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .rzslider.rz-vertical .rz-bar-wrapper {
    top: auto;
    left: 0;
    width: 32px;
    height: 100%;
    padding: 0 0 0 16px;
    margin: 0 0 0 -16px;
  }

  .rzslider.rz-vertical .rz-bar {
    bottom: 0;
    left: auto;
    width: 4px;
    height: 100%;
  }

  .rzslider.rz-vertical .rz-pointer {
    top: auto;
    bottom: 0;
    left: -14px !important;
  }

  .rzslider.rz-vertical .rz-bubble {
    bottom: 0;
    left: 16px !important;
    margin-left: 3px;
  }

  .rzslider.rz-vertical .rz-ticks {
    top: 0;
    left: -3px;
    z-index: 1;
    width: 0;
    height: 100%;
  }

  .rzslider.rz-vertical .rz-tick {
    margin-top: 11px;
    margin-left: auto;
    vertical-align: middle;
  }

  .rzslider.rz-vertical .rz-tick-value {
    top: initial;
    left: 24px;
    -webkit-transform: translate(0, -28%);
    transform: translate(0, -28%);
  }

  .rzslider.rz-vertical .rz-tick-legend {
    top: initial;
    right: 24px;
    max-width: none;
    white-space: nowrap;
    -webkit-transform: translate(0, -28%);
    transform: translate(0, -28%);
  }

  .rzslider.rz-vertical .rz-ticks-values-under .rz-tick-value {
    right: 24px;
    bottom: initial;
    left: initial;
  }

  #smcc-app #smcc-app,
  #smcc-app .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  #smcc-app #smcc-app h1,
  #smcc-app #smcc-app h2,
  #smcc-app #smcc-app h3,
  #smcc-app #smcc-app h4,
  #smcc-app #smcc-app h5,
  #smcc-app #smcc-app h6,
  #smcc-app .smcc-popup h1,
  #smcc-app .smcc-popup h2,
  #smcc-app .smcc-popup h3,
  #smcc-app .smcc-popup h4,
  #smcc-app .smcc-popup h5,
  #smcc-app .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
  }

  #smcc-app #smcc-app h1,
  #smcc-app .smcc-popup h1 {
    font-size: 2.69231rem !important;
  }

  #smcc-app #smcc-app h2,
  #smcc-app .smcc-popup h2 {
    font-size: 1.61538rem !important;
  }

  #smcc-app #smcc-app h3,
  #smcc-app .smcc-popup h3 {
    font-size: 1.21154rem !important;
  }

  #smcc-app #smcc-app button:not(.small),
  #smcc-app .smcc-popup button:not(.small) {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
  }

  #smcc-app #smcc-app a,
  #smcc-app .smcc-popup a {
    cursor: pointer !important;
    font-size: .94231rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  #smcc-app #smcc-app a:hover,
  #smcc-app .smcc-popup a:hover {
    color: #888 !important;
  }

  #smcc-app .smcc-popup h1 {
    font-size: 2.15385rem;
  }

  #smcc-app .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  #smcc-app .fadeList.ng-enter.ng-enter-active,
  #smcc-app .fadeList.ng-leave {
    opacity: 1;
  }

  #smcc-app .fadeList.ng-enter {
    opacity: 0;
  }

  #smcc-app .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  #smcc-app .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  #smcc-app #smcc-app *,
  #smcc-app .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  #smcc-app #smcc-app,
  #smcc-app .smcc-popup {
    box-sizing: border-box;
  }

  #smcc-app #smcc-app *,
  #smcc-app .smcc-popup *,
  #smcc-app #smcc-app *:before,
  #smcc-app .smcc-popup *:before,
  #smcc-app .smcc-popup *:after,
  #smcc-app #smcc-app *:after {
    box-sizing: inherit;
  }

  #smcc-app h1:not(:last-child),
  #smcc-app h2:not(:last-child),
  #smcc-app h3:not(:last-child),
  #smcc-app h4:not(:last-child),
  #smcc-app h5:not(:last-child),
  #smcc-app h6:not(:last-child),
  #smcc-app p:not(:last-child),
  #smcc-app button:not(:last-child) {
    margin-bottom: 1.07692rem;
  }

  #smcc-app h1:not(:last-child) {
    margin-bottom: 2.15385rem;
  }

  #smcc-app header:not(:last-child),
  #smcc-app nav:not(:last-child) {
    margin-bottom: 2.15385rem;
  }

  #smcc-app .app-container {
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .app-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 620px;
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  #smcc-app .app-container {
    height: 675px;
  }
}
@media (min-width: 768px) and (min-width: 1194px) {
  #smcc-app .app-container {
    height: 760px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .secondary-pane {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  #smcc-app .menu-pane {
    display: none;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .menu-pane {
    display: block;
    -ms-flex-preferred-size: 3.23077rem;
    flex-basis: 3.23077rem;
    margin: 1.07692rem;
  }
}
@media (min-width: 768px) {
  #smcc-app .primary-pane {
    margin: 1.07692rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .primary-pane {
    -ms-flex-preferred-size: calc(50% - 3.23077rem);
    flex-basis: calc(50% - 3.23077rem);
  }

  #smcc-app .primary-pane.centered {
    margin-top: 10.76923rem;
  }
}
@media (min-width: 768px) {
  #smcc-app .start-image-container {
    padding-bottom: 90%;
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .start-image-container {
    height: 100%;
    padding-bottom: initial;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .primary-pane-start {
    min-width: calc(310px - 5.38462rem);
    max-width: 75%;
  }
}
@media (min-width: 768px) {
  #smcc-app .skin-tones {
    list-style: none;
  }

  #smcc-app .skin-tone {
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.07692rem;
    z-index: 1;
    opacity: 0.25;
  }

  #smcc-app .skin-tone.active {
    opacity: 1;
  }

  #smcc-app .skin-tone-name {
    display: none;
    position: absolute;
    z-index: 998;
    vertical-align: middle;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    padding-top: .53846rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-left: .53846rem;
    padding-right: .53846rem;
    border: 1px solid #bbb;
    border-right: none;
    background-color: #fff;
    text-align: right;
    cursor: default;
    max-width: none;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  #smcc-app .skin-tone .skin-tone-name.hover,
  #smcc-app .skin-tone:hover .skin-tone-name {
    display: block !important;
  }

  #smcc-app .skin-tone-image-container {
    z-index: 999;
    width: 100%;
    border: 1px solid transparent;
  }

  #smcc-app .skin-tone.active .skin-tone-image-container {
    border-color: #bbb;
  }

  #smcc-app .skin-tone:hover {
    opacity: 1;
  }

  #smcc-app .skin-tone:hover .skin-tone-name {
    border-color: #888;
  }

  #smcc-app .skin-tone:hover .skin-tone-image-container {
    border-color: #888;
  }

  #smcc-app .product-types {
    display: none;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .product-types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) {
  #smcc-app .product-type {
    position: relative;
    -ms-flex-preferred-size: calc(100% / 3);
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    background-color: #fff;
    border-left: 1px solid transparent;
  }

  #smcc-app .product-type:first-child.active {
    border-left-color: #eee;
  }

  #smcc-app .product-type:first-child.hover {
    border-left-color: #bbb;
  }

  #smcc-app .product-type:not(:first-child) {
    border-left-color: #bbb;
  }

  #smcc-app .product-type:last-child {
    border-right: 1px solid transparent;
  }

  #smcc-app .product-type:last-child.active {
    border-right-color: #eee;
  }

  #smcc-app .product-type:last-child.hover {
    border-right-color: #bbb;
  }

  #smcc-app .product-shade-name {
    display: block !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type-name {
    position: absolute;
    z-index: 998;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    width: calc(100% + 2px);
    margin-left: -1px;
    max-width: none !important;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    padding: .53846rem;
    background-color: #fff;
    cursor: default;
    white-space: normal;
    display: block;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type-image-container {
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 120px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  #smcc-app .product-type-image {
    max-width: calc(100px - 1.07692rem);
    max-height: calc(120px - 1.07692rem);
    margin-left: auto;
    margin-right: auto;
  }

  #smcc-app .product-type.active .product-type-image-container {
    background-color: #eee;
  }

  #smcc-app .product-type.hover .product-type-name {
    border: 1px solid #bbb;
    border-width: 1px 1px 0;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type.active.hover .product-type-name {
    background-color: #eee;
  }

  #smcc-app header.product-header {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1.07692rem;
  }

  #smcc-app header.product-header h1 {
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.42308rem !important;
  }
}
@media (min-width: 768px) and (max-width: 767px) {
  #smcc-app header.product-header h1 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.15385rem !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.07692rem !important;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app header.product-header h1 {
    margin-bottom: 0.53846rem !important;
  }
}
@media (min-width: 768px) {
  #smcc-app header.product-header .product-image-container {
    min-width: 90px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app header.product-header .product-image-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 120px;
    margin-bottom: 1.07692rem;
  }
}
@media (min-width: 768px) {
  #smcc-app header.product-header .product-image {
    max-height: 70px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app header.product-header .product-image {
    max-height: 120px;
    margin: initial;
  }
}
@media (min-width: 768px) {
  #smcc-app header.product-header h2 {
    text-transform: initial;
  }
}
@media (min-width: 768px) and (max-width: 767px) {
  #smcc-app header.product-header h2 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 1.61538rem;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.07692rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app header.product-header h2 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  #smcc-app header.product-header h2 {
    margin-bottom: 1.07692rem;
  }
}
@media (min-width: 768px) {
  #smcc-app .product-description {
    max-width: 500px;
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  #smcc-app .product-description {
    padding-top: 1em;
    font-size: 1em;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .product-description {
    display: block;
  }
}
@media (min-width: 768px) {
  #smcc-app .product-description {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
    text-shadow: 0 0 0;
  }

  #smcc-app .product-description br {
    content: " ";
    display: block;
    margin: 0.53846rem;
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  #smcc-app .product-description br {
    margin: 1.07692rem;
  }
}
@media (min-width: 768px) {
  #smcc-app .product-actions {
    margin-top: 2.15385rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .product-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media (min-width: 768px) {
  #smcc-app .product-actions a {
    display: table;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  #smcc-app .product-actions a {
    font-size: 1em;
  }
}
@media (min-width: 768px) {
  #smcc-app .product-actions a:not(:last-child) {
    margin-bottom: 1.07692rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .product-actions a:not(:last-child) {
    margin-right: 1.07692rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .product-actions .learn-more-link {
    display: none;
  }
}
@media (min-width: 768px) {
  #smcc-app .upperlower {
    text-transform: none;
  }

  #smcc-app ul,
  #smcc-app li {
    list-style-type: none;
  }

  #smcc-app div#comparison * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #smcc-app div#comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  #smcc-app div#comparison,
  #smcc-app .text {
    height: 288px;
    background-size: contain !important;
  }
}
@media (min-width: 768px) and (min-width: 375px) {
  #smcc-app div#comparison,
  #smcc-app .text {
    height: 327px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app div#comparison,
  #smcc-app .text {
    height: calc(100% - 120px);
    background-size: cover !important;
  }
}
@media (min-width: 768px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-repeat: no-repeat;
    background-size: 330px;
  }
}
@media (min-width: 768px) and (min-width: 375px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 375px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 572px;
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 635px;
  }
}
@media (min-width: 768px) and (min-width: 1194px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 732px;
  }
}
@media (min-width: 768px) {
  #smcc-app div#comparison figure {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  #smcc-app div#comparison figure > img {
    position: relative;
    width: 100%;
  }

  #smcc-app div#comparison figure #divisor {
    position: absolute;
    width: 0%;
    border-right: 1px solid #eee;
    overflow: hidden;
    bottom: 0;
    height: 100%;
  }

  #smcc-app .rzslider {
    opacity: 0;
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 3.23077rem;
  }

  #smcc-app .rz-bubble {
    display: none;
  }

  #smcc-app .rz-pointer {
    opacity: 0.2;
  }

  #smcc-app .rz-bar-wrapper,
  #smcc-app .rz-bar {
    opacity: .2;
    background-color: transparent;
    height: 100%;
  }

  #smcc-app .text {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
  }

  #smcc-app .slider-overlays,
  #smcc-app .slider-overlays div {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
  }

  #smcc-app .instructions {
    font-size: 1.23rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3.23077rem;
    overflow: hidden;
    z-index: 0;
    line-height: 3.23077rem;
    padding-left: calc(10% + 2.69231rem);
    color: #fff;
    pointer-events: none;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.25);
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .instructions {
    padding-left: initial;
    text-align: center;
  }
}
@media (min-width: 768px) {
  #smcc-app .hold {
    opacity: 1;
  }

  #smcc-app .hold {
    opacity: 0;
  }

  #smcc-app #slider-thumb {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
  }

  #smcc-app .thumb {
    bottom: .53846rem;
    position: absolute;
    width: 2.15385rem;
    height: 2.15385rem;
    background: #fff;
    border-radius: 3.23077rem;
    border: 1px solid #bbb;
    z-index: 1;
    margin-left: -1.07692rem;
    left: 0%;
  }

  #smcc-app .track {
    width: 100%;
    height: 1px;
    background-color: #949494;
    display: block;
    bottom: 1.61538rem;
    position: absolute;
  }

  #smcc-app #lines {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  #smcc-app .slider-overlays {
    -webkit-transition: opacity 1s linear 1000ms;
    transition: opacity 1s linear 1000ms;
  }

  #smcc-app .thumb {
    -webkit-transition: opacity 1s linear 800ms;
    transition: opacity 1s linear 800ms;
  }

  #smcc-app .track {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  #smcc-app .instructions {
    -webkit-transition: opacity 1s linear 1800ms;
    transition: opacity 1s linear 1800ms;
  }

  #smcc-app input[type=range] {
    -webkit-transition: opacity 1s linear 400ms;
    transition: opacity 1s linear 400ms;
  }

  @-webkit-keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @-webkit-keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @-webkit-keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  #smcc-app .fadeOutInstructions {
    -webkit-transition: opacity 1s linear 0ms;
    transition: opacity 1s linear 0ms;
    opacity: 0;
  }

  #smcc-app .slideInScreen {
    -webkit-animation: slideInScreen 1.25s ease-in-out 1000ms;
    animation: slideInScreen 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  @keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  #smcc-app .slideInThumb {
    -webkit-animation: slideInThumb 1.25s ease-in-out 1000ms;
    animation: slideInThumb 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  @keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  #smcc-app .slideIn {
    -webkit-animation: slideIn 1.25s ease-in-out 1000ms;
    animation: slideIn 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  @keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  #smcc-app .primary-pane-start button {
    font-size: 1.61538rem;
    text-transform: uppercase;
    padding: 1.07692rem !important;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #bbb !important;
  }

  #smcc-app button:hover {
    background-color: #eee;
    border-color: #888 !important;
  }

  #smcc-app button.large {
    width: 100%;
  }

  #smcc-app button.small {
    padding: .53846rem 1.07692rem !important;
    font-size: 1.07692rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-shades {
    margin-bottom: 1.07692rem;
  }

  #smcc-app .shades {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5px -5px calc(1.23 - 8px) -5px;
  }
}
@media (min-width: 768px) and (min-width: 480px) {
  #smcc-app .shades {
    max-width: 80%;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .shades {
    max-width: 100%;
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  #smcc-app .shades {
    max-width: 90%;
  }
}
@media (min-width: 768px) and (min-width: 1194px) {
  #smcc-app .shades {
    max-width: 80%;
  }
}
@media (min-width: 768px) {
  #smcc-app .shade {
    width: 3.63462rem;
    height: 3.63462rem;
    margin: 2px;
    padding: 0;
    border: 3px solid #fff;
    font-size: 0;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .shade {
    width: 2.55769rem;
    height: 2.55769rem;
  }
}
@media (min-width: 768px) {
  #smcc-app .shade.hover,
  #smcc-app .shade.active {
    border-color: #fff;
    outline-width: 1px;
    outline-style: solid;
  }

  #smcc-app .shade.active {
    outline-color: #bbb;
  }

  #smcc-app .shade.hover {
    outline-color: #888;
  }

  #smcc-app .shade.spacer {
    display: none;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .shade.spacer {
    display: block;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: 0;
    outline: 0;
  }
}
@media (min-width: 768px) {
  #smcc-app .mobile-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #smcc-app .mobile-menu {
    display: none;
  }
}
@media (min-width: 768px) {
  #smcc-app .mobile-menu-button {
    cursor: default;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 1.07692rem;
    text-transform: uppercase;
    background-image: url(../images/ui/down-arrow-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 1.07692rem) center;
    background-size: 1.07692rem;
  }

  #smcc-app .mobile-menu-button:not(:last-child) {
    border-right: 1px solid #bbb;
  }

  #smcc-app img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  #smcc-app,
  .smcc-popup {
    font-size: 1.07692rem;
  }

  .smcc-popup #smcc-app,
  .smcc-popup .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  .smcc-popup #smcc-app h1,
  .smcc-popup #smcc-app h2,
  .smcc-popup #smcc-app h3,
  .smcc-popup #smcc-app h4,
  .smcc-popup #smcc-app h5,
  .smcc-popup #smcc-app h6,
  .smcc-popup .smcc-popup h1,
  .smcc-popup .smcc-popup h2,
  .smcc-popup .smcc-popup h3,
  .smcc-popup .smcc-popup h4,
  .smcc-popup .smcc-popup h5,
  .smcc-popup .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
  }

  .smcc-popup #smcc-app h1,
  .smcc-popup .smcc-popup h1 {
    font-size: 2.69231rem !important;
  }

  .smcc-popup #smcc-app h2,
  .smcc-popup .smcc-popup h2 {
    font-size: 1.61538rem !important;
  }

  .smcc-popup #smcc-app h3,
  .smcc-popup .smcc-popup h3 {
    font-size: 1.21154rem !important;
  }

  .smcc-popup #smcc-app button:not(.small),
  .smcc-popup .smcc-popup button:not(.small) {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
  }

  .smcc-popup #smcc-app a,
  .smcc-popup .smcc-popup a {
    cursor: pointer !important;
    font-size: .94231rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  .smcc-popup #smcc-app a:hover,
  .smcc-popup .smcc-popup a:hover {
    color: #888 !important;
  }

  .smcc-popup .smcc-popup h1 {
    font-size: 2.15385rem;
  }

  .smcc-popup .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  .smcc-popup .fadeList.ng-enter.ng-enter-active,
  .smcc-popup .fadeList.ng-leave {
    opacity: 1;
  }

  .smcc-popup .fadeList.ng-enter {
    opacity: 0;
  }

  .smcc-popup .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .smcc-popup .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .smcc-popup #smcc-app *,
  .smcc-popup .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  .smcc-popup #smcc-app,
  .smcc-popup .smcc-popup {
    box-sizing: border-box;
  }

  .smcc-popup #smcc-app *,
  .smcc-popup .smcc-popup *,
  .smcc-popup #smcc-app *:before,
  .smcc-popup .smcc-popup *:before,
  .smcc-popup .smcc-popup *:after,
  .smcc-popup #smcc-app *:after {
    box-sizing: inherit;
  }

  .smcc-popup h1:not(:last-child),
  .smcc-popup h2:not(:last-child),
  .smcc-popup h3:not(:last-child),
  .smcc-popup h4:not(:last-child),
  .smcc-popup h5:not(:last-child),
  .smcc-popup h6:not(:last-child),
  .smcc-popup p:not(:last-child),
  .smcc-popup button:not(:last-child) {
    margin-bottom: 1.07692rem;
  }

  .smcc-popup h1:not(:last-child) {
    margin-bottom: 2.15385rem;
  }

  .smcc-popup header:not(:last-child),
  .smcc-popup nav:not(:last-child) {
    margin-bottom: 2.15385rem;
  }

  .smcc-popup .app-container {
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .app-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 620px;
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  .smcc-popup .app-container {
    height: 675px;
  }
}
@media (min-width: 768px) and (min-width: 1194px) {
  .smcc-popup .app-container {
    height: 760px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .secondary-pane {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    height: 100%;
  }
}
@media (min-width: 768px) {
  .smcc-popup .menu-pane {
    display: none;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .menu-pane {
    display: block;
    -ms-flex-preferred-size: 3.23077rem;
    flex-basis: 3.23077rem;
    margin: 1.07692rem;
  }
}
@media (min-width: 768px) {
  .smcc-popup .primary-pane {
    margin: 1.07692rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .primary-pane {
    -ms-flex-preferred-size: calc(50% - 3.23077rem);
    flex-basis: calc(50% - 3.23077rem);
  }

  .smcc-popup .primary-pane.centered {
    margin-top: 10.76923rem;
  }
}
@media (min-width: 768px) {
  .smcc-popup .start-image-container {
    padding-bottom: 90%;
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .start-image-container {
    height: 100%;
    padding-bottom: initial;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .primary-pane-start {
    min-width: calc(310px - 5.38462rem);
    max-width: 75%;
  }
}
@media (min-width: 768px) {
  .smcc-popup .skin-tones {
    list-style: none;
  }

  .smcc-popup .skin-tone {
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.07692rem;
    z-index: 1;
    opacity: 0.25;
  }

  .smcc-popup .skin-tone.active {
    opacity: 1;
  }

  .smcc-popup .skin-tone-name {
    display: none;
    position: absolute;
    z-index: 998;
    vertical-align: middle;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    padding-top: .53846rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-left: .53846rem;
    padding-right: .53846rem;
    border: 1px solid #bbb;
    border-right: none;
    background-color: #fff;
    text-align: right;
    cursor: default;
    max-width: none;
  }

  .smcc-popup .skin-tone .skin-tone-name.hover,
  .smcc-popup .skin-tone:hover .skin-tone-name {
    display: block !important;
  }

  .smcc-popup .skin-tone-image-container {
    z-index: 999;
    width: 100%;
    border: 1px solid transparent;
  }

  .smcc-popup .skin-tone.active .skin-tone-image-container {
    border-color: #bbb;
  }

  .smcc-popup .skin-tone:hover {
    opacity: 1;
  }

  .smcc-popup .skin-tone:hover .skin-tone-name {
    border-color: #888;
  }

  .smcc-popup .skin-tone:hover .skin-tone-image-container {
    border-color: #888;
  }

  .smcc-popup .product-types {
    display: none;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .product-types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) {
  .smcc-popup .product-type {
    position: relative;
    -ms-flex-preferred-size: calc(100% / 3);
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    background-color: #fff;
    border-left: 1px solid transparent;
  }

  .smcc-popup .product-type:first-child.active {
    border-left-color: #eee;
  }

  .smcc-popup .product-type:first-child.hover {
    border-left-color: #bbb;
  }

  .smcc-popup .product-type:not(:first-child) {
    border-left-color: #bbb;
  }

  .smcc-popup .product-type:last-child {
    border-right: 1px solid transparent;
  }

  .smcc-popup .product-type:last-child.active {
    border-right-color: #eee;
  }

  .smcc-popup .product-type:last-child.hover {
    border-right-color: #bbb;
  }

  .smcc-popup .product-shade-name {
    display: block !important;
  }

  .smcc-popup .product-type-name {
    position: absolute;
    z-index: 998;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    width: calc(100% + 2px);
    margin-left: -1px;
    max-width: none !important;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    padding: .53846rem;
    background-color: #fff;
    cursor: default;
    white-space: normal;
    display: block;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  .smcc-popup .product-type-image-container {
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 120px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .smcc-popup .product-type-image {
    max-width: calc(100px - 1.07692rem);
    max-height: calc(120px - 1.07692rem);
    margin-left: auto;
    margin-right: auto;
  }

  .smcc-popup .product-type.active .product-type-image-container {
    background-color: #eee;
  }

  .smcc-popup .product-type.hover .product-type-name {
    border: 1px solid #bbb;
    border-width: 1px 1px 0;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  .smcc-popup .product-type.active.hover .product-type-name {
    background-color: #eee;
  }

  .smcc-popup header.product-header {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1.07692rem;
  }

  .smcc-popup header.product-header h1 {
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.42308rem !important;
  }
}
@media (min-width: 768px) and (max-width: 767px) {
  .smcc-popup header.product-header h1 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.15385rem !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.07692rem !important;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup header.product-header h1 {
    margin-bottom: 0.53846rem !important;
  }
}
@media (min-width: 768px) {
  .smcc-popup header.product-header .product-image-container {
    min-width: 90px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup header.product-header .product-image-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 120px;
    margin-bottom: 1.07692rem;
  }
}
@media (min-width: 768px) {
  .smcc-popup header.product-header .product-image {
    max-height: 70px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup header.product-header .product-image {
    max-height: 120px;
    margin: initial;
  }
}
@media (min-width: 768px) {
  .smcc-popup header.product-header h2 {
    text-transform: initial;
  }
}
@media (min-width: 768px) and (max-width: 767px) {
  .smcc-popup header.product-header h2 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 1.61538rem;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.07692rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup header.product-header h2 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  .smcc-popup header.product-header h2 {
    margin-bottom: 1.07692rem;
  }
}
@media (min-width: 768px) {
  .smcc-popup .product-description {
    max-width: 500px;
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  .smcc-popup .product-description {
    padding-top: 1em;
    font-size: 1em;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .product-description {
    display: block;
  }
}
@media (min-width: 768px) {
  .smcc-popup .product-description span {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-shadow: 0 0 0;
  }

  .smcc-popup .product-description br {
    content: " ";
    display: block;
    margin: 0.53846rem;
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  .smcc-popup .product-description br {
    margin: 1.07692rem;
  }
}
@media (min-width: 768px) {
  .smcc-popup .product-actions {
    margin-top: 2.15385rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .product-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media (min-width: 768px) {
  .smcc-popup .product-actions a {
    display: table;
  }
}
@media (min-width: 768px) and (max-width: 768px) {
  .smcc-popup .product-actions a {
    font-size: 1em;
  }
}
@media (min-width: 768px) {
  .smcc-popup .product-actions a:not(:last-child) {
    margin-bottom: 1.07692rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .product-actions a:not(:last-child) {
    margin-right: 1.07692rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .product-actions .learn-more-link {
    display: none;
  }
}
@media (min-width: 768px) {
  .smcc-popup .upperlower {
    text-transform: none;
  }

  .smcc-popup ul,
  .smcc-popup li {
    list-style-type: none;
  }

  .smcc-popup div#comparison * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .smcc-popup div#comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: 288px;
    background-size: contain !important;
  }
}
@media (min-width: 768px) and (min-width: 375px) {
  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: 327px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: calc(100% - 120px);
    background-size: cover !important;
  }
}
@media (min-width: 768px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-repeat: no-repeat;
    background-size: 330px;
  }
}
@media (min-width: 768px) and (min-width: 375px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 375px;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 572px;
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 635px;
  }
}
@media (min-width: 768px) and (min-width: 1194px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 732px;
  }
}
@media (min-width: 768px) {
  .smcc-popup div#comparison figure {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .smcc-popup div#comparison figure > img {
    position: relative;
    width: 100%;
  }

  .smcc-popup div#comparison figure #divisor {
    position: absolute;
    width: 0%;
    border-right: 1px solid #eee;
    overflow: hidden;
    bottom: 0;
    height: 100%;
  }

  .smcc-popup .rzslider {
    opacity: 0;
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 3.23077rem;
  }

  .smcc-popup .rz-bubble {
    display: none;
  }

  .smcc-popup .rz-pointer {
    opacity: 0.2;
  }

  .smcc-popup .rz-bar-wrapper,
  .smcc-popup .rz-bar {
    opacity: .2;
    background-color: transparent;
    height: 100%;
  }

  .smcc-popup .text {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
  }

  .smcc-popup .slider-overlays,
  .smcc-popup .slider-overlays div {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
  }

  .smcc-popup .instructions {
    font-size: 1.23rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3.23077rem;
    overflow: hidden;
    z-index: 0;
    line-height: 3.23077rem;
    padding-left: calc(10% + 2.69231rem);
    color: #fff;
    pointer-events: none;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.25);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .instructions {
    padding-left: initial;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .smcc-popup .hold {
    opacity: 1;
  }

  .smcc-popup .hold {
    opacity: 0;
  }

  .smcc-popup #slider-thumb {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
  }

  .smcc-popup .thumb {
    bottom: .53846rem;
    position: absolute;
    width: 2.15385rem;
    height: 2.15385rem;
    background: #fff;
    border-radius: 3.23077rem;
    border: 1px solid #bbb;
    z-index: 1;
    margin-left: -1.07692rem;
    left: 0%;
  }

  .smcc-popup .track {
    width: 100%;
    height: 1px;
    background-color: #949494;
    display: block;
    bottom: 1.61538rem;
    position: absolute;
  }

  .smcc-popup #lines {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  .smcc-popup .slider-overlays {
    -webkit-transition: opacity 1s linear 1000ms;
    transition: opacity 1s linear 1000ms;
  }

  .smcc-popup .thumb {
    -webkit-transition: opacity 1s linear 800ms;
    transition: opacity 1s linear 800ms;
  }

  .smcc-popup .track {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  .smcc-popup .instructions {
    -webkit-transition: opacity 1s linear 1800ms;
    transition: opacity 1s linear 1800ms;
  }

  .smcc-popup input[type=range] {
    -webkit-transition: opacity 1s linear 400ms;
    transition: opacity 1s linear 400ms;
  }

  @-webkit-keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @-webkit-keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @-webkit-keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  .smcc-popup .fadeOutInstructions {
    -webkit-transition: opacity 1s linear 0ms;
    transition: opacity 1s linear 0ms;
    opacity: 0;
  }

  .smcc-popup .slideInScreen {
    -webkit-animation: slideInScreen 1.25s ease-in-out 1000ms;
    animation: slideInScreen 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  @keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  .smcc-popup .slideInThumb {
    -webkit-animation: slideInThumb 1.25s ease-in-out 1000ms;
    animation: slideInThumb 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  @keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  .smcc-popup .slideIn {
    -webkit-animation: slideIn 1.25s ease-in-out 1000ms;
    animation: slideIn 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  @keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  .smcc-popup button {
    font-size: 1.61538rem;
    text-transform: uppercase;
    padding: 1.07692rem !important;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #bbb !important;
    color: #000;
  }

  .smcc-popup button:hover {
    background-color: #eee;
    border-color: #888;
  }

  .smcc-popup button.large {
    width: 100%;
  }

  .smcc-popup button.small {
    padding: .53846rem 1.07692rem !important;
    font-size: 1.07692rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  .smcc-popup .product-shades {
    margin-bottom: 1.07692rem;
  }

  .smcc-popup .shades {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5px -5px calc(1.23 - 8px) -5px;
  }
}
@media (min-width: 768px) and (min-width: 480px) {
  .smcc-popup .shades {
    max-width: 80%;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .shades {
    max-width: 100%;
  }
}
@media (min-width: 768px) and (min-width: 1024px) {
  .smcc-popup .shades {
    max-width: 90%;
  }
}
@media (min-width: 768px) and (min-width: 1194px) {
  .smcc-popup .shades {
    max-width: 80%;
  }
}
@media (min-width: 768px) {
  .smcc-popup .shade {
    width: 3.63462rem;
    height: 3.63462rem;
    margin: 2px;
    padding: 0;
    border: 3px solid #fff;
    font-size: 0;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .shade {
    width: 2.55769rem;
    height: 2.55769rem;
  }
}
@media (min-width: 768px) {
  .smcc-popup .shade.hover,
  .smcc-popup .shade.active {
    border-color: #fff;
    outline-width: 1px;
    outline-style: solid;
  }

  .smcc-popup .shade.active {
    outline-color: #bbb;
  }

  .smcc-popup .shade.hover {
    outline-color: #888;
  }

  .smcc-popup .shade.spacer {
    display: none;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .shade.spacer {
    display: block;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: 0;
    outline: 0;
  }
}
@media (min-width: 768px) {
  .smcc-popup .mobile-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .smcc-popup .mobile-menu {
    display: none;
  }
}
@media (min-width: 768px) {
  .smcc-popup .mobile-menu-button {
    cursor: default;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 1.07692rem;
    text-transform: uppercase;
    background-image: url(../images/ui/down-arrow-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 1.07692rem) center;
    background-size: 1.07692rem;
  }

  .smcc-popup .mobile-menu-button:not(:last-child) {
    border-right: 1px solid #bbb;
  }

  .smcc-popup img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .smcc-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: #000;
  }

  .modal-open .smcc-popup {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1100 !important;
  }

  .modal-open {
    overflow: hidden;
  }

  .modal-dialog {
    position: relative;
    width: 100%;
    max-width: 1280px;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .modal-content {
    position: relative;
    padding: 0 1.07692rem 2.69231rem 1.07692rem;
  }

  .modal-header {
    margin-top: .53846rem;
    background-color: #000;
  }

  .modal-header .close {
    display: block;
    width: 2.69231rem;
    height: 2.69231rem;
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    background-image: url(../images/ui/close-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    border: none !important;
  }

  .modal-header .close:hover {
    display: block;
    width: 2.69231rem;
    height: 2.69231rem;
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    background-image: url(../images/ui/close-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    border: none !important;
  }

  .modal-header .close span[aria-hidden="true"] {
    display: none;
  }

  .modal-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #fff;
  }

  .modal-look-figure {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    border-bottom: 1px solid #bbb;
  }

  .modal-look-tip span {
    display: block;
    max-width: 100%;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  .modal-look-tip,
  .modal-look-product {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding: 1.61538rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .modal-look-tip,
  .modal-look-product {
    width: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }
}
@media (min-width: 768px) {
  .modal-look-tip span {
    font-size: 0.938em;
  }
}
@media (min-width: 768px) and (max-width: 767px) {
  .modal-look-product {
    padding-bottom: 0;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .modal-look-product {
    border-right: 1px solid #bbb;
  }
}
@media (min-width: 768px) {
  .modal-look-product-figure {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 1.61538rem;
  }

  .modal-look-product-image {
    max-height: 120px;
    margin-left: auto;
    margin-right: auto;
  }

  .fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
  }

  .fade.in {
    opacity: 1;
  }

  .modal-embed-container {
    display: block;
  }

  .modal-embed {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }

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

  .modal-look-product-details {
    width: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .modal.choose-concealer,
  .modal.choose-skintone {
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
    background-color: #fff;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .modal.choose-concealer,
  .modal.choose-skintone {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .modal.choose-concealer .modal-header,
  .modal.choose-skintone .modal-header {
    background-color: initial;
  }

  .modal.choose-concealer .modal-header .close,
  .modal.choose-skintone .modal-header .close {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }

  .modal.choose-concealer .modal-body,
  .modal.choose-skintone .modal-body {
    margin-top: -2.15385rem;
  }

  .modal.choose-concealer .modal-content,
  .modal.choose-skintone .modal-content {
    padding: 0 1.07692rem 1.07692rem;
  }

  .modal.choose-concealer .modal-title,
  .modal.choose-skintone .modal-title {
    margin-right: 5.38462rem;
  }

  .modal.choose-concealer .modal-list,
  .modal.choose-skintone .modal-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }

  .modal.choose-concealer .modal-list-item.modal-product,
  .modal.choose-skintone .modal-list-item.modal-product {
    height: 140px;
  }

  .modal.choose-concealer .modal-list-item.modal-skin-tone,
  .modal.choose-skintone .modal-list-item.modal-skin-tone {
    height: 100px;
  }

  .modal.choose-concealer .modal-list-item,
  .modal.choose-skintone .modal-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #bbb;
  }

  .modal.choose-concealer .modal-list-item:not(:last-child),
  .modal.choose-skintone .modal-list-item:not(:last-child) {
    margin-bottom: 1.07692rem;
  }

  .modal.choose-concealer .modal-list-item:hover,
  .modal.choose-skintone .modal-list-item:hover {
    border-color: #888;
  }

  .modal.choose-concealer .modal-list-item-section,
  .modal.choose-skintone .modal-list-item-section {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    max-height: 100%;
    margin: 1.61538rem 1.61538rem 1.61538rem 0;
  }

  .modal.choose-concealer .modal-product-type-figure,
  .modal.choose-concealer .modal-skin-tone-figure,
  .modal.choose-skintone .modal-product-type-figure,
  .modal.choose-skintone .modal-skin-tone-figure {
    height: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .modal.choose-concealer .modal-skin-tone-figure,
  .modal.choose-skintone .modal-skin-tone-figure {
    -ms-flex-preferred-size: calc(50% - 1.61538rem);
    flex-basis: calc(50% - 1.61538rem);
    margin-right: 1.61538rem;
    background-size: cover;
    background-position: center;
  }

  .modal.choose-concealer .modal-product-type-image,
  .modal.choose-concealer .modal-skin-tone-image,
  .modal.choose-skintone .modal-product-type-image,
  .modal.choose-skintone .modal-skin-tone-image {
    max-height: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: perspective(1px) translateY(-50%);
    transform: perspective(1px) translateY(-50%);
  }

  .modal.choose-concealer .modal-look-image,
  .modal.choose-skintone .modal-look-image {
    max-height: 60%;
    margin: auto;
  }

  .modal.choose-concealer .modal-product-type-image,
  .modal.choose-skintone .modal-product-type-image {
    margin-left: auto;
    margin-right: auto;
    padding: 1.07692rem 1.61538rem;
  }

  .modal.choose-concealer .modal-product-type-name,
  .modal.choose-concealer .modal-skin-tone-name,
  .modal.choose-skintone .modal-product-type-name,
  .modal.choose-skintone .modal-skin-tone-name {
    font-size: 1.21154rem;
    line-height: 1;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-transform: uppercase;
    margin-bottom: 1.07692rem;
  }

  .modal.choose-concealer .modal-shop-link,
  .modal.choose-skintone .modal-shop-link {
    font-size: 1.21154rem;
    line-height: 1;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-transform: uppercase;
  }
}
@media (min-width: 1024px) {
  #smcc-app *,
  .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  #smcc-app,
  .smcc-popup {
    box-sizing: border-box;
  }

  #smcc-app *,
  .smcc-popup *,
  #smcc-app *:before,
  .smcc-popup *:before,
  .smcc-popup *:after,
  #smcc-app *:after {
    box-sizing: inherit;
  }

  #smcc-app,
  .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  #smcc-app h1,
  #smcc-app h2,
  #smcc-app h3,
  #smcc-app h4,
  #smcc-app h5,
  #smcc-app h6,
  .smcc-popup h1,
  .smcc-popup h2,
  .smcc-popup h3,
  .smcc-popup h4,
  .smcc-popup h5,
  .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
    font-weight: 100;
  }

  #smcc-app h1,
  .smcc-popup h1 {
    font-size: 3.07692rem !important;
  }

  #smcc-app h2,
  .smcc-popup h2 {
    font-size: 1.84615rem !important;
  }

  #smcc-app h3,
  .smcc-popup h3 {
    font-size: 1.38462rem !important;
  }

  #smcc-app button:not(.small),
  .smcc-popup button:not(.small) {
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  #smcc-app a,
  .smcc-popup a {
    cursor: pointer !important;
    font-size: 1.07692rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  #smcc-app a:hover,
  .smcc-popup a:hover {
    color: #888 !important;
  }

  .smcc-popup h1 {
    font-size: 2.46154rem;
  }

  .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  .fadeList.ng-enter.ng-enter-active,
  .fadeList.ng-leave {
    opacity: 1;
  }

  .fadeList.ng-enter {
    opacity: 0;
  }

  .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

   /*! angularjs-slider - v6.0.0 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2017-01-02 */
  .rzslider {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 4px;
    margin: 35px 0 15px 0;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .rzslider.with-legend {
    margin-bottom: 40px;
  }

  .rzslider[disabled] {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-pointer {
    cursor: not-allowed;
    background-color: #d8e0f3;
  }

  .rzslider[disabled] .rz-draggable {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-selection {
    background: #8b91a2;
  }

  .rzslider[disabled] .rz-tick {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-tick.rz-selected {
    background: #8b91a2;
  }

  .rzslider span {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
  }

  .rzslider .rz-base {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .rzslider .rz-bar-wrapper {
    left: 0;
    z-index: 1;
    width: 100%;
    height: 32px;
    padding-top: 16px;
    margin-top: -16px;
    box-sizing: border-box;
  }

  .rzslider .rz-draggable {
    cursor: move;
  }

  .rzslider .rz-bar {
    left: 0;
    z-index: 1;
    width: 100%;
    height: 4px;
    background: #d8e0f3;
    border-radius: 2px;
  }

  .rzslider .rz-selection {
    z-index: 2;
    background: #0db9f0;
    border-radius: 2px;
  }

  .rzslider .rz-pointer {
    top: -14px;
    z-index: 3;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: #0db9f0;
    border-radius: 16px;
  }

  .rzslider .rz-pointer:after {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
    content: "";
  }

  .rzslider .rz-pointer:hover:after {
    background-color: #ffffff;
  }

  .rzslider .rz-pointer.rz-active {
    z-index: 4;
  }

  .rzslider .rz-pointer.rz-active:after {
    background-color: #451aff;
  }

  .rzslider .rz-bubble {
    bottom: 16px;
    padding: 1px 3px;
    color: #55637d;
    cursor: default;
  }

  .rzslider .rz-bubble.rz-limit {
    color: #55637d;
  }

  .rzslider .rz-ticks {
    position: absolute;
    top: -3px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .rzslider .rz-ticks-values-under .rz-tick-value {
    top: initial;
    bottom: -32px;
  }

  .rzslider .rz-tick {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin-left: 11px;
    text-align: center;
    cursor: pointer;
    background: #d8e0f3;
    border-radius: 50%;
  }

  .rzslider .rz-tick.rz-selected {
    background: #0db9f0;
  }

  .rzslider .rz-tick-value {
    position: absolute;
    top: -30px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  .rzslider .rz-tick-legend {
    position: absolute;
    top: 24px;
    max-width: 50px;
    white-space: normal;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  .rzslider.rz-vertical {
    position: relative;
    width: 4px;
    height: 100%;
    padding: 0;
    margin: 0 20px;
    vertical-align: baseline;
  }

  .rzslider.rz-vertical .rz-base {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .rzslider.rz-vertical .rz-bar-wrapper {
    top: auto;
    left: 0;
    width: 32px;
    height: 100%;
    padding: 0 0 0 16px;
    margin: 0 0 0 -16px;
  }

  .rzslider.rz-vertical .rz-bar {
    bottom: 0;
    left: auto;
    width: 4px;
    height: 100%;
  }

  .rzslider.rz-vertical .rz-pointer {
    top: auto;
    bottom: 0;
    left: -14px !important;
  }

  .rzslider.rz-vertical .rz-bubble {
    bottom: 0;
    left: 16px !important;
    margin-left: 3px;
  }

  .rzslider.rz-vertical .rz-ticks {
    top: 0;
    left: -3px;
    z-index: 1;
    width: 0;
    height: 100%;
  }

  .rzslider.rz-vertical .rz-tick {
    margin-top: 11px;
    margin-left: auto;
    vertical-align: middle;
  }

  .rzslider.rz-vertical .rz-tick-value {
    top: initial;
    left: 24px;
    -webkit-transform: translate(0, -28%);
    transform: translate(0, -28%);
  }

  .rzslider.rz-vertical .rz-tick-legend {
    top: initial;
    right: 24px;
    max-width: none;
    white-space: nowrap;
    -webkit-transform: translate(0, -28%);
    transform: translate(0, -28%);
  }

  .rzslider.rz-vertical .rz-ticks-values-under .rz-tick-value {
    right: 24px;
    bottom: initial;
    left: initial;
  }

  #smcc-app #smcc-app,
  #smcc-app .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  #smcc-app #smcc-app h1,
  #smcc-app #smcc-app h2,
  #smcc-app #smcc-app h3,
  #smcc-app #smcc-app h4,
  #smcc-app #smcc-app h5,
  #smcc-app #smcc-app h6,
  #smcc-app .smcc-popup h1,
  #smcc-app .smcc-popup h2,
  #smcc-app .smcc-popup h3,
  #smcc-app .smcc-popup h4,
  #smcc-app .smcc-popup h5,
  #smcc-app .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
  }

  #smcc-app #smcc-app h1,
  #smcc-app .smcc-popup h1 {
    font-size: 3.07692rem !important;
  }

  #smcc-app #smcc-app h2,
  #smcc-app .smcc-popup h2 {
    font-size: 1.84615rem !important;
  }

  #smcc-app #smcc-app h3,
  #smcc-app .smcc-popup h3 {
    font-size: 1.38462rem !important;
  }

  #smcc-app #smcc-app button:not(.small),
  #smcc-app .smcc-popup button:not(.small) {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
  }

  #smcc-app #smcc-app a,
  #smcc-app .smcc-popup a {
    cursor: pointer !important;
    font-size: 1.07692rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  #smcc-app #smcc-app a:hover,
  #smcc-app .smcc-popup a:hover {
    color: #888 !important;
  }

  #smcc-app .smcc-popup h1 {
    font-size: 2.46154rem;
  }

  #smcc-app .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  #smcc-app .fadeList.ng-enter.ng-enter-active,
  #smcc-app .fadeList.ng-leave {
    opacity: 1;
  }

  #smcc-app .fadeList.ng-enter {
    opacity: 0;
  }

  #smcc-app .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  #smcc-app .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  #smcc-app #smcc-app *,
  #smcc-app .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  #smcc-app #smcc-app,
  #smcc-app .smcc-popup {
    box-sizing: border-box;
  }

  #smcc-app #smcc-app *,
  #smcc-app .smcc-popup *,
  #smcc-app #smcc-app *:before,
  #smcc-app .smcc-popup *:before,
  #smcc-app .smcc-popup *:after,
  #smcc-app #smcc-app *:after {
    box-sizing: inherit;
  }

  #smcc-app h1:not(:last-child),
  #smcc-app h2:not(:last-child),
  #smcc-app h3:not(:last-child),
  #smcc-app h4:not(:last-child),
  #smcc-app h5:not(:last-child),
  #smcc-app h6:not(:last-child),
  #smcc-app p:not(:last-child),
  #smcc-app button:not(:last-child) {
    margin-bottom: 1.23077rem;
  }

  #smcc-app h1:not(:last-child) {
    margin-bottom: 2.46154rem;
  }

  #smcc-app header:not(:last-child),
  #smcc-app nav:not(:last-child) {
    margin-bottom: 2.46154rem;
  }

  #smcc-app .app-container {
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .app-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 620px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  #smcc-app .app-container {
    height: 675px;
  }
}
@media (min-width: 1024px) and (min-width: 1194px) {
  #smcc-app .app-container {
    height: 760px;
  }
  #smcc-app .app-container h2 {
    margin-bottom: 1.38462rem;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .secondary-pane {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  #smcc-app .menu-pane {
    display: none;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .menu-pane {
    display: block;
    -ms-flex-preferred-size: 3.69231rem;
    flex-basis: 3.69231rem;
    margin: 1.23077rem;
  }
}
@media (min-width: 1024px) {
  #smcc-app .primary-pane {
    margin: 1.23077rem;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .primary-pane {
    -ms-flex-preferred-size: calc(50% - 3.69231rem);
    flex-basis: calc(50% - 3.69231rem);
  }

  #smcc-app .primary-pane.centered {
    margin-top: 12.30769rem;
  }
}
@media (min-width: 1024px) {
  #smcc-app .start-image-container {
    padding-bottom: 90%;
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .start-image-container {
    height: 100%;
    padding-bottom: initial;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .primary-pane-start {
    min-width: calc(310px - 6.15385rem);
    max-width: 75%;
  }
}
@media (min-width: 1024px) {
  #smcc-app .skin-tones {
    list-style: none;
  }

  #smcc-app .skin-tone {
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.23077rem;
    z-index: 1;
    opacity: 0.25;
  }

  #smcc-app .skin-tone.active {
    opacity: 1;
  }

  #smcc-app .skin-tone-name {
    display: none;
    position: absolute;
    z-index: 998;
    vertical-align: middle;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    padding-top: .61538rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-left: .61538rem;
    padding-right: .61538rem;
    border: 1px solid #bbb;
    border-right: none;
    background-color: #fff;
    text-align: right;
    cursor: default;
    max-width: none;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  #smcc-app .skin-tone .skin-tone-name.hover,
  #smcc-app .skin-tone:hover .skin-tone-name {
    display: block !important;
  }

  #smcc-app .skin-tone-image-container {
    z-index: 999;
    width: 100%;
    border: 1px solid transparent;
  }

  #smcc-app .skin-tone.active .skin-tone-image-container {
    border-color: #bbb;
  }

  #smcc-app .skin-tone:hover {
    opacity: 1;
  }

  #smcc-app .skin-tone:hover .skin-tone-name {
    border-color: #888;
  }

  #smcc-app .skin-tone:hover .skin-tone-image-container {
    border-color: #888;
  }

  #smcc-app .product-types {
    display: none;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .product-types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1024px) {
  #smcc-app .product-type {
    position: relative;
    -ms-flex-preferred-size: calc(100% / 3);
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    background-color: #fff;
    border-left: 1px solid transparent;
  }

  #smcc-app .product-type:first-child.active {
    border-left-color: #eee;
  }

  #smcc-app .product-type:first-child.hover {
    border-left-color: #bbb;
  }

  #smcc-app .product-type:not(:first-child) {
    border-left-color: #bbb;
  }

  #smcc-app .product-type:last-child {
    border-right: 1px solid transparent;
  }

  #smcc-app .product-type:last-child.active {
    border-right-color: #eee;
  }

  #smcc-app .product-type:last-child.hover {
    border-right-color: #bbb;
  }

  #smcc-app .product-shade-name {
    display: block !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type-name {
    position: absolute;
    z-index: 998;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    width: calc(100% + 2px);
    margin-left: -1px;
    max-width: none !important;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    padding: .61538rem;
    background-color: #fff;
    cursor: default;
    white-space: normal;
    display: block;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type-image-container {
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 120px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  #smcc-app .product-type-image {
    max-width: calc(100px - 1.23077rem);
    max-height: calc(120px - 1.23077rem);
    margin-left: auto;
    margin-right: auto;
  }

  #smcc-app .product-type.active .product-type-image-container {
    background-color: #eee;
  }

  #smcc-app .product-type.hover .product-type-name {
    border: 1px solid #bbb;
    border-width: 1px 1px 0;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type.active.hover .product-type-name {
    background-color: #eee;
  }

  #smcc-app header.product-header {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1.23077rem;
  }

  #smcc-app header.product-header h1 {
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.76923rem !important;
  }
}
@media (min-width: 1024px) and (max-width: 767px) {
  #smcc-app header.product-header h1 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.46154rem !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.23077rem !important;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app header.product-header h1 {
    margin-bottom: 0.61538rem !important;
  }
}
@media (min-width: 1024px) {
  #smcc-app header.product-header .product-image-container {
    min-width: 90px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app header.product-header .product-image-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 120px;
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 1024px) {
  #smcc-app header.product-header .product-image {
    max-height: 70px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app header.product-header .product-image {
    max-height: 120px;
    margin: initial;
  }
}
@media (min-width: 1024px) {
  #smcc-app header.product-header h2 {
    text-transform: initial;
  }
}
@media (min-width: 1024px) and (max-width: 767px) {
  #smcc-app header.product-header h2 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 1.84615rem;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app header.product-header h2 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  #smcc-app header.product-header h2 {
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 1024px) {
  #smcc-app .product-description {
    max-width: 500px;
  }
}
@media (min-width: 1024px) and (max-width: 768px) {
  #smcc-app .product-description {
    padding-top: 1em;
    font-size: 1em;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .product-description {
    display: block;
  }
}
@media (min-width: 1024px) {
  #smcc-app .product-description {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
    text-shadow: 0 0 0;
  }

  #smcc-app .product-description br {
    content: " ";
    display: block;
    margin: 0.61538rem;
  }
}
@media (min-width: 1024px) and (max-width: 768px) {
  #smcc-app .product-description br {
    margin: 1.23077rem;
  }
}
@media (min-width: 1024px) {
  #smcc-app .product-actions {
    margin-top: 2.46154rem;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .product-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media (min-width: 1024px) {
  #smcc-app .product-actions a {
    display: table;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 1024px) and (max-width: 768px) {
  #smcc-app .product-actions a {
    font-size: 1em;
  }
}
@media (min-width: 1024px) {
  #smcc-app .product-actions a:not(:last-child) {
    margin-bottom: 1.23077rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .product-actions a:not(:last-child) {
    margin-right: 1.23077rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .product-actions .learn-more-link {
    display: none;
  }
}
@media (min-width: 1024px) {
  #smcc-app .upperlower {
    text-transform: none;
  }

  #smcc-app ul,
  #smcc-app li {
    list-style-type: none;
  }

  #smcc-app div#comparison * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #smcc-app div#comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  #smcc-app div#comparison,
  #smcc-app .text {
    height: 288px;
    background-size: contain !important;
  }
}
@media (min-width: 1024px) and (min-width: 375px) {
  #smcc-app div#comparison,
  #smcc-app .text {
    height: 327px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app div#comparison,
  #smcc-app .text {
    height: calc(100% - 120px);
    background-size: cover !important;
  }
}
@media (min-width: 1024px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-repeat: no-repeat;
    background-size: 330px;
  }
}
@media (min-width: 1024px) and (min-width: 375px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 375px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 572px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 635px;
  }
}
@media (min-width: 1024px) and (min-width: 1194px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 732px;
  }
}
@media (min-width: 1024px) {
  #smcc-app div#comparison figure {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  #smcc-app div#comparison figure > img {
    position: relative;
    width: 100%;
  }

  #smcc-app div#comparison figure #divisor {
    position: absolute;
    width: 0%;
    border-right: 1px solid #eee;
    overflow: hidden;
    bottom: 0;
    height: 100%;
  }

  #smcc-app .rzslider {
    opacity: 0;
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 3.69231rem;
  }

  #smcc-app .rz-bubble {
    display: none;
  }

  #smcc-app .rz-pointer {
    opacity: 0.2;
  }

  #smcc-app .rz-bar-wrapper,
  #smcc-app .rz-bar {
    opacity: .2;
    background-color: transparent;
    height: 100%;
  }

  #smcc-app .text {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
  }

  #smcc-app .slider-overlays,
  #smcc-app .slider-overlays div {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
  }

  #smcc-app .instructions {
    font-size: 1.23rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3.69231rem;
    overflow: hidden;
    z-index: 0;
    line-height: 3.69231rem;
    padding-left: calc(10% + 3.07692rem);
    color: #fff;
    pointer-events: none;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.25);
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .instructions {
    padding-left: initial;
    text-align: center;
  }
}
@media (min-width: 1024px) {
  #smcc-app .hold {
    opacity: 1;
  }

  #smcc-app .hold {
    opacity: 0;
  }

  #smcc-app #slider-thumb {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
  }

  #smcc-app .thumb {
    bottom: .61538rem;
    position: absolute;
    width: 2.46154rem;
    height: 2.46154rem;
    background: #fff;
    border-radius: 3.69231rem;
    border: 1px solid #bbb;
    z-index: 1;
    margin-left: -1.23077rem;
    left: 0%;
  }

  #smcc-app .track {
    width: 100%;
    height: 1px;
    background-color: #949494;
    display: block;
    bottom: 1.84615rem;
    position: absolute;
  }

  #smcc-app #lines {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  #smcc-app .slider-overlays {
    -webkit-transition: opacity 1s linear 1000ms;
    transition: opacity 1s linear 1000ms;
  }

  #smcc-app .thumb {
    -webkit-transition: opacity 1s linear 800ms;
    transition: opacity 1s linear 800ms;
  }

  #smcc-app .track {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  #smcc-app .instructions {
    -webkit-transition: opacity 1s linear 1800ms;
    transition: opacity 1s linear 1800ms;
  }

  #smcc-app input[type=range] {
    -webkit-transition: opacity 1s linear 400ms;
    transition: opacity 1s linear 400ms;
  }

  @-webkit-keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @-webkit-keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @-webkit-keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  #smcc-app .fadeOutInstructions {
    -webkit-transition: opacity 1s linear 0ms;
    transition: opacity 1s linear 0ms;
    opacity: 0;
  }

  #smcc-app .slideInScreen {
    -webkit-animation: slideInScreen 1.25s ease-in-out 1000ms;
    animation: slideInScreen 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  @keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  #smcc-app .slideInThumb {
    -webkit-animation: slideInThumb 1.25s ease-in-out 1000ms;
    animation: slideInThumb 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  @keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  #smcc-app .slideIn {
    -webkit-animation: slideIn 1.25s ease-in-out 1000ms;
    animation: slideIn 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  @keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  #smcc-app .primary-pane-start button {
    font-size: 1.84615rem;
    text-transform: uppercase;
    padding: 1.23077rem !important;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #bbb !important;
  }

  #smcc-app button:hover {
    background-color: #eee;
    border-color: #888 !important;
  }

  #smcc-app button.large {
    width: 100%;
  }

  #smcc-app button.small {
    padding: .61538rem 1.23077rem !important;
    font-size: 1.23077rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-shades {
    margin-bottom: 1.23077rem;
  }

  #smcc-app .shades {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5px -5px calc(1.23 - 8px) -5px;
  }
}
@media (min-width: 1024px) and (min-width: 480px) {
  #smcc-app .shades {
    max-width: 80%;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .shades {
    max-width: 100%;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  #smcc-app .shades {
    max-width: 90%;
  }
}
@media (min-width: 1024px) and (min-width: 1194px) {
  #smcc-app .shades {
    max-width: 80%;
  }
}
@media (min-width: 1024px) {
  #smcc-app .shade {
    width: 4.15385rem;
    height: 4.15385rem;
    margin: 2px;
    padding: 0;
    border: 3px solid #fff;
    font-size: 0;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .shade {
    width: 2.92308rem;
    height: 2.92308rem;
  }
}
@media (min-width: 1024px) {
  #smcc-app .shade.hover,
  #smcc-app .shade.active {
    border-color: #fff;
    outline-width: 1px;
    outline-style: solid;
  }

  #smcc-app .shade.active {
    outline-color: #bbb;
  }

  #smcc-app .shade.hover {
    outline-color: #888;
  }

  #smcc-app .shade.spacer {
    display: none;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .shade.spacer {
    display: block;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: 0;
    outline: 0;
  }
}
@media (min-width: 1024px) {
  #smcc-app .mobile-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  #smcc-app .mobile-menu {
    display: none;
  }
}
@media (min-width: 1024px) {
  #smcc-app .mobile-menu-button {
    cursor: default;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 1.23077rem;
    text-transform: uppercase;
    background-image: url(../images/ui/down-arrow-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 1.23077rem) center;
    background-size: 1.23077rem;
  }

  #smcc-app .mobile-menu-button:not(:last-child) {
    border-right: 1px solid #bbb;
  }

  #smcc-app img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  #smcc-app,
  .smcc-popup {
    font-size: 1.23077rem;
  }

  .smcc-popup #smcc-app,
  .smcc-popup .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  .smcc-popup #smcc-app h1,
  .smcc-popup #smcc-app h2,
  .smcc-popup #smcc-app h3,
  .smcc-popup #smcc-app h4,
  .smcc-popup #smcc-app h5,
  .smcc-popup #smcc-app h6,
  .smcc-popup .smcc-popup h1,
  .smcc-popup .smcc-popup h2,
  .smcc-popup .smcc-popup h3,
  .smcc-popup .smcc-popup h4,
  .smcc-popup .smcc-popup h5,
  .smcc-popup .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
  }

  .smcc-popup #smcc-app h1,
  .smcc-popup .smcc-popup h1 {
    font-size: 3.07692rem !important;
  }

  .smcc-popup #smcc-app h2,
  .smcc-popup .smcc-popup h2 {
    font-size: 1.84615rem !important;
  }

  .smcc-popup #smcc-app h3,
  .smcc-popup .smcc-popup h3 {
    font-size: 1.38462rem !important;
  }

  .smcc-popup #smcc-app button:not(.small),
  .smcc-popup .smcc-popup button:not(.small) {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
  }

  .smcc-popup #smcc-app a,
  .smcc-popup .smcc-popup a {
    cursor: pointer !important;
    font-size: 1.07692rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  .smcc-popup #smcc-app a:hover,
  .smcc-popup .smcc-popup a:hover {
    color: #888 !important;
  }

  .smcc-popup .smcc-popup h1 {
    font-size: 2.46154rem;
  }

  .smcc-popup .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  .smcc-popup .fadeList.ng-enter.ng-enter-active,
  .smcc-popup .fadeList.ng-leave {
    opacity: 1;
  }

  .smcc-popup .fadeList.ng-enter {
    opacity: 0;
  }

  .smcc-popup .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .smcc-popup .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .smcc-popup #smcc-app *,
  .smcc-popup .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  .smcc-popup #smcc-app,
  .smcc-popup .smcc-popup {
    box-sizing: border-box;
  }

  .smcc-popup #smcc-app *,
  .smcc-popup .smcc-popup *,
  .smcc-popup #smcc-app *:before,
  .smcc-popup .smcc-popup *:before,
  .smcc-popup .smcc-popup *:after,
  .smcc-popup #smcc-app *:after {
    box-sizing: inherit;
  }

  .smcc-popup h1:not(:last-child),
  .smcc-popup h2:not(:last-child),
  .smcc-popup h3:not(:last-child),
  .smcc-popup h4:not(:last-child),
  .smcc-popup h5:not(:last-child),
  .smcc-popup h6:not(:last-child),
  .smcc-popup p:not(:last-child),
  .smcc-popup button:not(:last-child) {
    margin-bottom: 1.23077rem;
  }

  .smcc-popup h1:not(:last-child) {
    margin-bottom: 2.46154rem;
  }

  .smcc-popup header:not(:last-child),
  .smcc-popup nav:not(:last-child) {
    margin-bottom: 2.46154rem;
  }

  .smcc-popup .app-container {
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .app-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 620px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .smcc-popup .app-container {
    height: 675px;
  }
}
@media (min-width: 1024px) and (min-width: 1194px) {
  .smcc-popup .app-container {
    height: 760px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .secondary-pane {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    height: 100%;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .menu-pane {
    display: none;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .menu-pane {
    display: block;
    -ms-flex-preferred-size: 3.69231rem;
    flex-basis: 3.69231rem;
    margin: 1.23077rem;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .primary-pane {
    margin: 1.23077rem;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .primary-pane {
    -ms-flex-preferred-size: calc(50% - 3.69231rem);
    flex-basis: calc(50% - 3.69231rem);
  }

  .smcc-popup .primary-pane.centered {
    margin-top: 12.30769rem;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .start-image-container {
    padding-bottom: 90%;
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .start-image-container {
    height: 100%;
    padding-bottom: initial;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .primary-pane-start {
    min-width: calc(310px - 6.15385rem);
    max-width: 75%;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .skin-tones {
    list-style: none;
  }

  .smcc-popup .skin-tone {
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.23077rem;
    z-index: 1;
    opacity: 0.25;
  }

  .smcc-popup .skin-tone.active {
    opacity: 1;
  }

  .smcc-popup .skin-tone-name {
    display: none;
    position: absolute;
    z-index: 998;
    vertical-align: middle;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    padding-top: .61538rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-left: .61538rem;
    padding-right: .61538rem;
    border: 1px solid #bbb;
    border-right: none;
    background-color: #fff;
    text-align: right;
    cursor: default;
    max-width: none;
  }

  .smcc-popup .skin-tone .skin-tone-name.hover,
  .smcc-popup .skin-tone:hover .skin-tone-name {
    display: block !important;
  }

  .smcc-popup .skin-tone-image-container {
    z-index: 999;
    width: 100%;
    border: 1px solid transparent;
  }

  .smcc-popup .skin-tone.active .skin-tone-image-container {
    border-color: #bbb;
  }

  .smcc-popup .skin-tone:hover {
    opacity: 1;
  }

  .smcc-popup .skin-tone:hover .skin-tone-name {
    border-color: #888;
  }

  .smcc-popup .skin-tone:hover .skin-tone-image-container {
    border-color: #888;
  }

  .smcc-popup .product-types {
    display: none;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .product-types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .product-type {
    position: relative;
    -ms-flex-preferred-size: calc(100% / 3);
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    background-color: #fff;
    border-left: 1px solid transparent;
  }

  .smcc-popup .product-type:first-child.active {
    border-left-color: #eee;
  }

  .smcc-popup .product-type:first-child.hover {
    border-left-color: #bbb;
  }

  .smcc-popup .product-type:not(:first-child) {
    border-left-color: #bbb;
  }

  .smcc-popup .product-type:last-child {
    border-right: 1px solid transparent;
  }

  .smcc-popup .product-type:last-child.active {
    border-right-color: #eee;
  }

  .smcc-popup .product-type:last-child.hover {
    border-right-color: #bbb;
  }

  .smcc-popup .product-shade-name {
    display: block !important;
  }

  .smcc-popup .product-type-name {
    position: absolute;
    z-index: 998;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    width: calc(100% + 2px);
    margin-left: -1px;
    max-width: none !important;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    padding: .61538rem;
    background-color: #fff;
    cursor: default;
    white-space: normal;
    display: block;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  .smcc-popup .product-type-image-container {
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 120px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .smcc-popup .product-type-image {
    max-width: calc(100px - 1.23077rem);
    max-height: calc(120px - 1.23077rem);
    margin-left: auto;
    margin-right: auto;
  }

  .smcc-popup .product-type.active .product-type-image-container {
    background-color: #eee;
  }

  .smcc-popup .product-type.hover .product-type-name {
    border: 1px solid #bbb;
    border-width: 1px 1px 0;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  .smcc-popup .product-type.active.hover .product-type-name {
    background-color: #eee;
  }

  .smcc-popup header.product-header {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1.23077rem;
  }

  .smcc-popup header.product-header h1 {
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.76923rem !important;
  }
}
@media (min-width: 1024px) and (max-width: 767px) {
  .smcc-popup header.product-header h1 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.46154rem !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.23077rem !important;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup header.product-header h1 {
    margin-bottom: 0.61538rem !important;
  }
}
@media (min-width: 1024px) {
  .smcc-popup header.product-header .product-image-container {
    min-width: 90px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup header.product-header .product-image-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 120px;
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 1024px) {
  .smcc-popup header.product-header .product-image {
    max-height: 70px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup header.product-header .product-image {
    max-height: 120px;
    margin: initial;
  }
}
@media (min-width: 1024px) {
  .smcc-popup header.product-header h2 {
    text-transform: initial;
  }
}
@media (min-width: 1024px) and (max-width: 767px) {
  .smcc-popup header.product-header h2 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 1.84615rem;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup header.product-header h2 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .smcc-popup header.product-header h2 {
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .product-description {
    max-width: 500px;
  }
}
@media (min-width: 1024px) and (max-width: 768px) {
  .smcc-popup .product-description {
    padding-top: 1em;
    font-size: 1em;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .product-description {
    display: block;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .product-description span {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-shadow: 0 0 0;
  }

  .smcc-popup .product-description br {
    content: " ";
    display: block;
    margin: 0.61538rem;
  }
}
@media (min-width: 1024px) and (max-width: 768px) {
  .smcc-popup .product-description br {
    margin: 1.23077rem;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .product-actions {
    margin-top: 2.46154rem;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .product-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .product-actions a {
    display: table;
  }
}
@media (min-width: 1024px) and (max-width: 768px) {
  .smcc-popup .product-actions a {
    font-size: 1em;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .product-actions a:not(:last-child) {
    margin-bottom: 1.23077rem;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .product-actions a:not(:last-child) {
    margin-right: 1.23077rem;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .product-actions .learn-more-link {
    display: none;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .upperlower {
    text-transform: none;
  }

  .smcc-popup ul,
  .smcc-popup li {
    list-style-type: none;
  }

  .smcc-popup div#comparison * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .smcc-popup div#comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: 288px;
    background-size: contain !important;
  }
}
@media (min-width: 1024px) and (min-width: 375px) {
  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: 327px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: calc(100% - 120px);
    background-size: cover !important;
  }
}
@media (min-width: 1024px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-repeat: no-repeat;
    background-size: 330px;
  }
}
@media (min-width: 1024px) and (min-width: 375px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 375px;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 572px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 635px;
  }
}
@media (min-width: 1024px) and (min-width: 1194px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 732px;
  }
}
@media (min-width: 1024px) {
  .smcc-popup div#comparison figure {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .smcc-popup div#comparison figure > img {
    position: relative;
    width: 100%;
  }

  .smcc-popup div#comparison figure #divisor {
    position: absolute;
    width: 0%;
    border-right: 1px solid #eee;
    overflow: hidden;
    bottom: 0;
    height: 100%;
  }

  .smcc-popup .rzslider {
    opacity: 0;
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 3.69231rem;
  }

  .smcc-popup .rz-bubble {
    display: none;
  }

  .smcc-popup .rz-pointer {
    opacity: 0.2;
  }

  .smcc-popup .rz-bar-wrapper,
  .smcc-popup .rz-bar {
    opacity: .2;
    background-color: transparent;
    height: 100%;
  }

  .smcc-popup .text {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
  }

  .smcc-popup .slider-overlays,
  .smcc-popup .slider-overlays div {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
  }

  .smcc-popup .instructions {
    font-size: 1.23rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 3.69231rem;
    overflow: hidden;
    z-index: 0;
    line-height: 3.69231rem;
    padding-left: calc(10% + 3.07692rem);
    color: #fff;
    pointer-events: none;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.25);
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .instructions {
    padding-left: initial;
    text-align: center;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .hold {
    opacity: 1;
  }

  .smcc-popup .hold {
    opacity: 0;
  }

  .smcc-popup #slider-thumb {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
  }

  .smcc-popup .thumb {
    bottom: .61538rem;
    position: absolute;
    width: 2.46154rem;
    height: 2.46154rem;
    background: #fff;
    border-radius: 3.69231rem;
    border: 1px solid #bbb;
    z-index: 1;
    margin-left: -1.23077rem;
    left: 0%;
  }

  .smcc-popup .track {
    width: 100%;
    height: 1px;
    background-color: #949494;
    display: block;
    bottom: 1.84615rem;
    position: absolute;
  }

  .smcc-popup #lines {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  .smcc-popup .slider-overlays {
    -webkit-transition: opacity 1s linear 1000ms;
    transition: opacity 1s linear 1000ms;
  }

  .smcc-popup .thumb {
    -webkit-transition: opacity 1s linear 800ms;
    transition: opacity 1s linear 800ms;
  }

  .smcc-popup .track {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  .smcc-popup .instructions {
    -webkit-transition: opacity 1s linear 1800ms;
    transition: opacity 1s linear 1800ms;
  }

  .smcc-popup input[type=range] {
    -webkit-transition: opacity 1s linear 400ms;
    transition: opacity 1s linear 400ms;
  }

  @-webkit-keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @-webkit-keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @-webkit-keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  .smcc-popup .fadeOutInstructions {
    -webkit-transition: opacity 1s linear 0ms;
    transition: opacity 1s linear 0ms;
    opacity: 0;
  }

  .smcc-popup .slideInScreen {
    -webkit-animation: slideInScreen 1.25s ease-in-out 1000ms;
    animation: slideInScreen 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  @keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  .smcc-popup .slideInThumb {
    -webkit-animation: slideInThumb 1.25s ease-in-out 1000ms;
    animation: slideInThumb 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  @keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  .smcc-popup .slideIn {
    -webkit-animation: slideIn 1.25s ease-in-out 1000ms;
    animation: slideIn 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  @keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  .smcc-popup button {
    font-size: 1.84615rem;
    text-transform: uppercase;
    padding: 1.23077rem !important;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #bbb !important;
    color: #000;
  }

  .smcc-popup button:hover {
    background-color: #eee;
    border-color: #888;
  }

  .smcc-popup button.large {
    width: 100%;
  }

  .smcc-popup button.small {
    padding: .61538rem 1.23077rem !important;
    font-size: 1.23077rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  .smcc-popup .product-shades {
    margin-bottom: 1.23077rem;
  }

  .smcc-popup .shades {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5px -5px calc(1.23 - 8px) -5px;
  }
}
@media (min-width: 1024px) and (min-width: 480px) {
  .smcc-popup .shades {
    max-width: 80%;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .shades {
    max-width: 100%;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) {
  .smcc-popup .shades {
    max-width: 90%;
  }
}
@media (min-width: 1024px) and (min-width: 1194px) {
  .smcc-popup .shades {
    max-width: 80%;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .shade {
    width: 4.15385rem;
    height: 4.15385rem;
    margin: 2px;
    padding: 0;
    border: 3px solid #fff;
    font-size: 0;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .shade {
    width: 2.92308rem;
    height: 2.92308rem;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .shade.hover,
  .smcc-popup .shade.active {
    border-color: #fff;
    outline-width: 1px;
    outline-style: solid;
  }

  .smcc-popup .shade.active {
    outline-color: #bbb;
  }

  .smcc-popup .shade.hover {
    outline-color: #888;
  }

  .smcc-popup .shade.spacer {
    display: none;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .shade.spacer {
    display: block;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: 0;
    outline: 0;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .mobile-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .smcc-popup .mobile-menu {
    display: none;
  }
}
@media (min-width: 1024px) {
  .smcc-popup .mobile-menu-button {
    cursor: default;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 1.23077rem;
    text-transform: uppercase;
    background-image: url(../images/ui/down-arrow-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 1.23077rem) center;
    background-size: 1.23077rem;
  }

  .smcc-popup .mobile-menu-button:not(:last-child) {
    border-right: 1px solid #bbb;
  }

  .smcc-popup img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .smcc-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: #000;
  }

  .modal-open .smcc-popup {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1100 !important;
  }

  .modal-open {
    overflow: hidden;
  }

  .modal-dialog {
    position: relative;
    width: 100%;
    max-width: 1280px;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .modal-content {
    position: relative;
    padding: 0 1.23077rem 3.07692rem 1.23077rem;
  }

  .modal-header {
    margin-top: .61538rem;
    background-color: #000;
  }

  .modal-header .close {
    display: block;
    width: 3.07692rem;
    height: 3.07692rem;
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    background-image: url(../images/ui/close-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    border: none !important;
  }

  .modal-header .close:hover {
    display: block;
    width: 3.07692rem;
    height: 3.07692rem;
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    background-image: url(../images/ui/close-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    border: none !important;
  }

  .modal-header .close span[aria-hidden="true"] {
    display: none;
  }

  .modal-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #fff;
  }

  .modal-look-figure {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    border-bottom: 1px solid #bbb;
  }

  .modal-look-tip span {
    display: block;
    max-width: 100%;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  .modal-look-tip,
  .modal-look-product {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding: 1.84615rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .modal-look-tip,
  .modal-look-product {
    width: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }
}
@media (min-width: 1024px) {
  .modal-look-tip span {
    font-size: 0.938em;
  }
}
@media (min-width: 1024px) and (max-width: 767px) {
  .modal-look-product {
    padding-bottom: 0;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .modal-look-product {
    border-right: 1px solid #bbb;
  }
}
@media (min-width: 1024px) {
  .modal-look-product-figure {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 1.84615rem;
  }

  .modal-look-product-image {
    max-height: 120px;
    margin-left: auto;
    margin-right: auto;
  }

  .fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
  }

  .fade.in {
    opacity: 1;
  }

  .modal-embed-container {
    display: block;
  }

  .modal-embed {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }

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

  .modal-look-product-details {
    width: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .modal.choose-concealer,
  .modal.choose-skintone {
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
    background-color: #fff;
  }
}
@media (min-width: 1024px) and (min-width: 768px) {
  .modal.choose-concealer,
  .modal.choose-skintone {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .modal.choose-concealer .modal-header,
  .modal.choose-skintone .modal-header {
    background-color: initial;
  }

  .modal.choose-concealer .modal-header .close,
  .modal.choose-skintone .modal-header .close {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }

  .modal.choose-concealer .modal-body,
  .modal.choose-skintone .modal-body {
    margin-top: -2.46154rem;
  }

  .modal.choose-concealer .modal-content,
  .modal.choose-skintone .modal-content {
    padding: 0 1.23077rem 1.23077rem;
  }

  .modal.choose-concealer .modal-title,
  .modal.choose-skintone .modal-title {
    margin-right: 6.15385rem;
  }

  .modal.choose-concealer .modal-list,
  .modal.choose-skintone .modal-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }

  .modal.choose-concealer .modal-list-item.modal-product,
  .modal.choose-skintone .modal-list-item.modal-product {
    height: 140px;
  }

  .modal.choose-concealer .modal-list-item.modal-skin-tone,
  .modal.choose-skintone .modal-list-item.modal-skin-tone {
    height: 100px;
  }

  .modal.choose-concealer .modal-list-item,
  .modal.choose-skintone .modal-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #bbb;
  }

  .modal.choose-concealer .modal-list-item:not(:last-child),
  .modal.choose-skintone .modal-list-item:not(:last-child) {
    margin-bottom: 1.23077rem;
  }

  .modal.choose-concealer .modal-list-item:hover,
  .modal.choose-skintone .modal-list-item:hover {
    border-color: #888;
  }

  .modal.choose-concealer .modal-list-item-section,
  .modal.choose-skintone .modal-list-item-section {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    max-height: 100%;
    margin: 1.84615rem 1.84615rem 1.84615rem 0;
  }

  .modal.choose-concealer .modal-product-type-figure,
  .modal.choose-concealer .modal-skin-tone-figure,
  .modal.choose-skintone .modal-product-type-figure,
  .modal.choose-skintone .modal-skin-tone-figure {
    height: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .modal.choose-concealer .modal-skin-tone-figure,
  .modal.choose-skintone .modal-skin-tone-figure {
    -ms-flex-preferred-size: calc(50% - 1.84615rem);
    flex-basis: calc(50% - 1.84615rem);
    margin-right: 1.84615rem;
    background-size: cover;
    background-position: center;
  }

  .modal.choose-concealer .modal-product-type-image,
  .modal.choose-concealer .modal-skin-tone-image,
  .modal.choose-skintone .modal-product-type-image,
  .modal.choose-skintone .modal-skin-tone-image {
    max-height: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: perspective(1px) translateY(-50%);
    transform: perspective(1px) translateY(-50%);
  }

  .modal.choose-concealer .modal-look-image,
  .modal.choose-skintone .modal-look-image {
    max-height: 60%;
    margin: auto;
  }

  .modal.choose-concealer .modal-product-type-image,
  .modal.choose-skintone .modal-product-type-image {
    margin-left: auto;
    margin-right: auto;
    padding: 1.23077rem 1.84615rem;
  }

  .modal.choose-concealer .modal-product-type-name,
  .modal.choose-concealer .modal-skin-tone-name,
  .modal.choose-skintone .modal-product-type-name,
  .modal.choose-skintone .modal-skin-tone-name {
    font-size: 1.38462rem;
    line-height: 1;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-transform: uppercase;
    margin-bottom: 1.23077rem;
  }

  .modal.choose-concealer .modal-shop-link,
  .modal.choose-skintone .modal-shop-link {
    font-size: 1.38462rem;
    line-height: 1;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-transform: uppercase;
  }
}
@media (min-width: 1194px) {
  #smcc-app *,
  .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  #smcc-app,
  .smcc-popup {
    box-sizing: border-box;
  }

  #smcc-app *,
  .smcc-popup *,
  #smcc-app *:before,
  .smcc-popup *:before,
  .smcc-popup *:after,
  #smcc-app *:after {
    box-sizing: inherit;
  }

  #smcc-app,
  .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  #smcc-app h1,
  #smcc-app h2,
  #smcc-app h3,
  #smcc-app h4,
  #smcc-app h5,
  #smcc-app h6,
  .smcc-popup h1,
  .smcc-popup h2,
  .smcc-popup h3,
  .smcc-popup h4,
  .smcc-popup h5,
  .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
    font-weight: 100;
  }

  #smcc-app h1,
  .smcc-popup h1 {
    font-size: 3.46154rem !important;
  }

  #smcc-app h2,
  .smcc-popup h2 {
    font-size: 2.07692rem !important;
  }

  #smcc-app h3,
  .smcc-popup h3 {
    font-size: 1.55769rem !important;
  }

  #smcc-app button:not(.small),
  .smcc-popup button:not(.small) {
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  #smcc-app a,
  .smcc-popup a {
    cursor: pointer !important;
    font-size: 1.21154rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  #smcc-app .app-container .primary-pane-start a {
    cursor: pointer !important;
    font-size: 1.21154rem !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
    font-weight: 600;
  }

  #smcc-app a:hover,
  .smcc-popup a:hover {
    color: #888 !important;
  }

  .smcc-popup h1 {
    font-size: 2.76923rem;
  }

  .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  .fadeList.ng-enter.ng-enter-active,
  .fadeList.ng-leave {
    opacity: 1;
  }

  .fadeList.ng-enter {
    opacity: 0;
  }

  .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

   /*! angularjs-slider - v6.0.0 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2017-01-02 */
  .rzslider {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 4px;
    margin: 35px 0 15px 0;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .rzslider.with-legend {
    margin-bottom: 40px;
  }

  .rzslider[disabled] {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-pointer {
    cursor: not-allowed;
    background-color: #d8e0f3;
  }

  .rzslider[disabled] .rz-draggable {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-selection {
    background: #8b91a2;
  }

  .rzslider[disabled] .rz-tick {
    cursor: not-allowed;
  }

  .rzslider[disabled] .rz-tick.rz-selected {
    background: #8b91a2;
  }

  .rzslider span {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
  }

  .rzslider .rz-base {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .rzslider .rz-bar-wrapper {
    left: 0;
    z-index: 1;
    width: 100%;
    height: 32px;
    padding-top: 16px;
    margin-top: -16px;
    box-sizing: border-box;
  }

  .rzslider .rz-draggable {
    cursor: move;
  }

  .rzslider .rz-bar {
    left: 0;
    z-index: 1;
    width: 100%;
    height: 4px;
    background: #d8e0f3;
    border-radius: 2px;
  }

  .rzslider .rz-selection {
    z-index: 2;
    background: #0db9f0;
    border-radius: 2px;
  }

  .rzslider .rz-pointer {
    top: -14px;
    z-index: 3;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: #0db9f0;
    border-radius: 16px;
  }

  .rzslider .rz-pointer:after {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
    content: "";
  }

  .rzslider .rz-pointer:hover:after {
    background-color: #ffffff;
  }

  .rzslider .rz-pointer.rz-active {
    z-index: 4;
  }

  .rzslider .rz-pointer.rz-active:after {
    background-color: #451aff;
  }

  .rzslider .rz-bubble {
    bottom: 16px;
    padding: 1px 3px;
    color: #55637d;
    cursor: default;
  }

  .rzslider .rz-bubble.rz-limit {
    color: #55637d;
  }

  .rzslider .rz-ticks {
    position: absolute;
    top: -3px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }

  .rzslider .rz-ticks-values-under .rz-tick-value {
    top: initial;
    bottom: -32px;
  }

  .rzslider .rz-tick {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin-left: 11px;
    text-align: center;
    cursor: pointer;
    background: #d8e0f3;
    border-radius: 50%;
  }

  .rzslider .rz-tick.rz-selected {
    background: #0db9f0;
  }

  .rzslider .rz-tick-value {
    position: absolute;
    top: -30px;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  .rzslider .rz-tick-legend {
    position: absolute;
    top: 24px;
    max-width: 50px;
    white-space: normal;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  .rzslider.rz-vertical {
    position: relative;
    width: 4px;
    height: 100%;
    padding: 0;
    margin: 0 20px;
    vertical-align: baseline;
  }

  .rzslider.rz-vertical .rz-base {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .rzslider.rz-vertical .rz-bar-wrapper {
    top: auto;
    left: 0;
    width: 32px;
    height: 100%;
    padding: 0 0 0 16px;
    margin: 0 0 0 -16px;
  }

  .rzslider.rz-vertical .rz-bar {
    bottom: 0;
    left: auto;
    width: 4px;
    height: 100%;
  }

  .rzslider.rz-vertical .rz-pointer {
    top: auto;
    bottom: 0;
    left: -14px !important;
  }

  .rzslider.rz-vertical .rz-bubble {
    bottom: 0;
    left: 16px !important;
    margin-left: 3px;
  }

  .rzslider.rz-vertical .rz-ticks {
    top: 0;
    left: -3px;
    z-index: 1;
    width: 0;
    height: 100%;
  }

  .rzslider.rz-vertical .rz-tick {
    margin-top: 11px;
    margin-left: auto;
    vertical-align: middle;
  }

  .rzslider.rz-vertical .rz-tick-value {
    top: initial;
    left: 24px;
    -webkit-transform: translate(0, -28%);
    transform: translate(0, -28%);
  }

  .rzslider.rz-vertical .rz-tick-legend {
    top: initial;
    right: 24px;
    max-width: none;
    white-space: nowrap;
    -webkit-transform: translate(0, -28%);
    transform: translate(0, -28%);
  }

  .rzslider.rz-vertical .rz-ticks-values-under .rz-tick-value {
    right: 24px;
    bottom: initial;
    left: initial;
  }

  #smcc-app #smcc-app,
  #smcc-app .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  #smcc-app #smcc-app h1,
  #smcc-app #smcc-app h2,
  #smcc-app #smcc-app h3,
  #smcc-app #smcc-app h4,
  #smcc-app #smcc-app h5,
  #smcc-app #smcc-app h6,
  #smcc-app .smcc-popup h1,
  #smcc-app .smcc-popup h2,
  #smcc-app .smcc-popup h3,
  #smcc-app .smcc-popup h4,
  #smcc-app .smcc-popup h5,
  #smcc-app .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
  }

  #smcc-app #smcc-app h1,
  #smcc-app .smcc-popup h1 {
    font-size: 3.46154rem !important;
  }

  #smcc-app #smcc-app h2,
  #smcc-app .smcc-popup h2 {
    font-size: 2.07692rem !important;
  }

  #smcc-app #smcc-app h3,
  #smcc-app .smcc-popup h3 {
    font-size: 1.55769rem !important;
  }

  #smcc-app #smcc-app button:not(.small),
  #smcc-app .smcc-popup button:not(.small) {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
  }

  #smcc-app #smcc-app a,
  #smcc-app .smcc-popup a {
    cursor: pointer !important;
    font-size: 1.21154rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  #smcc-app #smcc-app a:hover,
  #smcc-app .smcc-popup a:hover {
    color: #888 !important;
  }

  #smcc-app .smcc-popup h1 {
    font-size: 2.76923rem;
  }

  #smcc-app .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  #smcc-app .fadeList.ng-enter.ng-enter-active,
  #smcc-app .fadeList.ng-leave {
    opacity: 1;
  }

  #smcc-app .fadeList.ng-enter {
    opacity: 0;
  }

  #smcc-app .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  #smcc-app .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  #smcc-app #smcc-app *,
  #smcc-app .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  #smcc-app #smcc-app,
  #smcc-app .smcc-popup {
    box-sizing: border-box;
  }

  #smcc-app #smcc-app *,
  #smcc-app .smcc-popup *,
  #smcc-app #smcc-app *:before,
  #smcc-app .smcc-popup *:before,
  #smcc-app .smcc-popup *:after,
  #smcc-app #smcc-app *:after {
    box-sizing: inherit;
  }

  #smcc-app h1:not(:last-child),
  #smcc-app h2:not(:last-child),
  #smcc-app h3:not(:last-child),
  #smcc-app h4:not(:last-child),
  #smcc-app h5:not(:last-child),
  #smcc-app h6:not(:last-child),
  #smcc-app p:not(:last-child),
  #smcc-app button:not(:last-child) {
    margin-bottom: 1.38462rem;
  }

  #smcc-app h1:not(:last-child) {
    margin-bottom: 2.76923rem;
  }

  #smcc-app header:not(:last-child),
  #smcc-app nav:not(:last-child) {
    margin-bottom: 2.76923rem;
  }

  #smcc-app .app-container {
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .app-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 620px;
  }
  #smcc-app .app-container h1:not(:last-child) {
    margin-bottom: .69231rem !important;
    width: 100%;
    flex-basis: 100%;
    font-size: 3.11538rem !important;
  }
}
@media (min-width: 1194px) and (min-width: 1024px) {
  #smcc-app .app-container {
    height: 675px;
  }
}
@media (min-width: 1194px) and (min-width: 1194px) {
  #smcc-app .app-container {
    height: 760px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .secondary-pane {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    height: 100%;
  }
}
@media (min-width: 1194px) {
  #smcc-app .menu-pane {
    display: none;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .menu-pane {
    display: block;
    -ms-flex-preferred-size: 4.15385rem;
    flex-basis: 4.15385rem;
    margin: 1.38462rem;
  }
}
@media (min-width: 1194px) {
  #smcc-app .primary-pane {
    margin: 1.38462rem;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .primary-pane {
    -ms-flex-preferred-size: calc(50% - 4.15385rem);
    flex-basis: calc(50% - 4.15385rem);
  }

  #smcc-app .primary-pane.centered {
    margin-top: 13.84615rem;
  }
}
@media (min-width: 1194px) {
  #smcc-app .start-image-container {
    padding-bottom: 90%;
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .start-image-container {
    height: 100%;
    padding-bottom: initial;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .primary-pane-start {
    min-width: calc(310px - 6.92308rem);
    max-width: 75%;
  }
}
@media (min-width: 1194px) {
  #smcc-app .skin-tones {
    list-style: none;
  }

  #smcc-app .skin-tone {
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.38462rem;
    z-index: 1;
    opacity: 0.25;
  }

  #smcc-app .skin-tone.active {
    opacity: 1;
  }

  #smcc-app .skin-tone-name {
    display: none;
    position: absolute;
    z-index: 998;
    vertical-align: middle;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    padding-top: .69231rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-left: .69231rem;
    padding-right: .69231rem;
    border: 1px solid #bbb;
    border-right: none;
    background-color: #fff;
    text-align: right;
    cursor: default;
    max-width: none;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  #smcc-app .skin-tone .skin-tone-name.hover,
  #smcc-app .skin-tone:hover .skin-tone-name {
    display: block !important;
  }

  #smcc-app .skin-tone-image-container {
    z-index: 999;
    width: 100%;
    border: 1px solid transparent;
  }

  #smcc-app .skin-tone.active .skin-tone-image-container {
    border-color: #bbb;
  }

  #smcc-app .skin-tone:hover {
    opacity: 1;
  }

  #smcc-app .skin-tone:hover .skin-tone-name {
    border-color: #888;
  }

  #smcc-app .skin-tone:hover .skin-tone-image-container {
    border-color: #888;
  }

  #smcc-app .product-types {
    display: none;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .product-types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1194px) {
  #smcc-app .product-type {
    position: relative;
    -ms-flex-preferred-size: calc(100% / 3);
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    background-color: #fff;
    border-left: 1px solid transparent;
  }

  #smcc-app .product-type:first-child.active {
    border-left-color: #eee;
  }

  #smcc-app .product-type:first-child.hover {
    border-left-color: #bbb;
  }

  #smcc-app .product-type:not(:first-child) {
    border-left-color: #bbb;
  }

  #smcc-app .product-type:last-child {
    border-right: 1px solid transparent;
  }

  #smcc-app .product-type:last-child.active {
    border-right-color: #eee;
  }

  #smcc-app .product-type:last-child.hover {
    border-right-color: #bbb;
  }

  #smcc-app .product-shade-name {
    display: block !important;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type-name {
    position: absolute;
    z-index: 998;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    width: calc(100% + 2px);
    margin-left: -1px;
    max-width: none !important;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    padding: .69231rem;
    background-color: #fff;
    cursor: default;
    white-space: normal;
    display: block;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type-image-container {
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 120px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  #smcc-app .product-type-image {
    max-width: calc(100px - 1.38462rem);
    max-height: calc(120px - 1.38462rem);
    margin-left: auto;
    margin-right: auto;
  }

  #smcc-app .product-type.active .product-type-image-container {
    background-color: #eee;
  }

  #smcc-app .product-type.hover .product-type-name {
    border: 1px solid #bbb;
    border-width: 1px 1px 0;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-type.active.hover .product-type-name {
    background-color: #eee;
  }

  #smcc-app header.product-header {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1.38462rem;
  }

  #smcc-app header.product-header h1 {
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 3.11538rem !important;
  }
}
@media (min-width: 1194px) and (max-width: 767px) {
  #smcc-app header.product-header h1 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.76923rem !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.38462rem !important;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app header.product-header h1 {
    margin-bottom: 0.69231rem !important;
  }
}
@media (min-width: 1194px) {
  #smcc-app header.product-header .product-image-container {
    min-width: 90px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app header.product-header .product-image-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 120px;
    margin-bottom: 1.38462rem;
  }
}
@media (min-width: 1194px) {
  #smcc-app header.product-header .product-image {
    max-height: 70px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app header.product-header .product-image {
    max-height: 120px;
    margin: initial;
  }
}
@media (min-width: 1194px) {
  #smcc-app header.product-header h2 {
    text-transform: initial;
  }
}
@media (min-width: 1194px) and (max-width: 767px) {
  #smcc-app header.product-header h2 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.07692rem;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.38462rem;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app header.product-header h2 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 1194px) and (min-width: 1024px) {
  #smcc-app header.product-header h2 {
    margin-bottom: 1.38462rem;
  }
}
@media (min-width: 1194px) {
  #smcc-app .product-description {
    max-width: 500px;
  }
}
@media (min-width: 1194px) and (max-width: 768px) {
  #smcc-app .product-description {
    padding-top: 1em;
    font-size: 1em;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .product-description {
    display: block;
  }
}
@media (min-width: 1194px) {
  #smcc-app .product-description {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
    text-shadow: 0 0 0;
  }

  #smcc-app .product-description br {
    content: " ";
    display: block;
    margin: 0.69231rem;
  }
}
@media (min-width: 1194px) and (max-width: 768px) {
  #smcc-app .product-description br {
    margin: 1.38462rem;
  }
}
@media (min-width: 1194px) {
  #smcc-app .product-actions {
    margin-top: 2.76923rem;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .product-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media (min-width: 1194px) {
  #smcc-app .product-actions a {
    display: table;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 1194px) and (max-width: 768px) {
  #smcc-app .product-actions a {
    font-size: 1em;
  }
}
@media (min-width: 1194px) {
  #smcc-app .product-actions a:not(:last-child) {
    margin-bottom: 1.38462rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .product-actions a:not(:last-child) {
    margin-right: 1.38462rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 600;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .product-actions .learn-more-link {
    display: none;
  }
}
@media (min-width: 1194px) {
  #smcc-app .upperlower {
    text-transform: none;
  }

  #smcc-app ul,
  #smcc-app li {
    list-style-type: none;
  }

  #smcc-app div#comparison * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  #smcc-app div#comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  #smcc-app div#comparison,
  #smcc-app .text {
    height: 288px;
    background-size: contain !important;
  }
}
@media (min-width: 1194px) and (min-width: 375px) {
  #smcc-app div#comparison,
  #smcc-app .text {
    height: 327px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app div#comparison,
  #smcc-app .text {
    height: calc(100% - 120px);
    background-size: cover !important;
  }
}
@media (min-width: 1194px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-repeat: no-repeat;
    background-size: 330px;
  }
}
@media (min-width: 1194px) and (min-width: 375px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 375px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 572px;
  }
}
@media (min-width: 1194px) and (min-width: 1024px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 635px;
  }
}
@media (min-width: 1194px) and (min-width: 1194px) {
  #smcc-app div#comparison,
  #smcc-app div#comparison figure,
  #smcc-app div#comparison figure #divisor,
  #smcc-app div#comparison .text {
    background-size: 732px;
  }
}
@media (min-width: 1194px) {
  #smcc-app div#comparison figure {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  #smcc-app div#comparison figure > img {
    position: relative;
    width: 100%;
  }

  #smcc-app div#comparison figure #divisor {
    position: absolute;
    width: 0%;
    border-right: 1px solid #eee;
    overflow: hidden;
    bottom: 0;
    height: 100%;
  }

  #smcc-app .rzslider {
    opacity: 0;
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 4.15385rem;
  }

  #smcc-app .rz-bubble {
    display: none;
  }

  #smcc-app .rz-pointer {
    opacity: 0.2;
  }

  #smcc-app .rz-bar-wrapper,
  #smcc-app .rz-bar {
    opacity: .2;
    background-color: transparent;
    height: 100%;
  }

  #smcc-app .text {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
  }

  #smcc-app .slider-overlays,
  #smcc-app .slider-overlays div {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
  }

  #smcc-app .instructions {
    font-size: 1.23rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 4.15385rem;
    overflow: hidden;
    z-index: 0;
    line-height: 4.15385rem;
    padding-left: calc(10% + 3.46154rem);
    color: #fff;
    pointer-events: none;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.25);
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .instructions {
    padding-left: initial;
    text-align: center;
  }
}
@media (min-width: 1194px) {
  #smcc-app .hold {
    opacity: 1;
  }

  #smcc-app .hold {
    opacity: 0;
  }

  #smcc-app #slider-thumb {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
  }

  #smcc-app .thumb {
    bottom: .69231rem;
    position: absolute;
    width: 2.76923rem;
    height: 2.76923rem;
    background: #fff;
    border-radius: 4.15385rem;
    border: 1px solid #bbb;
    z-index: 1;
    margin-left: -1.38462rem;
    left: 0%;
  }

  #smcc-app .track {
    width: 100%;
    height: 1px;
    background-color: #949494;
    display: block;
    bottom: 2.07692rem;
    position: absolute;
  }

  #smcc-app #lines {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  #smcc-app .slider-overlays {
    -webkit-transition: opacity 1s linear 1000ms;
    transition: opacity 1s linear 1000ms;
  }

  #smcc-app .thumb {
    -webkit-transition: opacity 1s linear 800ms;
    transition: opacity 1s linear 800ms;
  }

  #smcc-app .track {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  #smcc-app .instructions {
    -webkit-transition: opacity 1s linear 1800ms;
    transition: opacity 1s linear 1800ms;
  }

  #smcc-app input[type=range] {
    -webkit-transition: opacity 1s linear 400ms;
    transition: opacity 1s linear 400ms;
  }

  @-webkit-keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @-webkit-keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @-webkit-keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  #smcc-app .fadeOutInstructions {
    -webkit-transition: opacity 1s linear 0ms;
    transition: opacity 1s linear 0ms;
    opacity: 0;
  }

  #smcc-app .slideInScreen {
    -webkit-animation: slideInScreen 1.25s ease-in-out 1000ms;
    animation: slideInScreen 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  @keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  #smcc-app .slideInThumb {
    -webkit-animation: slideInThumb 1.25s ease-in-out 1000ms;
    animation: slideInThumb 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  @keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  #smcc-app .slideIn {
    -webkit-animation: slideIn 1.25s ease-in-out 1000ms;
    animation: slideIn 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  @keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  #smcc-app .primary-pane-start button {
    font-size: 2.07692rem;
    text-transform: uppercase;
    padding: 1.38462rem !important;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #bbb !important;
  }

  #smcc-app button:hover {
    background-color: #eee;
    border-color: #888 !important;
  }

  #smcc-app button.large {
    width: 100%;
  }

  #smcc-app button.small {
    padding: .69231rem 1.38462rem !important;
    font-size: 1.38462rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  #smcc-app .product-shades {
    margin-bottom: 1.38462rem;
  }

  #smcc-app .shades {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5px -5px calc(1.23 - 8px) -5px;
  }
}
@media (min-width: 1194px) and (min-width: 480px) {
  #smcc-app .shades {
    max-width: 80%;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .shades {
    max-width: 100%;
  }
}
@media (min-width: 1194px) and (min-width: 1024px) {
  #smcc-app .shades {
    max-width: 90%;
  }
}
@media (min-width: 1194px) and (min-width: 1194px) {
  #smcc-app .shades {
    max-width: 80%;
  }
}
@media (min-width: 1194px) {
  #smcc-app .shade {
    width: 4.67308rem;
    height: 4.67308rem;
    margin: 2px;
    padding: 0;
    border: 3px solid #fff;
    font-size: 0;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .shade {
    width: 3.28846rem;
    height: 3.28846rem;
  }
}
@media (min-width: 1194px) {
  #smcc-app .shade.hover,
  #smcc-app .shade.active {
    border-color: #fff;
    outline-width: 1px;
    outline-style: solid;
  }

  #smcc-app .shade.active {
    outline-color: #bbb;
  }

  #smcc-app .shade.hover {
    outline-color: #888;
  }

  #smcc-app .shade.spacer {
    display: none;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .shade.spacer {
    display: block;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: 0;
    outline: 0;
  }
}
@media (min-width: 1194px) {
  #smcc-app .mobile-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  #smcc-app .mobile-menu {
    display: none;
  }
}
@media (min-width: 1194px) {
  #smcc-app .mobile-menu-button {
    cursor: default;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 1.38462rem;
    text-transform: uppercase;
    background-image: url(../images/ui/down-arrow-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 1.38462rem) center;
    background-size: 1.38462rem;
  }

  #smcc-app .mobile-menu-button:not(:last-child) {
    border-right: 1px solid #bbb;
  }

  #smcc-app img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  #smcc-app,
  .smcc-popup {
    font-size: 1.38462rem;
  }

  .smcc-popup #smcc-app,
  .smcc-popup .smcc-popup {
    font-family: "HelveticaNeueW01-45Ligh", "Helvetica Neue LT W01_41488878", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    color: #000;
  }

  .smcc-popup #smcc-app h1,
  .smcc-popup #smcc-app h2,
  .smcc-popup #smcc-app h3,
  .smcc-popup #smcc-app h4,
  .smcc-popup #smcc-app h5,
  .smcc-popup #smcc-app h6,
  .smcc-popup .smcc-popup h1,
  .smcc-popup .smcc-popup h2,
  .smcc-popup .smcc-popup h3,
  .smcc-popup .smcc-popup h4,
  .smcc-popup .smcc-popup h5,
  .smcc-popup .smcc-popup h6 {
    line-height: 1 !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
    text-transform: uppercase;
  }

  .smcc-popup #smcc-app h1,
  .smcc-popup .smcc-popup h1 {
    font-size: 3.46154rem !important;
  }

  .smcc-popup #smcc-app h2,
  .smcc-popup .smcc-popup h2 {
    font-size: 2.07692rem !important;
  }

  .smcc-popup #smcc-app h3,
  .smcc-popup .smcc-popup h3 {
    font-size: 1.55769rem !important;
  }

  .smcc-popup #smcc-app button:not(.small),
  .smcc-popup .smcc-popup button:not(.small) {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
  }

  .smcc-popup #smcc-app a,
  .smcc-popup .smcc-popup a {
    cursor: pointer !important;
    font-size: 1.21154rem !important;
    font-family: "HelveticaNeueW01-75Bold", "Helvetica Neue LT W01_71488914", "Helvetica", "Arial", sans-serif !important;
    text-decoration: underline !important;
    text-transform: uppercase !important;
  }

  .smcc-popup #smcc-app a:hover,
  .smcc-popup .smcc-popup a:hover {
    color: #888 !important;
  }

  .smcc-popup .smcc-popup h1 {
    font-size: 2.76923rem;
  }

  .smcc-popup .fadeList.ng-animate {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
  }

  .smcc-popup .fadeList.ng-enter.ng-enter-active,
  .smcc-popup .fadeList.ng-leave {
    opacity: 1;
  }

  .smcc-popup .fadeList.ng-enter {
    opacity: 0;
  }

  .smcc-popup .fadeList.ng-leave.ng-leave-active {
    display: none;
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .smcc-popup .fadeList.ng-enter-stagger {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
  }

  .smcc-popup #smcc-app *,
  .smcc-popup .smcc-popup * {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
  }

  .smcc-popup #smcc-app,
  .smcc-popup .smcc-popup {
    box-sizing: border-box;
  }

  .smcc-popup #smcc-app *,
  .smcc-popup .smcc-popup *,
  .smcc-popup #smcc-app *:before,
  .smcc-popup .smcc-popup *:before,
  .smcc-popup .smcc-popup *:after,
  .smcc-popup #smcc-app *:after {
    box-sizing: inherit;
  }

  .smcc-popup h1:not(:last-child),
  .smcc-popup h2:not(:last-child),
  .smcc-popup h3:not(:last-child),
  .smcc-popup h4:not(:last-child),
  .smcc-popup h5:not(:last-child),
  .smcc-popup h6:not(:last-child),
  .smcc-popup p:not(:last-child),
  .smcc-popup button:not(:last-child) {
    margin-bottom: 1.38462rem;
  }

  .smcc-popup h1:not(:last-child) {
    margin-bottom: 2.76923rem;
  }

  .smcc-popup header:not(:last-child),
  .smcc-popup nav:not(:last-child) {
    margin-bottom: 2.76923rem;
  }

  .smcc-popup .app-container {
    width: 100%;
    max-width: 1280px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .app-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 620px;
  }
}
@media (min-width: 1194px) and (min-width: 1024px) {
  .smcc-popup .app-container {
    height: 675px;
  }
}
@media (min-width: 1194px) and (min-width: 1194px) {
  .smcc-popup .app-container {
    height: 760px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .secondary-pane {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    height: 100%;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .menu-pane {
    display: none;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .menu-pane {
    display: block;
    -ms-flex-preferred-size: 4.15385rem;
    flex-basis: 4.15385rem;
    margin: 1.38462rem;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .primary-pane {
    margin: 1.38462rem;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .primary-pane {
    -ms-flex-preferred-size: calc(50% - 4.15385rem);
    flex-basis: calc(50% - 4.15385rem);
  }

  .smcc-popup .primary-pane.centered {
    margin-top: 13.84615rem;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .start-image-container {
    padding-bottom: 90%;
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .start-image-container {
    height: 100%;
    padding-bottom: initial;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .primary-pane-start {
    min-width: calc(310px - 6.92308rem);
    max-width: 75%;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .skin-tones {
    list-style: none;
  }

  .smcc-popup .skin-tone {
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1.38462rem;
    z-index: 1;
    opacity: 0.25;
  }

  .smcc-popup .skin-tone.active {
    opacity: 1;
  }

  .smcc-popup .skin-tone-name {
    display: none;
    position: absolute;
    z-index: 998;
    vertical-align: middle;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    padding-top: .69231rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    padding-left: .69231rem;
    padding-right: .69231rem;
    border: 1px solid #bbb;
    border-right: none;
    background-color: #fff;
    text-align: right;
    cursor: default;
    max-width: none;
  }

  .smcc-popup .skin-tone .skin-tone-name.hover,
  .smcc-popup .skin-tone:hover .skin-tone-name {
    display: block !important;
  }

  .smcc-popup .skin-tone-image-container {
    z-index: 999;
    width: 100%;
    border: 1px solid transparent;
  }

  .smcc-popup .skin-tone.active .skin-tone-image-container {
    border-color: #bbb;
  }

  .smcc-popup .skin-tone:hover {
    opacity: 1;
  }

  .smcc-popup .skin-tone:hover .skin-tone-name {
    border-color: #888;
  }

  .smcc-popup .skin-tone:hover .skin-tone-image-container {
    border-color: #888;
  }

  .smcc-popup .product-types {
    display: none;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .product-types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .product-type {
    position: relative;
    -ms-flex-preferred-size: calc(100% / 3);
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    background-color: #fff;
    border-left: 1px solid transparent;
  }

  .smcc-popup .product-type:first-child.active {
    border-left-color: #eee;
  }

  .smcc-popup .product-type:first-child.hover {
    border-left-color: #bbb;
  }

  .smcc-popup .product-type:not(:first-child) {
    border-left-color: #bbb;
  }

  .smcc-popup .product-type:last-child {
    border-right: 1px solid transparent;
  }

  .smcc-popup .product-type:last-child.active {
    border-right-color: #eee;
  }

  .smcc-popup .product-type:last-child.hover {
    border-right-color: #bbb;
  }

  .smcc-popup .product-shade-name {
    display: block !important;
  }

  .smcc-popup .product-type-name {
    position: absolute;
    z-index: 998;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    width: calc(100% + 2px);
    margin-left: -1px;
    max-width: none !important;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    padding: .69231rem;
    background-color: #fff;
    cursor: default;
    white-space: normal;
    display: block;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  .smcc-popup .product-type-image-container {
    z-index: 999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 120px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .smcc-popup .product-type-image {
    max-width: calc(100px - 1.38462rem);
    max-height: calc(120px - 1.38462rem);
    margin-left: auto;
    margin-right: auto;
  }

  .smcc-popup .product-type.active .product-type-image-container {
    background-color: #eee;
  }

  .smcc-popup .product-type.hover .product-type-name {
    border: 1px solid #bbb;
    border-width: 1px 1px 0;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 200;
  }

  .smcc-popup .product-type.active.hover .product-type-name {
    background-color: #eee;
  }

  .smcc-popup header.product-header {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 1.38462rem;
  }

  .smcc-popup header.product-header h1 {
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 3.11538rem !important;
  }
}
@media (min-width: 1194px) and (max-width: 767px) {
  .smcc-popup header.product-header h1 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.76923rem !important;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.38462rem !important;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup header.product-header h1 {
    margin-bottom: 0.69231rem !important;
  }
}
@media (min-width: 1194px) {
  .smcc-popup header.product-header .product-image-container {
    min-width: 90px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup header.product-header .product-image-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 120px;
    margin-bottom: 1.38462rem;
  }
}
@media (min-width: 1194px) {
  .smcc-popup header.product-header .product-image {
    max-height: 70px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup header.product-header .product-image {
    max-height: 120px;
    margin: initial;
  }
}
@media (min-width: 1194px) {
  .smcc-popup header.product-header h2 {
    text-transform: initial;
  }
}
@media (min-width: 1194px) and (max-width: 767px) {
  .smcc-popup header.product-header h2 {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    font-size: 2.07692rem;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    margin-bottom: 1.38462rem;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup header.product-header h2 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
}
@media (min-width: 1194px) and (min-width: 1024px) {
  .smcc-popup header.product-header h2 {
    margin-bottom: 1.38462rem;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .product-description {
    max-width: 500px;
  }
}
@media (min-width: 1194px) and (max-width: 768px) {
  .smcc-popup .product-description {
    padding-top: 1em;
    font-size: 1em;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .product-description {
    display: block;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .product-description span {
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-shadow: 0 0 0;
  }

  .smcc-popup .product-description br {
    content: " ";
    display: block;
    margin: 0.69231rem;
  }
}
@media (min-width: 1194px) and (max-width: 768px) {
  .smcc-popup .product-description br {
    margin: 1.38462rem;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .product-actions {
    margin-top: 2.76923rem;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .product-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .product-actions a {
    display: table;
  }
}
@media (min-width: 1194px) and (max-width: 768px) {
  .smcc-popup .product-actions a {
    font-size: 1em;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .product-actions a:not(:last-child) {
    margin-bottom: 1.38462rem;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .product-actions a:not(:last-child) {
    margin-right: 1.38462rem;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .product-actions .learn-more-link {
    display: none;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .upperlower {
    text-transform: none;
  }

  .smcc-popup ul,
  .smcc-popup li {
    list-style-type: none;
  }

  .smcc-popup div#comparison * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .smcc-popup div#comparison {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: 288px;
    background-size: contain !important;
  }
}
@media (min-width: 1194px) and (min-width: 375px) {
  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: 327px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup div#comparison,
  .smcc-popup .text {
    height: calc(100% - 120px);
    background-size: cover !important;
  }
}
@media (min-width: 1194px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-repeat: no-repeat;
    background-size: 330px;
  }
}
@media (min-width: 1194px) and (min-width: 375px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 375px;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 572px;
  }
}
@media (min-width: 1194px) and (min-width: 1024px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 635px;
  }
}
@media (min-width: 1194px) and (min-width: 1194px) {
  .smcc-popup div#comparison,
  .smcc-popup div#comparison figure,
  .smcc-popup div#comparison figure #divisor,
  .smcc-popup div#comparison .text {
    background-size: 732px;
  }
}
@media (min-width: 1194px) {
  .smcc-popup div#comparison figure {
    position: relative;
    font-size: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .smcc-popup div#comparison figure > img {
    position: relative;
    width: 100%;
  }

  .smcc-popup div#comparison figure #divisor {
    position: absolute;
    width: 0%;
    border-right: 1px solid #eee;
    overflow: hidden;
    bottom: 0;
    height: 100%;
  }

  .smcc-popup .rzslider {
    opacity: 0;
    position: absolute;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 4.15385rem;
  }

  .smcc-popup .rz-bubble {
    display: none;
  }

  .smcc-popup .rz-pointer {
    opacity: 0.2;
  }

  .smcc-popup .rz-bar-wrapper,
  .smcc-popup .rz-bar {
    opacity: .2;
    background-color: transparent;
    height: 100%;
  }

  .smcc-popup .text {
    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
  }

  .smcc-popup .slider-overlays,
  .smcc-popup .slider-overlays div {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: cover;
  }

  .smcc-popup .instructions {
    font-size: 1.23rem;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 4.15385rem;
    overflow: hidden;
    z-index: 0;
    line-height: 4.15385rem;
    padding-left: calc(10% + 3.46154rem);
    color: #fff;
    pointer-events: none;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.25);
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .instructions {
    padding-left: initial;
    text-align: center;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .hold {
    opacity: 1;
  }

  .smcc-popup .hold {
    opacity: 0;
  }

  .smcc-popup #slider-thumb {
    width: 100%;
    height: 25%;
    position: absolute;
    bottom: 0;
  }

  .smcc-popup .thumb {
    bottom: .69231rem;
    position: absolute;
    width: 2.76923rem;
    height: 2.76923rem;
    background: #fff;
    border-radius: 4.15385rem;
    border: 1px solid #bbb;
    z-index: 1;
    margin-left: -1.38462rem;
    left: 0%;
  }

  .smcc-popup .track {
    width: 100%;
    height: 1px;
    background-color: #949494;
    display: block;
    bottom: 2.07692rem;
    position: absolute;
  }

  .smcc-popup #lines {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  .smcc-popup .slider-overlays {
    -webkit-transition: opacity 1s linear 1000ms;
    transition: opacity 1s linear 1000ms;
  }

  .smcc-popup .thumb {
    -webkit-transition: opacity 1s linear 800ms;
    transition: opacity 1s linear 800ms;
  }

  .smcc-popup .track {
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
  }

  .smcc-popup .instructions {
    -webkit-transition: opacity 1s linear 1800ms;
    transition: opacity 1s linear 1800ms;
  }

  .smcc-popup input[type=range] {
    -webkit-transition: opacity 1s linear 400ms;
    transition: opacity 1s linear 400ms;
  }

  @-webkit-keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @keyframes backgroundFadeOut {
    from {
      background-color: rgba(0, 0, 0, 0.25);
    }
    to {
      background-color: transparent;
    }
  }
  @-webkit-keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @keyframes backgroundFadeIn {
    from {
      background-color: transparent;
    }
    to {
      background-color: rgba(0, 0, 0, 0.25);
    }
  }
  @-webkit-keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes fadeout {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  .smcc-popup .fadeOutInstructions {
    -webkit-transition: opacity 1s linear 0ms;
    transition: opacity 1s linear 0ms;
    opacity: 0;
  }

  .smcc-popup .slideInScreen {
    -webkit-animation: slideInScreen 1.25s ease-in-out 1000ms;
    animation: slideInScreen 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  @keyframes slideInScreen {
    0% {
      width: 0%;
    }
    50% {
      width: 40%;
    }
    100% {
      width: 10%;
    }
  }
  .smcc-popup .slideInThumb {
    -webkit-animation: slideInThumb 1.25s ease-in-out 1000ms;
    animation: slideInThumb 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  @keyframes slideInThumb {
    0% {
      left: 0%;
    }
    50% {
      left: 40%;
    }
    100% {
      left: 10%;
    }
  }
  .smcc-popup .slideIn {
    -webkit-animation: slideIn 1.25s ease-in-out 1000ms;
    animation: slideIn 1.25s ease-in-out 1000ms;
  }

  @-webkit-keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  @keyframes slideIn {
    0% {
      -webkit-transform: translateX(-8%);
      transform: translateX(-8%);
    }
    50% {
      -webkit-transform: translateX(27%);
      transform: translateX(27%);
    }
    100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
    }
  }
  .smcc-popup button {
    font-size: 2.07692rem;
    text-transform: uppercase;
    padding: 1.38462rem !important;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #bbb !important;
    color: #000;
  }

  .smcc-popup button:hover {
    background-color: #eee;
    border-color: #888;
  }

  .smcc-popup button.large {
    width: 100%;
  }

  .smcc-popup button.small {
    padding: .69231rem 1.38462rem !important;
    font-size: 1.38462rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }

  .smcc-popup .product-shades {
    margin-bottom: 1.38462rem;
  }

  .smcc-popup .shades {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -5px -5px calc(1.23 - 8px) -5px;
  }
}
@media (min-width: 1194px) and (min-width: 480px) {
  .smcc-popup .shades {
    max-width: 80%;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .shades {
    max-width: 100%;
  }
}
@media (min-width: 1194px) and (min-width: 1024px) {
  .smcc-popup .shades {
    max-width: 90%;
  }
}
@media (min-width: 1194px) and (min-width: 1194px) {
  .smcc-popup .shades {
    max-width: 80%;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .shade {
    width: 4.67308rem;
    height: 4.67308rem;
    margin: 2px;
    padding: 0;
    border: 3px solid #fff;
    font-size: 0;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .shade {
    width: 3.28846rem;
    height: 3.28846rem;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .shade.hover,
  .smcc-popup .shade.active {
    border-color: #fff;
    outline-width: 1px;
    outline-style: solid;
  }

  .smcc-popup .shade.active {
    outline-color: #bbb;
  }

  .smcc-popup .shade.hover {
    outline-color: #888;
  }

  .smcc-popup .shade.spacer {
    display: none;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .shade.spacer {
    display: block;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    height: 0;
    margin: 0;
    border: 0;
    outline: 0;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .mobile-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .smcc-popup .mobile-menu {
    display: none;
  }
}
@media (min-width: 1194px) {
  .smcc-popup .mobile-menu-button {
    cursor: default;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    padding: 1.38462rem;
    text-transform: uppercase;
    background-image: url(../images/ui/down-arrow-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 1.38462rem) center;
    background-size: 1.38462rem;
  }

  .smcc-popup .mobile-menu-button:not(:last-child) {
    border-right: 1px solid #bbb;
  }

  .smcc-popup img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .smcc-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    background-color: #000;
  }

  .modal-open .smcc-popup {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1100 !important;
  }

  .modal-open {
    overflow: hidden;
  }

  .modal-dialog {
    position: relative;
    width: 100%;
    max-width: 1280px;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .modal-content {
    position: relative;
    padding: 0 1.38462rem 3.46154rem 1.38462rem;
  }

  .modal-header {
    margin-top: .69231rem;
    background-color: #000;
  }

  .modal-header .close {
    display: block;
    width: 3.46154rem;
    height: 3.46154rem;
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    background-image: url(../images/ui/close-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    border: none !important;
  }

  .modal-header .close:hover {
    display: block;
    width: 3.46154rem;
    height: 3.46154rem;
    margin-left: auto;
    padding: 0;
    background-color: transparent;
    background-image: url(../images/ui/close-icon.svg?1510314966) format('svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border: 0;
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
    border: none !important;
  }

  .modal-header .close span[aria-hidden="true"] {
    display: none;
  }

  .modal-container {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #fff;
  }

  .modal-look-figure {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    border-bottom: 1px solid #bbb;
  }

  .modal-look-tip span {
    display: block;
    max-width: 100%;
    -ms-flex-negative: 1;
    flex-shrink: 1;
  }

  .modal-look-tip,
  .modal-look-product {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
    padding: 2.07692rem;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .modal-look-tip,
  .modal-look-product {
    width: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
    font-family: "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    font-weight: 100;
  }
}
@media (min-width: 1194px) {
  .modal-look-tip span {
    font-size: 0.938em;
  }
}
@media (min-width: 1194px) and (max-width: 767px) {
  .modal-look-product {
    padding-bottom: 0;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .modal-look-product {
    border-right: 1px solid #bbb;
  }
}
@media (min-width: 1194px) {
  .modal-look-product-figure {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 2.07692rem;
  }

  .modal-look-product-image {
    max-height: 120px;
    margin-left: auto;
    margin-right: auto;
  }

  .fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
  }

  .fade.in {
    opacity: 1;
  }

  .modal-embed-container {
    display: block;
  }

  .modal-embed {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }

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

  .modal-look-product-details {
    width: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .modal.choose-concealer,
  .modal.choose-skintone {
    -webkit-box-align: initial;
    -ms-flex-align: initial;
    align-items: initial;
    background-color: #fff;
  }
}
@media (min-width: 1194px) and (min-width: 768px) {
  .modal.choose-concealer,
  .modal.choose-skintone {
    display: none !important;
  }
}
@media (min-width: 1194px) {
  .modal.choose-concealer .modal-header,
  .modal.choose-skintone .modal-header {
    background-color: initial;
  }

  .modal.choose-concealer .modal-header .close,
  .modal.choose-skintone .modal-header .close {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }

  .modal.choose-concealer .modal-body,
  .modal.choose-skintone .modal-body {
    margin-top: -2.76923rem;
  }

  .modal.choose-concealer .modal-content,
  .modal.choose-skintone .modal-content {
    padding: 0 1.38462rem 1.38462rem;
  }

  .modal.choose-concealer .modal-title,
  .modal.choose-skintone .modal-title {
    margin-right: 6.92308rem;
  }

  .modal.choose-concealer .modal-list,
  .modal.choose-skintone .modal-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }

  .modal.choose-concealer .modal-list-item.modal-product,
  .modal.choose-skintone .modal-list-item.modal-product {
    height: 140px;
  }

  .modal.choose-concealer .modal-list-item.modal-skin-tone,
  .modal.choose-skintone .modal-list-item.modal-skin-tone {
    height: 100px;
  }

  .modal.choose-concealer .modal-list-item,
  .modal.choose-skintone .modal-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #bbb;
  }

  .modal.choose-concealer .modal-list-item:not(:last-child),
  .modal.choose-skintone .modal-list-item:not(:last-child) {
    margin-bottom: 1.38462rem;
  }

  .modal.choose-concealer .modal-list-item:hover,
  .modal.choose-skintone .modal-list-item:hover {
    border-color: #888;
  }

  .modal.choose-concealer .modal-list-item-section,
  .modal.choose-skintone .modal-list-item-section {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
    max-height: 100%;
    margin: 2.07692rem 2.07692rem 2.07692rem 0;
  }

  .modal.choose-concealer .modal-product-type-figure,
  .modal.choose-concealer .modal-skin-tone-figure,
  .modal.choose-skintone .modal-product-type-figure,
  .modal.choose-skintone .modal-skin-tone-figure {
    height: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
  }

  .modal.choose-concealer .modal-skin-tone-figure,
  .modal.choose-skintone .modal-skin-tone-figure {
    -ms-flex-preferred-size: calc(50% - 2.07692rem);
    flex-basis: calc(50% - 2.07692rem);
    margin-right: 2.07692rem;
    background-size: cover;
    background-position: center;
  }

  .modal.choose-concealer .modal-product-type-image,
  .modal.choose-concealer .modal-skin-tone-image,
  .modal.choose-skintone .modal-product-type-image,
  .modal.choose-skintone .modal-skin-tone-image {
    max-height: 100%;
    position: relative;
    top: 50%;
    -webkit-transform: perspective(1px) translateY(-50%);
    transform: perspective(1px) translateY(-50%);
  }

  .modal.choose-concealer .modal-look-image,
  .modal.choose-skintone .modal-look-image {
    max-height: 60%;
    margin: auto;
  }

  .modal.choose-concealer .modal-product-type-image,
  .modal.choose-skintone .modal-product-type-image {
    margin-left: auto;
    margin-right: auto;
    padding: 1.38462rem 2.07692rem;
  }

  .modal.choose-concealer .modal-product-type-name,
  .modal.choose-concealer .modal-skin-tone-name,
  .modal.choose-skintone .modal-product-type-name,
  .modal.choose-skintone .modal-skin-tone-name {
    font-size: 1.55769rem;
    line-height: 1;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-transform: uppercase;
    margin-bottom: 1.38462rem;
  }

  .modal.choose-concealer .modal-shop-link,
  .modal.choose-skintone .modal-shop-link {
    font-size: 1.55769rem;
    line-height: 1;
    font-family: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif;
    text-transform: uppercase;
  }
}