html {
  box-sizing: border-box; }

/* roboto-regular - cyrillic_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"), local("Roboto-Regular"), url(fonts/7f6652096fad35bb930a2ed1904fc6c4.woff2) format("woff2"), url(fonts/2b9dfec7807cb4a69fbb276eb62c3d80.woff) format("woff");
  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }

a, a:visited {
  color: #07C; }

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  position: relative;
  min-height: 100vh; }

/*
@media (min-height: 700px) {
	overflow: hidden;
}
*/
*, *::before, *::after {
  box-sizing: inherit; }

@media (max-width: 500px) {
  .no-on-mobile {
    display: none !important; } }

canvas {
  max-width: 100%; }

#controls_host {
  width: 100%;
  text-align: center; }

#score_host, #btn_reset, #best_host {
  width: 131px;
  height: 66px;
  position: relative;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  vertical-align: top; }
  #score_host > span, #btn_reset > span, #best_host > span {
    position: absolute;
    top: 25px;
    font-size: 20px;
    font-weight: 600;
    left: 4px;
    right: 25px; }
  #score_host > button, #btn_reset > button, #best_host > button {
    position: absolute;
    top: 4px;
    font-size: 20px;
    font-weight: 600;
    left: 3px;
    right: 23px;
    color: transparent;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 7px; }

#score_host {
  background-image: url(images/851a149f2481310b604e3776ffd1c198.png); }

#best_host {
  background-image: url(images/fec4461b2e9056968679a909514b173d.png); }

#btn_reset {
  background-image: url(images/c6caf7b617b29231d6bfddccd6cab1dd.png);
  border: none;
  cursor: pointer; }
  #btn_reset:focus {
    outline: none; }

#root_host {
  max-width: 500px;
  margin: 0 auto;
  position: relative; }

#game_screen_host {
  width: 100%; }
  #game_screen_host > canvas {
    width: 100%; }

#ded_moroz_left, #ded_moroz_right {
  position: fixed;
  width: 300px;
  top: 0; }
  #ded_moroz_left > img, #ded_moroz_right > img {
    width: 100%;
    display: none; }
  #ded_moroz_left.animated > .animated, #ded_moroz_right.animated > .animated {
    display: inline-block; }
  #ded_moroz_left.static > .static, #ded_moroz_right.static > .static {
    display: inline-block; }

#ded_moroz_right {
  left: calc(50% + 250px); }

#ded_moroz_left {
  right: calc(50% + 250px); }

#difficulty_selector {
  width: 100%;
  text-align: center; }
  #difficulty_selector > div {
    background-image: url(images/a2adedddb3b88f9558d6209270efdadd.png);
    background-color: transparent;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    @media (max-width: 500px) {
      #difficulty_selector > div {
        height: 100vw; } }
    @media (min-width: 501px) {
      #difficulty_selector > div {
        height: 500px; } }
    #difficulty_selector > div > div {
      width: 150px;
      height: 83px;
      flex-grow: 0;
      flex-shrink: 0;
      background-color: transparent;
      background-repeat: no-repeat;
      background-size: contain;
      position: relative; }
      #difficulty_selector > div > div.dfc-5x5 {
        background-image: url(images/4c5c0ed6bf48e1800f19991c44212483.png); }
      #difficulty_selector > div > div.dfc-7x7 {
        background-image: url(images/9321e4bb466c87c32dd56b66bb032367.png); }
      #difficulty_selector > div > div.dfc-9x9 {
        background-image: url(images/455dcb6b7e7258ad4ee2bb78f9fc4603.png); }
      #difficulty_selector > div > div > button {
        background-color: transparent;
        border: none;
        border-radius: 7px;
        position: absolute;
        top: 5px;
        left: 5px;
        width: 131px;
        height: 63px;
        cursor: pointer; }

@media (max-width: 1040px) {
  #ded_moroz_left, #ded_moroz_right {
    display: none; } }

@media (min-width: 501px) {
  #title_host {
    width: 100%;
    position: relative;
    text-align: center; }
  #title_img {
    max-width: 100%; }
  #game_screen_host {
    margin-top: 15px; }
  #ded_moroz_slideshow {
    display: none; }
  #root_host {
    margin-top: -45px !important; } }

@media (max-width: 500px) {
  #title_host {
    margin-bottom: -8vw; }
  #score_host, #btn_reset, #best_host {
    width: 30vw;
    height: 15vw; }
    #score_host > span, #btn_reset > span, #best_host > span {
      top: 37%;
      font-size: 4vw;
      left: 1vw;
      right: 6vw; }
    #score_host > button, #btn_reset > button, #best_host > button {
      top: 1vw;
      bottom: 2.7vw;
      font-size: 4vw;
      left: 1vw;
      right: 5.7vw;
      border-radius: 2vw; }
  /*
		#score_host {
			background-image: url("../img/mob-score-current.png");
		}

		#best_host {
			background-image: url("../img/mob-score-best.png");
		}

		#btn_reset {
			background-image: url("../img/mob-new-game.png");
		}
	*/ }

@media (max-width: 500px) {
  #root_host {
    margin-top: -25px !important; }
  #title_host {
    min-height: 95px;
    overflow: hidden;
    position: relative;
    margin-bottom: -40px; }
  #title_img {
    top: -27px;
    position: absolute;
    left: 50%;
    width: 500px;
    margin-left: -240px; }
  #ded_moroz_slideshow {
    height: 200px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    background-image: url(images/8cdc8f618bc6c95e274693055c584a46.gif);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position-y: 50px; }
    #ded_moroz_slideshow > .static {
      height: 150px;
      width: 1155px;
      background: url(images/03c2a32d72377aff7f0ff91a822a95cc.png);
      background-size: contain;
      position: absolute;
      top: 0;
      left: 0;
      transform: translate3d(0, 0, 0);
      animation: moveSlideshow 5s linear infinite; }
    #ded_moroz_slideshow > .animated {
      height: 150px;
      width: 1155px;
      background: url(images/0fc2a74fd3742b3b58d48fc0fb714fc9.gif);
      background-size: contain;
      position: absolute;
      top: 0;
      left: 0;
      transform: translate3d(0, 0, 0);
      animation: moveSlideshow 5s linear infinite; }
    #ded_moroz_slideshow.animated > .static, #ded_moroz_slideshow.static > .animated {
      visibility: hidden; } }

@keyframes moveSlideshow {
  100% {
    transform: translateX(-66.6666%); } }

#current_user {
  display: block;
  position: relative;
  max-width: 400px;
  min-height: 105px;
  margin: 0 auto; }
  #current_user > .login-button-for-guest {
    position: absolute; }
    @media (min-width: 501px) {
      #current_user > .login-button-for-guest {
        top: 20px;
        right: -62px; } }
    @media (max-width: 500px) {
      #current_user > .login-button-for-guest {
        top: 15px;
        right: 20px; } }
  #current_user > .player-img {
    position: absolute;
    left: 20px;
    width: 80px;
    height: 80px; }
    @media (min-width: 501px) {
      #current_user > .player-img {
        top: 20px; } }
    @media (max-width: 500px) {
      #current_user > .player-img {
        top: 15px; } }
  #current_user > .name {
    height: 60px;
    font-weight: bold; }
  #current_user > .logout {
    font-weight: bold; }
  @media (min-width: 501px) {
    #current_user {
      padding: 20px 20px 20px 120px;
      margin: 0 auto 10px; } }
  @media (max-width: 500px) {
    #current_user {
      padding: 15px 20px 15px 120px; } }

#game_over_dialog {
  top: 0;
  left: 0;
  right: 0;
  min-height: 450px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute; }

#game_over_dialog > div {
  background-image: url(images/54b1111a4b2169ace982c3706bc7725c.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 287px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -143px;
  box-shadow: gray 2px 4px 8px;
  border-radius: 12px;
  text-align: center; }
  #game_over_dialog > div > h1 {
    text-transform: uppercase; }
  #game_over_dialog > div > div {
    margin-bottom: 25px; }
    #game_over_dialog > div > div > * {
      display: block; }
    #game_over_dialog > div > div > .value {
      font-weight: bold;
      font-size: 30px; }
    #game_over_dialog > div > div > .caption {
      font-size: 25px;
      padding: 0 10px; }
  #game_over_dialog > div > h1 {
    font-size: 22px;
    padding: 6px 50px 10px; }
  #game_over_dialog > div > .ok {
    position: absolute;
    top: 328px;
    width: 117px;
    left: 85px;
    height: 51px;
    background: none;
    border: none;
    cursor: pointer; }
  @media (min-height: 450px) {
    #game_over_dialog > div {
      position: fixed; } }
  @media (max-height: 449px) {
    #game_over_dialog > div {
      position: absolute;
      top: 20px !important;
      margin-top: 0 !important; } }

#game_records_link {
  margin: 20px auto 0;
  background-image: url(images/e331d7c84c8841fd9c91ad84f7a99fd5.png);
  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
  text-transform: uppercase;
  font-size: 24px;
  background-color: transparent;
  position: relative; }
  @media (max-width: 500px) {
    #game_records_link {
      width: 100vw;
      height: 18.5vw; } }
  @media (min-width: 501px) {
    #game_records_link {
      width: 500px;
      height: 93px; } }
  #game_records_link > a {
    display: block;
    position: absolute;
    top: 8%;
    bottom: 23%;
    left: 2%;
    right: 5%;
    color: transparent !important;
    text-align: center;
    border-radius: 6px; }

/* records.php */
#score_board_controls > .btn-back {
  text-align: right; }

#score_board_controls > .type-switch {
  display: flex;
  margin-bottom: 20px; }
  #score_board_controls > .type-switch > a, #score_board_controls > .type-switch > span {
    flex-grow: 1;
    flex-shrink: 1;
    display: block;
    padding: 10px;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    text-align: center; }
  #score_board_controls > .type-switch > :not(:first-child) {
    border-left: 3px solid rgba(0, 0, 0, 0.4); }
  #score_board_controls > .type-switch > a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.4); }
    #score_board_controls > .type-switch > a:hover {
      color: black; }

#back_to_game_btn {
  background-image: url(images/85fd24a9a94b0873e42597f0d7aeacce.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 66px;
  width: 150px;
  vertical-align: middle;
  position: relative; }
  #back_to_game_btn > a {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    height: 46px;
    width: 131px;
    border-radius: 6px; }

.player-img {
  border-radius: 50%;
  border: 1px solid white;
  background: none no-repeat center;
  background-size: cover;
  width: 65px;
  height: 65px;
  box-shadow: gray 2px 4px 8px; }

.login-button-for-guest {
  display: block;
  width: 77px;
  height: 100px;
  margin: 0 auto;
  background-image: url(images/68e5b9ca781b065b25a5c049e3001038.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative; }
  .login-button-for-guest > a {
    position: absolute;
    top: 4%;
    left: 5%;
    display: block;
    width: 80%;
    height: 84%;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border-radius: 11%;
    color: transparent; }

@media (max-width: 500px) {
  .login-button-for-guest {
    width: 19.25vw;
    height: 25vw; } }

/*
@media (max-width: 500px) {
	.login-button-for-guest {
		display: block;
		width: 145px;
		height: 80px;
		margin: 0 auto;

		background-image: url("../img/mob-login-btn-vk.png");
		background-repeat: no-repeat;
		background-size: contain;

		position: relative;

		> a {
			position: absolute;
			top: 6%;
			left: 3%;
			display: block;
			width: 88%;
			height: 77%;
			margin: 0;
			padding: 0;
			text-align: center;
			vertical-align: middle;
			border-radius: 8%;
			color: transparent;
		}
	}
}
*/
.login-to-save {
  display: block;
  margin: 50px auto 0;
  width: 200px;
  height: 60px;
  border-radius: 5px;
  border: 1px solid gray;
  background-color: #add8e6;
  background-image: url(images/7d4cc96ca81e902fa2cf17c9308cdc3a.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right; }
  .login-to-save > a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 5px 65px 5px 5px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500; }

.tour-root {
  position: relative;
  background-image: url(images/079baf0e6f39a4b361aacf049d7f19c9.png);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  padding-bottom: 10px; }
  .tour-root > .tour-num {
    position: absolute;
    width: 60px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold; }
    .tour-root > .tour-num > span {
      color: #008d84; }
      .tour-root > .tour-num > span.num {
        font-size: 26px; }
      .tour-root > .tour-num > span.text {
        font-size: 20px; }
    @media (max-width: 500px) {
      .tour-root > .tour-num {
        top: -36px;
        left: 6px; } }
    @media (min-width: 501px) {
      .tour-root > .tour-num {
        top: 0;
        left: -60px; }
        .tour-root > .tour-num > span {
          display: block; } }
  .tour-root > .tour-not-started, .tour-root > .tour-not-played {
    padding: 20px 30px;
    color: grey; }
  @media (max-width: 500px) {
    .tour-root:not(:last-child) > .tour-not-started, .tour-root:not(:last-child) > .tour-not-played {
      padding: 20px 30px 50px;
      background-image: url(images/079baf0e6f39a4b361aacf049d7f19c9.png);
      background-repeat: no-repeat;
      background-position-y: calc(100% - 30px);
      background-size: contain; } }
  .tour-root > .tour-padding {
    padding-bottom: 40px;
    background-image: url(images/079baf0e6f39a4b361aacf049d7f19c9.png);
    background-repeat: no-repeat;
    background-position-y: calc(100% - 30px);
    background-size: contain; }
    .tour-root > .tour-padding > .tour-table {
      width: 100%;
      border-collapse: collapse;
      margin: 0;
      padding: 0; }
      .tour-root > .tour-padding > .tour-table td {
        vertical-align: middle;
        padding: 5px 5px 5px 5px; }
      .tour-root > .tour-padding > .tour-table tr {
        height: 75px; }
        .tour-root > .tour-padding > .tour-table tr:nth-child(even) {
          background-color: #dff1fd; }
        .tour-root > .tour-padding > .tour-table tr.current {
          background-color: #faebd7 !important; }
        .tour-root > .tour-padding > .tour-table tr:not(:last-child) {
          height: 85px;
          background-image: url(images/079baf0e6f39a4b361aacf049d7f19c9.png);
          background-repeat: no-repeat;
          background-position: bottom;
          background-size: contain; }
          .tour-root > .tour-padding > .tour-table tr:not(:last-child) > td {
            padding-bottom: 15px !important; }

#score_board {
  font-weight: 500; }
  #score_board.total {
    background-image: url(images/079baf0e6f39a4b361aacf049d7f19c9.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    padding-bottom: 10px; }
  @media (min-width: 500px) {
    #score_board.tours {
      padding-left: 60px; } }
  #score_board > .header {
    display: flex;
    text-transform: uppercase;
    background-image: url(images/079baf0e6f39a4b361aacf049d7f19c9.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    padding-bottom: 10px; }
    #score_board > .header > div:first-child {
      flex-grow: 1; }
  #score_board > .body > table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    padding: 0; }
    #score_board > .body > table td {
      vertical-align: middle;
      padding: 5px 5px 5px 5px; }
    #score_board > .body > table tr {
      height: 75px; }
      #score_board > .body > table tr:nth-child(even) {
        background-color: #dff1fd; }
      #score_board > .body > table tr.current {
        background-color: #faebd7 !important; }
      #score_board > .body > table tr:not(:last-child) {
        height: 85px;
        background-image: url(images/079baf0e6f39a4b361aacf049d7f19c9.png);
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: contain; }
        #score_board > .body > table tr:not(:last-child) > td {
          padding-bottom: 15px !important; }
  #score_board .col-score {
    width: 100px;
    text-align: center; }
  #score_board .col-place {
    width: 100px;
    text-align: center; }
  #score_board .col-user {
    text-align: left;
    padding-left: 85px !important;
    position: relative; }
    #score_board .col-user > .player-img {
      position: absolute;
      left: 5px;
      top: 5px; }

@keyframes show-hide-santa {
  0% {
    background-position-x: 0; }
  50% {
    background-position-x: -100%; }
  100% {
    background-position-x: 0; } }

@keyframes show-hide-santa-mobile {
  0% {
    background-position-x: 0; }
  50% {
    background-position-x: -99.4vw; }
  100% {
    background-position-x: 0; } }

@media (min-width: 501px) {
  body.login {
    background-image: url(images/73426984b4f551a5fc7c9d0572ea75aa.png);
    background-color: #002625;
    background-size: cover;
    min-height: 100vh; }
  #login_root {
    margin: 0 auto;
    height: 100vh;
    width: 128vh;
    max-width: 100vw;
    position: relative; }
    #login_root > .bg {
      display: none; }
    #login_root > .person {
      background-size: cover;
      background-image: url(images/70f9b92dc58eb392b5b2fe032378253b.png);
      width: 84.53vh;
      height: 74vh;
      position: absolute;
      bottom: 0;
      right: 0;
      animation: show-hide-santa 2s step-end infinite; }
    #login_root > .game-title {
      background-image: url(images/8c2fb3b97c5838add3e5b5cd99e88563.png);
      background-repeat: no-repeat;
      background-size: contain;
      width: 60vh;
      height: 25vh;
      position: absolute;
      top: 8vh;
      left: 8vh; }
    #login_root > .logo {
      background-image: url(images/75080dcd8e6317de7c7e48d5f36cb511.png);
      background-repeat: no-repeat;
      background-size: contain;
      width: 20vh;
      height: 8vh;
      position: absolute;
      top: 8vh;
      right: 8vh; }
  #login_guest, #login_vk {
    position: absolute;
    left: 8vh;
    height: 8vh;
    width: 25vh;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent; }
    #login_guest > a, #login_vk > a {
      display: block;
      position: absolute;
      color: transparent;
      width: 24vh;
      height: 6.2vh;
      top: 0.3vh;
      left: 0.3vh;
      border: none;
      border-radius: 1.8vh; }
  #login_guest {
    background-image: url(images/29b59483a59df4c6d86a77e7dc7e34b2.png);
    top: 80vh; }
  #login_vk {
    background-image: url(images/accf725700a3323db2512bb47fbab9b6.png);
    top: 70vh; }
  #login_rules {
    position: absolute;
    left: 10vh;
    top: 90vh; }
    #login_rules > a {
      font-size: 3vh;
      color: white; } }

@media (max-width: 500px) {
  body.login {
    background-color: #008d84;
    background-position: top;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 100vh; }
  #login_root {
    height: 100%;
    position: relative; }
    #login_root > .bg {
      height: 110vw;
      background-size: cover;
      background-image: url(images/73426984b4f551a5fc7c9d0572ea75aa.png);
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0; }
    #login_root > .person {
      background-size: cover;
      background-image: url(images/0fa96cf6b9fd0aab8b39c0bd8eb8c3bd.png);
      width: 84vw;
      height: 87vw;
      position: absolute;
      top: 23vw;
      right: 0;
      animation: show-hide-santa-mobile 2s step-end infinite; }
      #login_root > .person:hover {
        background-image: url(images/70f9b92dc58eb392b5b2fe032378253b.png); }
    #login_root > .game-title {
      background-image: url(images/c7c2960bb776d423fe32b86c66bd9ce7.png);
      background-repeat: no-repeat;
      background-size: contain;
      width: 15vw;
      height: 103vw;
      position: absolute;
      top: 5vw;
      left: 2vw; }
    #login_root > .logo {
      background-image: url(images/75080dcd8e6317de7c7e48d5f36cb511.png);
      background-repeat: no-repeat;
      background-size: contain;
      width: 35vw;
      height: 10vw;
      position: absolute;
      top: 6vw;
      right: 3vw; }
  #login_guest, #login_vk {
    position: absolute;
    left: 50%;
    margin-left: -35vw;
    height: 20vw;
    width: 70vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent; }
    #login_guest > a, #login_vk > a {
      display: block;
      position: absolute;
      color: transparent;
      width: 66.3vw;
      height: 17vw;
      top: 1.5vw;
      left: 1.5vw;
      border-radius: 5vw; }
  #login_guest {
    background-image: url(images/2d627ee3ddada0096738ee529e97a421.png);
    top: 133vw; }
  #login_vk {
    background-image: url(images/b15cd48956ea7ebb58f40ddefad6832e.png);
    top: 114vw; }
  #login_rules {
    position: absolute;
    left: 50%;
    top: 154vw;
    margin-left: -13vw; }
    #login_rules > a {
      font-size: 6vw;
      color: white !important; } }