.mode-button {
    position: absolute;
    width: 80%;
    height: 5%;
    background-color: white;
    text-align: center;
    line-height: 200%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgb(0, 0, 0);
    cursor: pointer;
}

.makeup-type-container {
    box-sizing: border-box;
    position: absolute;
    background-color: white;
    width: 100%;
    height: 5%;
    bottom: 15%;
    border-top: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.selection-box {
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 200%;
    cursor: pointer;
}

.gray-hover:hover {
    background-color: gray !important;
}

.swatch-background {
    box-sizing: border-box;
    position: absolute;
    background-color: white;
    border-top: 0;
    width: 100%;
    height: 15%;
    bottom: 0px;
}

.swatch-container {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*height: 60%;*/
    width: 100%;
}

.swatch {
    width: 15%;
    height: 100%;
    cursor: pointer;
}

#cta-container {
    position: absolute;
    width: 13%;
    height: 45%;
    bottom: 35%;
    right: 0;
    margin: 5% 2%;
}

.cta-button {
    position: absolute;
    left: 0;
    margin: 10% 0%;
    width: 100%;
    cursor: pointer;
}

.canvas-container {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 80%;
    overflow: hidden;
}

    .canvas-container > canvas {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.selected-border {
    box-shadow: 0 0 0.6em 0.2em lightgray;
}

.div-dot {
    cursor: pointer;
    user-select: none;
    position: absolute;
    border-radius: 50%;
    width: 3%;
    padding-bottom: 3%;
    background-color: white;
    transform: translate(-50%,-50%);
}

#modalModiface .checkbox {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #333;
    margin-right: 0.3em;
    vertical-align: middle;
    cursor: pointer;
}

.save-cancel {
    position: absolute;
    text-align: center;
    width: 31.5%;
    height: 8%;
    line-height: 280%; font-size:18px;
    font-weight: 400;
    cursor: pointer;
    bottom: 3%; left:3%;
    border-top: 1px solid black; border-right: 1px solid black;
    border-bottom: 1px solid black; letter-spacing:2px;
}

.adjust-container {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.adjust-image {
    position: absolute;
    bottom: -35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#adjust-cta {
    top: 72%;
}

#before-after-cta {
    top: 96%;
}

#checkmark {
    display: none; filter:invert(100%)
}

#adjust-container > #mask {
    user-select: none;
}

#compare-drag {
    position: absolute;
    left: 50%;
    bottom: 30%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: black;
    transform: translateX(-50%);
    cursor: pointer; border: solid 3px rgba(255,255,255,0.9)
}

#compare-slider {
    display: none;
    position: absolute;
    width: 2px;
    height: 100%;
    left: 50%;
    background: black;
}

/*#lipcolor-swatch-container {
    display: none;
}*/

#lipcolor-box {
    background-color: black;
    color: white;
}

#rendered-canvas-container, #rendered-canvas-container-live {
    display: none;
}

#orig-canvas-container, #orig-canvas-container-live {
    display: none;
}

#ui-interface {
    display: none;
}

#loading-overlay {
    display: none;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: 1;
}

#gif-loader {
    display: none;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%); z-index:999; background-color:transparent
}
#gif-loader div {background-color:transparent}


div.close-button-M, #close-button {position:absolute; top:3%; left:3%; padding:8px 18px; font-size:18px; background-color:rgba(255,255,255,0.6) !important; border-radius:100px; letter-spacing:1px; cursor:pointer}
#close-button {padding:10px; font-size:26px}
div.close-button-M {left:auto; top:auto; right:2%; bottom:23.2%}
div:hover.close-button-M, #close-button:hover {background-color:#bb1a5d !important; color:#fff !important}
#live-mode-button {
    top: 36%;
}

#photo-mode-button {
    top: 48%;
}

#live-mode-button, #photo-mode-button {
    border: solid 3px #333; border-radius:5px; padding: 5px 10px; font-size: 24px; letter-spacing:3px; font-weight:400; margin:15px auto; max-width:400px; font-family:'Open Sans', sans-serif; cursor:pointer; text-align:left; height:auto;
}
#live-mode-button img, #photo-mode-button img {display: inline-block; width: 40px; height:auto; margin-right:18px}
#live-mode-button:hover, #photo-mode-button:hover {border-color:#bb1a5d}

#title-text, #title-text2 {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 12%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; font-size: 25px; font-weight:700; letter-spacing:1px; line-height:1.3em;
    font-family:'Open Sans', sans-serif;
    cursor: default;
}
#title-text2 {top:24%; font-size:13px; padding:0 10%; font-weight:400; letter-spacing:1px}
#title-text span {color:#bb1a5d}

#app-container {
    position: relative;
    width: 360px;
    height: 640px;
    overflow: hidden;
}

#barraOpacity {position: absolute; bottom:25%; left:10px; width: 20%; opacity:0.8; background-color:transparent !important}
#barraOpacity div {background-color:transparent; text-shadow:0px 2px 4px rgba(0,0,0,0.7)}
.sliderBlock {left:25%; width:100%}
#valorOpacity {position: absolute; left:4px; top:-5px; font-size:13px; font-weight:700; color:#fff}
.sliderBlock #slider {background-color:#fff; border-radius:100px; border: solid 1px #aaa; height:14px}
.sliderBlock .ui-state-default, .ui-widget-content .ui-state-default {}
.sliderBlock .ui-slider .ui-slider-handle {width: 2.2em; height: 2.2em; top:-.7em; margin-left:-.8em}
.sliderBlock #slider, .sliderBlock .ui-slider .ui-slider-handle, #close-button, .close-button-M, .myAdjust, #adjust-reset, #adjust-cancel, #save-coords {-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.35);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.35);}
.sliderBlock .ui-slider .ui-slider-handle:hover {background-color:#333}

.myAdjust {border-radius:300px;}
.myAdjust:hover {filter:invert(100%);}

@media only screen and (max-width: 600px) {
    #app-container {
        width: 100%;
        max-width: 100%;
        height: calc(100vh - 2px);
        display: inline-block;
        position: relative;
        text-align: center;
    }
    #title-text {font-size:21px}
    div.close-button-M, #close-button {letter-spacing:0px; font-size:14px}
    #close-button {padding:12px 14px; font-size:26px; top:2%}
    .sliderBlock .ui-slider .ui-slider-handle {margin-left:-1.2em}
    #modalModiface.modal.login .close {width:46px; height:46px; font-size:36px; top:0; right:0}
}

#coord-buttons {
    height: 100%;
    width: 100%;
}

#instruction-panel {
    display: none;
    position: absolute;
    height: 100px;
    width: 100%;
    background-color: rgba(255,255,255,0.65); border-bottom: dashed 1px #fff;
}

#mouth-open-chk {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%); font-size:22px;
}

#instruction-text {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 22%; font-size:16px;
}

#adjust-reset {
    display: none;
    background-color: white;
    left: 3%;
    border-left: 1px solid black;
}

#save-coords {
    display: none;
    color: white;
    background-color: #bb1a5d;
    left: 34.5%;
}
.save-cancel:hover {color:#fff !important; background-color:#111 !important}

#adjust-cancel {
    display: none;
    left:66%; background-color:#fff;
}

#cancel-text {
    position: absolute;
    bottom: 15%;
    left: 10%;
}

#mouth-open-text {
    position: relative;
    top: 2.5px;
    cursor: pointer;
}

#error-screen {
    display: none;
    position: absolute;
    background-color: white;
    border: thin solid rgb(0, 0, 0);
    height: 20%;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
}
#mensajePermisosCamara {
    display: none;
    position: absolute;
    background-color: white;
    border: thin solid rgb(0, 0, 0);
    height: 190px;
    width: calc(100% - 60px);
    top: 30px;
    left: 30px;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
}

#error-title {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#error-text {
    position: absolute;
    text-align: center;
    top: 30%;
    left: 50%;
    width: 96%;
    transform: translate(-50%, -50%); font-weight:600; line-height: 1.5em;
}

#try-again-button, #mensajePermisosCamara button {
    position: absolute;
    background-color: #222;
    color: white;
    font-weight:600; letter-spacing:2px;
    width: 90%;
    text-align: center;
    line-height: 300%;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer; border:none !important;
}

.moveable-button {
    top: 72%;
    -webkit-transition: 0.8s;
    transition: top 0.8s;
}
#adjust-left-eye-cta.moveable-button{top:48%}

.adjust-collapse-cta-new-position {
    top: 20%;
}

.adjust-left-eye-cta-new-position {
    top: 33%;
}

.adjust-right-eye-cta-new-position {
    top: 45.5%;
}

.adjust-lips-cta-new-position {
    top: 58%;
}




/*NUESTRO*/

div:hover.close-button-M, .colorContainerModiface:hover img, .mode-button:hover, #compare-drag:hover {-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.35);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.35);}

#adjust-cta, #adjust-collapse-cta {display:none !important}
#modalModiface .modal-content {padding:0px !important}
#modalModiface.modal.login .modal-lg .modal-content div#instruction-text, #modalModiface.modal.login .modal-lg .modal-content div#mouth-open-chk, #modalModiface .container.over-hidden.horizColors {background-color: transparent}
#modalModiface .container.over-hidden.horizColors {margin-left:0px}
#ui-interface {position:static}
#cta-container {background-color:transparent !important; width:50px}
#app-container {width:100%}
#compare-drag {max-width:40px}
#adjust-container img {max-width:inherit}

.colorContainerModiface {text-align:center; cursor:pointer}
.colorContainerModiface img, .colorContainerModiface .myCMod {border: solid 4px #fff; border-radius:100px}
.colorContainerModiface:hover img,.colorContainerModiface:hover .myCMod {border-color:#999}
.colorContainerModiface img.selected, .colorContainerModiface .myCMod.selected {border: solid 4px #333;}
.colorContainerModiface em {font-size:11px; opacity:0.4; line-height:1.2em; font-style:normal; display: inline-block}

.swatch-background .carousel-control-next, .swatch-background .carousel-control-prev {filter: invert(100%); width:6%}
.swatch-background .carousel-inner {padding:0 6%}

.preImages {position: absolute; top:59%; left:20%; width:60%; letter-spacing:1px; text-align: center}
.preImages img {height:auto; display: inline-block; margin: 0.5%; width:19%; border: solid 1px #aaa; border-radius:5px; cursor:pointer}

.closeModiT {display: block; position: absolute; top: 5px; right:0; width:30px; height: 30px; text-align:center; opacity:0.5; font-size:21px}
.closeModiT:hover {opacity:1}

@media only screen and (max-width: 767px) {
    #barraOpacity {left:5px; width:35%}
    div.close-button-M {font-size:13px !important; padding:8px 14px}
    #mensajePermisosCamara button{line-height:1.4em; padding:8px}
    #gif-loader .onlyMobile {display:inline-block !important}
    #adjust-left-eye-cta.moveable-button {top:35%}
    #instruction-panel {height:90px}
    .colorContainerModiface img, .colorContainerModiface .myCMod {width:38px; height:38px; border-radius:100px}
.swiper-modiface .swiper-slide {width:auto}
#modalModiface .modal-dialog {margin:0}
#modalModiface {z-index:999999999999}
#live-mode-button {top:34%}
#live-mode-button, #photo-mode-button {font-size:18px; letter-spacing:1px; margin: 0 auto}
#photo-mode-button {top:45%}
#live-mode-button img, #photo-mode-button img {width:32px;}
.save-cancel {font-size:13px; letter-spacing:0px; line-height:44px; height:44px; bottom: 8%}
#mouth-open-chk {font-size:16px}
#instruction-text {font-size:14px}
#cta-container {bottom:50%; height:35%}
#mouth-open-chk {width:100%}
.preImages {left:6%; width:88%; top:53%}
.preImages img {width:22.5%; margin:0px 2px 10px 2px}
.swatch-background .w100 {margin-left:0px;}
.swatch-background {height:30%}
.mobClick {width: 50px; text-align:center}
.mobClick .swatch {width:40px; height:40px; display: inline-block; border-radius:100px; border: solid 3px #fff; margin-bottom:3px; position: relative}
.mobClick .swatch.selected {border-color:#111}
.mobClick em {font-size:10px; opacity:0.4; display: block; line-height:1.3em}
#title-text {top:8%}
#title-text2 {top:20%}
#barraOpacity {width: 40%; bottom:34.5%}
.sliderBlock {left:40px}
/*.canvas-container {height:70%}*/
.makeup-type-container {bottom:calc(25% + 1px)}
#compare-drag {bottom:40%}
div.close-button-M {bottom:32.2%}
.moveable-button {top:62%}
}
@media only screen and (min-width: 768px) {
    .colorContainerModiface img, .colorContainerModiface .myCMod {height:56px; width:56px; display: block; margin:0 auto 4px auto}
    #gif-loader .onlyDesktop {display:inline-block !important}
    .colorContainerModiface em {margin:0 2px}
}

@media only screen and (min-width: 768px) {
.colorContainerModiface {width:12.5%; margin:0 auto 4px auto}
}
@media only screen and (min-width: 768px) and (max-width: 1091px) {
#modalModiface .modal-dialog {max-width:80% !important}
#modalModiface .modal-body.container {width:100%}
}

@media only screen and (max-width: 340px) {
#title-text {top:6%; font-size:20px}
#title-text, #title-text2 {line-height:1.1em}
}

/*LOADING*/

.noShade {opacity:0.6}
.noShade .myCMod:after {display:block; content:' '; position:absolute; top:0; left:0; bottom:0; right:0; background-image: linear-gradient(45deg, #fff 13.64%, rgba(255,255,255,0) 13.64%, rgba(255,255,255,0) 50%, #fff 50%, #fff 63.64%, rgba(255,255,255,0) 63.64%, rgba(255,255,255,0) 100%);
background-size: 15.56px 15.56px; border-radius:100px; opacity:0.4}