: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;
        font-family: "HelveticaNeueW01-UltLt" !important;
        text-transform: uppercase
    }
    #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: "HelveticaNeueW01-UltLt", "HelveticaNeueW01-UltLt", "Helvetica", "Arial", sans-serif
    }
    #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" !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
    }
    #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
    }
    #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
    }
    #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
    }
    #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 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-app header.product-header h1 {
        margin-bottom: .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 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: 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 span {
        font-family: "HelveticaNeueW01-45Ligh", "Helvetica", "Arial", sans-serif;
        text-shadow: 0 0 0
    }
    #smcc-app .product-description br {
        content: " ";
        display: block;
        margin: .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
    }
}
@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
    }
}
@media (min-width: 0px) and (min-width: 768px) {
    #smcc-app .product-actions a:not(:last-child) {
        margin-right: 1.23077rem
    }
}
@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: .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)
    }
}
@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;
        background-color: #fff;
        border-radius: 0;
        border: 1px solid #bbb
    }
    #smcc-app button:hover {
        background-color: #eee;
        border-color: #888
    }
    #smcc-app button.large {
        width: 100%
    }
    #smcc-app button.small {
        padding: .61538rem 1.23077rem;
        font-size: 1.23077rem
    }
    #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: 100%
    }
}
@media (min-width: 0px) and (min-width: 1194px) {
    #smcc-app .shades {
        max-width: 100%
    }
}
@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");
        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
    }
    .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
    }
    .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: .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: "HelveticaNeueW01-UltLt", "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: .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: .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;
        background-color: #fff;
        border-radius: 0;
        border: 1px solid #bbb
    }
    .smcc-popup button:hover {
        background-color: #eee;
        border-color: #888
    }
    .smcc-popup button.large {
        width: 100%
    }
    .smcc-popup button.small {
        padding: .61538rem 1.23077rem;
        font-size: 1.23077rem
    }
    .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: 100%
    }
}
@media (min-width: 0px) and (min-width: 1194px) {
    .smcc-popup .shades {
        max-width: 100%
    }
}
@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");
        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
    }
    .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");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        border: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%)
    }
    .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");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        border: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%)
    }
    .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
    }
}
@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%
    }
}
@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: -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: 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: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
        text-transform: uppercase
    }
    #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: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif
    }
    #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 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
    }
    #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
    }
    #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
    }
    #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
    }
    #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: .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 span {
        font-family: "HelveticaNeueW01-45Ligh", "Helvetica", "Arial", sans-serif;
        text-shadow: 0 0 0
    }
    #smcc-app .product-description br {
        content: " ";
        display: block;
        margin: .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
    }
}
@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
    }
}
@media (min-width: 768px) and (min-width: 768px) {
    #smcc-app .product-actions a:not(:last-child) {
        margin-right: 1.07692rem
    }
}
@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: .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)
    }
}
@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 button {
        font-size: 1.61538rem;
        text-transform: uppercase;
        padding: 1.07692rem;
        background-color: #fff;
        border-radius: 0;
        border: 1px solid #bbb
    }
    #smcc-app button:hover {
        background-color: #eee;
        border-color: #888
    }
    #smcc-app button.large {
        width: 100%
    }
    #smcc-app button.small {
        padding: .53846rem 1.07692rem;
        font-size: 1.07692rem
    }
    #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: 100%
    }
}
@media (min-width: 768px) and (min-width: 1194px) {
    #smcc-app .shades {
        max-width: 100%
    }
}
@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");
        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
    }
    .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
    }
    .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: .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: .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: .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;
        background-color: #fff;
        border-radius: 0;
        border: 1px solid #bbb
    }
    .smcc-popup button:hover {
        background-color: #eee;
        border-color: #888
    }
    .smcc-popup button.large {
        width: 100%
    }
    .smcc-popup button.small {
        padding: .53846rem 1.07692rem;
        font-size: 1.07692rem
    }
    .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: 100%
    }
}
@media (min-width: 768px) and (min-width: 1194px) {
    .smcc-popup .shades {
        max-width: 100%
    }
}
@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");
        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
    }
    .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");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        border: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%)
    }
    .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");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        border: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%)
    }
    .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
    }
}
@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%
    }
}
@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: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
        text-transform: uppercase
    }
    #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: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif
    }
    #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
    }
}
@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
    }
    #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
    }
    #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
    }
    #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
    }
    #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: .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 span {
        font-family: "HelveticaNeueW01-45Ligh", "Helvetica", "Arial", sans-serif;
        text-shadow: 0 0 0
    }
    #smcc-app .product-description br {
        content: " ";
        display: block;
        margin: .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
    }
}
@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
    }
}
@media (min-width: 1024px) and (min-width: 768px) {
    #smcc-app .product-actions a:not(:last-child) {
        margin-right: 1.23077rem
    }
}
@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: .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)
    }
}
@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 button {
        font-size: 1.84615rem;
        text-transform: uppercase;
        padding: 1.23077rem;
        background-color: #fff;
        border-radius: 0;
        border: 1px solid #bbb
    }
    #smcc-app button:hover {
        background-color: #eee;
        border-color: #888
    }
    #smcc-app button.large {
        width: 100%
    }
    #smcc-app button.small {
        padding: .61538rem 1.23077rem;
        font-size: 1.23077rem
    }
    #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: 100%
    }
}
@media (min-width: 1024px) and (min-width: 1194px) {
    #smcc-app .shades {
        max-width: 100%
    }
}
@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");
        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
    }
    .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
    }
    .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: .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: .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: .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;
        background-color: #fff;
        border-radius: 0;
        border: 1px solid #bbb
    }
    .smcc-popup button:hover {
        background-color: #eee;
        border-color: #888
    }
    .smcc-popup button.large {
        width: 100%
    }
    .smcc-popup button.small {
        padding: .61538rem 1.23077rem;
        font-size: 1.23077rem
    }
    .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: 100%
    }
}
@media (min-width: 1024px) and (min-width: 1194px) {
    .smcc-popup .shades {
        max-width: 100%
    }
}
@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");
        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
    }
    .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");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        border: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%)
    }
    .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");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        border: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%)
    }
    .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
    }
}
@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%
    }
}
@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: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif !important;
        text-transform: uppercase
    }
    #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: "HelveticaNeueW01-UltLt", "Helvetica Neue LT W01_25 UltLt", "Helvetica", "Arial", sans-serif
    }
    #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 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
    }
}
@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
    }
    #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
    }
    #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
    }
    #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
    }
    #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: .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 span {
        font-family: "HelveticaNeueW01-45Ligh", "Helvetica", "Arial", sans-serif;
        text-shadow: 0 0 0
    }
    #smcc-app .product-description br {
        content: " ";
        display: block;
        margin: .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
    }
}
@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
    }
}
@media (min-width: 1194px) and (min-width: 768px) {
    #smcc-app .product-actions a:not(:last-child) {
        margin-right: 1.38462rem
    }
}
@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: .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)
    }
}
@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 button {
        font-size: 2.07692rem;
        text-transform: uppercase;
        padding: 1.38462rem;
        background-color: #fff;
        border-radius: 0;
        border: 1px solid #bbb
    }
    #smcc-app button:hover {
        background-color: #eee;
        border-color: #888
    }
    #smcc-app button.large {
        width: 100%
    }
    #smcc-app button.small {
        padding: .69231rem 1.38462rem;
        font-size: 1.38462rem
    }
    #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: 100%
    }
}
@media (min-width: 1194px) and (min-width: 1194px) {
    #smcc-app .shades {
        max-width: 100%
    }
}
@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");
        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
    }
    .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
    }
    .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: .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: .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: .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;
        background-color: #fff;
        border-radius: 0;
        border: 1px solid #bbb
    }
    .smcc-popup button:hover {
        background-color: #eee;
        border-color: #888
    }
    .smcc-popup button.large {
        width: 100%
    }
    .smcc-popup button.small {
        padding: .69231rem 1.38462rem;
        font-size: 1.38462rem
    }
    .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: 100%
    }
}
@media (min-width: 1194px) and (min-width: 1194px) {
    .smcc-popup .shades {
        max-width: 100%
    }
}
@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");
        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
    }
    .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");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        border: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%)
    }
    .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");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
        border: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%)
    }
    .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
    }
}
@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%
    }
}
@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
    }
}