/* делаем везде так, чтобы свойства width и height задавали не размеры контента, а размеры блока */
.wheelYWP * {
  box-sizing: border-box !important;

}
/* общие настройки страницы */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;500;600;800&display=swap')

font-family: Montserrat;

.spin_conteyn{
    /* задаём переменные блока */
  /* размеры колеса */
  --size: clamp(250px, 85vmin, 512px);
  /* настройки яркости и заливки фона секторов */
  --lg-hs: 0 3%;
  --lg-stop: 50%;
  --lg: linear-gradient(
      hsl(var(--lg-hs) 0%) 0 var(--lg-stop),
      hsl(var(--lg-hs) 20%) var(--lg-stop) 100%
    );
  /* добавляем позиционирование относительно других элементов */
  position: relative;
  /* подключаем сетку */
  grid-gap: calc(var(--size) / 20);
  /* выравниваем содержимое блока по центру */
  align-items: center;
  /* задаём имена областей внутри сетки */
  grid-template-areas:
    "spinner"
    "trigger";
  /* устанавливаем размер шрифта */
  font-size: calc(var(--size) / 21);
  font-family: Montserrat;

}
/* общий блок для всех элементов */
.deal-wheel {
  display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* всё, что относится ко внутренним элементам главного блока, будет находиться в области сетки с названием spinner */
.deal-wheel > * {
  grid-area: spinner;
}

/* сам блок и кнопка будут находиться в области сетки с названием trigger и будут выровнены по центру */
.deal-wheel .btn-spin {
  grid-area: trigger;
  justify-self: center;
}

/* сектор колеса */
.spinner {
  /* добавляем относительное позиционирование */
  position: relative;
  /* подключаем сетку */
  display: grid;
  /* выравниваем всё по центру */
  align-items: center;
  /* добавляем элемент в сетку */
  grid-template-areas: "spinner";
  /* устанавливаем размеры */
  width: var(--size);
  height: var(--size);
  /* поворачиваем элемент  */
  -webkit-transform: rotate(calc(var(--rotate, 25) * 1deg));
  transform: rotate(calc(var(--rotate, 25) * 1deg));
  /* рисуем круглую обводку, а всё, что не поместится, — будет скрыто за кругом */
  border-radius: 50%;
  padding: 0;
   border: 8px solid #C1C9E9;
   padding: 0;
   margin: 0;
  -webkit-box-shadow: 6px -1px 100px 49px rgba(49, 76, 182, 0.52);
-moz-box-shadow: 6px -1px 100px 49px rgba(49, 76, 182, 0.52);
box-shadow: 6px -1px 100px 49px rgba(49, 76, 182, 0.52);
}

/* всё, что внутри этого блока, будет находиться в области сетки с названием spinner */
.spinner * {
  grid-area: spinner;
}

/* текст на секторах */
.prize {
  /* включаем «гибкую» вёрстку */
  display: flex;
  align-items: center;
  /* задаём отступы от краёв блока */
  padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20);
  /* устанавливаем размеры */
  width: 50%;
  height: 50%;
  /* устанавливаем координаты, относительно которых будем вращать текст */
  -webkit-transform-origin: center right;
  transform-origin: center right;
  /* поворачиваем текст */
  -webkit-transform: rotate(var(--rotate));
  transform: rotate(var(--rotate));
  /* запрещаем пользователю выделять мышкой текст на секторах */
  user-select: none;
}

/* кнопка запуска колеса */
.btn-spin {
  color: white;
  background: black;
  border: none;
  /* берём размер шрифта такой же, как в колесе */
  font-size: inherit;
  font-family: Montserrat;
  /* добавляем отступы от текста внутри кнопки */
  padding: 0.9rem 2rem 1rem;
  /* скругляем углы */
  border-radius: 0.5rem;
  /* меняем внешний вид курсора над кнопкой на руку*/
  cursor: pointer;
}

/* если кнопка нажата и неактивна */
.btn-spin:disabled {
  /* меняем внешний вид курсора */
  cursor: progress;
  /* делаем кнопку полупрозрачной */
  opacity: 0.25;
}

/* анимация вращения */
.is-spinning .spinner {
    -webkit-transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
  transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}

/* анимируем выпавший сектор */
.prize.selected .text {
  /* делаем текст белым */
  color: white;
  /* настраиваем длительность анимации */
  -webkit-animation: selected 800ms ease;
  animation: selected 800ms ease;
}

/* настраиваем анимацию текста на выпавшем секторе по кадрам */
@keyframes selected {
  /* что происходит на 25% от начала анимации */
  25% {
    /* увеличиваем текст в 1,25 раза */
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    /* добавляем тексту тень */
    -webkit-text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
    text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
  }
  40% {
    -webkit-transform: scale(0.92);
    transform: scale(0.92);
    -webkit-text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
    text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
  }
  60% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
    -webkit-text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
  }
  75% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  85% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.text{
    -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  font-family: Montserrat;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 14px;
text-align: center;

color: #FFFFFF;
}
.slid_left{
  display: flex;
  align-items: center;
}
/*.liner{
    z-index: -1;
  position: absolute;
  width: 400px;
height: 400px;
  background: #314CB6;
  -webkit-filter: blur(130px);
filter: blur(130px);
}*/
.ticker1{
  padding-left: 17px;
      position: relative;
}
.ticker1 img{
    position: relative;
    z-index: 999;

        max-width: 32.1px;
}
#promo{
    border: none;
    text-align: center;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 2px;
    color: #191919;
}

.slid_right{
  color: white;
  max-width: 350px;
  position: relative;
}

#while_content{
      position: fixed;
    top:200%;
  width: 100%;
  height: 100vh;
  display: grid;
  align-items: center;
    background: #212121;
    z-index: 10000;
    
}


.slid_right_tit{
    font-family: Montserrat;
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
}
.slid_right_text{
    font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #FFFFFF;
  opacity: 0.7;
    margin: 0;
  padding: 0;
  padding-top: 16px;
  padding-bottom: 32px;
  word-wrap: break-word;

}
.numb_content{
width: 100%;
    border: 2px solid #314CB6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.numb_content img{
  max-width: 16px;
  max-height: 16px;
  margin-left: 11px;
  margin-right: 11px;
}
.numb_content span{
  padding-right: 10px;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
font-family: Montserrat;

color: #FFFFFF;
}
#phone_4::placeholder {
font-style: normal;
font-family: Montserrat;
font-weight: 400;
font-size: 14px;
line-height: 16px;

color: #FFFFFF;

opacity: 0.2;
}
#phone_4{
    font-family: Montserrat;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;

color: #FFFFFF;}
.tel_while{
  padding: 16px 0;
  border: none;
color: white;
background: none;
}
#while_content textarea:focus, #while_content input:focus{
    outline: none;
}
.otpravit{
  width: 100%;
  height: 49px;
background: #314CB6;
border-radius: 8px;
cursor: not-allowed;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 17px;
border: none;
    margin-bottom: 25px;
color: #FFFFFF;
    position: relative;
    overflow: hidden;
    font-family: Montserrat;
}
.otpravit:hover{
  opacity: .7;
}
#error_text{
  color: #FF0000;
  display: none;
font-style: normal;
font-weight: 400;
font-size: 8px;
line-height: 9px;
font-family: Montserrat;

}
#forchekimg{
  cursor: pointer;
      border-radius: 4px;
}
.labelcheck{
  display: flex;
  padding-right: 6px;
}
.checkbox_cont{
  display: flex;
  align-items: center;
  padding: 0;
    margin: 0;
    padding: 28px 0;
}
.checkbox_cont span{
    font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  /* identical to box height */
  color: #FFFFFF;
  padding-right: 6px;
}
.checkbox_cont a{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  text-decoration-line: underline;
  font-family: Montserrat;

  color: #7D93EB;
}
.clos_modal{
  position: absolute;
  right: 41px;
  top: 41px;
  cursor: pointer;
  height: 20px;
  width: 20px;
  background: url(https://www.ywp.1ry.ru/imgWheel/zak.svg);
}
.clos_modal:hover{
  background: url(https://www.ywp.1ry.ru/imgWheel/zakhov.svg);
}
#zakokno:hover{
  opacity: .8;
}
#shmodal_full{
    width: 100px;
  height: 100px;
  background: url(https://www.ywp.1ry.ru/imgWheel/kr.svg);
      background-size: contain;

}
.shmodal{
        -webkit-animation:spin 4000ms linear infinite;
    -moz-animation:spin 4000ms linear infinite;
    animation:spin 4000ms linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#show, .spin_conteyn, .modalopen_bl, .promo_block {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modalopen_bl{
    width: 100px;
    height: 100px;
    position: fixed;
    bottom: 50px;
    transition: all ease .4s;
    z-index: 10000;
}
.modalopen_bl._right {
  right: 20px;
}
.modalopen_bl._left {
  left: 20px;
}
#show{
  position: absolute;
    z-index: 999;
    text-align: center;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.spin9 {
    background: conic-gradient( from -90deg, 
      #041248 0%,#2D4192 11.1111%,
      #041248 0%,#2D4192 22.2222%,
      #041248 0%,#2D4192 33.3333%,
      #041248 0%,#2D4192 44.4444%,
      #041248 0%,#2D4192 55.5556%,
      #041248 0%,#2D4192 66.6667%,
      #041248 0%,#2D4192 77.7778%,
      #041248 0%,#2D4192 88.8889%,
      #041248 0%,#2D4192  100% );
}

.spin7 {
    background: conic-gradient( from -90deg, 
      #041248 0%,#2D4192 14.2857142857%,
      #041248 0%,#2D4192 28.571428571428573%,
      #041248 0%,#2D4192 42.85714285714286%,
      #041248 0%,#2D4192 56.142857%,
      #041248 0%,#2D4192 71.42857142857143%,
      #041248 0%,#2D4192 85.71428571428572%,
      #041248 0%,#2D4192  100% );
}
.spin5 {
    background: conic-gradient( from -90deg, 
      #041248 0%,#2D4192 20%,
      #041248 0%,#2D4192 40%,
      #041248 0%,#2D4192 60%,
      #041248 0%,#2D4192 80%,
      #041248 0%,#2D4192  100% );
}
.spin3 {
    background: conic-gradient( from -90deg, 
      #041248 0%,#2D4192 33.333333333333336%,
      #041248 0%,#2D4192 66.66666666666667%,
      #041248 0%,#2D4192  100% );
}
.krugcentr{
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 50%;
  background: #FFFFFF;
opacity: 0.7;
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.32);
backdrop-filter: blur(5px);
z-index: 999;
top: 50%;
    left: 50%;
    margin: -24px 0 0 -21px
}
.promo_block{
  height: 46px;
margin-bottom: 32px;
background: #FFFFFF;
border: 2px solid #314CB6;
border-radius: 8px;
position: relative;
}
#promo_cont{
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
letter-spacing: 2px;
display: none;
color: #191919;
font-family: Montserrat;

}
.copi_promo{
  cursor: pointer;
  position: absolute;
  left: 15px;
  line-height: 0;
}
#copy_mesage{
  background: #191919;
border: 0.5px solid rgba(255, 255, 255, 0.25);
border-radius: 99px;
padding: 8px 16px;
display: none;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
font-family: Montserrat;

color: #FEFEFE;
}
#prom_styl{
  display: none;
}
.vgrish{
    font-family: Montserrat;
  display: none;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 19px;
color: #FFFFFF;
opacity: 0.7;
padding-bottom: 16px;
}
#ywp{
    position: absolute;
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    justify-content: center;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    margin-top: 95px;
    font-family: Montserrat;

}
#ywp img{
  margin-right: 12px;
}
#zakokno{
  height: 49px;
border: none;
background: #191919;
border-radius: 8px;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 17px;
font-family: Montserrat;

/* identical to box height */
width: 100%;
cursor: pointer;
color: #FFFFFF;
display: none;
}
.linear_podarok{
  width: 96px;
  height: 96px;
position: absolute;
  background: #314CB6;
  filter: blur(72px);
}
.skr_mof_mob{
    display: none;
}

.shmodal1 {
    -webkit-animation: spin 100000ms linear infinite;
    -moz-animation: spin 100000ms linear infinite;
    animation: spin 100000ms linear 

}

     @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

     @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

     @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@media(max-width: 950px){

#while_content{
    -webkit-top: 100vh;
    top: 100vh;
    display: flex !important;
}

  #ywp {
    margin-top: 29px;
}
    .clos_modal1{
        display: block;
    }
.slid_left {
     -webkit-transform: rotate(90deg);
     transform: rotate(90deg);
}
.deal-wheel{
    flex-wrap: wrap;
    position: absolute;
    top: -250px;
}
.clos_modal{
    display: none;
}
.skr_mof_mob{
    display: flex;
    position: absolute;
    text-align: center;
    right: 16px;
    top: 16px;
    /* top: 0; */
    width: 50px;
    height: 50px;
    background: #FFFFFF;
    box-shadow: 0px 4px 28px rgb(0 0 0 / 25%);
    border-radius: 50%;
    /* position: relative; */
    z-index: 999;
    justify-content: center;
    align-items: center;
}
.skr_mof_mob a{
        line-height: 0;
    display: block;
    position: inherit;
    margin: 0;
    padding: 0;
}
.liner {
display: none;
}
.slid_right {
    color: white;
    max-width: 100%;
    position: relative;
    padding: 0 30px;
}
.slid_right {
text-align: center;
    padding-top: 35px;
        padding-bottom: 50px;
}

#ywp {
    bottom: -30px;
    position: inherit;
}

.min_sp{
    display: block;
}
.spin_conteyn {
    --size: clamp(250px, 125vmin, 600px);
    }
    #while_content {
    position: fixed;
   -webkit-overflow-scrolling:touch;
    width: 100%;
    height: 100vh;
    overflow: scroll;
    overflow-x: hidden;
}
.slid_right_tit {

font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 29px;
font-family: Montserrat;

/* identical to box height */

text-align: center;

color: #FFFFFF;
}
.slid_right_text {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
text-align: center;
font-family: Montserrat;

color: #FFFFFF;

opacity: 0.7;
}
}

@media(max-width: 480px){

.deal-wheel {
    top: -190px;
    min-height: 853px;
}
.spin_conteyn {
    --size: clamp(250px, 142vmin, 488px);
}
}


#otp_but {

    position: relative;
    font-size: 15px;
    overflow: hidden;
    -webkit-transition: ease 0.3s;
font-family: Montserrat;
    transition: ease 0.3s;
}


#otp_but:after {
    content: "";
    display: block;
    width: 30px;
    height: 300px;
    margin-left: 60px;
    background: #fff;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.7) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#b3ffffff',GradientType=0 );
    position: absolute;
    left: -40px;
    top: -150px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-animation-name: slideme;
    animation-name: slideme;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    opacity: 0.4;
}

@-webkit-keyframes slideme {
    0% { left: -30px; margin-left: 0px; }
    30% { left: 110%; margin-left: 80px; }
    100% { left: 110%; margin-left: 80px; } 
}

.promo_block._hide {
  display: none !important;
}
#privacyHref {
  color: #7D93EB !important;
}
.checkbox-box-ywp {
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  border-radius: 4px;
  border: 2px solid #314CB6;
  position: relative;
  display: inline-block;
  margin: 0 6px 0 0;
}
.checkbox-box-ywp::before {
  position: absolute;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: #314CB6;
  top: 2px;
  left: 2px;
  transition: all ease .4s;
  opacity: 0;
}
.labelcheck, .otpravit {
    cursor: pointer;
}
#chekboxYWP:checked ~ .labelcheck .checkbox-box-ywp::before {
  opacity: 1;
}
#errorText {
    margin: 10px 0 0 0;
}
.ticker {
    margin: 0 0 0 10px;
    width: 30px;
}
.ticker img {
    width: 100%;
}