html {background:#c34d86; height:100%; width:100%; overflow:hidden;}
body {background:url(../games-images/dots.png) repeat; margin:0; height:100%; width:100%;}
body.premium{background:none;}

#spinner {display:block; width:100%; height:100%; position:relative;}
.img-loader {width:0;height:0;overflow:hidden;}
#animation_container {position:absolute; margin:auto;left:0;right:0;top:0;bottom:0;}
#dom_overlay_container{ display: block; position: absolute; left: 0px; top: 0px; pointer-events:none; overflow:hidden; }
#midroll-container, #game-container {height:100%;}

body.premium .tinyloader img {display:none;}

.tinyloader{
position: relative;
width: 150px;
height: 27px;

top: 45%;
top: -webkit-calc(55% + 90px);
top: calc(55% + 90px);
left: 25%;
left: -webkit-calc(50% - 75px);
left: calc(50% - 75px);

background-color: #ffefff;
text-align:center;
border:2px solid #ffefff;
border-radius:2px;
}

.tinyloader img {position:absolute; top:-259px; left:-25px;}

.tinyloader:after{
content: "";
position: absolute;
background: rgba(255,122,197,1);
background: linear-gradient(to bottom, rgba(255,122,197,1) 0%, rgba(178,14,107,1) 100%);
top: 0px;left: 0px;height: 27px;width: 0px; z-index: 0; opacity: 1;
-webkit-transform-origin:  100% 0%;
transform-origin:  100% 0% ;
-webkit-animation: tinyloader 10s ease-in-out infinite;
animation: tinyloader 10s ease-in-out infinite;
}

.tinyloader:before{
content: "LOADING ...";
color: #ff7ac5;
font-family:  Arial;
font-size: 16px;
position: absolute;
width: 100%;
height: 27px;
line-height: 27px;
left: 0;
top: 0;
}

.premium .tinyloader:after{background: linear-gradient(to bottom, #2e8cea 0%, #3357a1 100%);}
.premium .tinyloader:before{color:#3357a1;}

@-webkit-keyframes tinyloader{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

@keyframes tinyloader{
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

.premium canvas{    position: absolute;    left:50%;    top:50%;    -webkit-transform: translate(-50%, -50%);    -moz-transform: translate(-50%, -50%);    -ms-transform: translate(-50%, -50%);    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}

.spl-bg {position:absolute;width:100%;height:100%;top:0;left:0;z-index:101;background-size:cover; text-align:center;}
.spl-bg2 {width:100%;height:100%;background:rgba(127,127,127,0.8);position:absolute;}
.spl-bg3 {position: absolute; top: 50%; transform: perspective(1px) translateY(-50%); -webkit-transform: perspective(1px) translateY(-50%); height:12.5rem; width:100%; background:rgba(0,0,0,0.5);}
.spl-center {margin:1.87rem auto;width:0;height:5.62rem;position:relative;}
.spl-thumb {position:absolute;left:-7.5rem;border:0.25rem solid #fff;border-radius:0.25rem;width:6.25rem; height:6.25rem;}
.spl-title {color:#fff;font-weight:bold;line-height:1.87rem;margin:0.3rem;font-size:1rem;}
#spl-btn, #spl-btn-mid {cursor:pointer;position:absolute;top:0.3rem;right:-7.5rem;width:6.25rem; height:6.25rem; -webkit-tap-highlight-color: rgba(0,0,0,0);}
#spl-btn-mid{left:-3.12rem;}
#spl-btn:active, #spl-btn-mid:active {margin-top:0.25rem;}