html { overflow-y: scroll; overflow-x: auto;  }
body { font-family: 'hpRg', 'Arial Narrow', 'helvetica', sans-serif; font-size: 16px; background-color: #f5f1e5; width: 100%; min-width: 320px; height: 100%; }
body { background: url(../img/london_w.jpg) center no-repeat; background-size: cover; background-attachment: fixed; }
body.stat{ background-image: url(../img/newyork_w.jpg); }


.right,	r, .r{ float: right !important; }
.left,	l, .l{ float: left !important; }
.center,	c, .c{ text-align: center !important; text-align: -webkit-center !important; }
.tL{ text-align: left !important; }
.tR{ text-align: right !important; }
.tC{ text-align: center !important; }
.clear{ clear: both; }
p{ max-width: 500px; display: block; margin: 0 auto 5px; font-size: 16px; line-height: 20px; }
.fa:before { position: relative; z-index: 1; }

.animBg{ -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -ms-transition: background-color 0.3s linear; transition: background-color 0.3s linear; }
.animCl{ -webkit-transition: color 0.3s linear; -moz-transition: color 0.3s linear; -o-transition: color 0.3s linear; -ms-transition: color 0.3s linear; transition: color 0.3s linear; }

.no-select{ -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.shadow{ box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); }

.blur,
.blurError{ filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); -webkit-filter: blur(3px); filter: blur(3px); }

.wrap{ display: block; width: 100%; min-width: 320px; max-width: 950px; position: relative; margin: 0 auto; padding: 0 20px; }

.user_king,
.user_stat{ width: 222px; height: 100%; position: absolute; background-size: cover; background-position: center top; background-repeat: no-repeat;  z-index: 12;}
.user_king{ left: 0px; background-image: url(../img/user_king.png); background-position: right top; }
.user_stat{ left: 100%; margin-left: -222px; background-image: url(../img/user_stat.png); background-position: left top; }

.user_king.stat,
.user_stat.king{ display: none; }

/* head */
.head{ position: fixed; display: table; width: 100%; z-index: 11; top: 0px; background: #000; height: 127px}
.head .logo-hp{ background: url(../img/logo_hp.jpg) center no-repeat;  width: 225px; height: 57px; display: block; float: left; margin-top: 34px;   z-index: 7; }
.head .logo-king{ background: url(../img/logo_king.jpg) center no-repeat; width: 220px; height: 103px; display: block; position: absolute; left: 50%; margin-left: -110px; margin-top: 10px;  z-index: 7; }
.head .logo-sity{ background: url(../img/logo_sity.jpg) center no-repeat; width: 207px; height: 44px; display: block; float: right; margin-top: 45px;  z-index: 7; }

/*footer*/
.footer{ width: 570px; height: 27px; position: absolute; bottom: 20px; background: url(../img/footer_info.png) center no-repeat; left: 50%; margin-left: -285px; }

._content{ padding-top: 127px; z-index: 10; position: relative; }
._content h1{ color: #e1ac00; text-align: center; text-transform: uppercase; font-size: 30px; font-family: 'hpBd'; line-height: 40px;  margin-bottom: 20px; }
._content h2{ color: #000000; text-align: center; font-size: 30px; line-height: 40px; margin-bottom: 10px; }

.page-content{ height: 832px; display: table; table-layout: fixed; width: 100%; }
.page-coll{ display: table-cell; vertical-align: middle; width: 100%; height: 100%; text-align: center; }


.button{ cursor: pointer; display: inline-block; color: #000; width: 140px; height: 50px; line-height: 50px; font-family: 'hpBd'; text-transform: uppercase; text-align: center; border: 1px solid #000; }
.button:hover{ border: 1px solid #c19200; background: #e1ac00; color: #fff; }

.button.-y{ border: 1px solid #c19200; background: #e1ac00; color: #fff; }
.button.-y:hover{ border: 1px solid #000; background: #000; color: #fff; }

.table{ display: table; table-layout: fixed; width: 100%; min-height: 600px; }
.table .column{ display: table-cell; vertical-align: middle; width: 100%; height: 100%; text-align: center; }

.laptops{	display: inline-block; }
.laptops .laptop{ display: inline-block; position: relative; width: 359px; height: 268px; margin: 10px;  }
.laptops .laptop .info{ position: absolute; top: 0px; text-align: left }
.laptops .laptop .info .name{ color: #e1ac00; font-size: 20px; font-family: 'hpBd'; line-height: 30px; margin-bottom: 5px; }
.laptops .laptop .info .lead{ width: 160px; line-height: 18px; color: #000; margin-bottom: 15px; }
.laptops .laptop .info a{ display: block; color: #000; width: 140px; height: 50px; line-height: 50px; font-family: 'hpBd';  text-transform: uppercase; text-align: center; border: 1px solid #000; }
.laptops .laptop .info a:hover{ border: 1px solid #c19200; background: #e1ac00; color: #fff; }
.laptops .laptop img{ max-width: 100%;  max-height: 100%; }
.laptops .laptop.spectre .info{ left: -60px; }
.laptops .laptop.omen .info{ right: -60px; }

.laptops .laptop.spectre img{ float: right; }
.laptops .laptop.omen img{ float: left; }

.steps{ display: table; width: 100%; margin: 50px 0px; }
.steps .step{ position: relative; display: inline-block; width: 250px; padding-left: 35px; text-align: left; line-height: 18px; color: #424243; margin: 0 10px; font-size: 16px; }
.steps .step[n="2"],
.steps .step[n="3"]{ width: 182px; }
.steps .step i{ position: absolute; background: #e1ac00; color: #fff; width: 30px; height: 30px; line-height: 29px; text-align: center; font-style: normal; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; top: -2px; left: 0px; }

.shares{ z-index: 20; text-align: center; display: block; position: absolute; bottom: 20px; left: 12%;  }
.shares span{ line-height: 25px; padding-bottom: 10px; display: block; font-family: 'hpRg';  }
.shares .share{ display: inline-block; margin: 0 2px; width: 33px; height: 33px; }
.shares .share{ background: url(../img/share.png) center no-repeat; }
.shares span{ color: #000; }
.shares .share.fb { background-position: 0px 0px; }
.shares .share.tw { background-position: -39px 0px; }
.shares .share.vk { background-position: -78px 0px; }
.shares .share.ok { background-position: -117px 0px; }

.mini .shares{ bottom: 10px; }

.bg{ position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 20; background: rgba(0, 0, 0, 0.7); }
.bg .authAlert,
.bg .ballAlert{ width: 600px; padding: 20px; height: 330px; position: absolute; top: 50%; margin-top: -165px; left: 50%; margin-left: -300px; background: #fff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.bg .ballAlert{ padding: 70px; text-align: center; }
.bg .authAlert h1,
.bg .ballAlert h1{ color: #e1ac00; text-align: center; text-transform: uppercase; font-size: 30px; font-family: 'hpBd'; line-height: 40px;  margin-bottom: 40px; }
.bg .authAlert h2,
.bg .ballAlert h2{ color: #000;  text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 15px; }
.bg .ballAlert h1{ margin-bottom: 15px; }
.bg .ballAlert h2{ color: #000; font-weight: normal; }
.bg .authAlert .close{ cursor: pointer; position: absolute; width: 60px; height: 60px; left: 100%; margin-left: -10px; top: -65px; background: url(../img/close.png) center no-repeat; }
.bg .authAlert .info{ color: #000; position: absolute; bottom: 15px; text-align: center; width: 95%; }
.bg .authAlert .info a{ color: #000; text-decoration: underline; }
.bg .authAlert .auth{ display: block; text-align: center; }
.bg .authAlert .auth a{ display: inline-block; width: 50px; height: 50px; margin-left: 5px; background: url(../img/auth.png) no-repeat; }
.bg .authAlert .auth a.fb{ background-position: 0px 0px; }
.bg .authAlert .auth a.vk{ background-position: -61px 0px; }
.bg .ballAlert .button{ margin: 15px auto; }

.wrap.users{ max-width: 850px; }

.users .laptop{ display: inline-block; width: 600px; height: 400px; margin: 10px; position: absolute; top: 0px; }
.users .laptop .info{ position: absolute; top: 10px; text-align: left }
.users .laptop .info .name{ color: #e1ac00; font-size: 20px; font-family: 'hpBd'; line-height: 30px; margin-bottom: 5px; }
.users .laptop .info .lead{ width: 160px; line-height: 18px; color: #000; margin-bottom: 15px; }
.users .laptop .info a{ display: block; color: #000; width: 140px; height: 50px; line-height: 50px; font-weight: bold; text-transform: uppercase; text-align: center; border: 1px solid #000; }
.users .laptop .info a:hover{ border: 1px solid #c19200; background: #e1ac00; color: #fff; }
.users .laptop img{ max-width: 100%;  max-height: 100%; }
.users .laptop.spectre .info{ left: -40px; }
.users .laptop.omen .info{ right: -40px; }
.users.king .laptop{  left: 100%; margin-left: -450px; }
.users.stat .laptop{  left: 0; margin-left: -150px; }
.users>.info{  display: block;  float: left;    text-align: left; }
.users.stat>.info{ float: right; }
.users>.info h1{ margin-bottom: 10px; text-align: left; }
.users>.info p{ text-align: left; font-size: 18px; line-height: 24px; margin-bottom: 10px; }
.users>.info .shares{ position: relative; bottom: 0px; left: 0px; margin-left: 0px;  margin-bottom: 20px; text-align: left;}
.users>.info .shares span{ text-align: left; width: 250px; }
.users>.info .num{ line-height: 40px; width: 30px; border: 1px solid #000; display: inline-block; text-align: center; font-size: 23px; font-style: normal; margin-right: 8px; }
.users>.info .button{ clear: both; display: block; margin-top: 20px; width: 180px; }


.questions{ margin-top: 20px; -o-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.questions .name{ font-size: 20px; font-weight: bold; margin-bottom: 20px;  }
.questions .item{ display: none; }
.questions .item.show{ display: inline-block; }
.questions .item .question{ font-size: 20px; line-height: 25px; margin-bottom: 20px; max-width: 500px; font-weight: bold; }
.questions .item .answers{ text-align: center; width: 320px; margin: 0 auto; }
.questions .item .answer{ cursor: pointer; width: 320px; height: 130px; display: table; border: 1px solid #e1ac00; margin: 20px 0; font-size: 16px; font-family: 'hpRg'; }
.questions .item .answer i{ padding: 20px; font-style: normal; display: table-cell; vertical-align: middle; width: 100%; height: 100%; text-align: center; }
.questions .item .answer:hover{ border: 1px solid #c19200; background: #e1ac00; color: #fff; }
.questions.test .item .answer{ width: 150px; height: 58px; float: left; margin: 5px; }

.questions .item .question.f{ height: 180px; }

.circle { margin: 15px auto; float: none; }

.game-box{ width: 420px; display: table; margin: 0 auto; margin-bottom: 60px; }
.game-box .item{ margin: 0 5px 5px 0; float: left; width: 100px; height: 100px; line-height: 0; cursor: pointer; }
.game-table{ position: absolute; color: #000; width: 150px; text-align: center; left: 50%; margin-left: -75px; top: 100%; margin-top: 40px; z-index: 2; display: block; text-transform: uppercase; font-weight: bold; }
.game-table:hover{ text-decoration: underline; }
.youBall{ position: absolute; color: #000; width: 150px; text-align: center; left: 50%; margin-left: -75px; top: 100%; margin-top: 5px; font-size: 30px; z-index: 2; display: block; text-transform: uppercase; font-weight: bold; }

.info-game-loptop{ position: absolute; top: 50%; margin-top: -90px; width: 170px; height: 180px; }
.info-game-loptop img{ display: none; }
.info-game-loptop .laptop .info{ text-align: left; position: absolute; width: 170px; height: 180px; }
.info-game-loptop .laptop .info .name{ color: #e1ac00; font-size: 20px; font-family: fantasy; line-height: 30px; margin-bottom: 5px; }
.info-game-loptop .laptop .info .lead{ width: 160px; line-height: 18px; color: #000; margin-bottom: 15px; }
.info-game-loptop .laptop .info a{ display: block; color: #000; width: 140px; height: 50px; line-height: 50px; font-weight: bold; text-transform: uppercase; text-align: center; border: 1px solid #000; }
.info-game-loptop .laptop .info a:hover{ border: 1px solid #c19200; background: #e1ac00; color: #fff; }

.info-game-loptop.king{ left: 100%; margin-left: -15%; }
.info-game-loptop.stat{ right: 100%; margin-right: -10%; }


.game-box .item img{ display: none; max-width: 100%; }
.game-box .item.ok{ display: block !important; -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg); }
.game-box .item.ok img{ display: block !important; }

.game-box .item{ -webkit-transform: rotate3d(0, 1, 0, 0deg); -moz-transform: rotate3d(0, 1, 0, 0deg); -ms-transform: rotate3d(0, 1, 0, 0deg); -o-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); -webkit-transition: all 0.30s linear 0.30s; -moz-transition: all 0.30s linear 0.30s; -ms-transition: all 0.30s linear 0.30s; -o-transition: all 0.30s linear 0.30s; transition: all 0.30s linear 0.30s; }
.game-box .item.set { -webkit-transform: rotate3d(0, 1, 0, 180deg); -moz-transform: rotate3d(0, 1, 0, 180deg); -ms-transform: rotate3d(0, 1, 0, 180deg); -o-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg); }

.game-box.stat .item{ background: url(../img/stat/bg.jpg) no-repeat; }
.game-box.king .item{ background: url(../img/king/bg.jpg) no-repeat; }
.game-box .item[ii="1"]{ background-position: 0 0; }
.game-box .item[ii="2"]{ background-position: -100px 0; }
.game-box .item[ii="3"]{ background-position: -200px 0; }
.game-box .item[ii="4"]{ background-position: -300px 0; }

.game-box .item[ii="5"]{ background-position: 0 -100px; }
.game-box .item[ii="6"]{ background-position: -100px -100px; }
.game-box .item[ii="7"]{ background-position: -200px -100px; }
.game-box .item[ii="8"]{ background-position: -300px -100px; }

.game-box .item[ii="9"]{ background-position: 0 -200px; }
.game-box .item[ii="10"]{ background-position: -100px -200px; }
.game-box .item[ii="11"]{ background-position: -200px -200px; }
.game-box .item[ii="12"]{ background-position: -300px -200px; }

.game-box .item[ii="13"]{ background-position: 0 -300px; }
.game-box .item[ii="14"]{ background-position: -100px -300px; }
.game-box .item[ii="15"]{ background-position: -200px -300px; }
.game-box .item[ii="16"]{ background-position: -300px -300px; }

.startGame{ display: block; margin: 0 auto; }

.goTo{ display: block; margin-bottom: 20px; color: #000; text-transform: uppercase; }
.goTo:hover{ text-decoration: underline; }

.user-table{ width: 500px; display: table; margin: 0 auto; }
.user-table .coll{ width: 250px; display: table; float: left; }
.user-table .item{ display: table; margin: 0px 5px 5px 0; }
.user-table .item .num,
.user-table .item .name,
.user-table .item .ball{ line-height: 34px; color: #fff; background: rgba(0, 0, 0, 0.7); float: left; text-align: center; }

.user-table .item .num{ width: 34px; margin-right: 5px; }
.user-table .item .name{ width: 140px; text-align: left; padding-left: 15px; }
.user-table .item .ball{ width: 60px; color: #e1ac00; }

.user-table .item.you .num,
.user-table .item.you .name,
.user-table .item.you .ball{  background: #e1ac00; color: #fff; }

.user-table br{ clear: both; }
.list-pager{ display: table; margin: 20px auto; }
.list-pager li{ list-style: none; float: left; margin-right: 5px; }
.list-pager li a{ width: 34px; line-height: 34px; color: #fff; background: rgba(0, 0, 0, 0.7); float: left; text-align: center; font-weight: bolder; }
.list-pager li.hover a,
.list-pager li a:hover{ color: #fff; background: #e1ac00; }
.list-pager .prev,
.list-pager .next{ background: url(../img/page.png) no-repeat; width: 34px; height: 34px; cursor: pointer; }
.list-pager .prev{ float: left; margin-right: 80px; }
.list-pager .next{ float: right; background-position: -37px 0; margin-left: 75px; }


.bg .ballAlert.i2{ height: 380px; padding: 30px; }
.bg .ballAlert.i2 .shares{ float: left; left: 60px; bottom: auto;  top: 170px; width: 180px; }
.bg .ballAlert.i2 .shares span{ line-height: 18px; color: #000; }
.bg .ballAlert.i2 .links{ z-index: 20; text-align: center; display: block; position: absolute; float: right; right: 60px; top: 170px; width: 180px; }
.bg .ballAlert.i2 .shares span{ line-height: 18px; color: #000; }
.bg .ballAlert.i2 .button{ margin: 150px auto 0; }
.bg .ballAlert.i2 .button.min{ font-size: 12px; line-height: 40px; height: 40px; margin: 15px auto 0; }

.FriendLink{ position: absolute; top: 233px; z-index: 40; display: block; left: 50%; margin-left: -290px; width: 580px; background: #f5f5f5; border: 1px solid #000; line-height: 38px; padding: 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.FriendLink .close{ position: absolute; border-left: 1px solid #000; text-align: center; display: block; width: 25px; left: 100%; top:0px; margin-left: -25px; cursor: pointer; }
.FriendLink .close:hover{ color: #fff; background: #e1ac00; }

.mini .laptops .laptop{ height: 380px; }
.mini .page-coll{ padding-top: 20px; }
.mini .steps{ margin: 20px 0px; }
.mini .footer{ bottom: 5px; }
.mini .circle{ font-size: 50px; }
.mini ._content h2{ font-size: 25px; line-height: 30px; margin-bottom: 5px; }
.mini ._content h1 { font-size: 20px; line-height: 25px; margin-bottom: 10px; }
.mini .users .laptop{ height: 320px; }
.mini .users>.info p{ font-size: 17px; line-height: 18px; }
.mini .game-box{ width: 380px;  }
.mini .game-box .item{ width: 90px; height:90px; }
.mini .game-table{ margin-top: 20px; }

.micro .page-coll{ padding-top: 15px; }
.micro .circle{ display: none; }
.micro .laptops .laptop{ height: 230px; }
.micro .game-box{  width: 340px; margin-top: 10px; }
.micro .game-box .item{ width: 80px; height:80px; }
.micro .questions .name{ font-size: 22px; margin-bottom: 10px; }
.micro .questions .item .question{ font-size: 20px; margin-bottom: 10px; }
.micro .questions .item .answer{ margin: 15px 0; height: 100px; }
.micro .questions.test .item .answer{ height: 58px; margin: 5px; }




@media screen and (max-width: 900px){
	.head { height: 100px; z-index: 30; }
	.head .logo-hp,
	.head .logo-king,
	.head .logo-sity{ width: 23%; background-size: contain !important; left: inherit; margin: 0px; height: 100px; position: relative; float: left; margin: 0px 5px; }
	.head .logo-king{ width: 40%; }
	.user_king, 
	.user_stat{ display: none; }
	._content{ padding-top: 100px; }
	p { font-size: 14px; line-height: 18px; }
	.footer { position: relative; width: 100%; background: url(../img/footer_info.png) center no-repeat; margin: 0px; background-size: contain; left: 0px; }
	.shares { position: relative; left: 0px; }
	.laptops{ display: table; display: none; width: 100%; }
	.laptops .laptop{ height: 230px; width: 100%; display: table; margin: 0px 0px 20px; }
	.laptops .laptop img{ max-height: inherit; margin-bottom: 15px; }
	.laptops .laptop .info{ position: relative !important; left: 0% !important; width: 180px !important; margin: 0 auto; text-align: center; display: table; }
   .laptops .laptop .info .lead{ width: 100%; margin: 10px 0px; }
   .laptops .laptop .info a{ margin: 0 auto; }
   
   .button.-y{ margin-bottom: 30px; }
   
   .steps .step{ width: 100% !important; font-size: 15px; height: 40px; }
   .steps .step[n="2"],
   .steps .step[n="3"]{ padding-top: 4px; }
   
   .users .laptop{ display: none !important; }
   .users>.info{ text-align: center; width: 300px; left: 50%; float: none !important; margin-left: -150px; position: relative; }
   .users>.info h1{ text-align: center; }
   .users>.info p{ text-align: center; }
   .users>.info .num{ margin-bottom: 10px; }
   .users>.info .shares{ display: none; }
   .users>.info .button{ margin: 0 auto; }
   .questions{ margin-top: 10px; }
   .questions .item { width: 100%; }
   .questions .name{ font-size: 16px !important; }
   .questions .item .question{ font-size: 16px !important; line-height: 20px !important; }
   .questions .item .question.f{ height: 170px; }
   .questions .item .answer{ width: 100%; }
   
   .questions.test .item .answer{ height: 40px !important; }
   .questions.test .item .answers{ width: 100%; margin: 0 auto 20px; display: table; }
   .questions.test .item .answer{ width: 45% !important; }
   .questions.test .item .answer i{ padding: 14px; }
   
   .bg .authAlert, 
   .bg .ballAlert{ width: 100% !important; left: 0px !important; margin: 0px !important; top: 100px !important; padding: 20px !important; }
   .bg .ballAlert h1{ margin-bottom: 10px !important; }
   .bg .authAlert h2, 
   .bg .ballAlert h2{ font-size: 18px !important; margin-bottom: 10px !important; }
   .bg .ballAlert.i2{ height: 460px !important; }
   .bg .ballAlert.i2 .shares{ float: none; left: 0px; top: initial; margin: 0 auto; }
   .bg .ballAlert.i2 .links{ float: none; left: 0px; right: 0px; top: initial; margin: 10px auto; }
   .bg .ballAlert.i2 .links span{ line-height: 18px !important; }
   .bg .ballAlert.i2 .button.min{ position: relative !important; width: 100% !important; }
   .FriendLink{ width: 100% !important; left: 0px !important; margin-left: 0px !important; line-height: 18px !important; }
   
   
   
   .game-box { width: 284px !important; }
   .game-box .item{ width: 66px !important; height: 66px !important; }
   .user-table{ width: 100% !important; }
   .user-table .item{ width: 100% !important; }
   .user-table .coll { width: 100% !important; padding: 0 15px !important; }
   .user-table .item .name { width: 60% !important; }
   
}