#joc-popup {
    display: none;
    border-radius: 10px;
    width: 75px;
    height: 90px;
    background-color: #F2F2F2; 
    box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    position: fixed;
    left: 20px;
    bottom: 20px;
    transition: .4s;
    transition-delay: .1s;
    cursor: pointer;
    z-index: 999;
}

#joc-popup-image {
    min-width: 75px;
    min-height: 90px;
    border-radius: 10px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABaCAYAAADwxKvUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIwMjAgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NTg3REVBRTk3REIxMUVCQkMzNEZGNzI2QkVCOUQwRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NTg3REVBRjk3REIxMUVCQkMzNEZGNzI2QkVCOUQwRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ1ODdERUFDOTdEQjExRUJCQzM0RkY3MjZCRUI5RDBGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQ1ODdERUFEOTdEQjExRUJCQzM0RkY3MjZCRUI5RDBGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+o8RfbQAABRlJREFUeNrsnE1s02YYx+18NE0Tp2naRkFNt0rbpF2Ay7RpQqIcuYwDB5C4TqyThrTLNC7jsEmTdkI7UJWP7YKQ1nEDwWXHHQDtgjgAEgKBhKg6+hU7iRs7ds3/qWIUUmji1Ilf0+eRXKe2Xvv1733e1/+/v2THcSSOziLCCBgWw2JYDIth7fqIdVPIMAzJsqwPEolEEv+GSXvIJkKW5afJZLI/sJaXlw+nUqmr0Wg06YRIqAESNXJ9dXV1Zmpq6kpfYOVyuS8ikYhCvwFMCgMvArWxsSGhN8QLhcLnWNQfWAiL/tTrdUlV1WeDg4Nlqo/IsFDXeDqd/iQej0fQuGbfxiy3pWq1moq0nkaXfC44LKdcLiuo731kVpEyrK+wqOuhlUyktIYKOKIP9Bg2arqu2zsZMnYkHbBj2bbtaBgGd2TTjuvJOothMSyGxbDYG7YP6BgJeuZLqPqRZimB0/bmtK3KtSwbZ6zbY2NjZXdZtVqVNE071LBVHWk/iE89k8n8qyiKIzQsgDo+MDAwH4vFthxEuyDbBM92AcC+JbDkDhYXF8/k8/lfvNQB+6ftnIJan+1kv4HBgjj9FNbntWj1KBqlbDb7cfMBDg8PH6HtdaK4qRztk+YAdgDzWaEzC11prlQqTQBa3svVCByYjLIWys4iI5pXGQ1B+T9W/7edpaLdIaOnMSnYXF34MSuXy73EgX3jtrBX+zQ6OvrW5ci6W/CfR9sYZRoz7wHWvl5dBYn5vcF2A3mXEW23XRrzen12f2+kA/lU1lksShkWw+IIHyyrA61GemGjl5XwVTqoqhpHpQ8ODQ0NeNU6tm070El3oOJLrcocyz+CfvsKGspp1WBN5WXIi+EwGemvIR7noLa7Ko8D/gMATrqCFvMYAYF92Y9/r2O99C5YDZvjWp6o8N2QbE6rifZgeegGyJ5mEDDmL7ZzArTOnZrhra+vq71Q8b5mlmma5+kY0A0HPXrDTbtSrVb/UhTl9dUDqPIfK5XKQzRCFN3QoYYgJd+aUc0eE3Wwkdl/+n3FwXdY+Xz+JWY/d1OW4KALv7FscnLyCWY/edkOsnPLdlg6sHRgWAyLYXEwLIYVQPiqs9bW1tIQhcegmbJSDx5BIkHaidgkcQrrVYM9+rtQKKwICQsq+yQU+NkeXYf3dmBQ+5qmfYifp4WEBUiJZq8WdMAm1YTthvB3l3Rdj8IbpoN8irnRDSsYDs6J7A1pfPiVz4YcDIthMSyGxbAYFoe/OmtlZSULm3HC6w2LHohSusNjQZjOQ/stiWp3ZqCaf2u9vxdE0A0Qy7KKfnpDX7shKmeI8u4h1QONJq43RBe8CH+4kEwmEwJ4QwuZflNYWCMjIzpmV0XILOqGfDZk6cCwGBbD4mBYQtsdVwyKEkK/FbawsFCEEPwBojTwGxaGYaybpvl7sVh8IiQsGOgZgPpehKyiV+9gpmmY+U5IWPCGj9Gamzc4g+yO7ndnYL0eCdsNE4nE5UqlUoLVyEjBfkGE3l/UkOk3hIVF7yVjusbSgYNhMSyGxbB2DyzSM1DsofhAYuMVu2CkQ0P4RaCrHBGe9GsXsD/1wGA1PmOXhaX4R1VVXRblcb93m/sIRGphJ84i1mVWxWlOX2YcHx//LCyfKnXr6da/L7CWlpYeZDIZm15t6/ZFzKA8I/yio2na3YmJCe/lu8kKXdfpBuZeOPuhsJ3RMHYZgHYvlUo5fYHF0oGDYTEshsWwGNZujVcCDACvHyYwStIVLwAAAABJRU5ErkJggg==') center center no-repeat;
    background-color: orangered;
    background-size: 100% 85%;
    float: left;
    margin-right: 10px;
}

#joc-popup-text {
    margin: auto;                        
    float: right;     
    text-align: center;
    font-family: 'Poiret One';
    font-weight: 900;
    font-size: 15pt;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
}

@media only screen and (max-width: 530px) {
    #joc-popup {
        display: none !important;
    }

    #joc-popup-image {

    }

    #joc-popup-text {
        
    }
}