.login-page__html5-screening{background: center 0 no-repeat;position: absolute;left: 0;width:100%;top: 0;height:100%;overflow:hidden;} .login-page__html5-screening canvas{ position: absolute; left: 50%; top: 0; transform: translate(-50%, 0%); cursor:pointer; } /*.login-page__html5-screening + .login-box{!* left:230px; *!}*/ .login-page__screening{ background: center 0 no-repeat; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .login-page__screening[data-login-screening="mBank_06_2018"] { background-image: url(https://static.olx.pl/static/olxpl/packed/img/2f2bf7f81082f8ee111cc49ec46ac1d70e.png); } .login-page__video{ background: url(../../../img/banners/adverts/bgz/bgz_tapeta.jpg) center top no-repeat; cursor:pointer; position: absolute; left: 0; right: 0; top: 0; height:658px; } .login-page__video .login-box-video{position: absolute;right: 50%;top: 219px;width: 444px;height: 252px;margin-right: -679px;} .login-page__video .login-box-video video{ cursor:pointer; height:100%; width:100%; background:#000; position:relative; z-index:3; } .login-page__video .spinner-loader{ width:100%; height:100%; background:#000; } .login-page__video .spinner { width: 40px; height: 40px; position: absolute; left:50%; top:50%; margin:-20px 0px 0px -20px; } .login-page__video .double-bounce1, .login-page__video .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #333; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .login-page__video .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } }