/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.rc-dialog-mask {
    background: rgba(0, 0, 0, 0.8);
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: calc(1000 + 1);
}

.rc-dialog-wrap {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    left: 0;
    overflow: auto;
    outline: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: calc(1000 + 2);
    -webkit-overflow-scrolling: touch;
}

.rc-dialog {
    position: relative;
    width: auto;
    max-height: 100%;
}

.rc-dialog-mask-hidden {
    display: none;
}

.rc-dialog-content {
    background-color: #fff;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    color: #000;
    margin: 30px 0;
    position: relative;
}

.rc-dialog-content + div {
        display: none;
    }

.rc-dialog-body {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.rc-dialog-close {
    border: 0;
    background: #23aae2;
    cursor: pointer;
    height: 42px;
    position: absolute;
    right: -42px;
    top: 10px;
    width: 42px;
}

.rc-dialog-close::before, .rc-dialog-close::after {
        content: '';
        position: absolute;
        top: 21px;
        right: 13px;
        width: 15px;
        height: 1px;
        background-color: #fff;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }

.rc-dialog-close::before {
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
    }

.popup__full___1lPSQ {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.popup__full___1lPSQ .rc-dialog-content { margin: 0; }

.popup__full___1lPSQ .rc-dialog-close {
        right: 20px;
        top: 20px;
    }

.cmsBannerBlock__banner___2E0-d {
        width: 100%;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
    }

        .cmsBannerBlock__banner___2E0-d img {
            width: 100% !important;
            height: auto !important;
            vertical-align: top;
        }
    .cmsBannerBlock__loader___3AR84 {
        margin: 20px auto;
    }

.simple-product {
    display: block !important;
}

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.reviewItem__wrapper___CXlut {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        margin-right: 12px;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #f1f1f1;
        border-radius: 8px;
        height: 220px;
        -webkit-box-shadow: 0 1px 1px 0 rgba(58, 72, 80, 0.2);
                box-shadow: 0 1px 1px 0 rgba(58, 72, 80, 0.2);
    }

.reviewItem__itemHeader___3wxar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        width: 100%;
        margin-bottom: 18px;
    }

.reviewItem__verified___2WkF5 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        font-weight: 300;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        font-size: 14px;
        height: 20px;
    }

.reviewItem__icon___1ST92 {
        color: #fff;
        background-color: #69d969;
        width: 17px;
        height: 17px;
        border-radius: 2px;
        padding: 4px;
        margin-left: 5px;
    }

.reviewItem__title___ZUJ2j {
        font-size: 15px;
        font-weight: 700;
        line-height: 18px;
        color: #0f0f0f;
        margin-bottom: 8px;
    }

.reviewItem__author___2Orrf {
        margin-bottom: 4px;
        color: #89959c;
        font-weight: 300;
        font-size: 12px;
        line-height: 14px;
    }

.reviewItem__description___GJtsG {
        font-size: 13px;
        line-height: 18px;
        color: #89959c;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.reviewsSlider__ssrSliderItemsWrapper___UKeSP {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.reviewsSlider__btn___35n9i {
        position: absolute;
        outline: none;
        cursor: pointer;
    }

.reviewsSlider__btn___35n9i:disabled {
            display: none;
        }

.reviewsSlider__next___2o8RW {
        background-color: inherit;
        left: 25px;
    }

@media (max-width: 1279.9px) {

.reviewsSlider__next___2o8RW {
            left: 5px
    }
        }

.reviewsSlider__prev___36vMs {
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
        right: 35px;
    }

@media (max-width: 1279.9px) {

.reviewsSlider__prev___36vMs {
            right: 15px
    }
        }

.reviewsSlider__arrow___3xNbN {
        position: absolute;
        width: 41px;
        height: 41px;
        right: 0;
        background-color: #fff;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 1px solid #f1f1f1;
        border-radius: 50%;
        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    }

.reviewsSlider__arrowIcon___1y9jJ {
        position: absolute;
        top: 20px;
        left: 4px;
        right: 0;
        margin: auto;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        width: 11px;
        height: 17px;
    }

.reviewsSlider__slider___3v0va {
        min-height: 150px;
        width: 100%;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.slider__slider___wmZ-o {
        height: 100% !important;
        overflow: hidden;
    }

.slider__slide___HDpA3 {
        background: none;
        border: 2px solid transparent;
        cursor: pointer;
        -webkit-transition: border-color 300ms;
        transition: border-color 300ms;
        position: relative;
        padding: 0;
    }

.slider__slide___HDpA3 img {
            display: block;
            width: 100%;
        }

.slider__slide___HDpA3:hover, .slider__slide___HDpA3.slider__active___1jrU1 {
            border-color: #2a2727;
        }

.slider__slide___HDpA3:hover::after, .slider__slide___HDpA3.slider__active___1jrU1::after {
                opacity: 0;
            }

.slider__slide___HDpA3::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: #c8c8c8;
            opacity: .45;
            -webkit-transition: opacity .3s;
            transition: opacity .3s;
        }

.slider__arrow___1edgb {
        display: block;
        border: none;
        width: 100%;
        height: 23px;
        text-indent: -99px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        cursor: pointer;
        background: #f1f1f1 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAALCAYAAACQy8Z9AAABBElEQVQ4T52S0W2DQBBEd8Q14Bb8j3R7TgmhhKQEuwRTgl2CXUJcQlxCcnsS36GFFADSRoeMdSEYUPjeeTPMDWjmy/N8ZYzZxjMAV+/955wGUwc34DsRrYmojrdt2xZVVX1P6SahzByBGwBF0zS1MeYrwufAD6HW2hOAraq+hhAuMZlzbqOq0agWkadHaUehzLwnogOAnff+nIp7sKpeQgi7MfAfqHMupjsR0VFEyjGRtfYFwJuqnsfAv6BLUvQmiXkpIsfU/A5d2tegiu6vhjV10GQ6iyaTgpn5QET7FNxBmfkjbjFOZ8m4hz33SyGiQkSuuL30M4DyP8DeICYGsM6yrPwBJ6SMzbHOBx4AAAAASUVORK5CYII=") no-repeat 50%;
    }

.slider__arrow___1edgb.slider__hide___CXm4t {
        display: none !important;
    }

.slider__arrowPrev___2MHU5 {
        top: 0;
    }

.slider__arrowNext___1nlov {
        bottom: 0;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }

.slider__image___1dh0H {
        width: 48px;
        height: 60px;
    }

@media (min-width: 1280px) and (max-width: 1439.9px) {

.slider__image___1dh0H {
            width: 61px;
            height: 77px
    }
        }

@media (min-width: 1440px) {

.slider__image___1dh0H {
            width: 67px;
            height: 85px
    }
        }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.productPageTryon__container___3mDhq {
        height: 300px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 18px 44px;
        background-color: #f1f1f1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        font-family: Roboto, Arial, sans-serif;
    }

.productPageTryon__left___1cSKN {
        width: 234px;
        color: #2a2727;
        font-size: 14px;
        line-height: 17px;
    }

.productPageTryon__left___1cSKN p {
            color: #424345;
        }

.productPageTryon__uploadTitle___2Mkv2 {
        margin-bottom: 17px;
        font-family: Roboto, Arial, sans-serif;
    }

.productPageTryon__loginText___1OU2H {
        margin-top: 40px;
        font-family: Roboto, Arial, sans-serif;
    }

.productPageTryon__right___2Sktk {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.productPageTryon__sliderContainer___2Xn1A {
        margin-right: 5px;
        height: 100%;
    }

.productPageTryon__upload___2nq5b {
        display: block;
        width: 119px;
        height: 132px;
        padding: 17px 15px;
        border-radius: 15px;
        background-color: #3fabe6;
        color: #fff;
        border: none;
        cursor: pointer;
        font: bold 13px/11px Roboto, Arial, sans-serif;
    }

.productPageTryon__mirrorImage___Iw0Jy {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.productPageTryon__mirrorImageWrapper___1S2Mf {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.productPageTryon__loader___1Jx5Y {
        position: absolute;
        left: 50%;
        margin-left: -12px;
    }

.productPageTryon__login___2LYmb {
        display: inline;
        background: none;
        border: none;
        text-decoration: underline;
        cursor: pointer;
        font-size: 15px;
        color: #000;
        margin-top: 14px;
        font-family: Roboto, Arial, sans-serif;
    }

.productPageTryon__login___2LYmb:hover {
            text-decoration: none;
        }

.productPageTryon__hide___1-C_L {
        display: none;
    }

.productPageTryon__plus___3NfEI {
        display: inline-block;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        border: 3px solid #fff;
        position: relative;
        margin-bottom: 10px;
    }

.productPageTryon__plus___3NfEI::before, .productPageTryon__plus___3NfEI::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            background-color: #fff;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
        }

.productPageTryon__plus___3NfEI::before {
            height: 25px;
            width: 3px;
        }

.productPageTryon__plus___3NfEI::after {
            height: 3px;
            width: 25px;
        }

@media (min-width: 1440px) {
        .productPageTryon__sliderContainer___2Xn1A {
            width: 67px;
        }

        .productPageTryon__mirrorImage___Iw0Jy {
            width: 286px;
            height: 370px;
        }

        .productPageTryon__container___3mDhq {
            height: 369px;
            padding: 20px 58px;
        }

        .productPageTryon__uploadTitle___2Mkv2 {
            margin-top: 25px;
        }
    }

@media (min-width: 1280px) and (max-width: 1439.9px) {
        .productPageTryon__sliderContainer___2Xn1A {
            width: 61px;
        }

        .productPageTryon__mirrorImage___Iw0Jy {
            width: 262px;
            height: 337px;
        }

        .productPageTryon__container___3mDhq {
            height: 337px;
        }
    }

@media (max-width: 1279.9px) {
        .productPageTryon__sliderContainer___2Xn1A {
            width: 48px;
        }

        .productPageTryon__mirrorImage___Iw0Jy {
            width: 218px;
            height: 282px;
        }

        .productPageTryon__container___3mDhq {
            height: 282px;
            padding: 22px 34px;
        }

        .productPageTryon__upload___2nq5b {
            padding: 5px;
            width: 103px;
            height: 115px;
            font-size: 12px;
        }

        .productPageTryon__plus___3NfEI {
            width: 65px;
            height: 65px;
        }

        .productPageTryon__login___2LYmb {
            margin-top: 4px;
        }

        .productPageTryon__left___1cSKN p {
            font-size: 12px;
            line-height: 13px;
        }

        .productPageTryon__loginText___1OU2H {
            margin-top: 25px;
        }
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.plainSlider__arrow___3V1u2 {
        background-color: #fff;
        height: 100%;
        width: 34px;
        z-index: 10;
        opacity: .7;
        cursor: pointer;
        color: transparent;
        font-size: 0;
        border: none;
        outline: none;
    }

.plainSlider__arrow___3V1u2:hover {
            opacity: .9;
        }

.plainSlider__arrow___3V1u2::before {
            border: solid #2d2d2d;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 6px;
            content: '';
        }

.plainSlider__arrowPrev___3dI0h::before {
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
    }

.plainSlider__arrowNext___1XrYC::before {
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.categoryTryOnSlider__wrapSlider____yJR4 {
        margin-left: 17px;
        width: 335px;
    }

@media (min-width: 1280px) and (max-width: 1439.9px) {

.categoryTryOnSlider__wrapSlider____yJR4 {
            width: 440px;
            margin-left: 0
    }
        }

@media (min-width: 1440px) {

.categoryTryOnSlider__wrapSlider____yJR4 {
            width: 520px;
            margin-left: 0
    }
        }

.categoryTryOnSlider__arrow___sFv2x {
        width: 26px;
    }

.categoryTryOnSlider__arrow___sFv2x:focus {
            outline: none;
        }

.categoryTryOnSlider__slide___1YrKu {
        border-radius: 8px;
        border: 2px solid #4d4d4d;
    }

.categoryTryOnSlider__photos___35ki8 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        overflow: hidden;
        height: 181px;
    }

@media (min-width: 1280px) and (max-width: 1439.9px) {

.categoryTryOnSlider__photos___35ki8 {
            height: 154px
    }
        }

@media (max-width: 1279.9px) {

.categoryTryOnSlider__photos___35ki8 {
            height: 116px
    }
        }

.categoryTryOnSlider__photo___2WDb5 {
        background: none;
        line-height: 0;
        overflow: hidden;
        padding: 0;
        outline: 0;
        border: none;
        position: relative;
        cursor: pointer;
        width: 140px;
        height: 181px;
    }

.categoryTryOnSlider__photo___2WDb5:focus {
            outline: none;
        }

.categoryTryOnSlider__photo___2WDb5::before {
            content: ' ';
            background: #c8c8c8;
            opacity: .45;
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 10;
            border-radius: 8px;
        }

.categoryTryOnSlider__photo___2WDb5 img {
            height: 100%;
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            border-radius: 8px;
            border: 2px solid #c8c8c8;
        }

@media (min-width: 1280px) and (max-width: 1439.9px) {

.categoryTryOnSlider__photo___2WDb5 {
            width: 120px;
            height: 154px
    }
        }

@media (max-width: 1279.9px) {

.categoryTryOnSlider__photo___2WDb5 {
            width: 93px;
            height: 116px
    }
        }

.categoryTryOnSlider__photo___2WDb5:hover::before {
                background: none;
                opacity: 0;
            }

.categoryTryOnSlider__photo___2WDb5:hover img {
                border-radius: 8px;
                border: 2px solid #4d4d4d;
            }

.categoryTryOnSlider__photoActive___3w01A::before {
            background: none;
            opacity: 0;
        }

.categoryTryOnSlider__photoActive___3w01A img {
            border-radius: 8px;
            border: 2px solid #4d4d4d;
        }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.categoryPageTryon__wrap___21jvK {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-top: -25px;
        margin-bottom: 20px;
        padding: 5px 0;
        border-bottom: 1px solid #d8d8d8;
    }

.categoryPageTryon__information___2zcZE {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 270px;
                flex: 0 0 270px;
    }

@media (min-width: 1280px) and (max-width: 1439.9px) {

.categoryPageTryon__information___2zcZE {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 335px;
                    flex: 0 0 335px
    }
        }

@media (min-width: 1440px) {

.categoryPageTryon__information___2zcZE {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 360px;
                    flex: 0 0 360px
    }
        }

.categoryPageTryon__title___2hbLk {
        font-size: 15px;
        font-weight: 700;
        line-height: 17px;
        margin-bottom: 10px;
    }

@media (min-width: 1280px) and (max-width: 1439.9px), (min-width: 1440px) {

.categoryPageTryon__title___2hbLk {
            line-height: 30px;
            font-size: 20px;
            margin-bottom: 20px
    }
        }

.categoryPageTryon__logInNotification___A6lNQ {
        font-size: 12px;
        line-height: 17px;
    }

@media (min-width: 1280px) and (max-width: 1439.9px), (min-width: 1440px) {

.categoryPageTryon__logInNotification___A6lNQ {
            font-size: 15px
    }
        }

.categoryPageTryon__loginHere___2cu9D {
        border: none;
        outline: none;
        padding: 0;
        background: none;
        color: #3fabe6;
        font-weight: 700;
        line-height: 15px;
        cursor: pointer;
        font-size: 12px;
        text-decoration: underline;
        display: block;
    }

@media (min-width: 1280px) and (max-width: 1439.9px), (min-width: 1440px) {

.categoryPageTryon__loginHere___2cu9D {
            line-height: 25px;
            font-size: 15px
    }
        }

.categoryPageTryon__uploadButton___2XtEH {
        background: none;
        padding: 0;
        outline: none;
        border: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

.categoryPageTryon__uploadButton___2XtEH span {
            display: block;
            width: 33px;
            height: 32px;
            background-color: #3fabe6;
            border-radius: 50%;
            color: white;
            padding: 8px;
            cursor: pointer;
            margin-bottom: 5px;
        }

@media (min-width: 1280px) and (max-width: 1439.9px), (min-width: 1440px) {

.categoryPageTryon__uploadButton___2XtEH span {
                width: 46px;
                height: 45px;
                padding: 12px
        }
            }

.categoryPageTryon__uploadButton___2XtEH p {
            color: #3fabe6;
            font-weight: 700;
            font-size: 10px;
            cursor: pointer;
        }

@media (min-width: 1280px) and (max-width: 1439.9px) {

.categoryPageTryon__uploadButton___2XtEH p {
                font-size: 12px
        }
            }

@media (min-width: 1440px) {

.categoryPageTryon__uploadButton___2XtEH p {
                font-size: 15px
        }
            }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.container__wrapper___2_8hc {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        height: 100%;
    }

.container__left___V3D06 {
        width: 280px;
    }

.container__left___V3D06 .container__title___31cuz {
            text-align: left;
        }

.container__left___V3D06 .container__content___1o69q {
            height: 440px;
        }

.container__right___3NVVW {
        width: 414px;
    }

.container__title___31cuz {
        height: 50px;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 20px;
        font-family: Roboto, Arial, sans-serif;
        color: #4d4d4d;
        letter-spacing: .075em;
        text-transform: uppercase;
        text-align: center;
    }

.container__content___1o69q {
        height: 440px;
    }

.container__contentFull___2qAXY {
        height: 100%;
    }

.container__canvas___3vLSN {
        height: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        border: 2px solid #79b7e2;
    }

.container__backButton___3RIWU {
        font-size: 16px;
        line-height: 20px;
        font-family: Roboto, Arial, sans-serif;
        color: #4d4d4d;
        letter-spacing: .075em;
        text-transform: uppercase;
        text-align: center;
        background: none;
        border: none;
        cursor: pointer;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.controls__wrap___3Y55a {
        height: 76px;
        overflow: hidden;
        border-top: 2px solid #23aae2;
        position: relative;
        padding: 5px 35px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

.controls__movementControls___rzTzB {
        position: relative;
        margin: 0 auto;
        width: 65px;
        height: 65px;
    }

.controls__moveButton___Ih6H_ {
        position: relative;
        cursor: pointer;
        width: 22px;
        height: 22px;
        font-size: 0;
        line-height: 0;
        border-radius: 50%;
        border: none;
        background: #23aae2;
    }

.controls__moveButton___Ih6H_::before {
            position: absolute;
            left: 5px;
            top: 5px;
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 10px solid #fff;
        }

.controls__moveButton_up___1_XRn {
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -11px;
        }

.controls__moveButton_down___11T3O {
            position: absolute;
            left: 50%;
            margin-left: -11px;
            bottom: 0;
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
        }

.controls__moveButton_left___1zEpu {
            position: absolute;
            top: 50%;
            margin-top: -11px;
            left: 0;
            -webkit-transform: rotate(-90deg);
                    transform: rotate(-90deg);
        }

.controls__moveButton_right___1zsOh {
            position: absolute;
            top: 50%;
            margin-top: -11px;
            right: 0;
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
        }

.controls__control___14-_F {
        text-align: center;
    }

.controls__controlTitle___2QtvT {
        font-size: 14px;
        line-height: 20px;
        font-family: Roboto, Arial, sans-serif;
        color: #101010;
        letter-spacing: .05em;
        white-space: nowrap;
    }

.controls__rail___2Cz2f {
        border-radius: 5px;
        position: relative;
        display: block;
        width: 106px;
        height: 6px;
        margin-top: 10px;
        background: #101010;
    }

.controls__slider___an4YR {
        position: absolute;
        top: -5px;
        width: 15px;
        height: 15px;
        margin-left: -7px;
        background: #23aae2;
        z-index: 20;
        left: 50%;
        border-radius: 50%;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.imageAdjuster__adjustmentArea___2zx6o {
        position: relative;
        height: 360px;
        overflow: hidden;
    }

.imageAdjuster__adjustmentArea___2zx6o::before, .imageAdjuster__adjustmentArea___2zx6o::after {
            content: '';
            position: absolute;
            width: 63px;
            height: 100%;
            background: #000;
            opacity: .2;
            z-index: 10;
        }

.imageAdjuster__adjustmentArea___2zx6o::before {
            left: 0;
        }

.imageAdjuster__adjustmentArea___2zx6o::after {
            right: 0;
        }

.imageAdjuster__captureFrame___bBVhW {
        position: absolute;
        top: 0;
        left: 63px;
        width: 284px;
        height: 360px;
        background-color: #fff;
    }

.imageAdjuster__draggableTrigger___1wplT {
        -ms-touch-action: none;
            touch-action: none;
        -webkit-transform: translate(88px, 106px);
                transform: translate(88px, 106px);
        position: absolute;
        top: 0;
        left: 0;
        width: 32px;
        height: 32px;
        z-index: 20;
        cursor: move;
    }

.imageAdjuster__draggableTrigger___1wplT::before {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
        }

.imageAdjuster__draggableTrigger___1wplT::after {
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
        }

.imageAdjuster__draggableTrigger___1wplT::before, .imageAdjuster__draggableTrigger___1wplT::after {
            background: #f22a42;
            content: '';
            height: 2px;
            left: 0;
            position: absolute;
            top: 15px;
            width: 32px;
            -webkit-transition: -webkit-transform 500ms ease;
            transition: -webkit-transform 500ms ease;
            transition: transform 500ms ease;
            transition: transform 500ms ease, -webkit-transform 500ms ease;
        }

.cropper-container {
    font-size: 0;
    line-height: 0;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    direction: ltr;
    -ms-touch-action: none;
        touch-action: none;
}

.cropper-container img {
        /* Avoid margin top issue (Occur only when margin-top <= -height) */
        display: block;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: none !important;
        width: 100%;
        height: 100%;
        image-orientation: 0deg;
    }

.cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.cropper-wrap-box {
    overflow: hidden;
}

.cropper-drag-box {
    opacity: 0;
    background-color: #fff;
}

.cropper-modal {
    opacity: .5;
    background-color: #000;
}

.cropper-view-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.cropper-dashed {
    position: absolute;
    display: block;
    opacity: .5;
    border: 0 dashed #c8c8c8;
}

.cropper-dashed.dashed-h {
        top: 33.33333%;
        left: 0;
        width: 100%;
        height: 33.33333%;
        border-top-width: 1px;
        border-bottom-width: 1px;
    }

.cropper-dashed.dashed-v {
        top: 0;
        left: 33.33333%;
        width: 33.33333%;
        height: 100%;
        border-right-width: 1px;
        border-left-width: 1px;
    }

.cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    opacity: .75;
}

.cropper-center::before, .cropper-center::after {
        position: absolute;
        display: block;
        content: ' ';
        background-color: #c8c8c8;
    }

.cropper-center::before {
        top: 0;
        left: -3px;
        width: 7px;
        height: 1px;
    }

.cropper-center::after {
        top: -3px;
        left: 0;
        width: 1px;
        height: 7px;
    }

.cropper-face, .cropper-line, .cropper-point {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: .1;
}

.cropper-face {
    top: 0;
    left: 0;
    background-color: #fff;
}

.cropper-line {
    background-color: #3fabe6;
}

.cropper-line.line-e {
        top: 0;
        right: -3px;
        width: 5px;
        cursor: e-resize;
    }

.cropper-line.line-n {
        top: -3px;
        left: 0;
        height: 5px;
        cursor: n-resize;
    }

.cropper-line.line-w {
        top: 0;
        left: -3px;
        width: 5px;
        cursor: w-resize;
    }

.cropper-line.line-s {
        bottom: -3px;
        left: 0;
        height: 5px;
        cursor: s-resize;
    }

.cropper-point {
    width: 5px;
    height: 5px;
    opacity: .75;
    background-color: #3fabe6;
}

.cropper-point.point-e {
        top: 50%;
        right: -3px;
        margin-top: -3px;
        cursor: e-resize;
    }

.cropper-point.point-n {
        top: -3px;
        left: 50%;
        margin-left: -3px;
        cursor: n-resize;
    }

.cropper-point.point-w {
        top: 50%;
        left: -3px;
        margin-top: -3px;
        cursor: w-resize;
    }

.cropper-point.point-s {
        bottom: -3px;
        left: 50%;
        margin-left: -3px;
        cursor: s-resize;
    }

.cropper-point.point-ne {
        top: -3px;
        right: -3px;
        cursor: ne-resize;
    }

.cropper-point.point-nw {
        top: -3px;
        left: -3px;
        cursor: nw-resize;
    }

.cropper-point.point-sw {
        bottom: -3px;
        left: -3px;
        cursor: sw-resize;
    }

.cropper-point.point-se {
        right: -3px;
        bottom: -3px;
        width: 20px;
        height: 20px;
        cursor: se-resize;
        opacity: 1;
    }

@media (min-width: 768px) {

.cropper-point.point-se {
            width: 15px;
            height: 15px
    }
        }

@media (min-width: 992px) {

.cropper-point.point-se {
            width: 10px;
            height: 10px
    }
        }

@media (min-width: 1200px) {

.cropper-point.point-se {
            width: 5px;
            height: 5px;
            opacity: .75
    }
        }

.cropper-point.point-se::before {
        position: absolute;
        right: -50%;
        bottom: -50%;
        display: block;
        width: 200%;
        height: 200%;
        content: ' ';
        opacity: 0;
        background-color: #3fabe6;
    }

.cropper-invisible {
    opacity: 0;
}

.cropper-hide {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
}

.cropper-hidden {
    display: none !important;
}

.cropper-move {
    cursor: move;
}

.cropper-crop {
    cursor: crosshair;
}

.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
    cursor: not-allowed;
}

.icon__lensescenters___1OkVF {
        background: url(https://optimaxweb.glassesusa.com/image/upload/q_auto,fl_sanitize/img/43928ee516a71e517d69486cbd24e7f7.svg) center center no-repeat;
        background-size: 120%;
        width: 76px;
        height: 86px;
    }
    .icon__wotilt___3GhWG {
        background: url(https://optimaxweb.glassesusa.com/image/upload/q_auto,fl_sanitize/img/c3997f2ac0dc130c645bcb3b795e8598.svg) -22px -7px no-repeat;
        background-size: 130%;
        width: 85px;
        height: 86px;
    }
    .icon__pd___3EGg2 {
        background: url(https://optimaxweb.glassesusa.com/image/upload/q_auto,fl_sanitize/img/3ad3ed261613b8443f6f6524a93df8f0.svg) center center no-repeat;
        background-size: 120%;
        width: 76px;
        height: 86px;
    }
    .icon__noglasses___F6FKa {
        background: url(https://optimaxweb.glassesusa.com/image/upload/q_auto,fl_sanitize/img/3cccf373ea6db154003b6b47ad9b9dad.svg) -13px 0 no-repeat;
        background-size: 120%;
        width: 76px;
        height: 86px;
    }
    .icon__straight___a-y-g {
        background: url(https://optimaxweb.glassesusa.com/image/upload/q_auto,fl_sanitize/img/f51b96a30a069dcd852a07f18c912d1e.svg) 0 3px no-repeat;
        background-size: 120%;
        width: 76px;
        height: 86px;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.tip__wrapper___pZ4QZ {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-style: italic;
        font-size: 13px;
        line-height: 18px;
        font-family: Georgia;
        color: #4d4d4d;
        letter-spacing: .03em;
    }

.tip__content___XLxmR {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

.tip__content___XLxmR > *:first-child {
            margin-right: 3px;
        }

.tip__number___Cte-Y {
        counter-increment: tip;
    }

.tip__number___Cte-Y::before {
            content: counter(tip);
            font-style: italic;
            font-size: 35px;
            line-height: 3px;
            font-family: Georgia;
        }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.tips__wrapper___2hJUn {
        height: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 20px;
        background-color: #ddf1fa;
    }

.tips__title___3tYdi {
        margin-bottom: 40px;
        font-size: 26px;
        line-height: 26px;
        font-family: Roboto, Arial, sans-serif;
        color: #101010;
        letter-spacing: .04em;
        text-align: center;
    }

.tips__vertical___3DmPV {
        width: 280px;
    }

.tips__vertical___3DmPV .tips__content___13bAC {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            height: 100%;
        }

.tips__content___13bAC {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.help__wrapper___1RK2W {
        height: 100%;
    }

.help__input___3YtoO {
        display: inline-block;
        width: 80px;
        border-color: #101010;
    }

.help__hint___1xpz5 {
        display: inline-block;
        color: #fff;
        background-color: #101010;
        width: 19px;
        height: 19px;
        border-radius: 15px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        cursor: pointer;
        margin-left: 2px;
    }

.help__resetButton___23xNy {
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: end;
        font-size: 14px;
        line-height: 20px;
        font-family: Roboto, Arial, sans-serif;
        color: #101010;
        letter-spacing: .1em;
        background: none;
        border: none;
    }

.help__resetButton___23xNy:hover {
            color: #23aae2;
        }

.help__resetButton___23xNy:hover .help__reset___2-scg {
                border: 1px solid #23aae2;
                border-right-color: transparent;
            }

.help__resetButton___23xNy:hover .help__reset___2-scg::after {
                    border: 3px solid transparent;
                    border-top: 4px solid #23aae2;
                }

.help__reset___2-scg {
        width: 15px;
        height: 15px;
        display: inline-block;
        position: relative;
        border: 1px solid #101010;
        border-right-color: transparent;
        border-radius: 100%;
        -webkit-transform: rotate(190deg);
                transform: rotate(190deg);
    }

.help__reset___2-scg::after {
            content: "";
            position: absolute;
            border: 3px solid transparent;
            border-top: 4px solid #101010;
            top: 7px;
            left: 11px;
            -webkit-transform: rotate(200deg);
                    transform: rotate(200deg);
        }

.help__red___3Nq7k {
        color: #f22a42;
    }

.help__tooltipOverlay___3j0Gz {
        text-align: left;
        color: #4d4d4d;
        font-size: 13px;
        line-height: 18px;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.adjust__wrapper___31-XI {
        height: 100%;
        position: relative;
        z-index: 20;
        top: -510px;
        background: #fff;
    }

.adjust__title___19Oci {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

.adjust__retakeButton___DyDQ2 {
        width: 140px;
        padding-left: 40px;
        border: 1px solid #000;
        color: #000;
        font-size: 16px;
        line-height: 20px;
        font-family: Roboto, Arial, sans-serif;
        letter-spacing: .05em;
        text-transform: uppercase;
        background: #fff url(https://optimaxweb.glassesusa.com/image/upload/f_auto,q_auto/img/b9d17a5385194e3ee882c489f28c019a.png) 13px 10px no-repeat;
        position: relative;
    }

.adjust__retakeButton___DyDQ2:hover {
            color: #fff;
            background: #000 url(https://optimaxweb.glassesusa.com/image/upload/f_auto,q_auto/img/53d92b141ad4b67391294d2a810aa56c.png) 13px 10px no-repeat;
        }

.adjust__tryOnButton___2oVwr {
        color: #fff;
        font-size: 16px;
        line-height: 20px;
        font-family: Roboto, Arial, sans-serif;
        letter-spacing: .05em;
        text-transform: uppercase;
        background-color: #23aae2;
        width: 250px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.adjust__tryOnButton___2oVwr:hover {
            background-color: #4c6c9c;
        }

.adjust__loader___3xZz8::before, .adjust__loader___3xZz8::after {
            background-color: #fff;
        }

.adjust__tryOnFileInputLabel___24aFk {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        cursor: pointer;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.upload__wrapper___klpiY {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        position: relative;
        z-index: 10;
        background: #fff;
    }

.upload__title___NBJIl {
        font-size: 40px;
        line-height: 40px;
        font-weight: 400;
        font-family: Roboto, Arial, sans-serif;
        color: #101010;
        letter-spacing: .025em;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 40px;
    }

.upload__content___2xMu7 {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

.upload__buttonsSet___2TNka {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.upload__chooseStepButton___2elDD {
        position: relative;
        color: #fff;
        font-size: 16px;
        line-height: 20px;
        font-family: Roboto, Arial, sans-serif;
        letter-spacing: .05em;
        text-transform: uppercase;
        background-color: #23aae2;
        width: 160px;
        height: 135px;
        padding-top: 80px;
        margin: 0 15px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

.upload__chooseStepButton_facebook___i2zl3 {
            background: #23aae2 url(https://optimaxweb.glassesusa.com/image/upload/f_auto,q_auto/img/a5aa76d39c8d841d40f3437fdda7a619.png) center 20px no-repeat;
        }

.upload__chooseStepButton_file___r_8HR {
            text-align: center;
            background: #23aae2 url(https://optimaxweb.glassesusa.com/image/upload/f_auto,q_auto/img/a5e7ef3fa1a2d8ad0073ddf4d4a138d6.png) center 20px no-repeat;
        }

.upload__chooseStepButton_file___r_8HR input[type=file] {
            cursor: pointer;
        }

.upload__chooseStepButton_webcam___3rkrl {
            background: #23aae2 url(https://optimaxweb.glassesusa.com/image/upload/f_auto,q_auto/img/47e24bd76728240f3c0fd9eb83d22c94.png) center 20px no-repeat;
        }

.upload__chooseStepButton___2elDD:hover {
            background-color: #4c6c9c;
        }

.upload__uploadFileInput___2lGX6 {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
        opacity: 0;
    }

.upload__uploadError___33Fzc {
        display: inline-block;
        width: 100%;
        line-height: 50px;
        text-align: center;
        color: #ff4902;
        font-size: 16px;
    }

.upload__straightTip___3xg_U span, .upload__noglassesTip___pKfAa span, .upload__wotiltTip___2KPEm span {
            margin-top: 25px;
        }

.upload__straightTip___3xg_U {
        width: 230px;
    }

.upload__noglassesTip___pKfAa {
        width: 200px;
    }

.upload__wotiltTip___2KPEm {
        width: 255px;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.canvas__buttonContainer___6WcUL {
        padding: 15px 0;
    }

.canvas__button___Yb5uO {
        display: block;
        margin: 0 auto;
        width: 190px;
        background-color: #23aae2;
        height: auto;
        padding: 8px 12px;
        cursor: pointer;
        font-size: 16px;
        line-height: 32px;
        color: #fff;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

.canvas__overlay___24xWa {
        width: 284px;
        height: 366px;
        background-color: #fff;
        border: 2px dashed #d8d8d8;
        margin: 0 auto;
        overflow: hidden;
    }

.canvas__overlay___24xWa video {
            position: relative;
            margin-left: -252px;
            left: 50%;
        }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.webcam__wrapper___2SNJt {
        height: 100%;
        position: relative;
        z-index: 20;
        top: -510px;
        background: #fff;
    }

.webcam__tip___wTHAO {
        position: absolute;
        top: 10px;
        left: 90px;
        font: italic 13px/18px Georgia;
        color: #4d4d4d;
        letter-spacing: .03em;
    }

.webcam__wooglass___EVx0r {
        padding-left: 15px;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.album__mwwStep___377Np {
    height: 0;
    overflow: hidden;
    position: relative;
}

.album__mwwStep___377Np.album__active____Kk7O {
        height: 100%;
    }

.album__columnWizardMain___1j2Fp {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    float: right;
    height: 100%;
    width: 414px;
}

.album__columnWizardMain___1j2Fp h2 {
        margin: 10px 0 33px;
    }

.album__itemTitle___1OtLs {
    color: #000;
}

.album__itemPhoto___1Yb9r {
    background-color: #fff;
    cursor: pointer;
    height: 126px;
    left: 6px;
    margin: 2px 2px 20px;
    overflow: hidden;
    position: relative;
    top: 6px;
    width: 126px;
}

.album__itemPhoto___1Yb9r img {
        max-width: 100%;
    }

.album__fbAlbumItem___gB1iP {
    background: url(https://optimaxweb.glassesusa.com/image/upload/f_auto,q_auto/img/57e0186278323e149420f9602b452c1e.png) no-repeat;
    display: block;
    float: left;
    height: 185px;
    margin: 0 10px 10px 12px;
    position: relative;
    width: 140px;
}

.album__fbContainer___WLQjI {
    height: 413px;
    overflow-y: scroll;
    padding: 12px 0;
}

.album__fbPhotoItem___1z3ql {
    border: 1px solid #eae9e5;
    cursor: pointer;
    display: block;
    float: left;
    margin: 0 10px 10px;
    padding: 5px;
    position: relative;
}

.album__fbPhotoItem___1z3ql .album__itemPhoto___1Yb9r {
        height: 130px;
        overflow: hidden;
        width: 130px;
    }

.album__fbPhotoItem___1z3ql .album__itemPhoto___1Yb9r img {
            max-width: 100%;
        }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.facebook__wrapper___3WtNP {
        height: 100%;
        position: relative;
        z-index: 20;
        top: -510px;
        background: #fff;
    }

.facebook__title___3MPIr {
        text-transform: uppercase;
    }

.facebook__tip___2FGV- {
        position: absolute;
        top: 10px;
        left: 90px;
        font: italic 13px/18px Georgia;
        color: #4d4d4d;
        letter-spacing: .03em;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.popup__mirrorWizard___pTOxH {
        top: 50%;
        left: 50%;
        width: 820px;
        background-color: #fff;
        border: 1px solid #23aae2;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

.popup__mwwWrapper___NYcMM {
        position: relative;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding: 45px;
        height: 600px;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.breadcrumbs__path___2zeey {
        padding: 17px 0;
        display: inline-block;
    }

.breadcrumbs__bannerPosition___svQ4T {
        padding: 3px 9px;
        background-color: rgba(0, 0, 0, 0.4);
    }

.breadcrumbs__bannerPosition___svQ4T .breadcrumbs__item___3-5F0, .breadcrumbs__bannerPosition___svQ4T .breadcrumbs__link___vOlbT {
            color: #fff;
            font-size: 12px;
            line-height: 13px;
            letter-spacing: .17px;
        }

.breadcrumbs__bannerPosition___svQ4T .breadcrumbs__item___3-5F0::after {
            color: #fff;
            padding: 0 4px;
            letter-spacing: .17px;
        }

@media (min-width: 1280px) and (max-width: 1439.9px), (min-width: 1440px) {

.breadcrumbs__bannerPosition___svQ4T {
            padding: 3px 12px
    }

            .breadcrumbs__bannerPosition___svQ4T .breadcrumbs__item___3-5F0, .breadcrumbs__bannerPosition___svQ4T .breadcrumbs__link___vOlbT {
                font-size: 14px;
                line-height: 16px;
                letter-spacing: .2px;
            }

            .breadcrumbs__bannerPosition___svQ4T .breadcrumbs__item___3-5F0::after {
                letter-spacing: .2px;
            }
        }

.breadcrumbs__item___3-5F0, .breadcrumbs__link___vOlbT {
        color: #747d83;
        font: 12px/12px Roboto, Arial, sans-serif;
    }

.breadcrumbs__item___3-5F0::after {
        content: '\2022';
        color: #747d83;
        display: inline;
        line-height: 12px;
        padding: 0 6px;
    }

.breadcrumbs__itemArrow___3pw1P::after {
            content: '\221F';
            display: inline-block;
            -webkit-transform: rotate(225deg) scale(.9);
                    transform: rotate(225deg) scale(.9);
        }

.breadcrumbs__item___3-5F0:nth-last-child(2)::after {
            color: #0f0f0f;
        }

.breadcrumbs__item___3-5F0:last-child::after {
            content: none;
        }

.breadcrumbs__itemArrow___3pw1P:last-child {
        color: #0f0f0f;
    }

.breadcrumbs__link___vOlbT:hover {
        text-decoration: underline;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.carousel__btn___1HuKn {
        z-index: 20;
        position: absolute;
        top: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        height: 30px;
        width: 20px;
        border: none;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
    }

.carousel__btn___1HuKn .carousel__arrow___1U-GH path {
            -webkit-transition: stroke .3s;
            transition: stroke .3s;
            stroke: #89959c;
        }

.carousel__btn___1HuKn:not([disabled]) {
            cursor: pointer;
        }

.carousel__btn___1HuKn:disabled {
            opacity: .45;
        }

.carousel__btn___1HuKn:focus {
            outline: none;
        }

.carousel__btn___1HuKn:not([disabled]):focus .carousel__arrow___1U-GH path, .carousel__btn___1HuKn:not([disabled]):hover .carousel__arrow___1U-GH path {
            stroke: #6b6b6b;
        }

.carousel__prev___2jcJ8 {
        right: 0;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
    }

.carousel__next___3mjx6 {
        left: 0;
    }

.carousel__list___2F7y5 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-bottom: 20px;
    }

.carousel__item___3IiBG {
        margin: 0 5px;
    }

.carousel__dot___21vpl {
        width: 9px;
        height: 9px;
        padding: 0;
        border-radius: 50%;
        background-color: rgba(247, 248, 249, 0.55);
        border: 0;
        outline: none;
        cursor: pointer;
    }

.carousel__dot___21vpl.carousel__active___1N4nC {
            background-color: #f7f8f9;
        }

.carousel__arrow___1U-GH {
        width: 65%;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.expBreadCrumbs__path___3IM77 {
        padding-top: 12px;
        padding-bottom: 5px;
        display: inline-block;
    }

.expBreadCrumbs__bannerPosition___DocT6 {
        padding: 3px 9px;
        background-color: rgba(0, 0, 0, 0.4);
    }

.expBreadCrumbs__bannerPosition___DocT6 .expBreadCrumbs__item___3uRQ1, .expBreadCrumbs__bannerPosition___DocT6 .expBreadCrumbs__link___2B1S6 {
            color: #fff;
            font-size: 12px;
            line-height: 13px;
            letter-spacing: .17px;
        }

.expBreadCrumbs__bannerPosition___DocT6 .expBreadCrumbs__item___3uRQ1::after {
            color: #fff;
            padding: 0 4px;
            letter-spacing: .17px;
        }

@media (min-width: 1280px) and (max-width: 1439.9px), (min-width: 1440px) {

.expBreadCrumbs__bannerPosition___DocT6 {
            padding: 3px 12px
    }

            .expBreadCrumbs__bannerPosition___DocT6 .expBreadCrumbs__item___3uRQ1, .expBreadCrumbs__bannerPosition___DocT6 .expBreadCrumbs__link___2B1S6 {
                font-size: 14px;
                line-height: 16px;
                letter-spacing: .2px;
            }

            .expBreadCrumbs__bannerPosition___DocT6 .expBreadCrumbs__item___3uRQ1::after {
                letter-spacing: .2px;
            }
        }

.expBreadCrumbs__item___3uRQ1, .expBreadCrumbs__link___2B1S6 {
        color: #5b6971;
        font: 12px/12px Roboto, Arial, sans-serif;
    }

.expBreadCrumbs__item___3uRQ1::after {
        content: '\2022';
        color: #747d83;
        display: inline;
        line-height: 12px;
        padding: 0 6px;
    }

.expBreadCrumbs__itemArrow___3qugD::after {
            content: '\002F';
            display: inline-block;
            color: #5b6971;
        }

.expBreadCrumbs__item___3uRQ1:nth-last-child(2)::after {
            color: #89959c;
        }

.expBreadCrumbs__item___3uRQ1:last-child::after {
            content: none;
        }

.expBreadCrumbs__itemArrow___3qugD:last-child {
        color: #89959c;
    }

.expBreadCrumbs__link___2B1S6:hover {
        text-decoration: underline;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.questionMark__mark___F2x87 {
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        font-size: 11px;
        color: #fff;
        vertical-align: middle;
    }

.questionMark__mark___F2x87 .questionMark__helpIcon___YxC7D {
            width: 100%;
            height: 100%;
        }

.questionMark__white___1P3O5 {
        background-color: #fff;
    }

.questionMark__white___1P3O5 path {
            fill: #3fabe6;
        }

.questionMark__blue___3vDUj {
        background-color: #3fabe6;
    }

.questionMark__blue___3vDUj path {
            fill: #fff;
        }

.questionMark__grey___1CbsN path {
            fill: #aaa;
        }

.questionMark__green___20mvB path {
            fill: #00b16a;
        }

.questionMark__transparent-grey___129jP {
        background-color: transparent;
    }

.questionMark__transparent-grey___129jP path {
            fill: #b0bdc5;
        }

/* sizes */

.questionMark__small___Buu9L {
        height: 16px;
        width: 16px;
        line-height: 16px;
    }

.questionMark__medium___1HNiY {
        height: 18px;
        width: 18px;
        line-height: 16px;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.tooltipMessage__wrapper___8BoUz .tooltipMessage__textTooltip___1_o4l {
            color: #595959;
            font-size: 12px !important; /* b/c CMS content broken styles */
        }

.tooltipMessage__wrapper___8BoUz .tooltipMessage__titleTooltip___2dx04 {
            font-size: 16px !important; /* b/c CMS content broken styles */
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 8px;
        }

.tooltipMessage__buttonsTooltip___VxrtP {
        margin-top: 20px;
        white-space: nowrap;
    }

.tooltipMessage__btnTooltip___2SOOK {
        border: 2px solid #95f8c1;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        color: #3fabe6;
        cursor: pointer;
        display: inline-block;
        font-size: 9px;
        font-weight: 700;
        line-height: 21px;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-align: center;
        width: 85px;
    }

.tooltipMessage__btnTooltip___2SOOK:hover {
            background-color: #efefef;
        }

.tooltipMessage__btnTooltip___2SOOK:first-child {
            background-color: #95f8c1;
            color: #fff;
            margin-right: 7px;
        }

.tooltipMessage__btnTooltip___2SOOK:first-child:hover {
                background: #23aae2;
                border-color: #23aae2;
            }

.tooltipMessage__descriptionTooltip___3jQq_ {
        color: #595959;
        font-size: 16px;
        line-height: 21px;
        white-space: nowrap;
    }

.tooltipMessage__btnSign___fIrBb {
        background-color: #95f8c1;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .18em;
        line-height: 30px;
        margin: 0 auto;
        text-transform: uppercase;
        text-align: center;
        width: 100px;
    }

.tooltipMessage__btnSign___fIrBb:hover {
            background: #23aae2;
        }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.myPicksIcon__myPicksWrapper___1aOX5 {
    height: 100%;
    width: 100%;
}

.myPicksIcon__myPicksWrapper___1aOX5.myPicksIcon__active___1N546 {
        display: block;
    }

.myPicksIcon__myPicksWrapper___1aOX5 .myPicksIcon__wrapHeart___HUm20 {
        height: 100%;
        width: 100%;
        color: #23aae2;
        cursor: pointer;
        font-size: 0;
    }

.myPicksIcon__myPicksWrapper___1aOX5 .myPicksIcon__wrapHeart___HUm20 svg {
            fill: transparent;
        }

.myPicksIcon__myPicksWrapper___1aOX5 .myPicksIcon__wrapHeart___HUm20.myPicksIcon__active___1N546 svg, .myPicksIcon__myPicksWrapper___1aOX5 .myPicksIcon__wrapHeart___HUm20:hover svg {
                fill: #23aae2;
                stroke: #23aae2;
            }

.myPicksIcon__myPicksWrapper___1aOX5 .myPicksIcon__expWrapHeart___JeksC {
        height: 44px;
        width: 44px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.myPicksIcon__myPicksWrapper___1aOX5 .myPicksIcon__expWrapHeart___JeksC svg {
            stroke: #89959c;
        }

.myPicksIcon__myPicksWrapper___1aOX5 .myPicksIcon__expWrapHeart___JeksC:hover {
            border-radius: 100%;
            background-color: #f1f3f4;
        }

.myPicksIcon__myPicksWrapper___1aOX5 .myPicksIcon__expWrapHeart___JeksC:hover svg {
                stroke: #5b6971;
                fill: #f1f3f4;
            }

.myPicksIcon__myPicksWrapper___1aOX5 svg.myPicksIcon__expActive___sDpQ_ {
        -webkit-transition: all 0s;
        transition: all 0s;
        -webkit-animation: myPicksIcon__iconAni___294m- .3s ease-in-out;
                animation: myPicksIcon__iconAni___294m- .3s ease-in-out;
        fill: #23aae2;
        stroke: #23aae2;
    }

@-webkit-keyframes myPicksIcon__iconAni___294m- {
        0% { -webkit-transform: scale(1); transform: scale(1); }
        50% { -webkit-transform: scale(1.15); transform: scale(1.15); }
        100% { -webkit-transform: scale(1); transform: scale(1); }
    }

@keyframes myPicksIcon__iconAni___294m- {
        0% { -webkit-transform: scale(1); transform: scale(1); }
        50% { -webkit-transform: scale(1.15); transform: scale(1.15); }
        100% { -webkit-transform: scale(1); transform: scale(1); }
    }

.myPicksIcon__tContent___3T2jb {
    padding: 10px;
    width: auto;
}

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.button__button___eHhl2 {
        font-family: Roboto, Arial, sans-serif;
        border: none;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 700;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        text-align: center;
        line-height: 1;
    }

.button__button___eHhl2:focus {
            outline: none;
        }

.button__children___3rh0h {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.button__color-primary___1hu-h {
        color: #fff;
        background: #ff6c00;
        border-color: #ff6c00;
    }

.button__color-primary___1hu-h:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover {
        background: #e36000;
    }

.button__color-primary___1hu-h:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover.button__transparent___3Qis-:hover {
            color: #e36000;
            background: rgba(0, 0, 0, 0);
        }

.button__color-primary___1hu-h.button__bordered___1zQPU, .button__color-primary___1hu-h.button__transparent___3Qis- {
        color: #ff6c00;
        background: rgba(0, 0, 0, 0);
    }

.button__color-primary___1hu-h.button__bordered___1zQPU:not(.button__disabled___3E6Ye):hover, .button__color-primary___1hu-h.button__bordered___1zQPU.button__loading___2DcTI {
        background: #ff6c00;
        border-color: #ff6c00;
        color: #fff;
    }

.button__color-secondary___2nqdF {
        color: #fff;
        background: #2196f3;
        border-color: #2196f3;
    }

.button__color-secondary___2nqdF:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover {
        background: #1c86da;
    }

.button__color-secondary___2nqdF:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover.button__transparent___3Qis-:hover {
            color: #1c86da;
            background: rgba(0, 0, 0, 0);
        }

.button__color-secondary___2nqdF.button__bordered___1zQPU, .button__color-secondary___2nqdF.button__transparent___3Qis- {
        color: #2196f3;
        background: rgba(0, 0, 0, 0);
    }

.button__color-secondary___2nqdF.button__bordered___1zQPU:not(.button__disabled___3E6Ye):hover, .button__color-secondary___2nqdF.button__bordered___1zQPU.button__loading___2DcTI {
        background: #2196f3;
        border-color: #2196f3;
        color: #fff;
    }

.button__color-dark___3OEmi {
        color: #fff;
        background: #4d4d4d;
        border-color: #4d4d4d;
    }

.button__color-dark___3OEmi:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover {
        background: #0f0f0f;
    }

.button__color-dark___3OEmi:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover.button__transparent___3Qis-:hover {
            color: #0f0f0f;
            background: rgba(0, 0, 0, 0);
        }

.button__color-dark___3OEmi.button__bordered___1zQPU, .button__color-dark___3OEmi.button__transparent___3Qis- {
        color: #4d4d4d;
        background: rgba(0, 0, 0, 0);
    }

.button__color-dark___3OEmi.button__bordered___1zQPU:not(.button__disabled___3E6Ye):hover, .button__color-dark___3OEmi.button__bordered___1zQPU.button__loading___2DcTI {
        background: #4d4d4d;
        border-color: #4d4d4d;
        color: #fff;
    }

.button__color-light___6hBeO {
        color: #4d4d4d;
        background: #f1f1f1;
        border-color: #f1f1f1;
    }

.button__color-light___6hBeO:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover {
        background: #c8c8c8;
    }

.button__color-light___6hBeO:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover.button__transparent___3Qis-:hover {
            color: #c8c8c8;
            background: rgba(0, 0, 0, 0);
        }

.button__color-light___6hBeO.button__bordered___1zQPU, .button__color-light___6hBeO.button__transparent___3Qis- {
        color: #f1f1f1;
        background: rgba(0, 0, 0, 0);
    }

.button__color-light___6hBeO.button__bordered___1zQPU:not(.button__disabled___3E6Ye):hover, .button__color-light___6hBeO.button__bordered___1zQPU.button__loading___2DcTI {
        background: #f1f1f1;
        border-color: #f1f1f1;
        color: #4d4d4d;
    }

.button__size-tiny___2TepP {
        padding: 5px 10px;
        font-size: 9px;
        height: 21px;
    }

.button__size-tiny___2TepP.button__bordered___1zQPU {
            border-width: 1px;
        }

.button__size-small___ManKL {
        padding: 6px 11px;
        font-size: 14px;
        height: 31px;
    }

.button__size-medium___1Z7cD {
        padding: 10px 17px;
        font-size: 16px;
        height: 40px;
    }

.button__size-big___1ejwD {
        font-size: 18px;
        height: 48px;
    }

.button__size-large___1SlMG {
        font-size: 20px;
        height: 55px;
    }

.button__bordered___1zQPU {
        border: 2px solid;
    }

.button__disabled___3E6Ye {
        cursor: not-allowed;

        color: #c8c8c8;

        background: #d8d8d8;

        border-color: #d8d8d8;
    }

.button__disabled___3E6Ye:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover {
        background: #d8d8d8;
    }

.button__disabled___3E6Ye:not(.button__disabled___3E6Ye):not(.button__loading___2DcTI):hover.button__transparent___3Qis-:hover {
            color: #d8d8d8;
            background: rgba(0, 0, 0, 0);
        }

.button__disabled___3E6Ye.button__bordered___1zQPU, .button__disabled___3E6Ye.button__transparent___3Qis- {
        color: #d8d8d8;
        background: rgba(0, 0, 0, 0);
    }

.button__disabled___3E6Ye.button__bordered___1zQPU:not(.button__disabled___3E6Ye):hover, .button__disabled___3E6Ye.button__bordered___1zQPU.button__loading___2DcTI {
        background: #d8d8d8;
        border-color: #d8d8d8;
        color: #c8c8c8;
    }

.button__loading___2DcTI {
        position: relative;
        cursor: wait;
    }

.button__loading___2DcTI .button__children___3rh0h {
            opacity: 0;
        }

.button__loading___2DcTI .button__loader___36KBW {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
        }

.button__children___3rh0h, .button__loader___36KBW {
        cursor: inherit;
    }

.button__full___1fsqK {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
    }

.button__oval___3Rdp5 {
        border-radius: 19px;
        font-family: Roboto, Arial, sans-serif;
    }

.button__oval___3Rdp5.button__bordered___1zQPU {
            border: 1px solid;
        }

.button__oval___3Rdp5.button__size-medium___1Z7cD {
            padding: 10px 30px;
        }

.button__oval___3Rdp5.button__size-large___1SlMG {
            border-radius: 25px;
        }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.sizeNotification__container___3Sj09 {
        margin-top: 6px;
        line-height: 21px;
        color: #5b6971;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.sizeNotification__icon___3fyf6 {
        margin-right: 6.5px;
    }

.sizeNotification__text___1yhsp {
        font-size: 14px;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.myFitFilter__container___2ASxs {
        font-family: Roboto, Arial, sans-serif;
        color: #3a4850;
        background: #f7f8f9;
        border: 1px solid #e7ebed;
        border-radius: 4px;
        margin-bottom: 36px;
        padding: 12px;
    }

.myFitFilter__active___11oq6 {
        color: #2196f3;
        background: #f4f9ff;
    }

.myFitFilter__headerContainer___2K_tE {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        height: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

.myFitFilter__header___1Lwkw {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

.myFitFilter__filterName___PlZpH {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.myFitFilter__icon___3L_Qq {
        width: 27px;
        height: 11px;
        margin-left: 7px;
    }

.myFitFilter__divider___rcIag {
        background: #89959c;
        margin-top: 9px;
        opacity: .1;
        height: 1px;
    }

.myFitFilter__content___Vjxi5 {
        font-size: 14px;
        line-height: 21px;
        color: #3a4850;
        margin-top: 10px;
    }

/**
 * z-index
 *
 * Please, if you add or change something in this list,
 * add or change the same:
 * GlassesUSA-Desktop/css/cssVariables.scss
 *
 */

/**
 * COLORS
 *
 * How to get color name:
 * use this service http://chir.ag/projects/name-that-color/
 *
 * How to create variable:
 * --color-[your color name] like these: --color-white, --color-black etc...
 */

:root {
    /* Fonts family */

    /* Font weights */

    /* Common colors */

    /* Primary colors */

    /**
    colors that are not in the dsm
     */

    /* Marketing colors */

    /* Logo colors */

    /* Deprecated colors */

    /* Images path */

    /* UHC colors */

    /* Status colors */
}

/* If you want edit this variables don't forget about variables for JS "./modules/constants/mediaQueries.js" */

.recommendationsWrapper__itemsWrapper___1vPuM {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }


/*# sourceMappingURL=3488.73fc5ad93eeac0d461c9.css.map*/