/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/************ WIDGET LAYERS **************/

.strpstr-container{
    position:relative;
}

.strpstr-inner-container, .strpstr-inner-overlap-img-sf{
    width:100%;
    height:100%;
    position:relative;
}

.strpstr-dummy-container{
    display:none;
    min-height:40px;
}

.strpstr-single-frame-base{
    position:relative;
    width:100%;
    height:100%;
    display: flex;
}

.strpstr-custom-pos{

}

.strpstr-border-single-frame, .strpstr-border-overlap-single-frame{
    position:absolute;
}

.strpstr-artframe, .strpstr-overlap-artframe{
    height:100%;
}

.spacing-border-image{
    display:none;
}

.strpstr-reading-hidden{
    display:none;
}

.elementor-editor-active .strpstr-reading-hidden{
    display:block;
}

/************ MAIN IMAGE SINGLE FRAME **************/

.strpstr-w-group-sf{
    position:relative;
}

.strpstr-w-main-image-single-frame{
    position:relative;
    z-index:0;
    line-height:0;
}

.strpstr-main-image-single-frame{
    width:100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index:1;
}


.strpstr-solid-border-1-image-sf{
    background-color:#fff;
    width:calc(100% + 12px);
    height:calc(100% + 8px);
    position:absolute;
    z-index:-1;
    top:-2px;
    left:-4px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    display:none;
}

.strpstr-solid-border-2-image-sf{
    background-color:#000000;
    width:calc(100% + 20px);
    height:calc(100% + 13px);
    position:absolute;
    z-index:-2;
    top:-4px;
    left:-8px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    display:none;
}

.strpstr-flipX{
    -webkit-transform: scaleX(-1)!important;
    transform: scaleX(-1)!important;
}

.strpstr-flipY{
    -webkit-transform: scaleY(-1)!important;
    transform: scaleY(-1)!important;
}


/************ OVERLAP IMAGE SINGLE FRAME **************/

.strpstr-w-overlap-image-single-frame{
    position:absolute;
    z-index:0;
    line-height:0;
}

.strpstr-overlap-image-single-frame{
    width:100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    z-index:1;
}


.strpstr-overlap-solid-border-1-image-sf{
    background-color:#fff;
    width:calc(100% + 8px);
    height:calc(100% + 8px);
    position:absolute;
    z-index:-1;
    top:-4px;
    left:-4px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    display:none;
}

.strpstr-overlap-solid-border-2-image-sf{
    background-color:#000000;
    width:calc(100% + 12px);
    height:calc(100% + 12px);
    position:absolute;
    z-index:-2;
    top:-6px;
    left:-6px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    display:none;
}

/************ BUBBLES **************/

.strpstr-bubble-wrap, .strpstr-w-bubble-text, .strpstr-extra-wrap{
    position:absolute;
}

.elementor-editor-active .strpstr-bubble-wrap, .elementor-editor-active .strpstr-extra-wrap{
    display:none;
}

.strpstr-bubble-wrap,.strpstr-extra-wrap{
    border:0px;
}


.strpstr-w-bubble-text{
    z-index:2;
}

.w-strpstr-single-tail{
    z-index: 1;
}

.strpstr-w-bubble-text{

}


.strpstr-bubbleSVG{
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    z-index:0;
}


.strpstr-polyborder{
    display:inline-block;
    width:20%;
    margin:5% auto;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding:1em;
    line-height:1.5em;
    background:hsla(67, 95%, 95%, 1);
    border:solid 5px hsla(0, 95%, 35%, 1);
}

.globo_pincel_svg{
    width:100%;
}

.tail{
    position: relative;
}

/************ NAVIGATION BAR **************/

.strpstr-navigation-bar{
    position:fixed;
    z-index:1000;
    width:68px;
    height:auto;
}

.bt-strpstr-remote-control {
    margin:0px 8px;
    color:#fff;
}

.strpstr-remote-br{
    bottom:45px;
    right:5px;
}

.strpstr-remote-bl{
    bottom:45px;
    left:5px;
}

.strpstr-chat-navigation{
    text-decoration:none;
    width:59px;
    height:59px;
    padding:15px 14px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.7);
    color:#fff;
    border:2px solid #b1afae;
    display:block;
}


.strpstr-navigation{
    margin-right:7px;
    text-decoration:none;
    width:0px;
    height:0px;
    padding:15px 20px 20px 15px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.7);
    color:#fff;
    border:2px solid #b1afae;
    display:block;
    position:absolute;
    z-index:-1;
}

.strpstr-navigation svg{
    position:absolute;
    left:8px;
    top:8px;
}

#strpstr-back-bubble-vig-ico, #strpstr-no-full-screen-ico, #strpstr-pag-bubble-vig-ico{
    display:none;
}

.strpstr-menu-area-pos{
    width:90px;
    height:150px;
    background-color:rgba(234,117,284,0.5);
    display:none;
    cursor:pointer;
    cursor:hand;
    position:fixed;
    z-index:9999;
}

    #strpstr-menu-area-bl{
        bottom:0;
        left:0;
    }

    #strpstr-menu-area-br{
        bottom:0;
        right:0;
    }

.strpstr-navigation-full{
    left:0;
    bottom:0;
    opacity: 0;
}

.strpstr-navigation-config{
    left:0;
    bottom:0;
    opacity: 0;
}

.strpstr-navigation-save{
    left:0;
    bottom:0;
    opacity: 0;
}

.strpstr-navigation-back{
    left:0;
    top:0px;
    opacity: 0;
}
.strpstr-navigation-forw{
    left:0;
    top:0px;
    opacity: 0;
}

.strpstr-navigation-pag{
    left:0;
    bottom:0;
    opacity: 0;
}

.strpstr-navigation-menu-on{
    right:16px;
    bottom:-33px;
    padding:13px;
}

.strpstr-navigation-menu-on svg{
    position:absolute;
    left:3px;
    top:3px;

}

/****** SUBMENU *******/

.strpstr-navigation-pos{
    left:0;
    bottom:0;
    opacity: 0;
}

.strpstr-navigation-highlight{
    left:0;
    bottom:0;
    opacity: 0;
}

.strpstr-submenu-active{
    background-color: rgba(0, 82, 214, 0.7);
}

.strpstr-menu-navigation{
    color:#fff;
    text-decoration:none;
}

#strpstr-paginator{
    position:fixed;
    z-index:999;
    background-color: #cfcacf;
    border-left: 1px solid #9fa0b0;
    height: 100vh;
    width:200px;
    top:0px;
    right:-250px;
    padding:50px 15px 15px 15px;
}

.strpstr-page-resumen{
    display:none;
}

#strpstr-content-paginator{
    display:none;
    overflow-y:auto;
    overflow-x: hidden;
    height:calc(100vh - 100px);
    max-height: 100%;
}


.strpstr-navigator-page{

    margin-bottom:20px;
    display:block;
    width:100%;
    max-width:150px;
    line-height: 0;
    padding:3px;
}

.strpstr-navigator-disabled{
    margin-bottom:20px;
    display:block;
    width:100%;
    max-width:150px;
    line-height: 0;
    padding:3px;
    opacity:0.5;
}

.strpstr-navigator-page img{
    width:100%;
    height:auto;
}

.strpstr-navigator-page-active{
    background-color: #00C000;
}


.strpstr-menu-paginator{
    padding:5px 5px;
    background-color:#fff;
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
}

.strpstr-link-paginator{
    margin-right: 10px;
}



#strpstr-pop-message{
    position:fixed;
    top:0;
    left:0;
    z-index:1000000;
    background-color:rgba(0,0,0,0.6);
    width:100%;
    height:100vh;
    display:none;
}


.strpstr-sound-wrap{
    display:none;
}

/************ ACCESIBLE **************/

.strpstr-hightlight, .strpstr-overlap-hightlight{
    background-color: rgba(255,255,255,0.5);
    box-shadow: 0 0 15px 30px rgba(255,255,255,0.5);
    border-radius: 30%;
    width:100%;
    position:absolute;
    z-index:1;
    height:100%;
    display:none;
}

.elementor-editor-active .hideInt{
    display:none!important;
}



.strpstr-accesible-text, .strpstr-sr-hidden{
    display:none;
}

.elementor-editor-active .strpstr-sr-hidden{
    display:block;
    opacity:0.7;
}

.elementor-editor-active .strpstr-w-bubble-text{
    background-color: rgba(120,120,120,0);border:2px dashed rgba(153,153,153,0);
}



#chat-user:focus{
    outline:none;
}