/* FONTS */
@font-face {
    font-family: 'nivea_book_ot';
    src: url('fonts/niveabookot-webfont.eot');
    src: url('fonts/niveabookot-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/niveabookot-webfont.woff') format('woff'),
    url('fonts/niveabookot-webfont.ttf') format('truetype'),
    url('fonts/niveabookot-webfont.svg#nivea_book_otregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nivea_bold_ot';
    src: url('fonts/niveaboldot-webfont.eot');
    src: url('fonts/niveaboldot-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/niveaboldot-webfont.woff') format('woff'),
    url('fonts/niveaboldot-webfont.ttf') format('truetype'),
    url('fonts/niveaboldot-webfont.svg#nivea_bold_otregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nivea_medium_ot';
    src: url('fonts/niveamediumot-webfont.eot');
    src: url('fonts/niveamediumot-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/niveamediumot-webfont.woff') format('woff'),
    url('fonts/niveamediumot-webfont.ttf') format('truetype'),
    url('fonts/niveamediumot-webfont.svg#nivea_medium_otregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'nivea_light_ot';
    src: url('fonts/nivealightot-webfont.eot');
    src: url('fonts/nivealightot-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/nivealightot-webfont.woff') format('woff'),
    url('fonts/nivealightot-webfont.ttf') format('truetype'),
    url('fonts/nivealightot-webfont.svg#nivea_light_ot') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* GLOBAL */
html,
body {width: 100%; min-width: 970px; background-color: transparent;}
body {color: #ffffff; font: 14px/16px 'nivea_medium_ot',sans-serif;margin: 0;padding: 0; overflow-x: hidden;}
@media screen and (max-width:970px) {
  body { overflow: visible;}
  .bone { overflow: hidden;}
}
h1,h2,h3,h4,h5,h6,p,span{ margin: 0; padding: 0;}
ul, ol, p,span { margin: 0; padding: 0;list-style: none;}
a {color: #fff;text-decoration: none;display: inline-block;}
.no-touch a:hover {text-decoration: none;}
a:focus {outline: none;}
a * {cursor: pointer;}
img {border: none;margin: 0;}
strong, i { font-weight: normal; font-style: normal;}
form,
fieldset,
legend {border: none;margin: 0;padding: 0;}
input,
textarea,
select {font: 13px/18px Arial,Verdana,sans-serif;color:#000; outline: none;}
address {font-style: normal;}

/* FIX */
.clear {clear:both;}
.clearfix:after {clear: both;content: "";display: block;height: 0;}
.zfix {overflow: hidden;}
.tfix {display: table;}
.ctr-wrap {margin: auto;overflow: hidden;position: relative;text-align: center;width: 100%;}
.ctr-hold {float: left;left: 50%;position: relative;text-align: center;}
.ctr-box {float: left;left: -50%;position: relative;}
.noselect {  -moz-user-select: -moz-none;  -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none;}
.flr { float: right;}
.fll { float: left;}

/* MIDDLE ALIGN */
.tbl-wrap {display: table; width:100%; height:100%;}
.tblc-wrap {display:table-cell; vertical-align: middle;}

/* WRAPPER */
.bone {position: relative;height: 718px; width: 970px; margin: 0 auto; padding: 25px 0 78px;}
.form {width: 380px; background-color: rgba(0,10,39,0.4); margin: 0 auto; }
.form .form-space {padding: 30px;}
.form .form-space2 {padding: 17px 30px;}
.form .about { text-align: center; font: 16px/19px 'nivea_book_ot',sans-serif;}
.row {padding-top: 16px;}
.row.gender-line {padding-top: 14px;}
.row.rules-line {padding-top: 15px; padding-bottom: 10px;}
.row.bday-row { position: relative; z-index: 20;}
.col { float: left; position: relative; margin-right: 50px;}
.col:last-child {margin-right: 0;}
.field {display: block;width: 300px ; height: 32px; color: #888888;font: italic 15px/17px Arial,Verdana,sans-serif; padding: 0 10px; margin: 0;
    background: #fff; border: none;
  -moz-box-shadow: inset 0 3px 16px rgba(0,0,0,.5);-webkit-box-shadow:inset 0 3px 16px rgba(0,0,0,.5);box-shadow: inset 0 3px 16px rgba(0,0,0,.5);}
.submit {border: none;cursor: pointer; padding: 0 31px 0;color: #fff;text-align: center; background-color: #2089e1; display: block; text-transform: uppercase; height: 50px;
    font: 22px/50px 'nivea_bold_ot',sans-serif; margin: 32px auto 25px auto;}
.submit.submit-padding2 {margin: 20px auto 7px;}
.submit.submit-padding3 {margin: 0 auto 7px; padding: 0 21px 0;}


a.submit { display: inline-block;}
.label {font: bold 13px/16px Arial,Verdana,sans-serif; float: left;}
label {-moz-user-select: -moz-none;  -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none;}
/* HEADER */
.header {height: 50px; background-color: #013968; position: relative; z-index: 10;}
.header .header-shadow { width: 358px; height: 50px; background: url(../images/index/header-shadow.png) top left no-repeat; position: absolute; top: 0; left: 50%; margin-left: -179px;}
.header .btn-index { width: 270px; height: 100px; background: url(../images/index/btn-header.jpg) top left no-repeat; position: absolute; top: -25px; left: 50%;
  margin-left: -135px; text-indent: -9999px; z-index: 20;}
.header .header-menu { height: 16px; padding: 17px 20px 0 18px; position: relative; z-index: 10; font-size: 0; line-height: 0; vertical-align: top;}
.header .header-menu li{ display: inline-block; margin-right: 19px; height: 16px; position: relative; top: 0;}
.header .header-menu li a{text-transform: uppercase; padding-right: 1px; font-size: 14px; line-height: 14px; position: relative; padding-top: 2px;}
.header .header-menu li a.active { cursor: default;}
.header .header-menu li a.active,
.header .header-menu li a:hover{ color: #187ed3;}
.header .header-menu li.index a {text-indent: -9999px; width: 16px;height: 16px; background:  url(../images/index/bg-sprite.png) 0 -26px no-repeat; position: relative; top: 0;}
.header .header-menu li.index a.active { cursor: default;}
.header .header-menu li.index a.active,
.header .header-menu li.index a:hover { background-position: -32px -26px;}
.header .header-menu li.btn-auth { margin-right: 20px; position: absolute; right: 20px; top: 17px; }
.header .header-menu li.btn-auth a { padding-right: 1px;}
.header .header-menu li.bmr {margin-right: 345px;}
.logged .header .header-menu li.btn-auth {  margin-right: 0;}
.logged .header .header-menu li.btn-auth a {padding-right: 19px;}
.logged .header .header-menu li.btn-auth a:after {content: '';width: 12px;height: 12px; background:  url(../images/index/bg-sprite.png) -2px -2px no-repeat; position: absolute; right: 0;top: 3px;}
.logged .header .header-menu li.btn-auth a:hover:after { background-position: -34px -2px;}

/* CONTENT */
.content-wrapper {width: 960px; height: 728px; height: 618px; margin: 0 auto; position: relative; background:  url(../images/index/bg-site_sm.jpg) top left no-repeat; z-index: 0;}
.content {margin: 0 auto; }
.content-space {padding: 74px 30px 0;}
.content-space2 {padding: 42px 30px 0;}
.content-space3 {padding: 42px 0 0;}
.content-space4 {padding: 74px 0 0;}
.content-space5 {padding: 58px 30px 0;}

.game .content {height: 728px; height: 618px;}
.content h1 { text-align: center; font: 40px/40px 'nivea_bold_ot',sans-serif; text-transform: uppercase; margin-bottom: 15px;}
.content h2.pre-h1 { text-align: center; font: 20px/23px 'nivea_book_ot',sans-serif; text-transform: uppercase; margin-bottom: 9px;}
.content h1.smaller {font: 30px/40px 'nivea_medium_ot',sans-serif;}
/*--------------------- GAME -----------------------------*/
/* INTRO */
#intro {position: absolute; top: -1px; left: 0; right: 0;bottom: -1px; background: #000; display: none;}
#intro .btn-skip {position: absolute; top: 12px;right: 12px; z-index: 10;
  height: 40px; background:  url(../images/game/btn-help.png?v=3) top left no-repeat;
  background-position: right -140px; color: #fff; font: 14px/40px 'nivea_medium_ot',sans-serif; padding-right: 55px;}
#intro .video {width: 100%;height: 100%;}

#game-videos { position: absolute; top: 0;left: 0;right: 0;bottom: 0; display: none;}
#game-videos video { position: absolute; top: 0;left: 0;width: 100%; height: 100%; }
#game-videos video.vid-ogg {top: -4px;}
/* GAME BG */
#canvas-game { display: none;}
.bone.game .game-bg { position: absolute; top: 0;bottom: 0;left: 0;right: 0; background:  url(../images/index/bg-game_sm.jpg?v=5) top left no-repeat; cursor: pointer;}
.bone.game .game-bg h2 {font: 16px/20px 'nivea_book_ot',sans-serif; text-transform: uppercase; text-align: center; margin-top: 34px; position: relative; z-index: 10; top: 10px;}
.bone.game .game-bg .btn-start-game {width: 204px; text-align: center; color: #013968; margin: 9px auto; display: block; text-shadow: 0 1px 0px rgba(255,255,255, .4);
  background:  url(../images/index/btn-game.jpg) 0 0 no-repeat; font: 29px/58px 'nivea_bold_ot',sans-serif; text-transform: uppercase;
  -moz-box-shadow: 0 7px 18px rgba(0,0,0,.7);-webkit-box-shadow: 0 7px 18px rgba(0,0,0,.7);box-shadow: 0 7px 18px rgba(0,0,0,.7);}
.bone.game .about-hero { position: absolute; left: 49px;bottom: 23px; z-index: 10;}
.bone.game .about-hero .title {font: 18px/18px 'nivea_bold_ot',sans-serif;}
.bone.game .about-hero .about {font: 15px/18px 'nivea_book_ot',sans-serif; position: relative; margin-top: 7px;}
/*.bone.game .about-hero .about:before {content: '– '; position: absolute; top: 0; left: -12px;font: 15px/18px 'nivea_book_ot',sans-serif; }*/

/* GAME GRADIENT */
.bone.game .game-interface {position: absolute; top: 13px; left: 0; right: 0; color: #fff; font-family: 'nivea_medium_ot',sans-serif; cursor: default;}
.bone.game .game-interface.loader { display: none;}
.bone.game .game-interface  .values-block { display: inline-block; vertical-align: top; margin-top: 1px;}
.bone.game .game-interface .title { font-size: 8px; display: block; line-height: 8px; text-align: left; text-transform: uppercase;}
.bone.game .game-interface .value { font-size: 15px; line-height: 15px; text-align: left; position: relative; top: 3px;}
.bone.game .game-interface .level-title-wrapper {text-align: center; text-transform: uppercase;
  position: absolute; top: 0; left: 50%; margin-left: -150px; width: 300px; display: inline-block; }
.bone.game .game-interface .level-title {font: 15px/24px 'nivea_medium_ot',sans-serif; background-color: rgba(1,57,104, 0.6);border-radius: 5px; display: inline-block; padding: 0 9px;
  position: relative; top: 21px;}

.bone.game .game-interface .interface-block { background-color: rgba(1,57,104, 0.6); border-radius: 5px; float: left;
  display: inline-block; margin-left: 15px; padding: 5px 8px;}
/* TIMER */
.bone.game .timer { float: left; margin-right: 0px; /*width: 140px;*/ }
.bone.game .timer .values-block {min-width: 47px;}
.bone.game .timer .ico-timer {width: 20px;height: 27px; background:  url(../images/game/ico-timer-s.png?v=1) top left no-repeat; float: left; margin-right: 7px;}

/* POINTS */
.bone.game .points { display: inline-block; margin-left: 0px;}
.bone.game .points .values-block {border-left: 1px solid #fff; padding-left: 10px; min-width: 45px;}
.bone.game .fps { display: inline-block; margin-left: 50px;}
.bone.game .speed { display: inline-block; margin-right: 200px; float: right;}
.bone.game .fps, .bone.game .speed,
.bone.game #bottle { display: none;}

/* STRETCH */
.bone.game .stretch-wrapper { position: absolute; top: 0;right: 20px; width: 70px;height: 176px; background-color: rgba(1,57,104, 0.6); border-radius: 5px; text-align: center;}
.bone.game  .game-interface .stretch-wrapper .title { text-align: center; margin-bottom: 5px; margin-top: 8px;}
.bone.game .stretch-wrapper .bottle {width: 46px;height: 141px; background:  url(../images/game/bg-stretch-s.png) top left no-repeat; position: relative;
  display: inline-block; margin-top: 0px;}
.bone.game .stretch-wrapper .bottle .bottle-full { position: absolute; bottom: 0;right: 0;left: 0; background:  url(../images/game/bg-stretch-full-s.png) bottom left no-repeat; height: 50%;}
.bone.game .stretch-wrapper .percent { font-size: 15px; line-height: 25px; position: absolute; right: 58px; bottom: 0; height: 25px; margin-bottom: -13px; font-family: 'nivea_book_ot',sans-serif;
  background-color: rgba(1,57,104, 0.6); border-radius: 5px; padding: 0  0 0 6px; border-bottom-right-radius: 0; border-top-right-radius: 0;
/*  -moz-transition: bottom linear .25s;
  -webkit-transition: bottom linear .25s;
  -o-transition: bottom linear .25s;
  transition: bottom linear .25s;*/}
.bone.game .stretch-wrapper .percent span { text-align: right;}
.bone.game .stretch-wrapper .percent .sup{ font-size: 10px; position: relative; bottom: 7px;}
.bone.game .stretch-wrapper .percent:after { position: absolute; top: 10px;right: -55px; content: ''; width: 51px;height: 4px; background:  url(../images/game/stretch-line-s.png?v=1) center center no-repeat; display: inline-block;}
/* BTNS */
.bone.game .btns-srapper { position: absolute; top: 60px;left: 0;}
.bone.game .btns-srapper a {margin-left: 20px; text-decoration: underline; display: none;}
/* DISTANCE */
.bone.game .distance-wrapper { position: absolute; top:568px;left: 10px; width: 885px; height: 40px; background-color: rgba(1,57,104, 0.6);border-radius: 5px;}
.bone.game .distance-wrapper.loader{ display: none;}
.bone.game .distance-wrapper .btn-help {width: 40px;height: 40px; background:  url(../images/game/btn-help.png?v=3) top left no-repeat; position: absolute; top: 0; right: -48px; text-indent: -9999px;}
.bone.game .distance-wrapper .btn-help.disabled { cursor: default; background-position: 0 -44px;}
.bone.game .distance-wrapper .btn-sound {width: 40px;height: 40px; background:  url(../images/game/btn-help.png?v=3) top left no-repeat;
  position: absolute; top: -50px; right: -48px; text-indent: -9999px; background-position: 0 -189px ;}
.bone.game .distance-wrapper .btn-sound.muted {background-position: 0 -240px ;}
.bone.game .distance-line {width: 830px; height: 4px; position: absolute; top: 27px; left: 20px; background-color: #239de4;}
.bone.game .distance-line:before {content: ''; width: 2px;height: 3px; background-color: #187ed3; position: absolute; left: 70px;bottom: -3px;}
.bone.game .distance-line:after {content: ''; width: 2px;height: 3px; background-color: #187ed3; position: absolute; right: 0px;bottom: -3px;}
.bone.game .distance-line .done-line { position: absolute; top: 0; height: 7px; left: 70px; background-color: #ffffff; width: 0px;
  background: url(../images/game/done-line.png?v=1) top left no-repeat;}
.bone.game .distance-line .done-line.transition {
/*  -moz-transition: width linear .25s;
  -webkit-transition: width linear .25s;
  -o-transition: width linear .25s;
  transition: width linear .25s;*/
}
/*.distance-line .done-line.before:before { content: ''; width: 2px;height: 6px; background-color: #187ed3; position: absolute; left: 0;bottom: -6px; background-color: #fff;}*/
.bone.game .distance-line .done-line.after:after { content: ''; width: 2px;height: 3px; position: absolute; right: 0px;bottom: 0px; background-color: #fff; z-index: 0;}
.bone.game .distance-line .ico-car {width: 93px;height: 21px; background:  url(../images/game/ico-car.png?v=1) no-repeat; position: absolute; top: -20px; right: 0px;}
.bone.game.level1 .distance-line .ico-car { background-position: 0 0;}
.bone.game.level2 .distance-line .ico-car { background-position: 0 -359px ;}
.bone.game.level3 .distance-line .ico-car { background-position: right -179px ;}
.bone.game.level5 .distance-line .ico-car { background-position: right -269px ;}
.bone.game.level4 .distance-line .ico-car { background-position: right -89px ;}

.bone.game .distance-wrapper .ico-finish {width: 13px;height: 15px; background:  url(../images/game/ico-finish.png?v=1) top left no-repeat; position: absolute; right: 13px;top: 20px;}
.bone.game .distance-line .distance-text {font: 17px/17px 'nivea_medium_ot',sans-serif; color: #ffffff; position: absolute; top: -24px; right: -40px; text-align: right; cursor: default;}
.bone.game .distance-line .distance-text .sup { color: #187ed3; font-size: 12px; line-height: 12px; position: relative; bottom: 6px; display: none;}
/* LOADER */
/*#loader { width: 100%;height: 50px;position: absolute;text-align:center;margin-top: 250px;background: url('../images/game/loader.gif') no-repeat;
  background-position: 50% 50%; display: none; }*/
#loader { position: absolute; top: 0; bottom: 0; left: 0; right: 0; text-align:center; background: url('../images/game/bg-preloader.jpg?v=2') no-repeat; z-index: 50; display: none;}
#loader .circle {width: 202px; height: 201px; background: url(../images/game/preloader-circle.png) top left no-repeat; position: absolute; top: 220px; left: 50%; margin-left: -101px;}
#loader .circle2 { position: absolute; top: 0;left: 0;right: 0;bottom: 0; background:  url(../images/game/preloader-circle2.png) center center no-repeat;}
#loader .percent {font: 34px/34px 'nivea_medium_ot',sans-serif; position: absolute; top: 302px; left: 50%; width: 120px; margin-left: -57px; text-align: center;}
/*CFG FORM*/
#cfg-form {position: absolute;top: 6px;right: 6px;z-index: 10;font: 12px/14px Verdana;text-align: right; background: #FFF;box-shadow: #AAA 0px 0px 5px;padding-left: 10px; display: none; color: #000;}
#cfg-form input {border: 1px solid #CCC;margin: 0 0 -1px 6px;padding: 3px; width: 50px;outline: none;}
#cfg-form input[type=submit]{width: 58px;background: #EEE;}

/*--------------------- GAME END -----------------------*/

/* LOGIN */
.bone.login .form-login .form-space {padding-bottom: 20px;}
.bone.login .form-login .btns-login a{font: 15px/15px Arial,Verdana,sans-serif; text-decoration: underline;}
.bone.login .form-login .btns-login a:hover { text-decoration: none;}

.bone.login .form-login-soc { text-align: center; margin-top: 20px;}
.bone.login .form-login-soc .login-soc-label {font: 18px/18px 'nivea_book_ot',sans-serif; text-transform: uppercase;}
.bone.login .form-login-soc ul {  margin-top: 17px; font-size: 0; line-height: 0;}
.bone.login .form-login-soc li {margin: 0 6px; display: inline-block;}
.bone.login .form-login-soc li a{width: 40px;height: 40px; background: url(../images/index/bg-sprite.png) top left no-repeat;  text-indent: -9999px;}
.bone.login .form-login-soc li a:hover {opacity: 0.8;}
.bone.login .form-login-soc li a.ok { background-position: -362px -82px;}
.bone.login .form-login-soc li a.fb { background-position: -310px -82px;}
.bone.login .form-login-soc li a.vk { background-position: -258px -82px;}

/* REGISTRATION */
.bone.register .form-registration { position: relative;}
.bone.register .form-registration .submit {padding: 0; width: 100%; margin-top: 10px; margin-bottom: -10px;}

form .bday-select{float:right ;margin-bottom: 0;margin-left:8px;}
form .bday-select.year .pseudo-select .select{width: 37px;}
form .bday-select.month .pseudo-select .select{width: 67px;}
form .bday-select.day .pseudo-select .select{width: 17px;}
form .bday-select .pseudo-select .options {width: 100%; max-height: 160px;}
form .rules-check{position: absolute;width: 22px;height: 22px;top:0;left:0;z-index: 2;}
form .rules-check input{display: block;width: 20px;height: 20px;border: 0 none;margin: 0;padding: 0;position: absolute;z-index: 5;top: 0;left: 0;cursor: pointer;opacity: 0;}
form .rules-check span {display: block;position: absolute;top: 0;left: 0;width: 20px;height: 20px; z-index: 3; background:  url(../images/index/bg-sprite.png)  0 -115px no-repeat;}
form .rules-check.rules-check2 span { background-position: 0 -147px;}
form .rules-check input:checked + span {background:  url(../images/index/bg-sprite.png)  -26px -115px no-repeat;}
form .rules-check.rules-check2 input:checked + span { background-position: -26px -147px ;}
form .gender-line .label {line-height: 20px; width: 50px; margin-right: 35px;}
form .gender-line .label.rules-note {font: italic 11px/20px Arial,Verdana,sans-serif; margin-left: 30px; white-space: nowrap;}
form .rules-check + label {font: italic 13px/20px Arial,Verdana,sans-serif; padding-left: 30px; cursor: pointer; position: relative; z-index: 10;}
form .rules-check + label.rules-note { font-size: 11px; white-space: nowrap;}
form .rules-check + label.rules-note a{ text-decoration: underline;}
form .rules-check + label.rules-note a:hover{ text-decoration: none;}
#captcha-popup { display: block;}
#captcha-popup .popup {width: 484px;}
#register-popup { display: block; }
#register-popup.hide { display: none;}

/* CAPTCHA */
.bone.register .capcha {text-align: left; font: 12px/12px Arial,Verdana,sans-serif; width: 300px; margin: 23px auto 0; position: relative; left: 13px;}
.bone.register .capcha label {font: bold 14px/14px Arial,Verdana,sans-serif; text-transform: uppercase;}
.bone.register .capcha .input-text-small {width: 98px; height: 35px; background: url(../images/index/bg-input-small.png) top left no-repeat;
  border: none; padding: 0 10px; display: inline-block;vertical-align: top; border: 1px solid transparent; outline: none;}
.bone.register .capcha-src { width: 120px; height: 35px; background: url(../images/index/bg-input-small.png) top left no-repeat; display: inline-block; overflow: hidden;}
.bone.register .capcha-src img {width: 120px; height: 35px;}
.bone.register .arrow-right { width: 22px; height: 35px; background: url(../images/index/arrow-right.png) center left no-repeat; display: inline-block; margin: 0 3px;}
.bone.register .capcha-wrapper { margin-top: 8px; font-size: 0; display: inline-block;}
.bone.register .btn-capcha {font: 14px/16px Arial,Verdana,sans-serif; padding: 0 0 4px 22px; background: url(../images/index/bg-capcha.png) center left no-repeat; margin-top: 2px; margin-left: 1px;}

/* RULES */
.bone.rules .img-rules { display: block; margin: 95px auto 0;}
.bone.rules .rules-list { display: block; margin: 42px auto 0; text-align: center; position: relative; width: 960px; height: 100px; right: 30px;}
.bone.rules .rules-list li { width: 300px; position: absolute; top: 0;}
.bone.rules .rules-list li.rule-1 { left: 8px;}
.bone.rules .rules-list li.rule-2 { left: 50%; margin-left: -150px;}
.bone.rules .rules-list li.rule-3 {right: 12px;}
.bone.rules .rules-list li .title {font: 15px/18px 'nivea_bold_ot',sans-serif; text-transform: uppercase;}
.bone.rules .rules-list li .about {font: 13px/15px 'nivea_book_ot',sans-serif; margin-top: 5px;}
.bone.rules .btn-download {font: 12px/15px 'nivea_book_ot',sans-serif; text-transform: uppercase; text-decoration: underline; width: 200px; text-align: center;
  position: absolute; bottom: 17px; left: 50%; margin-left: -100px;}
.bone.rules .btn-download:hover { text-decoration: none;}
.bone.rules .btn-download:after {content: ''; width: 32px;height: 47px; position: absolute; left: 50%; margin-left: -16px; top: -47px;
  background:  url(../images/index/bg-sprite.png) -402px 0 no-repeat;}

/* PRODUCT */
.bone.product .content-wrapper { background: url(../images/product/bg-product_s.jpg?v=1) top left no-repeat;}
.bone.product .about {font: 15px/21px 'nivea_book_ot',sans-serif; position: absolute; top: 245px; left: 60px;right: 60px;}
.bone.product .about li { position: absolute; top: 0; width: 300px;}
.bone.product .about .line1 { text-align: right; left: 50%; margin-left: -418px;}
.bone.product .about .line2 { text-align: left; left: 50%; margin-left: 103px; top: 178px;}

/* WINNERS */
.bone.winners .winners-wrapper {width: 960px; margin: 10px auto 0;  /*padding: 30px;*/ float: left; text-align: center;}
.bone.winners .winners-wrapper .winners-form {overflow: auto; width: 640px;  padding: 27px 30px 30px;background: rgba(0, 10, 39, 0.4); display: inline-block; }
.bone.winners .winners-wrapper .all-winners { max-height: 350px; outline: none;  display: inline-block; text-align: left; overflow: hidden;}
.bone.winners .week-winners {border-top: 1px dotted #2089e1; display: inline-block; margin-left: 30px; position: relative; margin-bottom: 39px;}
.bone.winners .ver2 .week-winners {border-top: none;}
.bone.winners .week-winners:last-child {margin-bottom: 0;}
.bone.winners .week-winners .winner-count { position: absolute; top: -1px; left: -30px;bottom: 0; width: 20px; background: #2089e1;
  font: 12px/20px 'nivea_book_ot',sans-serif; text-transform: uppercase;}
.bone.winners .week-winners .winner-count span { display: block; white-space: nowrap; text-align: center; margin-left: 10px;
  -moz-transform: translateX(-50%) rotate(-90deg);
  -ms-transform: translateX(-50%) rotate(-90deg);
  -webkit-transform: translateX(-50%) rotate(-90deg);
  -o-transform: translateX(-50%) rotate(-90deg);
  transform: translateX(-50%) rotate(-90deg);}
.bone.winners .week-winners .winner-count {}

.bone.winners .me-line,
.bone.winners .one-winner {width: 569px; height: 33px; border-bottom: 1px dotted #2089e1; text-transform: uppercase; overflow: hidden; white-space: nowrap;
  font: 16px/33px 'nivea_book_ot',sans-serif; position: relative;}
.bone.winners .me-line { text-align: left; margin-left: 50px; color: #2089e1; border-bottom: none; margin-top: 13px;}
bone.winners .one-winner:last-child {}

.bone.winners .one-winner.me .me{ background-color: #135697; position: absolute; top: 2px;left: 0;right: 0;bottom: 3px;}
.bone.winners .me-line .place,
.bone.winners .one-winner .place { display: inline-block; width: 20px; position: relative; overflow: hidden; margin-left: 7px;}
.bone.winners .me-line .place {min-width: 20px; width: auto;}
.bone.winners .me-line .name,
.bone.winners .one-winner .name { display: inline-block; width: 470px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-left: 7px; position: relative;}
.bone.winners .me-line .points,
.bone.winners .one-winner .points { position: absolute; text-align: right; top: 0;right: 9px;}

.bone.winners .winners-list-wrapper { width: 960px; overflow: hidden;}
.bone.winners .winners-list {width: 9999px; position: relative; left: 0;
  -moz-transition: left ease-out .5s;
  -webkit-transition: left ease-out .5s;
  -o-transition: left ease-out .5s;
  transition: left ease-out .5s;
}

.bone.winners .img-winner {margin-top: 20px;}
.bone.winners .winner-title {font: 36px/36px 'nivea_bold_ot',sans-serif; margin-top: 10px;}
.bone.winners .winner-about {font: 24px/32px 'nivea_medium_ot',sans-serif; margin-top: 18px;}
.bone.winners .winner-about strong {font: 36px/48px 'nivea_bold_ot',sans-serif;}

/* PRIZES */

.bone.prizes .prizes-list-wrapper { width: 960px; overflow: hidden;}
.bone.prizes .prizes-list {width: 9999px; position: relative; left: 0;
  -moz-transition: left ease-out .5s;
  -webkit-transition: left ease-out .5s;
  -o-transition: left ease-out .5s;
  transition: left ease-out .5s;
}
.bone.prizes .prizes-list li {width: 960px; float: left;}
.bone.prizes .prizes-list li .img-wrapper { height: 400px; margin-top: 20px;}
.bone.prizes .prizes-list li .img-wrapper img { display: block; margin: 0 auto; position: relative;}
.bone.prizes .prizes-list li .img-wrapper img.img2 {left: 63px;}
.bone.prizes .prizes-list .note { text-align: center; font: 16px/18px 'nivea_book_ot',sans-serif; margin-top: 15px;}
.bone .btns-nav { position: absolute; top: 270px; left: 0;right: 0; z-index: 10;}
.bone .btns-nav a { position: absolute; width: 41px;height: 41px; background: url(../images/index/bg-sprite.png) top left no-repeat; text-indent: -9999px;}
.bone .btns-nav .prev { left: 45px; background-position: -57px -157px;}
.btns-nav .prev {display: none;}
.bone .btns-nav .prev:hover {background-position: -128px -157px ;}
.bone .btns-nav .next { right: 45px; background-position: -57px -94px ;}
.bone .btns-nav .next:hover { right: 45px; background-position: -128px -94px ;}

/* TUTORIAL */
#tutorial { position: absolute; top: 0;left: 0;right: 0;bottom: 0; display: none; overflow: hidden;}
#tutorial .tutorial-list-wrapper { width: 960px; overflow: hidden;}
#tutorial .tutorial-list {width: 9999px; position: relative; left: 0;
/*  -moz-transition: left ease-out .5s;
  -webkit-transition: left ease-out .5s;
  -o-transition: left ease-out .5s;
  transition: left ease-out .5s;*/
}
#tutorial .tutorial-list .btn-start {width: 248px;height: 44px; border: 3px solid #fff; font: 18px/44px 'nivea_medium_ot',sans-serif; text-transform: uppercase;
  position: absolute; top: 305px; left: 50%; margin-left: -124px; text-align: center; color: #fff;
  -moz-transition: all ease-out .15s;
  -webkit-transition: all ease-out .15s;
  -o-transition: all ease-out .15s;
  transition: all ease-out .15s;}
#tutorial .tutorial-list .btn-start:hover {border: 3px solid #087cd6; color: #087cd6;}
#tutorial .btns-nav {top: 310px;}
#tutorial .tutorial-list li {width: 960px; float: left; position: relative;}
#tutorial .btn-close {height: 40px; background:  url(../images/game/btn-help.png?v=3) top left no-repeat; position: absolute; z-index: 10;
  bottom: 10px; right: 17px; background-position: right -290px; color: #fff; font: 14px/40px 'nivea_medium_ot',sans-serif; padding-right: 55px;}
/* FOOTER */
.footer {height: 50px; background-color: #013968; position: relative;}
.footer .footer-bottle-wrapper {position: absolute; top: -157px; right: 0px; width: 124px; height: 284px;}
.footer .footer-bottle { width: 124px; height: 100%; background: url(../images/index/footer-bottle.png?v=3) top left no-repeat; position: absolute; top: 0; left: 0px; z-index: 1}
.footer .footer-bottle-glow {width: 281px;height: 358px; background: url(../images/index/footer-bottle-glow.png?v=4) center center; display: inline-block; position: absolute;
  top: -74px;right: -6px; opacity: 0;}
.footer .footer-bottle-wrapper .footer-bottle:hover { opacity: 0;}
.footer .footer-bottle-wrapper .footer-bottle:hover + div.footer-bottle-glow { opacity: 1;}
.footer-share { float: left; margin-left: 0; height: 30px; margin-top: 10px;}
.footer-share li {margin-left: 8px; float: right;}
.footer-share li a{width: 30px;height: 30px; background: url(../images/index/bg-sprite.png) top left no-repeat;  text-indent: -9999px;}
.footer-share li a:hover {opacity: 0.8;}
.footer-share li a.ok { background-position: -352px 0;}
.footer-share li a.fb { background-position: -314px 0;}
.footer-share li a.vk { background-position: -276px 0;}
.footer-share-label {font: 12px/50px 'nivea_book_ot',sans-serif; float: left; text-transform: uppercase; margin-left: 20px;}
.footer .btn-feedback { color: #737373; font: 11px/13px 'nivea_book_ot',sans-serif; text-align: left; position: absolute; bottom: -36px; left: 20px;}
/* POPUP */
#def-popup {}
.popup-wrapper { position: absolute; top: 0;left: 0;right: 0;bottom: 0; background-color: rgba(0,0,0,0.75); z-index: 9999; display: none;}
.popup {width: 600px; background-color: #013968; border: 1px solid #104c84; margin: 0 auto; min-height: 170px; position: relative; text-align: center;}
.popup .popup-close {width: 20px;height: 20px; background: url(../images/index/bg-sprite.png) 2px 2px no-repeat; text-indent: -9999px; position: absolute; top: 10px;right: 10px;}
.popup .popup-close:hover { background-position: -30px 2px;}
.popup .popup-space { padding: 42px 30px 30px;}
.popup .popup-space2 { padding: 32px 30px 20px;}
.popup .title {font: 30px/30px 'nivea_bold_ot',sans-serif; text-transform: uppercase; margin-bottom: 20px;}
.popup .about {font: 18px/21px 'nivea_book_ot',sans-serif;}
.popup .about strong {font: 22px/22px 'nivea_bold_ot',sans-serif;}
.popup .submit { margin: 27px 0 0;}
.popup .submit.btn-contin,
.popup .submit.btn-galka,
.popup .submit.btn-again {  width: 260px; padding: 0; height: 50px;}
.popup .submit.btn-contin2 {margin-top: 20px;}
.floated .popup .submit.btn-galka,
.floated .popup .submit.btn-again { float: left;}
.floated .popup .submit.btn-contin { float: right;}
.popup .submit.submit2.btn-contin span,
.popup .submit.btn-galka span,
.popup .submit.btn-again span { display: inline-block; padding-right: 30px;line-height: 22px;
  background: #2089e1 url(../images/index/popup-btns.png) right 0 no-repeat; background-position: right 3px ;}
.popup .submit.btn-galka span { background:  url(../images/index/btn-galka.png) center right no-repeat;}
.popup .submit.submit2.btn-contin span { background-position: right -41px ;}
.popup .submit.submit2 {/*font: 16px/31px 'nivea_book_ot',sans-serif; height: 31px; padding: 0 20px; margin-top: 16px; */display: none;}

.popup .submit.submit-padding3 {margin: 19px auto 0;}
.popup .popup-note {font: 9px/11px 'nivea_light_ot',sans-serif; color: rgba(255,255,255, 0.3); margin-top: 10px;}
.popup .field { background-color: #ffffff; width: 403px; margin: 0 auto;
  -moz-box-shadow: inset 0 3px 16px rgba(0,0,0,.5);-webkit-box-shadow:inset 0 3px 16px rgba(0,0,0,.5);box-shadow: inset 0 3px 16px rgba(0,0,0,.5);}

.popup .share-block {margin-top: 24px; display: none;}
.popup .share-block .title2 {font: 18px/18px 'nivea_bold_ot',sans-serif; text-transform: uppercase;}
.popup .share-block .footer-share { float: none; margin: 10px auto -17px auto; display: inline-block;}
.popup .share-block .footer-share li { margin: 0 9px;}
/* PSEUDO-SELECT */
.pseudo-select {position: relative;font: 15px/22px Arial,Verdana,sans-serif; color: #fff;}
.pseudo-select .select {background-color: #2089e1; color: #fff;cursor: pointer;padding: 5px 23px 5px 10px; margin: 0;
  width: 135px;height: 22px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;  outline: none; position: relative; z-index: 20;
}
.pseudo-select .select.opened .ico { display: none;}
.pseudo-select .select .line { width: 100%; height: 1px; background-color: #ffffff; position: relative; top: 10px;}
.pseudo-select .ico { width: 11px; height: 6px; background: url(../images/index/bg-sprite.png) -3px -97px no-repeat; position: absolute; top: 14px; right: 3px;}
.pseudo-select .options {position: absolute;top: 32px;left: 0;width: 172px;max-height: 310px;overflow: auto;background: #2089e1;z-index: 10;display: none;color: #fff; padding: 0;
  outline: none;}
.pseudo-select .options .check {color: #fff; position: absolute; top: 0; left: 0; right: 0; display: none;}
.pseudo-select .options .jspPane > div {padding: 5px 7px 5px 10px;cursor: pointer;}
.pseudo-select .options .jspPane > div:hover {background: #ffffff; color: #2089e1;}

/* SCROLL */
.jspContainer{overflow: hidden;position: relative;}
.jspPane{position: absolute; padding-top: 32px;}
.jspVerticalBar{position: absolute;top: 0;right: 2px;width: 3px;height: 100%;cursor: pointer;}
.scroll-pane2 .jspVerticalBar {width: 12px;}
.jspHorizontalBar{position: absolute;bottom: 0;left: 0;width: 100%;height: 16px;}
.jspVerticalBar *,
.jspHorizontalBar *{margin: 0;padding: 0;}
.jspCap{display: none;}
.jspHorizontalBar .jspCap{float: left;}
.jspTrack{background: transparent;position: relative;z-index: 100;}
.scroll-pane2 .jspTrack { background: rgba(32, 137, 225, 0.25);}
.jspDrag{position: relative;top: 0;left: 0;cursor: pointer; width: 3px; background: #fff; height: 54px;}
.scroll-pane2 .jspDrag { background: #2089e1 url(../images/index/bg-scroll.png) 1px center no-repeat; width: 20px; height: 214px; left: -2px;}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag{float: left;height: 100%;}
.jspArrow{background: #50506d;text-indent: -20000px;display: block;cursor: pointer;}
.jspArrow.jspDisabled{cursor: default;background: #80808d;}
.jspVerticalBar .jspArrow{height: 16px;}
.jspHorizontalBar .jspArrow{width: 16px;float: left;height: 100%;}
.jspVerticalBar .jspArrow:focus{outline: none;}
.jspCorner{background: #eeeef4;float: left;height: 100%;}
* html .jspCorner{margin: 0 -3px 0 0;}