@font-face {
  font-family: 'albertusnova';
  font-weight: 700;
  src: 
    url('../fonts/albertusnovablack.woff2') format('woff2'),
    url('../fonts/albertusnovablack.woff') format('woff'),
    url('../fonts/albertusnovablack.ttf') format('truetype'),
    url('../fonts/albertusnovablack.otf') format('otf');
}


@font-face {
  font-family: 'albertusnova';
  font-weight: 600;
  src: 
    url('../fonts/albertusnova_bold.woff2') format('woff2'),
    url('../fonts/albertusnova_bold.woff') format('woff'),
    url('../fonts/albertusnova_bold.ttf') format('truetype'),
    url('../fonts/albertusnova_bold.otf') format('otf');
}


@font-face {
  font-family: 'albertusnova';
  font-weight: 400;
  src: 
    url('../fonts/albertusnova.woff2') format('woff2'),
    url('../fonts/albertusnova.woff') format('woff'),
    url('../fonts/albertusnova.ttf') format('truetype'),
    url('../fonts/albertusnova.otf') format('otf');
}


@font-face {
  font-family: 'MyriadPro';
  font-weight: 300;
  src: 
    url('../fonts/mb300.woff') format('woff'),
    url('../fonts/mb300.otf') format('otf');
}


@font-face {
  font-family: 'MyriadPro';
  font-weight: 400;
  src: 
    url('../fonts/mb400.woff') format('woff'),
    url('../fonts/mb400.otf') format('otf');
}


@font-face {
  font-family: 'MyriadPro';
  font-weight: 800;
  src: 
    url('../fonts/mb.woff') format('woff'),
    url('../fonts/mb.otf') format('otf');
}







*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;

}
input{
  outline: none;
  border: 0rem;
  }

/* width */
::-webkit-scrollbar {
  width: 5rem;
  height: 2rem;
  border-radius: 5rem;
}

/* Track */
::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 5rem;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #8F6D4F;
    border-radius: 5rem;
    font-weight: 400;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #8F6D4F;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
a{
  text-decoration: none;
}

.clear{
  clear: both;
  }
.disabled{
  opacity: 0.5;
  pointer-events: none;
  }


.ico_menu{
  height: 0rem;
  }

html{
  margin: 0;
  padding: 0;
  margin: 0rem;
  height: 100%;
  width: 100%;
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  overscroll-behavior-y: none;
  font-size: calc(100vw/1920);
  overflow-x: hidden;
  }
body{
  margin: 0px;
  background: url(../img/bg.png?2);
  background-position: top center;
  background-size: 1920rem auto;
  font-family: 'MyriadPro', sans-serif;
  font-weight: 400;
  color: #000;
  overflow-y: auto;
  overflow-x: hidden; 
  background-repeat: no-repeat;
  background-color: #231F20;
  background-position-y: 609rem;
  }

.header{
  width: 100%;
  height: 78rem;
  background: linear-gradient(89.94deg, #231F20 50.02%, #8F6D4F 99.95%);
  z-index: 3;
  position: fixed;
  top: 0rem;  
  }
.content{
  width: 1506rem;
  margin: auto;
  position: relative;
  overflow: hidden;
  }
.header .content{
  height: 78rem;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  }
.header .logo{
  width: 120rem;
  height: 41.6rem;
  background: url(../img/logo.svg);
  background-size: 100%;
  }
.header .menu{
  font-size: 16rem;
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 800;
  }
.header .menu div{
  margin-left: 63rem;
  cursor: pointer;
  }
.header .menu div.btn{
  width: 225rem;
  height: 29rem;
  border: 1rem solid #fff;
  border-radius: 3.27rem;
  display: flex;
  align-items: center;
  justify-content: center;  
  cursor: pointer;
  }

.main{
  height: 912rem;
  margin-top: 70rem;
  overflow: unset;
  }

.main .kv{
  width: 1908rem;
  height: 1487rem;
  background: url(../img/kv.png?2);
  background-size: 100%;  
  position: absolute;
  right: -209rem;
  top: -77rem;
  }

.main .slogan{
  width: 653rem;
  height: 307rem;
  background: url(../img/slogan.svg);
  background-size: 100%;
  position: absolute;
  left: 0rem;
  top: 107rem;
  }
.main .prize{
  width: 436rem;
  height: 194.27rem;
  background: url(../img/prize.svg?2);
  background-size: 100%;
  position: absolute;
  left: 4rem;
  top: 665rem;
  }
.main .logo{
  width: 287.89rem;
  height: 100.03rem;
  background: url(../img/logo.svg);
  background-size: 100%;
  position: absolute;
  right: 57rem;
  top: 723rem;
  }
.main .btn{
  width: 390rem;
  height: 70rem;
  border-radius: 10rem;
  display: flex;
  background: linear-gradient(139.26deg, #8F6D4F 29.71%, #56402C 90.25%);
  border: 1rem solid rgba(247, 247, 247, 0.87);
  position: absolute;
  left: 5rem;
  top: 484rem;
  color: #fff;
  font-size: 24rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  cursor: pointer;
  }


.title_rules{
  width: 494.65rem;
  height: 65rem;
  background: url(../img/title_rules.svg);
  background-size: 100%;
  margin: auto;
  margin-top: 111rem;
  }

.rules{
  width: 988rem;
  margin: auto;
  margin-top: 58rem;
  display: flex;
  justify-content: space-between;  
  }
.rules .item{
  width: 324rem;
  height: 310rem;
  border: 1rem solid transparent;
  border-radius: 10rem;
  background: 
  linear-gradient(to bottom, #231F20, #231F20), 
  linear-gradient(to bottom, #8F6D4F , #56402C); 
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  }

.rules .icon1{
  width: 100%;
  height: 67rem;
  background: url(../img/rule1.svg);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  }
.rules .icon2{
  width: 100%;
  height: 67rem;
  background: url(../img/rule2.svg);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  }
.rules .icon3{
  width: 100%;
  height: 67rem;
  background: url(../img/rule3.svg);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  }
.rules .text1{
  font-size: 20rem;
  color: #8F6D4F;
  height: 85rem;
  margin-top: 31rem;
  }
.rules .text2{
  font-size: 24rem;
  color: #fff;
  }


.title_etap{
  width: 174rem;
  height: 65rem;
  background: url(../img/title_etap.svg);
  background-size: 100%;
  margin: auto;
  margin-top: 328rem;
  }

.etaps{
  margin: auto;
  margin-top: 77.5rem;
  width: 1377rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  }
.etaps .item{
  width: 438rem;
  height: 353rem;
  background-size: 418.12rem 101rem;
  background-position: left top;
  font-size: 19rem;
  color: #fff;
  padding-top: 119rem;
  line-height: 23rem;
  font-weight: 400;
  }
.etaps .item.etap1{
  background: url(../img/etap1.svg?2);
  background-repeat: no-repeat;
  background-size: 438rem auto;
  }
.etaps .item.etap2{
  background: url(../img/etap2.svg?2);
  background-repeat: no-repeat;
  background-size: 438rem auto;
  }
.etaps .item.etap3{
  background: url(../img/etap3.svg?2);
  background-repeat: no-repeat;
  background-size: 438rem auto;
  }
.etaps .item b, .etaps .item b a{
  font-weight: 600;
  color: #8F6D4F;
  }
.etaps .item b a{
  text-decoration: underline;
  }

.info{
  border: 1rem solid #8F6D4F;
  border-radius: 10rem;
  width: 1338rem;
  margin: auto;
  margin-top: 57rem;
  height: 119rem;
  background: url(../img/info.svg);
  background-size: 68rem 68rem;  
  background-repeat: no-repeat;
  background-position: 20rem;
  font-size: 20rem;
  color: #fff;
  padding: 14rem 36rem 0rem 115rem;
  line-height: 22rem;
  }

.btn2{
  width: 453rem;
  height: 70rem;
  border-radius: 10rem;
  display: flex;
  background: linear-gradient(139.26deg, #8F6D4F 29.71%, #56402C 90.25%);
  border: 1rem solid rgba(247, 247, 247, 0.87);
  color: #fff;
  font-size: 24rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  margin: auto;
  margin-top: 100rem;
  cursor: pointer;
  }
.btn2 a{
  color: #fff;
  }

.title_action{
  width: 520rem;
  height: 110rem;
  background: url(../img/title_action.svg);
  background-size: 100%;
  margin: auto;
  margin-top: 205rem;
  margin-left: 369rem;
  }


.action_form{
  width: 245rem;
  height: 39rem;
  background: url(../img/action11.svg);
  background-size: 100%;
  margin: auto;
  margin-top: 47rem;
  margin-left: 600rem;
  }
.action_form.f2{
  background: url(../img/action12.svg);
  background-size: 100%;
  }

.form1{
  width: 700rem;
  height: 320rem;
  margin-left: 374rem;
  margin-top: 47rem;
  position: relative;
  }
.form2{
  width: 700rem;
  height: 320rem;
  margin-left: 374rem;
  margin-top: 47rem;
  position: relative;
  }
.form .input{
  font-family: 'MyriadPro', sans-serif;
  position: absolute;
  height: 40rem;
  width: 347rem;
  background-color: #fff;
  font-size: 12rem;
  color: #8F6D4F;
  padding-left: 15rem;
  border-radius: 2rem;
  }
.form textarea{
  padding-top: 13rem;
  }
.form .input.error{
  background-color: #ffaaaa;
  }
.form textarea.error{
  background-color: #ffaaaa;
  }
input::placeholder {
  color: rgba(143, 109, 79, 0.62);
  }

.form .upload{
  position: absolute;
  width: 166rem;
  height: 90rem;
  background-color: #fff;
  border-radius: 2rem;
  }
.form .upload.error{
  background-color: #ffaaaa;
  }
.form .upload .title{
  font-size: 12rem;
  color: rgba(143, 109, 79, 0.64);
  position: absolute;
  top: 8rem;
  left: 10rem;
  }
.form .upload .title2{
  font-size: 12rem;
  color: rgba(143, 109, 79, 0.64);
  position: absolute;
  top: 51rem;
  left: 38rem; 
  width: 118rem;
  height: 27rem;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;   
  }
.form .upload .icon{
  width: 9.11rem;
  height: 19.24rem;
  background: url(../img/upload.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 57rem;
  left: 18rem;
  }
.form .upload input{
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  }


.form .upload.photo{
  left: 352rem;
  }
.form .upload.coctail_present{
  left: 352rem;
  }
.form .upload.coctail_photo{
  left: 527rem;
  }


.form .input.name{left: 0rem; top: 0rem;}
.form .input.sname{left: 0rem; top: 51rem;}
.form .input.city{left: 0rem; top: 101rem;}
.form .input.instagram{left: 0rem; top: 151rem;}
.form .input.work{left: 0rem; top: 201rem;}
.form .input.instagram_bar{left: 0rem; top: 251rem;}

.form .input.phone_code{width: 57rem;
    left: 354rem;
    top: 101rem;
    padding-left: 11rem;
    pointer-events: none;}
.form .input.phone_operator{width: 59rem;
    left: 417rem;
    top: 101rem;
    padding-left: 11rem;}
.form .input.phone{width: 220rem;
    left: 481rem;
    top: 101rem;}
.form .input.telegram{left: 354rem; top: 151rem;}
.form .input.years{left: 354rem; top: 201rem;}

.form .text1{
  font-size: 12rem;
  color: #8F6D4F;
  position: absolute;
  top: 307rem;
  }
.form .text2{
  font-size: 12rem;
  color: #8F6D4F;
  position: absolute;
  top: 103rem;
  left: 355rem;
  }


.form .input.coctail1{left: 0rem; top: 0rem;}
.form .input.coctail2{left: 0rem; top: 51rem;}
.form .input.coctail3{left: 0rem; top: 101rem; height: 100rem;}
.form .input.coctail4{left: 0rem; top: 210rem; height: 69rem;}


.form .captcha_img{
  position: absolute;
  top: 160rem;
  left: 355rem;
  background-color: #fff;
  width: 122rem;
  height: 40rem;
  }
.form .input.captcha{width: 220rem;
    left: 481rem;
    top: 160rem;}


.form .checkbox{
  position: absolute;
  width: 30rem;
  height: 30rem;
  border-radius: 2rem;
  background-color: #fff;
  cursor: pointer;
  }

.form .agree1{
  left: 355rem;
  top: 211rem;
  }
.form .agree2{
  left: 355rem;
  top: 249rem;
  }
.form .checkbox.error{
  background-color: #ffaaaa;
  }
.form .checkbox.checked{
  background-color: #8f6d4f;
  }

.form .checkbox_text{
  font-size: 12rem;
  color: #8F6D4F;
  position: absolute;
  }
.form .checkbox_text1{
  top: 219rem;
  left: 395rem;
  }
.form .checkbox_text2{
  top: 256rem;
  left: 395rem;
  }
.form .checkbox_text a{
  color: #8F6D4F;
  text-decoration: underline;
  }


.btn3{
  width: 378rem;
  height: 70rem;
  border-radius: 10rem;
  display: flex;
  background: transparent;
  border: 1rem solid #8F6D4F;
  color: #8F6D4F;
  font-size: 24rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  margin: auto;
  margin-top: 36rem;
  cursor: pointer;
  }



.hv{
  width: 1443rem;
  height: 102rem;
  background: url(../img/hv.svg);
  margin: auto;
  margin-top: 86rem;
  background-size: 100%;
  }

.footer{
  height: 173rem;
  margin-top: 28rem;
  background: linear-gradient(90.18deg, #231F20 29.79%, #8F6D4F 99.85%);
  }
.footer .content{
  height: 173rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  }

.footer .logo{
  width: 225rem;
  height: 78.18rem;
  background: url(../img/logo.svg);
  background-size: 100%;
  }
.footer .email{
  font-size: 16rem;
  color: #fff;
  font-weight: 800;
  }
.footer .email a{
  color: #fff;
  } 
.footer .copyright{
  font-size: 14rem;
  color: #fff;
  width: 347rem;
  text-align: right;
  }


.age_check{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0rem;
  top: 0rem;
  background: #231F20;
  background-image: url(../img/bg_age.jpg?2);
  background-position: top center;
  background-size: cover;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s linear;
  }
.age_check.active{
  opacity: 1;
  pointer-events: all;
  }
.age_check .content{
  height: 100%;
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  }
.hv_vert{
  position: absolute;
  width: 170rem;
  height: 100%;
  background: url(../img/hv_vert.svg);
  background-size: auto 90vh;
  background-repeat: no-repeat;
  left: 0rem;
  top: 47rem;
  }

.title_age{
  width: 530rem;
  height: 110rem;
  background: url(../img/title_age.svg);
  background-size: 100%;
  }
.age_check .btns{
  display: flex;
  margin-top: 40rem;
  }
.btn4{
  width: 125rem;
  height: 75rem;
  border: 1rem solid #8F6D4F;
  border-radius: 10rem;
  color: #8F6D4F;
  font-size: 24rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5rem;
  cursor: pointer;
  }

.popup_outer{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0rem;
  top: 0rem;
  background: #000;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s linear;
  }
.popup_outer.active{
  opacity: 1;
  pointer-events: all;
  }
.popup {
  width: 944rem;
  height: 420rem;
  background: url(../img/popup.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  }
.popup.send_ok{
  width: 944rem;
  height: 420rem;
  background: url(../img/pop_thanks.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  }
.popup .close{
  position: absolute;
  width: 57rem;
  height: 57rem;
  right: 23rem;
  top: 26rem;
  cursor: pointer;
  }
.popup .title{
  font-size: 20rem;
  color: #8F6D4F;
  text-align: center;
  margin-bottom: 20rem;
  }
.popup .operator{
  width: 59rem;
  height: 40rem;
  text-align: center;
  font-size: 14rem;
  color: #8F6D4F;
  }
.popup .phone{
  width: 307rem;
  height: 40rem;
  text-align: left;
  font-size: 14rem;
  color: #8F6D4F;
  margin-left: 2rem;
  padding-left: 11rem;
  }
.popup .code{
  width: 307rem;
  height: 40rem;
  text-align: left;
  font-size: 14rem;
  color: #8F6D4F;
  padding-left: 11rem;
  display: block;
  margin: auto;
  }
.popup .check{
  color: #8F6D4F;
  font-size: 14rem;
  display: flex;
  align-items: center;
  margin-top: 25rem;
  }
.popup .check a{
  color: #8F6D4F;
  text-decoration: underline;
  }
.popup .checkbox{
  width: 30rem;
  height: 30rem;
  background-color: #fff;
  margin-right: 13rem;
  }
.popup .check.err .checkbox{
  background-color: #ff9191;
  }
.popup .check.active .checkbox{
  background-color: #8F6D4F;
  }
.popup input.err{
  background-color: #ff9191;
  }
.popup .btn {
  width: 205rem;
  height: 50rem;
  border: 1rem solid #8F6D4F;
  border-radius: 10rem;
  color: #8F6D4F;
  font-size: 16rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 50rem;
  cursor: pointer;
  text-transform: uppercase;
  }
.pop_inner{
  width: 371rem;
  margin: auto;
  }
.popup.send_phone .pop_inner{
  width: 371rem;
  margin: auto;
  }
.popup.send_phone .error{
  width: 307rem;
  margin-top: 5rem;
  }
.popup.send_code .error {
  width: 307rem;
  margin-top: 5rem;
  margin: auto;
}
.txt_code_send{
  width: 311rem;
  height: 72rem;
  background: url(../img/txt_code_send.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  margin: auto;
  }

.popup .error{
  font-size: 12rem;
  color: #DD1200;
  }





.limit{
  position: absolute;
  left: 10rem;
  top: 568rem;
  color: #fff;
  font-size: 22rem;
  font-weight: bold;
  text-transform: uppercase;  
  }

.mob{
  display: none;
  }


.title_prize{
  width: 303rem;
  height: 45rem;
  background: url(../img/title_result.svg);
  background-size: 100%;
  margin: auto;
  margin-top: 157rem;
  margin-left: 124rem;
  }
.etap_2 .text{
  font-size: 20rem;
  width: 784rem;
  color: #fff;
  margin-top: 70rem;
  margin-left: 138rem;
  }

.coctail_outer{
  width: 1350rem;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 150rem;
  justify-content: space-between;  
  }
.coctail{
  width: 247rem;
  height: 424rem;
  background: rgba(143, 109, 79, 0.41);
  border-radius: 5rem;
  margin: 9rem;
  position: relative;
  border: 2rem solid transparent;
  box-sizing: content-box;
  }
.coctail.active{
  border: 2rem solid #FDE600;
  }
.coctail.active:before{
  content: ' ';
  position: absolute;
  width: 26rem;
  height: 26rem;
  background: url(../img/check.svg);
  background-size: 100% 100%;
  right: -11rem;
  top: -11rem;
  }

.coctail .title{
  height: 82rem;
  padding-top: 4rem;
  padding-left: 12rem;
  padding-right: 12rem;
  padding-bottom: 8rem;
  font-size: 20rem;
  font-weight: bold;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  }
.coctail .title span{
  font-size: 14rem;
  color: #fff;
  display: block;
  font-weight: 300;
  }

.coctail .image{
  width: 100%;
  height: 278rem;
  position: relative;
  }
.coctail .image img{
  width: 100%;
  border-radius: 5rem;
  }
.coctail .opis{
  height: 153rem;
  background: linear-gradient(180deg, rgba(35, 31, 32, 0) 0%, #231F20 84.62%);
  position: absolute;
  z-index: 2;
  width: 100%;
  margin-top: -153rem;
  font-size: 12rem;
  color: #fff;
  display: flex;
  align-items: flex-end;
  padding-bottom: 11rem;
  padding-left: 9rem;
  padding-right: 8rem; 
  font-weight: 300;
  }
.coctail .ingredients{
  height: 64rem;
  padding-top: 8rem;
  padding-left: 9rem;
  padding-right: 8rem;
  padding-bottom: 8rem;
  font-size: 12rem;
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 300;
  }

.etap_2 .btn_more {
  width: 455rem;
  height: 70rem;
  border: 1rem solid #8F6D4F;
  border-radius: 10rem;
  color: #8F6D4F;
  font-size: 24rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 72rem;
  cursor: pointer;
  text-transform: uppercase;
  }
.coctail a{
  color: #fff;
  text-decoration: underline;
  }

.coctail[id_user="24"] .title{
  font-size: 19rem;
  }

.coctail.c1:before{
  position: absolute;
  content: ' ';
  width: 159rem;
  height: 55rem;
  margin-left: 44rem;
  margin-top: -55rem;
  background: url(../img/title1.svg);
  background-size: 100% 100%;  
  }
.coctail.c2:before{
  position: absolute;
  content: ' ';
  width: 166rem;
  height: 55rem;
  margin-left: 41rem;
  margin-top: -55rem;
  background: url(../img/title2.svg);
  background-size: 100% 100%;  
  }
.coctail.c3:before{
  position: absolute;
  content: ' ';
  width: 165rem;
  height: 55rem;
  margin-left: 39rem;
  margin-top: -55rem;
  background: url(../img/title3.svg);
  background-size: 100% 100%;  
  }
.coctail.c4:before{
  position: absolute;
  content: ' ';
  width: 378rem;
  height: 80rem;
  margin-left: -66rem;
  margin-top: -86rem;
  background: url(../img/title4.svg);
  background-size: 100% 100%;  
  }
.coctail.c4 {
    margin-left: 139rem;
}

@media (max-width: 750px){

  html{
    font-size: calc(100vw / 360);
    }

body{
    margin: 0px;
    background: url(../img/bg_mob.png?2);
    background-position: top center;
    background-size: 100vw auto;
    font-family: 'MyriadPro', sans-serif;
    font-weight: 400;
    color: #000;
    overflow-y: auto;
    overflow-x: hidden; 
    background-repeat: no-repeat;
    background-color: #231F20;
    background-position-y: 527rem;
    }

.mob{
  display: block;
  }
.pc{
  display: none;
  }
.header {
    width: 100%;
    height: 65rem;
    background: linear-gradient(89.94deg, #231F20 50.02%, #8F6D4F 99.95%);
    z-index: 3;
    position: fixed;
    top: 0rem;
}
.header .content {
    height: 65rem;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.header .logo {
    width: 105rem;
    height: 36.48rem;
    margin-left: 20rem;
    background: url(../img/logo.svg);
    background-size: 100%;
}
.main .slogan {
    width: 331rem;
    height: 158rem;
    background: url(../img/slogan_mob.svg);
    background-size: 100%;
    position: absolute;
    left: 18rem;
    top: 27rem;
}
.main .prize {
    width: 214rem;
    height: 111.71rem;
    background: url(../img/prize_mob.svg);
    background-size: 100%;
    position: absolute;
    left: 126rem;
    top: 376rem;
}
.main .btn {
    width: 320rem;
    height: 55rem;
    border-radius: 10rem;
    display: flex;
    background: linear-gradient(139.26deg, #8F6D4F 29.71%, #56402C 90.25%);
    border: 1rem solid rgba(247, 247, 247, 0.87);
    position: absolute;
    left: 19rem;
    top: 506rem;
    color: #fff;
    font-size: 20rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    cursor: pointer;
}
.main .kv {
    width: 360rem;
    height: 753rem;
    background: url(../img/kv_mob.png?2);
    background-size: 100%;
    position: absolute;
    right: auto;
    left: 0rem;
    top: -63rem;
}
.content.main {
    height: 597rem;
    margin-top: 65rem;
}
.content {
    width: 100vw;
    margin: auto;
    position: relative;
    overflow: hidden;
}
.title_rules {
    width: 192rem;
    height: 102rem;
    background: url(../img/title_rules_mob.svg);
    background-size: 100%;
    margin: auto;
    margin-top: 75rem;
}
.rules {
    width: 324rem;
    margin: auto;
    margin-top: 81rem;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.rules .item {
    width: 324rem;
    height: 310rem;
    border: 1rem solid transparent;
    border-radius: 10rem;
    background: linear-gradient(to bottom, #231F20, #231F20), linear-gradient(to bottom, #8F6D4F, #56402C);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 15rem;
}

.title_etap {
    width: 137rem;
    height: 51rem;
    background: url(../img/title_etap.svg);
    background-size: 100%;
    margin: auto;
    margin-top: 276rem;
}

.etaps {
    margin: auto;
    margin-top: 64.5rem;
    width: 322.12rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.etaps .item {
    width: 325.12rem;
    height: auto;
    background-size: 322.12rem 101rem;
    background-position: left top;
    font-size: 18rem;
    color: #fff;
    padding-top: 119rem;
    line-height: 22rem;
    font-weight: 400;
}
.etaps .item.etap1 {
    background: url(../img/etap1_mob.svg?3);
    background-repeat: no-repeat;
    background-size: 322.12rem 101rem;
    background-position: left top;
    height: 441rem;
}
.etaps .item.etap2 {
    background: url(../img/etap2_mob.svg?3);
    background-repeat: no-repeat;
    background-size: 322.12rem 101rem;
    background-position: left top;
    height: 293rem;
}
.etaps .item.etap3 {
    background: url(../img/etap3_mob.svg?3);
    background-repeat: no-repeat;
    background-size: 322.12rem 101rem;
    background-position: left top;
    height: 300rem;
}

.info {
    border: 1rem solid #8F6D4F;
    border-radius: 10rem;
    width: 319rem;
    margin: auto;
    margin-top: 32rem;
    height: 349rem;
    background: url(../img/info.svg);
    background-size: 33rem 33rem;
    background-repeat: no-repeat;
    background-position: top left;
    background-position-x: 14rem;
    background-position-y: 20rem;
    font-size: 18rem;
    color: #fff;
    padding: 21rem 20rem 0rem 66rem;
    line-height: 22rem;
}

.btn2 {
    width: 320rem;
    height: 55rem;
    border-radius: 10rem;
    display: flex;
    background: linear-gradient(139.26deg, #8F6D4F 29.71%, #56402C 90.25%);
    border: 1rem solid rgba(247, 247, 247, 0.87);
    color: #fff;
    font-size: 20rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    margin: auto;
    margin-top: 69rem;
    cursor: pointer;
}

.title_action {
    width: 249rem;
    height: 165rem;
    background: url(../img/title_action_mob.svg);
    background-size: 100%;
    margin: auto;
    margin-top: 348rem;
    margin-left: auto;
}

.action_form {
    width: 245rem;
    height: 39rem;
    background: url(../img/action11_mob.svg);
    background-size: 100%;
    margin: auto;
    margin-top: 58rem;
    margin-left: auto;
}
.action_form.f2{
  background: url(../img/action12_mob.svg);
  background-size: 100%;
  }


.form1 {
    width: 329rem;
    height: 604rem;
    margin-left: 20rem;
    margin-top: 70rem;
    position: relative;
}




.form2 {
    width: 329rem;
    height: 604rem;
    margin-left: 20rem;
    margin-top: 70rem;
    position: relative;
}
.form .input {
    font-family: 'MyriadPro', sans-serif;
    position: absolute;
    height: 40rem;
    width: 320rem;
    background-color: #fff;
    font-size: 14rem;
    color: rgba(143, 109, 79, 1);
    padding-left: 15rem;
    border-radius: 2rem;
}
.form .upload {
    position: absolute;
    width: 166rem;
    height: 90rem;
    background-color: #fff;
    border-radius: 2rem;
    width: 320rem;
}
.form .upload.photo {
    left: 0rem;
    top: 301rem;
}
.form .upload .title {
    font-size: 14rem;
    color: rgba(143, 109, 79, 0.64);
    position: absolute;
    top: 8rem;
    left: 10rem;
}
.form .upload .title2 {
    font-size: 14rem;
    color: rgba(143, 109, 79, 0.64);
    position: absolute;
    top: 51rem;
    left: 38rem;
    width: 73%;
    height: 34rem;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}
.form .input.phone_code {
    width: 57rem;
    left: 0rem;
    top: 401rem;
    padding-left: 11rem;
    pointer-events: none;
    /* display: none; */
}
.form .input.phone_operator {
    width: 59rem;
    left: 64rem;
    top: 401rem;
    padding-left: 11rem;
}
.form .input.phone {
    width: 191rem;
    left: 128rem;
    top: 401rem;
}
.form .input.telegram {
    left: 0rem;
    top: 451rem;
}
.form .input.years {
    left: 0rem;
    top: 501rem;
}
.form .text1 {
    font-size: 14rem;
    color: #8F6D4F;
    position: absolute;
    top: 567rem;
}
.form.form2 .text1 {
    font-size: 14rem;
    color: #8F6D4F;
    position: absolute;
    top: 600rem;
}

.form .input.coctail3 {
    left: 0rem;
    top: 101rem;
    height: 99rem;
}

.form .upload.coctail_present {
    left: 0rem;
    top: 289rem;
    width: 156rem;
}
.form .upload.coctail_photo {
    left: 165rem;
    top: 289rem;
    width: 156rem;
}
.form .text2 {
    font-size: 12rem;
    color: #8F6D4F;
    position: absolute;
    top: 389rem;
    left: 0rem;
}
.form .captcha_img {
    position: absolute;
    top: 446rem;
    left: 0rem;
    background-color: #fff;
    width: 135rem;
    height: 53rem;
}
.form .input.captcha {
    width: 174rem;
    left: 146rem;
    top: 446rem;
    height: 54rem;
}
.form .checkbox {
    position: absolute;
    width: 30rem;
    height: 30rem;
    border-radius: 2rem;
    background-color: #fff;
    cursor: pointer;
}
.form .agree1 {
    left: 0rem;
    top: 518rem;
}
.form .agree2 {
    left: 0rem;
    top: 557rem;
}
.form .checkbox_text {
    font-size: 14rem;
    color: #8F6D4F;
    position: absolute;
}
.form .checkbox_text1 {
    top: 525rem;
    left: 43rem;
}
.form .checkbox_text2 {
    top: 563rem;
    left: 43rem;
}



.btn3 {
    width: 320rem;
    height: 55rem;
    border-radius: 10rem;
    display: flex;
    background: transparent;
    border: 1rem solid #8F6D4F;
    color: #8F6D4D;
    font-size: 20rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    margin: auto;
    margin-top: 32rem;
    cursor: pointer;
}


.hv {
  width: 320rem;
  height: 449rem;
  background: url(../img/hv_mob.png);
  margin: auto;
  margin-top: 79rem;
  background-size: 100%;
  background-repeat: no-repeat;
}

.footer {
    height: 582rem;
    margin-top: 10rem;
}
.footer .content {
    height: 582rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
.footer .logo {
    width: 225rem;
    height: 78.72rem;
    background: url(../img/logo.svg);
    background-size: 100%;
    margin-top: 57rem;
}
.footer .email {
    font-size: 16rem;
    color: #fff;
    font-weight: 800;
}
.footer .copyright {
    font-size: 14rem;
    color: #fff;
    width: 347rem;
    text-align: center;
    margin-bottom: 62rem;
}




.header .menu {
  font-size: 20rem;
  color: #fff;
  display: flex;
  align-items: flex-start;
  position: fixed;
  width: 100vw;
  height: 100%;
  top: 63rem;
  flex-direction: column;
  background-image: url(/img/bg_menu.jpg?2);
  background-size: cover;
  background-position-y: -70rem;
  justify-content: flex-start;
  padding-top: 50rem;
  opacity: 0;
  pointer-events: none;
}
.header .menu.active {
  opacity: 1;
  pointer-events: all;
  }
.header .menu div {
    margin-left: 40rem;
    margin-top: 25rem;
    margin-bottom: 25rem;
}
.header .menu div.btn {
    width: auto;
    height: auto;
    border: none;
    border-radius: 3.27rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn_menu{
  background-image: url(/img/menu.svg);
  background-size: 30rem 20rem;
  background-position: center;
  background-repeat: no-repeat;
  width: 30rem;
  height: 30rem;
  margin-right: 20rem;
  }
.btn_menu.active{
  background-image: url(/img/menu_close.svg);
  background-size: 26rem 24rem;
  }


.age_check {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0rem;
    top: 0rem;
    background: #231F20;
    background-image: url(../img/bg_age.jpg?2);
    background-position: top center;
    background-size: cover;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s linear;
}
.hv_vert {
    position: absolute;
    width: 321rem;
    height: 132rem;
    background: url(../img/hv_mob2.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: 21rem;
    top: auto;
    bottom: 0rem;
    margin: auto;
}
.title_age {
    width: 311rem;
    height: 63rem;
    background: url(../img/title_age.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}
.btn4 {
    width: 86rem;
    height: 54rem;
    border: 1rem solid #8F6D4F;
    border-radius: 10rem;
    color: #8F6D4F;
    font-size: 16rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5rem;
    cursor: pointer;
}

.popup_outer {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0rem;
    top: 0rem;
    background: #000;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s linear;
}

.popup.send_ok {
    width: 328rem;
    height: 600rem;
    background: url(../img/pop_thanks_mob.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}



.popup .close {
    position: absolute;
    width: 57rem;
    height: 57rem;
    right: 14rem;
    top: 16rem;
    cursor: pointer;
}

.limit{
  position: absolute;
  left: 41rem;
  top: 574rem;
  color: #fff;
  font-size: 15rem;
  font-weight: bold;
  text-transform: uppercase;
  }




.title_prize {
  width: 279rem;
  height: 48rem;
  background: url(../img/title_result.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  margin: auto;
  margin-top: 339rem;
  margin-left: 47rem;
  }

.etap_2 .text {
    font-size: 20rem;
    width: calc(100vw - 42rem);
    color: #fff;
    margin-top: 70rem;
    margin-left: 22rem;
}

.coctail_outer {
    width: calc(100vw - 36rem);
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 100rem;
    justify-content: space-between;
  }
.coctail {
    width: 154rem;
    height: 293rem;
    background: rgba(143, 109, 79, 0.41);
    border-radius: 5rem;
    margin: 0rem;
    margin-bottom: 80rem;
    position: relative;
    border: 2rem solid transparent;
  }
.coctail .title {
    height: 62rem;
    padding-top: 4rem;
    padding-left: 6rem;
    padding-right: 6rem;
    padding-bottom: 8rem;
    font-size: 13rem;
    font-weight: bold;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
.coctail[id_user="24"] .title{
  font-size: 12rem;
  }
.coctail .title span {
    font-size: 10rem;
    color: #fff;
    display: block;
    font-weight: 400;
  }
.coctail .image {
    width: 100%;
    height: 173rem;
    position: relative;
  }
.coctail .opis {
    height: 130rem;
    background: linear-gradient(180deg, rgba(35, 31, 32, 0) 0%, #231F20 84.62%);
    position: absolute;
    z-index: 2;
    width: 100%;
    margin-top: -130rem;
    font-size: 7.8rem;
    /* line-height: 11rem; */
    color: #fff;
    display: flex;
    align-items: flex-end;
    padding-bottom: 8rem;
    padding-left: 6rem;
    padding-right: 6rem;
  }
.coctail .ingredients {
    height: 59rem;
    padding-top: 6rem;
    padding-left: 6rem;
    padding-right: 6rem;
    padding-bottom: 6rem;
    font-size: 7.8rem;
    color: #fff;
    display: flex;
    align-items: center;
    /* line-height: 11rem;*/
}
.etap_2 .btn_more {
    width: calc(100vw - 44rem);
    height: 55rem;
    border: 1rem solid #8F6D4F;
    border-radius: 10rem;
    color: #8F6D4F;
    font-size: 20rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 72rem;
    cursor: pointer;
    text-transform: uppercase;
  }
.coctail.active:before {
    content: ' ';
    position: absolute;
    width: 17rem;
    height: 17rem;
    background: url(../img/check.svg);
    background-size: 100% 100%;
    right: -7rem;
    top: -7rem;
  }


.popup.send_phone .pop_inner {
    width: 264rem;
    margin: auto;
  }
.popup .title {
    font-size: 20rem;
    color: #8F6D4F;
    text-align: center;
    margin-bottom: 20rem;
  }
.popup .operator {
    width: 59rem;
    height: 40rem;
    text-align: center;
    font-size: 14rem;
    color: #8F6D4F;
  }
.popup .phone {
    width: 200rem;
    height: 40rem;
    text-align: left;
    font-size: 14rem;
    color: #8F6D4F;
    margin-left: 2rem;
    padding-left: 11rem;
}
.popup .check {
    color: #8F6D4F;
    font-size: 10rem;
    display: flex;
    margin-top: 25rem;
    align-items: center;
    flex-wrap: nowrap;
  }
.pop_inner {
    width: 296rem;
    margin: auto;
  }
.popup .code {
    width: 100%;
    height: 40rem;
    text-align: left;
    font-size: 14rem;
    color: #8F6D4F;
    padding-left: 11rem;
    display: block;
    margin: auto;
  }

.popup {
    width: 328rem;
    height: 474rem;
    background: url(../img/popup_mob.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
}
.coctail.pc{
  display: none!important;
}




.coctail.c1:before {
    position: absolute;
    content: ' ';
    width: 75rem;
    height: 28rem;
    margin-left: 39rem;
    margin-top: -33rem;
    background: url(../img/title1.svg);
    background-size: 100% 100%;
}
.coctail.c2:before {
    position: absolute;
    content: ' ';
    width: 77rem;
    height: 28rem;
    margin-left: 35rem;
    margin-top: -33rem;
    background: url(../img/title2.svg);
    background-size: 100% 100%;
}
.coctail.c3:before {
    position: absolute;
    content: ' ';
    width: 79rem;
    height: 28rem;
    margin-left: 35rem;
    margin-top: -33rem;
    background: url(../img/title3.svg);
    background-size: 100% 100%;
}
.coctail.c4:before {
    position: absolute;
    content: ' ';
    width: 152rem;
    height: 38rem;
    margin-left: 1rem;
    margin-top: -45rem;
    background: url(../img/title4.svg);
    background-size: 100% 100%;
}

.coctail.c4 {
    margin-left: auto;
}

  }