.icon {
  background-image: url('../style/img/btn/btns.png');
}
@font-face {
  font-family: "Arial Narrow";
  src: url('font/arial-narrow.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
html,
body {
  margin: 0;
  padding: 0;
  background: #dde480;
  height: 100%;
  font-family: "Arial Narrow", Arial, sans-serif;
}
.main {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.main-wrapper {
  height: 94%;
  cursor: pointer;
  flex-grow: 1;
}
.hidden {
  display: none !important;
}
.visibility {
  display: block !important;
}
.main-wrapper .mw-top {
  height: 1%;
}
.main-wrapper .mw-bg-img {
  max-height: 865px;
  background-image: url("img/bg-main.jpg");
  height: 80%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.main-wrapper .mw-btn-wr {
  text-align: center;
  height: 13%;
  max-height: 136px;
  overflow: hidden;
  position: relative;
}
.main-wrapper .mw-btn {
  height: 400%;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -206.5px;
  max-height: 544px;
  width: 413px;
  background-size: contain;
  background-image: url("img/btn/btns_play.png");
  background-position: center top;
  background-repeat: no-repeat;
  display: block;
  cursor: pointer;
}
.main-wrapper .mw-btn:hover {
  top: -100%;
}
.main-wrapper .mw-chk {
  position: absolute;
  left: 50%;
  margin-left: -65px;
}
.footer-wrapper .mw-cop {
  font-size: 14px;
  color: #7f8349;
  line-height: 1.2;
  text-align: center;
}
.footer-wrapper .mw-cop p {
  padding: 0;
  margin: 0;
}
.back-black {
  background: #000000;
  opacity: 0.702;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 3;
}
.back-black.showed {
  display: block;
}
.login {
  z-index: 4;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: left;
  width: 436px;
  display: none;
  margin-left: -218px;
  margin-top: -225px;
  border-style: solid;
  border-width: 1px;
  border-color: #cccccc;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.902);
  border-radius: 6px;
}
.login.showed,
.popup_fb.showed {
  display: block;
}
.login .login-close,
.popup_fb {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
  width: 21px;
  height: 21px;
  background-image: url("img/close.png");
}
.login .login-wrapper {
  margin: 30px 95px 50px;
}
.login .login-wrapper .lw-list-node {
  background-image: url('../style/img/btn/btns.png');
  background-repeat: no-repeat;
  overflow: hidden;
  display: block;
  width: 250px;
  height: 60px;
  cursor: pointer;
  margin: 10px 0;
}
.login .login-wrapper .lw-list-node.fb {
  background-position: -4px -276px;
  height: 62px;
}
.login .login-wrapper .lw-list-node.fb:hover {
  background-position: -4px -346px;
}
.login .login-wrapper .lw-list-node.gl {
  background-position: -4px -4px;
}
.login .login-wrapper .lw-list-node.gl:hover {
  background-position: -4px -72px;
}
.login .login-wrapper .lw-list-node.ap {
  background-position: -4px -696px;
}
.login .login-wrapper .lw-list-node.ap:hover {
  background-position: -4px -766px;
}
.login .login-wrapper .lw-list-node.pg {
  background-position: -4px -1258px;
}
.login .login-wrapper .lw-list-node.pg:hover {
  background-position: -4px -1329px;
}
.login .login-wrapper .lw-list-node.pl {
  background-position: -4px -1117px;
}
.login .login-wrapper .lw-list-node.pl:hover {
  background-position: -4px -1187px;
}
#canvasiframe {
  width: 100%;
  height: 100%;
  border: none;
}
.game {
  display: none;
  width: 100%;
  height: 97%;
  flex-grow: 1;
  min-height: 800px;
}
.game.show {
  display: block;
}
.game .frame {
  width: 100%;
  height: 100%;
  background-image: url("img/hh_ru.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50%;
}
.game .frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}
.main.en .mw-bg-img {
  background-image: url("img/bg-main_en.jpg");
}
.main.en .mw-btn {
  top: -200%;
}
.main.en .mw-btn:hover {
  top: -300%;
}
.login {
  margin-top: -90px;
}
.game .frame {
  background-image: url("img/hh_en.png");
}
.popup_fb.block_fb .popup_inner{
  color: #180707;
  text-align: center;
  z-index: 103;
  position: absolute;
  display: block;
  text-align: left;
  padding: 20px 55px 50px;
  margin: 0;
  width: 510px;
  box-sizing: border-box;
  left: calc(50% - 255px);
  top: 15%;
  border-radius: 7px;
  vertical-align: middle;
  background: rgba(231, 233, 231, 0.9);
  font-size: 17px;
}
.popup_fb.block_fb .popup_inner p {
  text-align: center;

}
.popup_fb.block_fb .popup_inner .footer {
  text-align: right;
}
.popup_fb.block_fb .popup_inner h4 {
  text-align: center;
  font-weight: 700;
}
.popup_fb {
  display: none;
  z-index: 102;
  background: #0009;
  /* opacity: 0.6; */
  width: 100vw;
  height: 100vh;
  position:absolute;
  top: 0;
  left: 0; 
}