@font-face {
  font-family: 'Conv_SBSansDisplay-Bold';
  src: url('/tpl/fonts/SBSansDisplay-Bold.eot');
  src: local('☺'), url('/tpl/fonts/SBSansDisplay-Bold.woff') format('woff'), url('/tpl/fonts/SBSansDisplay-Bold.ttf') format('truetype'), url('/tpl/fonts/SBSansDisplay-Bold.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
  background: #3E6D86;
  font-family: 'Conv_SBSansDisplay-Bold', sans-serif;
  font-size: 14px;
  -moz-user-select: none;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
body.body_main_bg {
  background: url('/tpl/img/main_body_bg.jpg') center top no-repeat;
  background-size: cover;
}
body.body_flip_bg {
  background: url('/tpl/img/flip_body_bg.png') center top no-repeat;
  background-size: cover;
}
body.body_citysel_bg {
  background: url('/tpl/img/citysel_body_bg.png') center top no-repeat;
  background-size: cover;
}
body.body_foot_bg {
  background: url('/tpl/img/foot_body_bg.png') center top no-repeat;
  background-size: cover;
}
body.body_cros_bg {
  background: url('/tpl/img/cros_body_bg.png') center top no-repeat;
  background-size: cover;
}
.box_shad {
  -webkit-box-shadow: 0px 1px 12px -3px #000000;
          box-shadow: 0px 1px 12px -3px #000000;
}
.box_shad_w {
  -webkit-box-shadow: 0px 1px 12px -3px #ffeb3b;
          box-shadow: 0px 1px 12px -3px #ffeb3b;
}
.main_page {
  text-align: center;
}
.g_shad {
  -webkit-box-shadow: 0px 0 12px 5px #fff;
          box-shadow: 0px 0 12px 5px #fff;
}
.botbtn {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  width: 90%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
  z-index: 251;
}
.botbtn__sound {
  width: 75px;
  height: 75px;
  background-size: contain;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 50%;
}
.botbtn__sound.on {
  background: url('/tpl/img/sound_on.svg') center center no-repeat;
}
.botbtn__sound.off {
  background: url('/tpl/img/sound_off.svg') center center no-repeat;
}
.botbtn__sound:hover {
  -webkit-box-shadow: 0px 0 12px 5px #fff;
          box-shadow: 0px 0 12px 5px #fff;
}
.botbtn__logo {
  margin: 0 auto;
}
.botbtn__logo img {
  margin-left: 50%;
}
.botbtn__info {
  width: 75px;
  height: 75px;
  background-size: contain;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 50%;
  background: url('/tpl/img/btn_info.svg') center center no-repeat;
  margin-left: auto;
}
.botbtn__info:hover {
  -webkit-box-shadow: 0px 0 12px 5px #fff;
          box-shadow: 0px 0 12px 5px #fff;
}
.botbtn__share {
  width: 75px;
  height: 75px;
  background-size: contain;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 50%;
  background: url('/tpl/img/btn_share.svg') center center no-repeat;
  margin-left: 1rem;
}
.botbtn__share:hover {
  -webkit-box-shadow: 0px 0 12px 5px #fff;
          box-shadow: 0px 0 12px 5px #fff;
}
.botbtn__share_div {
  position: absolute;
  display: none;
  background: #FFF;
  top: -81px;
  right: 0;
  width: 240px;
  border-radius: 25px;
  line-height: 3rem;
  padding: 1rem;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.startSave {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  text-align: center;
  display: none;
}
.startSave img {
  top: 0;
  bottom: 0;
  margin: 0 auto;
}
.startfr {
  width: 490px;
  height: calc(100vh - 100px);
  max-height: 530px;
  margin: 0 auto;
  position: relative;
  z-index: 150;
  display: none;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
  overflow: hidden;
}
.startfr.fw {
  width: 100%;
  overflow: hidden;
  height: 8rem;
}
.startfr_bg {
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
}
.startfr_btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  cursor: pointer;
  width: 208px;
  border-radius: 13px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.startfr_btn:hover {
  -webkit-box-shadow: 0px 0 12px 5px #fff;
          box-shadow: 0px 0 12px 5px #fff;
}
.mainfr {
  display: none;
  background: url('/tpl/img/main_bg.png') center center no-repeat;
  background-size: cover;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 1.3s;
  transition: all 1.3s;
}
.mainfr.fisrs_start {
  margin-top: -250px;
}
.mainfr.fisrs_start .start_game {
  opacity: 0;
}
.mainfr.fisrs_start .start_game.noact {
  opacity: 0;
}
.mainfr__cloud {
  position: absolute;
  z-index: 3;
  left: -7rem;
  right: 0;
  top: 0;
  max-height: 50rem;
}
.mainfr .game1 {
  top: 262px;
  left: 88px;
}
.mainfr .game2 {
  top: 155px;
  left: 295px;
}
.mainfr .game3 {
  top: 368px;
  left: 306px;
}
.mainfr .game4 {
  top: 250px;
  left: 419px;
}
.mainfr .start_game {
  cursor: pointer;
  position: absolute;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.mainfr .start_game__num {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 10;
  left: 0;
}
.mainfr .start_game__name {
  position: absolute;
  width: 0px;
  height: 38px;
  text-align: right;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  left: 33px;
  top: 6px;
  z-index: 5;
  border-radius: 10px;
}
.mainfr .start_game__name img {
  width: 106px;
}
.mainfr .start_game.noact {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
.mainfr .start_game.noact .start_game__name {
  display: none;
}
.mainfr .start_game:hover {
  -webkit-box-shadow: 0px 0 12px 5px #fff;
          box-shadow: 0px 0 12px 5px #fff;
}
.mainfr .start_game:hover .start_game__name {
  -webkit-box-shadow: 0px 0 12px 5px #fff;
          box-shadow: 0px 0 12px 5px #fff;
  width: 106px;
}
.top_frame ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.top_frame ul .refresh_game {
  cursor: pointer;
}
.top_frame ul li {
  height: 6.5rem;
  width: 100%;
  background-size: contain;
}
.top_frame ul li.top_frame__home {
  cursor: pointer;
  background: url('/tpl/img/home_btn.svg') center center no-repeat;
}
.top_frame ul li.top_frame__timer,
.top_frame ul li.top_frame__timer_green,
.top_frame ul li.top_frame__timer_blue,
.top_frame ul li.top_frame__timer_dgreen {
  background: url('/tpl/img/timer.svg') center center no-repeat;
  line-height: 6.5rem;
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 3px 3px 5px #000;
  background-size: contain;
}
.top_frame ul li.top_frame__timer_dgreen {
  background: url('/tpl/img/timer_dgreen.svg') center center no-repeat;
  background-size: contain;
}
.top_frame ul li.top_frame__timer_green {
  background: url('/tpl/img/timer_green.svg') center center no-repeat;
  background-size: contain;
}
.top_frame ul li.top_frame__timer_blue {
  background: url('/tpl/img/timer_blue.svg') center center no-repeat;
  background-size: contain;
}
.top_frame ul li.top_frame__refresh {
  background: url('/tpl/img/refresh.svg') center center no-repeat;
}
#draggableHelper {
  background: rgba(255, 235, 59, 0.4);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.cros {
  background: url('/tpl/img/cros_bg.png') center center no-repeat;
  background-size: cover;
  width: 600px;
  height: 848px;
  margin: 0 auto;
  position: relative;
  z-index: 250;
}
.cros .cros__frame {
  margin-top: 10px;
}
.cros .cros__frame ul {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(10, 1fr);
  padding: 1rem;
  width: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.4);
}
.cros .cros__frame ul li {
  height: 4rem;
  border: solid 2px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 25px;
  color: #9D4747;
  cursor: pointer;
}
.cros .cros__frame ul li.temp,
.cros .cros__frame ul li:hover {
  background: rgba(255, 235, 59, 0.4);
}
.cros .cros__frame ul li.compl {
  background: rgba(76, 175, 80, 0.8);
}
.cros .cros__progres {
  color: #fff;
  font-size: 30px;
  text-align: center;
  margin-top: 1rem;
}
.flip {
  background: url('/tpl/img/flip_bg.svg') top center no-repeat;
  background-size: cover;
  width: 600px;
  height: 848px;
  margin: 0 auto;
  z-index: 250;
  position: relative;
}
.flip .flip__frame {
  margin-top: 76px;
}
.flip .flip__frame_list {
  display: grid;
  grid-gap: 1.2rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  padding: 1rem;
  width: 90%;
  margin: 0 auto;
}
.flip .flip__frame_list li {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  background: url('/tpl/img/flip_sq.svg') center center no-repeat;
  background-size: contain;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  border-radius: 0.5rem;
  height: 8rem;
  cursor: pointer;
}
.flip .flip__frame_list li.dflip,
.flip .flip__frame_list li.correct {
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: relative;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.flip .flip__frame_list li.impflip {
  background: white !important;
}
.citysel {
  background: url('/tpl/img/citysel_bg.svg') top center no-repeat;
  background-size: cover;
  width: 600px;
  min-height: 780px;
  height: calc(100vh - 90px);
  margin: 0 auto;
  position: relative;
  z-index: 200;
}
.citysel .citysel__frame {
  background: url('/tpl/img/rus_map.svg') center center no-repeat;
  background-size: contain;
  height: 360px;
  width: 100%;
  position: relative;
}
.citysel .citysel__frame_point {
  background: rgba(244, 67, 54, 0);
  width: 5rem;
  height: 5rem;
  position: absolute;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 50%;
}
.citysel .citysel__frame_point img {
  position: absolute;
  top: 35%;
  left: 35%;
  width: 21px;
}
.citysel .citysel__frame_point.complite img {
  top: -10px;
  left: -10px;
  width: unset;
}
.citysel .citysel__frame_point.over {
  opacity: 1;
  background: rgba(244, 67, 54, 0.2);
  -webkit-box-shadow: 0px 1px 12px -3px #000000;
          box-shadow: 0px 1px 12px -3px #000000;
}
.citysel .citysel__frame_point[data-rel="p_kalinin"] {
  left: 26px;
  top: 41px;
}
.citysel .citysel__frame_point[data-rel="p_kalinin"].complite img {
  top: 15px;
  left: 28px;
  width: 100px;
}
.citysel .citysel__frame_point[data-rel="p_msk"] {
  left: 51px;
  top: 109px;
}
.citysel .citysel__frame_point[data-rel="p_msk"].complite img {
  top: 15px;
  left: 8px;
  width: 64px;
}
.citysel .citysel__frame_point[data-rel="p_samara"] {
  left: 66px;
  top: 161px;
}
.citysel .citysel__frame_point[data-rel="p_samara"].complite img {
  top: 22px;
  left: 7px;
  width: 65px;
}
.citysel .citysel__frame_point[data-rel="p_salehard"] {
  left: 191px;
  top: 123px;
}
.citysel .citysel__frame_point[data-rel="p_salehard"].complite img {
  top: 18px;
  left: 1px;
  width: 76px;
}
.citysel .citysel__frame_point[data-rel="p_omsk"] {
  left: 184px;
  top: 201px;
}
.citysel .citysel__frame_point[data-rel="p_omsk"].complite img {
  top: 18px;
  left: 8px;
  width: 42px;
}
.citysel .citysel__frame_point[data-rel="p_norilsk"] {
  left: 262px;
  top: 108px;
}
.citysel .citysel__frame_point[data-rel="p_norilsk"].complite img {
  top: 18px;
  left: 8px;
  width: 76px;
}
.citysel .citysel__frame_point[data-rel="p_ulanude"] {
  left: 335px;
  top: 264px;
}
.citysel .citysel__frame_point[data-rel="p_ulanude"].complite img {
  top: 18px;
  left: 8px;
  width: 76px;
}
.citysel .citysel__frame_point[data-rel="p_yakutsk"] {
  left: 390px;
  top: 165px;
}
.citysel .citysel__frame_point[data-rel="p_yakutsk"].complite img {
  top: 18px;
  left: 8px;
  width: 56px;
}
.citysel .citysel__frame_point[data-rel="p_habarovsk"] {
  left: 458px;
  top: 240px;
}
.citysel .citysel__frame_point[data-rel="p_habarovsk"].complite img {
  top: 18px;
  left: -5px;
  width: 87px;
}
.citysel .citysel__frame_point[data-rel="p_magadan"] {
  left: 473px;
  top: 125px;
}
.citysel .citysel__frame_point[data-rel="p_magadan"].complite img {
  top: 27px;
  left: -15px;
  width: 62px;
}
.citysel .citysel__frame_point[data-rel="p_petrokamch"] {
  left: 521px;
  top: 148px;
}
.citysel .citysel__frame_point[data-rel="p_petrokamch"].complite img {
  top: -38px;
  left: -98px;
  width: 141px;
}
.citysel .citysel__city {
  position: absolute;
  width: 600px;
  bottom: 90px;
}
.citysel .citysel__city ul {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.citysel .citysel__city ul li {
  width: 47%;
  text-align: left;
  background: url('/tpl/img/circle_city_blanck.svg') left center no-repeat;
  padding: 5px 0 5px 2rem;
  height: 25.4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0.5rem;
}
.citysel .citysel__city ul li:hover img {
  -webkit-box-shadow: 0px 1px 12px -3px #ffeb3b;
          box-shadow: 0px 1px 12px -3px #ffeb3b;
}
.citysel .citysel__city ul li img {
  max-width: 100%;
}
.citysel .citysel__city ul li img.sel {
  background: #b39ddb;
}
.foot {
  background: url('/tpl/img/foot_bg.svg') top center no-repeat;
  background-size: cover;
  width: 600px;
  height: calc(100vh);
  margin: 0 auto;
  z-index: 250;
  position: relative;
}
.foot .foot__frame {
  min-height: 34rem;
  position: relative;
}
.foot .foot__frame ul {
  background: url('/tpl/img/foot.svg') center center no-repeat;
  background-size: contain;
  width: 11rem;
  margin: 0;
  margin-bottom: 1rem;
  padding: 2rem;
  position: absolute;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.foot .foot__frame ul.ready {
  -webkit-transform: translateY(-19px);
          transform: translateY(-19px);
}
.foot .foot__frame ul.foot1 {
  top: 0;
  left: 0;
}
.foot .foot__frame ul.foot1_t {
  top: -5rem !important;
  left: -4rem !important;
}
.foot .foot__frame ul.foot2 {
  top: 0;
  left: 14rem;
}
.foot .foot__frame ul.foot2_t {
  top: -5rem !important;
  left: 10rem !important;
}
.foot .foot__frame ul.foot3 {
  top: 0;
  left: 27rem;
}
.foot .foot__frame ul.foot3_t {
  top: -5rem !important;
  left: 22rem !important;
}
.foot .foot__frame ul.foot4 {
  top: 12rem;
  left: 0rem;
}
.foot .foot__frame ul.foot4_t {
  top: 7rem !important;
  left: -4rem !important;
}
.foot .foot__frame ul.foot5 {
  top: 12rem;
  left: 14rem;
}
.foot .foot__frame ul.foot5_t {
  top: 7rem !important;
  left: 10rem !important;
}
.foot .foot__frame ul.foot6 {
  top: 12rem;
  left: 27rem;
}
.foot .foot__frame ul.foot6_t {
  top: 7rem !important;
  left: 22rem !important;
}
.foot .foot__frame ul.foot1_t,
.foot .foot__frame ul.foot2_t,
.foot .foot__frame ul.foot3_t,
.foot .foot__frame ul.foot4_t,
.foot .foot__frame ul.foot5_t,
.foot .foot__frame ul.foot6_t {
  -webkit-transform: rotate(45deg) !important;
          transform: rotate(45deg) !important;
}
.foot .foot__frame ul li {
  height: 2rem;
}
.foot .foot__frame ul li img {
  width: 27%;
}
/*
	start_dsp
*/
.start_dsp {
  width: 600px;
  height: 1000px;
  position: absolute;
  top: 0.9rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 500;
}
.start_dsp.citysel_start {
  background: url('/tpl/img/start_sitysel.png') top center no-repeat;
  background-size: cover;
}
.start_dsp.flip_start {
  background: url('/tpl/img/start_flip.png') top center no-repeat;
  background-size: cover;
}
.start_dsp.foot_start {
  background: url('/tpl/img/start_foot.png') top center no-repeat;
  background-size: cover;
}
.start_dsp.cros_start {
  background: url('/tpl/img/start_cros.png') top center no-repeat;
  background-size: cover;
}
.start_dsp img {
  width: 50px;
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
}
/*
	@start_dsp
*/
/*
	modals
*/
.full_dsp {
  position: fixed;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 251;
}
.false_game,
.succes_game {
  position: fixed;
  top: calc(50vh - 154px);
  left: 0;
  right: 0;
  margin: 0 auto;
  display: none;
  width: 31rem;
  height: 22rem;
  overflow: hidden;
}
.false_game {
  background: url('/tpl/img/fal_galme.png') center center no-repeat;
  z-index: 260;
}
.false_game .fal_galme__gomap,
.false_game .fal_galme__goreload {
  width: 122px;
  position: absolute;
  bottom: 74px;
  left: 83px;
  cursor: pointer;
  border-radius: 31px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.false_game .fal_galme__gomap:hover,
.false_game .fal_galme__goreload:hover {
  -webkit-box-shadow: 0 0 37px -6px #4202aa;
          box-shadow: 0 0 37px -6px #4202aa;
}
.false_game .fal_galme__goreload {
  right: 83px;
  left: unset;
}
.succes_game {
  background: url('/tpl/img/suc_galme.png') center center no-repeat;
  z-index: 260;
}
.succes_game .succes_game__gomap {
  width: 122px;
  position: absolute;
  bottom: 74px;
  margin: 0 auto;
  left: 0;
  right: 0;
  cursor: pointer;
  border-radius: 31px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.succes_game .succes_game__gomap:hover {
  -webkit-box-shadow: 0 0 37px -6px #4202aa;
          box-shadow: 0 0 37px -6px #4202aa;
}
.succes_game .fal_galme__goreload {
  right: 83px;
  left: unset;
}
.ticket {
  z-index: 150;
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.ticket__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 150px;
  left: 0;
  right: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.ticket__img:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background: linear-gradient(45deg, #f9f687, #f2c255, #f9f687);
  background-size: 400%;
  border-radius: 40px;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  opacity: 1;
  -webkit-animation: bganim 8s linear infinite;
          animation: bganim 8s linear infinite;
}
.bganim {
  -webkit-animation-name: bganim;
          animation-name: bganim;
  -webkit-animation-duration: 8s;
          animation-duration: 8s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes bganim {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 400%;
  }
}
@keyframes bganim {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 400%;
  }
}
.rgame {
  z-index: 150;
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.rgame img {
  max-width: 100%;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 44px;
}
.rgame__btns {
  width: 25%;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
  position: relative;
}
.rgame__btns_div {
  position: absolute;
  display: none;
  background: #FFF;
  bottom: 104px;
  right: 5px;
  width: 420px;
  border-radius: 25px;
  line-height: 3rem;
  padding: 1rem;
  text-align: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.rgame__btns_div img {
  display: block;
}
.rgame__btns_div a img:hover {
  -webkit-box-shadow: 0 0 37px -6px #4202aa;
          box-shadow: 0 0 37px -6px #4202aa;
}
.rgame__btns img {
  margin: 0px 14px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.rgame__btns img .rgame__btns_share:hover .rgame__btns_div {
  display: block;
}
#salut_js {
  position: fixed;
  top: 0;
  z-index: 80;
}
.info_main {
  position: fixed;
  top: 0;
  background: #fff;
  border-radius: 50px;
  padding: 2rem;
  left: 0;
  right: 0;
  width: 50%;
  margin: 0 auto;
  z-index: 500;
  cursor: pointer;
  display: none;
  -webkit-box-shadow: 0px 1px 12px -3px #000000;
          box-shadow: 0px 1px 12px -3px #000000;
}
/*
	@modals
*/
/*
	predmain
*/
.predmain {
  text-align: center;
  width: 100%;
}
.predmain__body {
  background: #FFF;
}
.predmain img {
  margin: 0 auto;
}
.predmain__btns {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
  border-radius: 42px;
}
.predmain__btns:hover {
  -webkit-box-shadow: 0 0 37px -6px #4202aa;
          box-shadow: 0 0 37px -6px #4202aa;
}
/*
	@predmain
*/
.wookWook {
  -webkit-animation-name: wookWook;
          animation-name: wookWook;
  -webkit-animation-duration: 0.8s;
          animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes wookWook {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes wookWook {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  /*animation-iteration-count: infinite;*/
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
          animation-name: fadeOutDown;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
.cloudBrize {
  -webkit-animation-name: cloudBrize;
          animation-name: cloudBrize;
  -webkit-animation-duration: 50s;
          animation-duration: 50s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
@-webkit-keyframes cloudBrize {
  0% {
    -webkit-transform: translate(1rem, 5rem);
            transform: translate(1rem, 5rem);
  }
  12% {
    -webkit-transform: translate(6rem, -2rem);
            transform: translate(6rem, -2rem);
  }
  20% {
    -webkit-transform: translate(5rem, -1rem);
            transform: translate(5rem, -1rem);
  }
  42% {
    -webkit-transform: translate(-2rem, -6rem);
            transform: translate(-2rem, -6rem);
  }
  46% {
    -webkit-transform: translate(-1rem, -5rem);
            transform: translate(-1rem, -5rem);
  }
  60% {
    -webkit-transform: translate(-6rem, 2rem);
            transform: translate(-6rem, 2rem);
  }
  68% {
    -webkit-transform: translate(-5rem, 1rem);
            transform: translate(-5rem, 1rem);
  }
  80% {
    -webkit-transform: translate(2rem, 6rem);
            transform: translate(2rem, 6rem);
  }
  100% {
    -webkit-transform: translate(1rem, 5rem);
            transform: translate(1rem, 5rem);
  }
}
@keyframes cloudBrize {
  0% {
    -webkit-transform: translate(1rem, 5rem);
            transform: translate(1rem, 5rem);
  }
  12% {
    -webkit-transform: translate(6rem, -2rem);
            transform: translate(6rem, -2rem);
  }
  20% {
    -webkit-transform: translate(5rem, -1rem);
            transform: translate(5rem, -1rem);
  }
  42% {
    -webkit-transform: translate(-2rem, -6rem);
            transform: translate(-2rem, -6rem);
  }
  46% {
    -webkit-transform: translate(-1rem, -5rem);
            transform: translate(-1rem, -5rem);
  }
  60% {
    -webkit-transform: translate(-6rem, 2rem);
            transform: translate(-6rem, 2rem);
  }
  68% {
    -webkit-transform: translate(-5rem, 1rem);
            transform: translate(-5rem, 1rem);
  }
  80% {
    -webkit-transform: translate(2rem, 6rem);
            transform: translate(2rem, 6rem);
  }
  100% {
    -webkit-transform: translate(1rem, 5rem);
            transform: translate(1rem, 5rem);
  }
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0) rotate(0deg);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0) rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) rotate(210deg);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) rotate(210deg);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0) rotate(0deg);
            transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0) rotate(0deg);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) rotate(210deg);
            transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0) rotate(210deg);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.zoomInDown {
  -webkit-animation-name: zoomInDown;
          animation-name: zoomInDown;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}