#widget-btn {
    display: none;
}

.projesfer-widget-title {
    display: inline-block;
    padding: 16px 23px 16px;
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.4);
    /*background: rgba(103,58,183, 0.6);*/
    background: rgba(66,230,145, .7);
    -moz-backdrop-filter: saturate(120%) blur(10px);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    backdrop-filter: blur(10px);
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(46,98,255, .1)), color-stop(33%, rgba(46,98,255, .7)));
    background-image: linear-gradient(to bottom, rgba(46,98,255, 0.2), rgba(46,98,255, .9) 100%);
}

.top-left .projesfer-widget-title, .bottom-left .projesfer-widget-title {
    padding-left: 90px;
    border-radius: 2rem;
}

.top-right .projesfer-widget-title, .bottom-right .projesfer-widget-title {
    padding-right: 90px;
    border-radius: 2rem;
}

#widget-btn-ic {
    position: absolute;
    display: inline-block;
    width: 5rem;
    height: 5rem;
    padding: 15px 12px 12px 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(66,230,145, .7);
    -moz-backdrop-filter: saturate(120%) blur(10px);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    backdrop-filter: blur(10px);
    top: 50%;
    transform: translateY(-50%);
    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(46,98,255, .1)), color-stop(33%, rgba(46,98,255, .7)));
    background-image: linear-gradient(to bottom, rgba(46,98,255, 0.2), rgba(46,98,255, .9) 100%);
    box-shadow: 4px 0px 12px 0px rgba(0, 0, 0, 0.55);
}

    #widget-btn-ic svg {
        display: block;
        width: 100%;
        height: 100%;
    }

    #widget-btn-ic .widget-custom-ic {
        width: 100%;
        height: 100%;
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
    }

.top-left #widget-btn-ic, .bottom-left #widget-btn-ic {
    left: -15px;
}

.top-right #widget-btn-ic, .bottom-right #widget-btn-ic {
    right: -15px;
}

@media screen and (min-width: 1025px) {
    #widget-btn.is_hover .projesfer-widget-title {
        width: 0;
        box-sizing: border-box;
        overflow: hidden;
        word-break: normal;
        white-space: nowrap;
        transition: 0.5s;
    }

    #widget-btn.is_hover.top-left .projesfer-widget-title,
    #widget-btn.is_hover.bottom-left .projesfer-widget-title {
        padding-left: 0;
    }

    #widget-btn.is_hover.top-right .projesfer-widget-title,
    #widget-btn.is_hover.bottom-right .projesfer-widget-title {
        padding-right: 0;
        float: right;
    }

    #widget-btn.is_hover.top-left:hover .projesfer-widget-title,
    #widget-btn.is_hover.bottom-left:hover .projesfer-widget-title {
        padding-left: 90px;
    }

    #widget-btn.is_hover.top-right:hover .projesfer-widget-title,
    #widget-btn.is_hover.bottom-right:hover .projesfer-widget-title {
        padding-right: 90px;
    }

    #widget-btn.is_hover:hover .projesfer-widget-title {
        width: 100%;
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
    #widget-btn.tablet-hide-icon #widget-btn-ic {
        display: none;
    }

    #widget-btn.tablet-hide-icon .projesfer-widget-title {
        width: auto;
        padding: 16px 23px;
    }

    #widget-btn.tablet-hide-text #widget-btn-ic {
        position: static;
        transform: translate(-5px, 10px);
    }

    #widget-btn.tablet-hide-text .projesfer-widget-title {
        display: none;
    }

    #widget-btn.tablet-hide-icon.tablet-hide-text {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    #widget-btn.mobile-hide-icon #widget-btn-ic {
        display: none;
    }

    #widget-btn.mobile-hide-icon .projesfer-widget-title {
        width: auto;
        padding: 16px 23px;
    }

    #widget-btn.mobile-hide-text #widget-btn-ic {
        position: static;
        transform: translate(-5px, 10px);
    }

    #widget-btn.mobile-hide-text .projesfer-widget-title {
        display: none;
    }

    #widget-btn.mobile-hide-icon.mobile-hide-text {
        display: none;
    }
}

@media screen and (max-width: 320px) {
    .projesfer-widget-title {
        display: none;
    }

    #widget-btn-ic {
        position: static !important;
        transform: translate(-5px, 10px) !important;
    }
}


@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(58,172,196,0.8), 0 0 0 0 rgba(58,172,196,0.5)
    }

    40% {
        box-shadow: 0 0 0 20px rgba(58,172,196,0), 0 0 0 5px rgba(58,172,196,0)
    }

    80% {
        box-shadow: 0 0 0 20px rgba(58,172,196,0), 0 0 0 5px rgba(58,172,196,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(58,172,196,0), 0 0 0 10px rgba(58,172,196,0)
    }
}