@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  border: none;
  outline: none;
  font-family: Montserrat;

  touch-action: none;
}
.draggable {
  touch-action: none;
}
html, body {
  font-size: 0.0520833333vw;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #222;
}

.container {
  width: 1463rem;
  margin: 0 calc((100vw - 1463rem) / 2);
}

header {
  border-bottom: 2rem solid var(--Gray-2, #4F4F4F);
  background: #222;
  box-shadow: 0rem 10rem 50rem 0rem rgba(0, 0, 0, 0.2);
  padding: 8rem 0;
  position: fixed;
  z-index: 2;
}
header .container {
  display: flex;
  align-items: center;
}

.header__home img, .reset img, .logo img, .bigLogo img {
  width: 100%;
  height: 100%;
}

.header__home {
  width: 73rem;
  height: 72rem;
  margin-right: 21rem;
}
.header__exit,
.header__choose {
  font-size: 20rem;
  color:#87BC24;
}
.header__choose {
    margin-left: 20px;
    text-wrap: nowrap;
    display: none;
}


.reset {
  width: 70rem;
  height: 71rem;
  margin-right: 1009rem;
}
.reset.specific-margin {
  margin-right: 739rem;
}

.logo {
  width: 100rem;
  height: 36rem;
  margin-right: 22rem;
}

.bigLogo {
  width: 168rem;
  height: 74rem;
}

.verevka {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 87rem;
  z-index: 1;
  width: 422rem;
  height: 194rem;
  flex-shrink: 0;
}

.main-container {
  width: 1459rem;
  margin: 0 calc((100vw - 1459rem) / 2);
  margin-top: 143rem;
  height: calc(100vh - 143rem);
}
.main-container.center {
  text-align: center;
}
.login_block{
    color:#fff;
    margin-top: 100px;
    font-size: 20px;
}
.login_block p{
    padding-bottom: 30px;
}
.login_block p.error{
    padding-bottom: 10px;
    padding-top: 20px;
    font-size: 15px;
    line-height: 17px;
        height: 47px;
}
.login_block span{
    display: inline-block;
    font-size: 20px;
    text-transform: uppercase;
    background: #87BC24;
    border-radius: 10px;
    padding: 10px 15px;
    margin-top:20px;
    cursor: pointer;
}

.login_block span.start_game_button{
    display: inline-block;
    font-size: 20px;
    text-transform: uppercase;
    background: #87BC24;
    border-radius: 10px;
    padding: 10px 15px;
    margin-top:20px;
    margin-right: 20px;
    cursor: pointer;
}
.login_block input{
    display: inline-block;
    width: 306px;
    font-size:  20px;
    padding: 10px 7px;
}

.main-slider {
  width: 100%;
  height: 767rem;
}

.swiper-slide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 767rem;
}
.swiper-slide.active .okay {
  opacity: 1;
}
.swiper-slide.active .snow-top ,
.swiper-slide.active .snow-btm {
  opacity: 0;
}


.plate {
  position: absolute;
  width: 1155rem;
  height: 753rem;
  flex-shrink: 0;
  top: 12rem;
}

.snow-top {
  position: absolute;
  width: 443rem;
  flex-shrink: 0;
  top: 0;
  left: 140rem;
  z-index: 3;
}

.snow-btm {
  position: absolute;
  width: 670rem;
  height: 70rem;
  flex-shrink: 0;
  bottom: 0;
  right: 240rem;
  z-index: 3;
}

.mainImg {
  width: 876rem;
}

.main-slider-prev, .main-slider-next {
  width: 100rem;
  height: 100rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  cursor:pointer;
}

.okay {
  position: absolute;
  bottom: -11rem;
  right: 142rem;
  width: 303rem;
  height: 234rem;
  flex-shrink: 0;
  opacity: 0;
}

.main-slider-prev {
  left: 0;
}

.arrImg {
  width: 100%;
  height: 100%;
}

.main-slider-next {
  right: 0;
}
.main-slider-next.gameWon {
  width: 209rem;
  height: 209rem;
  flex-shrink: 0;
  right: 30rem;
}

.lines {
  position: absolute;
  width: 100vw;
  bottom: 0;
  left: 0;
  z-index: 0;
}
main{
    position: relative;
    z-index: 1;
}

.swiper-scrollbar {
  margin-top: 24rem;
  width: 1519rem;
  height: 20rem;
  flex-shrink: 0;
  border-radius: 50rem;
  background: linear-gradient(180deg, #FFF 0%, #CDCDCD 100%);
  box-shadow: 0rem 91.533rem 183.067rem 0rem rgba(51, 51, 51, 0.31), 0rem 32.342rem 32.342rem 0rem #FFF inset, 0rem -32.342rem 32.342rem 0rem #C0C0C0 inset;
}

.swiper-scrollbar-drag {
  border-radius: 50rem;
  background: linear-gradient(180deg, #6AF7FF 0%, #3E91AC 100%);
  box-shadow: 0rem 19.467rem 38.933rem 0rem rgba(17, 41, 48, 0.46), 0rem 8.782rem 8.782rem 0rem #70FFFF inset, 0rem -8.782rem 8.782rem 0rem #38829B inset;
}

.slideHref {
  position: absolute;
  z-index: 4;
 width: 1155rem;
  height: 753rem;
}

.gameMain {
  margin-top: 92rem;
  height: calc(100vh - 92rem);
  display: flex;

}

.imgContainer {
  margin-top: 60rem;
  margin-left: 224rem;
  padding: 20rem;
  width: 1152rem;
  height: 764rem;
  border-radius: 20rem;
  flex-shrink: 0;
  margin-right: 69rem;
  position: relative;
  z-index: 2;
}
.img_canvas{
  left: 224rem;
  padding: 20rem;
  width: 1152rem;
  height: 764rem;
  border-radius: 20rem;
  background: #FFF;
  flex-shrink: 0;
  margin-right: 69rem;
  position: fixed;
  z-index: 2;
}
.canvasBlock {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.canvasBlock img{
  position: absolute;
  translate: none !important;
  position:  absolute !important;
}

.gameImg {
  width: 100%;
}

.gameItemsContainer {
  padding: 50rem;
  height: 100%;
  width: 100%;
  border-left: 2rem solid var(--Gray-2, #4F4F4F);
  background: #222;
  box-shadow: -10rem 4rem 20rem 0rem rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20rem;
  z-index: 4;
  overflow-y: scroll; 
}
.gameItemsContainer.passed {
    background: transparent;
    border-left: none;
    box-shadow: none;
}
.gameItemsContainer>a{
    display: none;
}

.gameItemsContainer.passed>a{
    display: block;
    position: absolute;
    top: 430rem;
    width: 250rem;
}

.gameItem {
  /*width: 170rem;*/
}

.endGame {
  border-radius: 20rem;
  background: #87BC24;
  width: 1194rem;
  height: 623rem;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -200vh);
  padding: 10rem;
  z-index: 10;
  transition: all 0.4s ease;
  overflow: hidden;
}
.endGame.active {
  transform: translate(-50%, -50%);
}

.gingl {
  position: absolute;
  top: 0;
  left: 0;
  width: 366rem;
  height: 285rem;
  flex-shrink: 0;
}

.gift {
  position: absolute;
    top: 274rem;
    right: -14rem;
    width: 359.903rem;
  flex-shrink: 0;
  z-index: 11;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.endGame-close {
  position: relative;
  z-index: 11;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}

.close {
  width: 62rem;
  height: 62rem;
}

.endGameText {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 75rem;
  width: 100%;
  z-index: 12;
  position: relative;
}

.congrad {
  color: #222;
  text-align: center;
  font-family: "Montserrat";
  font-size: 46rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 60rem;
}
.comment_support {
  color: #222;
  text-align: center;
  font-family: "Montserrat";
  font-size: 26rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 60rem;
}
.comment_support a,
.comment_support a:focus,
.comment_support a:hover,
.comment_support a:active{
    color: #222;
    text-decoration: underline;
}

.comment_support a:hover{
    color: #222;
    text-decoration: none;
}

.getGift {
  width: 516rem;
  height: 130rem;
  padding: 48rem 58rem;
  gap: 10rem;
  flex-shrink: 0;
  font-family: "Montserrat";
  border-radius: 20rem;
  background: linear-gradient(180deg, #60ECFF 0%, #44A6CE 100%);
  box-shadow: 0rem 32.2rem 64.4rem 0rem rgba(17, 41, 51, 0.3), 0rem 11.163rem 11.163rem 0rem #64F6FF inset, 0rem -11.163rem 11.163rem 0rem #409DC2 inset;
  color: #222;
  font-size: 28rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.closePopups {
  background: rgba(0, 0, 0, 0.8);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  transform: translateY(-200vh);
  transition: all 0.4s ease;
}
.closePopups.active {
  transform: translateY(0);
}

.closePopupsBg {
  width: 100%;
  height: 100%;
}/*# sourceMappingURL=style.css.map */


.gameItemsContainer img{
    cursor: grab !important;
    max-width: 70%;

}

.canvasBlock img{
  opacity: .4;
    z-index: 2;
}
.game_1 .el-1{
    left: 388rem;
    top: 106rem;
    width: 110rem;
    z-index: 4;
}

.game_1 .el-2{
    left: 251rem;
    top: 225rem;
    width: 139rem;
    z-index: 2;
}

.game_1 .el-3{
    left: 241rem;
    top: 200rem;
    width: 328rem;
    z-index: 2;
}

.game_1 .el-4{
    left: 494rem;
    top: 197rem;
    width: 106rem;
    z-index: 4;
}

.game_1 .el-5{
    left: 517rem;
    top: 72rem;
    width: 138rem;
    z-index: 2;
}

.game_1 .el-6{
    left: 310rem;
    top: 218rem;
    width: 126rem;
    z-index: 4;
}

.game_1 .el-7{
    left: 254rem;
    top: 158rem;
    width: 270rem;
    z-index: 5;
}

.game_1 .gel-1{
    width: 110rem;
}

.game_1 .gel-2{
    width: 139rem;
}

.game_1 .gel-3{
    width: 328rem;
}

.game_1 .gel-4{
    width: 106rem;
}

.game_1 .gel-5{
    width: 138rem;
}

.game_1 .gel-6{
    width: 126rem;
}

.game_1 .gel-7{
    width: 270rem;
}

.game_2 .el-1{
    left: 487rem;
    top: 101rem;
    width: 189rem;
    z-index: 4;

}

.game_2 .el-2{
    left: 424rem;
    top: 345rem;
    width: 301rem;
    z-index: 4;
}

.game_2 .el-3{
    left: 499rem;
    top: 601rem;
    width: 63rem;
    z-index: 4;
}

.game_2 .el-4{
    left: 592rem;
    top: 601rem;
    width: 63rem;
    z-index: 4;
}

.game_2 .el-5{
    left: 393rem;
    top: 202rem;
    width: 364rem;
}
.game_2 .el-6{
    left: 503rem;
    top: 284rem;
    width: 146rem;
    z-index: 5;
}

.game_3 .el-1{
    left: 446rem;
    top: 51rem;
    width: 132rem;
    z-index: 5;
}

.game_3 .el-2{
    left: 503rem;
    top: 134rem;
    width: 104rem;
    z-index: 4;
}

.game_3 .el-3{
    left: 437rem;
    top: 237rem;
    width: 158rem;
    z-index: 5;
}

.game_3 .el-4{
    left: 578rem;
    top: 139rem;
    width: 195rem;
}

.game_3 .el-5{
    left: 282rem;
    top: 157rem;
    width: 479rem;
    z-index: 3;
}

.game_3 .el-6{
    left: 654rem;
    top: 509rem;
    width: 156rem;
    z-index: 5;
}

.game_3 .el-7{
    left: 452rem;
    top: 599rem;
    width: 175rem;
    z-index: 5;
}

.game_4 .el-1{
    left: 412rem;
    top: 314rem;
    width: 231rem;
    z-index: 5;
}

.game_4 .el-2{
    left: 405rem;
    top: 77rem;
    width: 78rem;
}

.game_4 .el-3{
    left: 568rem;
    top: 77rem;
    width: 78rem;
}

.game_4 .el-4{
    left: 437rem;
    top: 168rem;
    width: 178rem;
    z-index: 4;
}

.game_4 .el-5{
    left: 322rem;
    top: 301rem;
    width: 114rem;
}

.game_4 .el-6{
    left: 618rem;
    top: 369rem;
    width: 71rem;
}

.game_4 .el-7{
    left: 419rem;
    top: 345rem;
    width: 213rem;
    z-index: 3;
}

.game_5 .el-1{
    left: 431rem;
    top: 144rem;
    width: 294rem;
    z-index: 4;
}

.game_5 .el-2{
    left: 450rem;
    top: 121rem;
    width: 72rem;
    z-index: 5;
}

.game_5 .el-3{
    left: 633rem;
    top: 122rem;
    width: 72rem;
    z-index: 5;
}

.game_5 .el-4{
    left: 470rem;
    top: 285rem;
    width: 213rem;
    z-index: 5;
}

.game_5 .el-5{
    left: 529rem;
    top: 263rem;
    width: 96rem;
    z-index: 5;
}

.game_5 .el-6{
    left: 483rem;
    top: 226rem;
    width: 188rem;
    z-index: 5;
}

.game_5 .el-7{
    left: 395rem;
    top: 261rem;
    width: 365rem;
}
.game_5 .el-8{
    left: 470rem;
    top: 478rem;
    width: 198rem;
    z-index: 3;
}

.game_5 .el-9{
    left: 692rem;
    top: 226rem;
    width: 119rem;
    z-index: 1;
}

.game_5 .el-10{
    left: 394rem;
    top: 277rem;
    width: 364rem;
    z-index: 3;
}

.game_6 .el-1{
    left: 299rem;
    top: 319rem;
    width: 185rem;
}

.game_6 .el-2{
    left: 705rem;
    top: 322rem;
    width: 182rem;
}

.game_6 .el-3{
    left: 480rem;
    top: 190rem;
    width: 211rem;
    z-index: 4;
}

.game_6 .el-4{
    left: 519rem;
    top: 266rem;
    width: 99rem;
    z-index: 5;
}

.game_6 .el-5{
    left: 443rem;
    top: 363rem;
    width: 307rem;
    z-index: 3;
}

.game_6 .el-6{
    left: 571rem;
    top: 493rem;
    width: 26rem;
    z-index: 5;
}

.game_6 .el-7{
    left: 489rem;
    top: 363rem;
    width: 200rem;
    z-index: 5;
}
.game_6 .el-8{
    left: 513rem;
    top: 96rem;
    width: 218rem;
    z-index: 5;
}
.game_7 .el-1{
    left: 424rem;
    top: 178rem;
    width: 232rem;
    z-index: 5;
}

.game_7 .el-2{
    left: 486rem;
    top: 270rem;
    width: 192rem;
    z-index: 4;
}

.game_7 .el-3{
    left: 620rem;
    top: 292rem;
    width: 111rem;
}

.game_7 .el-4{
    left: 423rem;
    top: 376rem;
    width: 121rem;
}

.game_7 .el-5{
    left: 463rem;
    top: 359rem;
    width: 257rem;
    z-index: 3;
}

.game_7 .el-6{
    left: 478rem;
    top: 463rem;
    width: 226rem;
    z-index: 5;
}

.game_7 .el-7{
    left: 536rem;
    top: 555rem;
    width: 44rem;
}
.game_7 .el-8{
    left: 599rem;
    top: 555rem;
    width: 44rem;
}

.game_2 .gel-1{
    width: 189rem;
}
.game_2 .gel-2{
    width: 301rem;
}
.game_2 .gel-3{
    width: 63rem;
}
.game_2 .gel-4{
    width: 63rem;
}
.game_2 .gel-5{
    width: 364rem;
}
.game_2 .gel-6{
    width: 146rem;
}
.game_3 .gel-1{
    width: 132rem;
}
.game_3 .gel-2{
    width: 104rem;
}
.game_3 .gel-3{
    width: 158rem;
}
.game_3 .gel-4{
    width: 195rem;
}
.game_3 .gel-5{
    width: 479rem;
}
.game_3 .gel-6{
    width: 156rem;
}
.game_3 .gel-7{
    width: 175rem;
}
.game_4 .gel-1{
    width: 231rem;
}
.game_4 .gel-2{
    width: 78rem;
}
.game_4 .gel-3{
    width: 78rem;
}
.game_4 .gel-4{
    width: 178rem;
}
.game_4 .gel-5{
    width: 114rem;
}
.game_4 .gel-6{
    width: 71rem;
}
.game_4 .gel-7{
    width: 213rem;
}
.game_5 .gel-1{
    width: 294rem;
}
.game_5 .gel-2{
    width: 72rem;
}
.game_5 .gel-3{
    width: 72rem;
}
.game_5 .gel-4{
    width: 213rem;
}
.game_5 .gel-5{
    width: 96rem;
}
.game_5 .gel-6{
    width: 188rem;
}
.game_5 .gel-7{
    width: 365rem;
}
.game_5 .gel-8{
    width: 198rem;
}
.game_5 .gel-9{
    width: 119rem;
}
.game_5 .gel-10{
    width: 364rem;
}
.game_6 .gel-1{
    width: 185rem;
}
.game_6 .gel-2{
    width: 182rem;
}
.game_6 .gel-3{
    width: 211rem;
}
.game_6 .gel-4{
    width: 99rem;
}
.game_6 .gel-5{
    width: 307rem;
}
.game_6 .gel-6{
    width: 26rem;
}
.game_6 .gel-7{
    width: 200rem;
}
.game_6 .gel-8{
    width: 218rem;
}
.game_7 .gel-1{
    width: 232rem;
}
.game_7 .gel-2{
    width: 192rem;
}
.game_7 .gel-3{
    width: 111rem;
}
.game_7 .gel-4{
    width: 121rem;
}
.game_7 .gel-5{
    width: 257rem;
}
.game_7 .gel-6{
    width: 226rem;
}
.game_7 .gel-7{
    width: 44rem;
}
.game_7 .gel-8{
    width: 44rem;
}

.canvasBlock img{
  display: none;
}
.canvasBlock img.drop-active,
.canvasBlock img.drop-target-filled{
  display: block;
}

.drop-target-done{
  display: none;
}
.drop-target-filled{
  opacity: 1 !important;
  animation: zoom-in-zoom-out 1s ease ;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.top-menu .not-visible{
  opacity: 0;
}

.game_important_element.not-active{
    opacity: 0;
}
.support_p {
    padding-top: 20px;
    font-size: 16px;
}
.support_p a{
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}
.support_p a:visited,
.support_p a:active,
.support_p a:hover{
    color: #fff;
    text-decoration: underline;
}

.support_p a:hover{
    color: #fff;
    text-decoration: none;
}