.deal-wheel {min-width: 440px;}
		.deal-wheel h2{    font-family: KabelCBook !important;font-weight: 100;margin-bottom: 0;}
		.deal-wheel {    font-family: KabelCBook !important;font-weight: 100;}
		.deal-wheel .pump{    background: url(pumpkin.png);
			cursor:pointer;
			min-height: 160px;
			background-position: center center;
			background-size: cover;}
			
			.deal-wheel .pump:hover{opacity:0.5;}


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

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

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



.b1 .deal-wheel{display:none;}
.b1.active .deal-wheel{display:grid;}

.b1 {
	visibility: hidden;
	opacity: 0;
	
	display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255,255,255,.7);
  z-index: 0;
  
}
.b1.active{
	opacity: 1;
	visibility: visible;
	transition: 1s ease-out; 
	z-index: 15000;	
}

.b1.na {
    opacity: 0;
	visibility: hidden;
    transition: 1s ease-out;
	display:none;
}

.deal-wheel {
    opacity: 1;
	visibility: visible;
    transition: 1s ease-out;
	    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.deal-wheel.na {
    opacity: 0;
	visibility: hidden;
}

.present{
	opacity: 0;
	visibility: hidden;
	 transition: 2s ease-out;    
}

.present.active {
        color: white;
    opacity: 1;
    
    visibility: visible;
}
.present  {    
		text-align:center;
  background-image: url(p-2.png);
 min-width: 500px;
 min-height: 500px;
  background-size: contain;
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  z-index: 1;
  background-repeat: no-repeat;
  background-position: center;

}

.present .text
{   
       position: fixed;
    font-size: 20px;
    font-family: KabelCBook;
    color: #005347;
	    min-width: 500px;
		padding: 20px;
    }

.text .f1{    line-height: 1.2;
    padding: 20px 0 10px 0;}
	
.text .f2{    color: white;
    font-size: 50px;
	    padding: 10px 0;font-weight: bold;text-shadow: 3px 3px 2px rgba(82, 0, 0, 1),
             0px -1px 11px rgba(17, 24, 7, 0.85);}

.text .f2 a{    color: white;
    font-size: 50px;
	    padding: 10px 0; text-shadow: 3px 3px 2px rgba(82, 0, 0, 1),
             0px -1px 11px rgba(17, 24, 7, 0.85);}
		
.text .f3{      margin-bottom: 30px;  line-height: 1.2;    padding: 10px 0;}

.text .f4{   
    color: black;
    font-size: 12px;
line-height: 1;    margin-top: 10px;}
	
.text .f5{   font-size: 16px;
    line-height: 1.5;}
	
.buttonCustom3{color: #f7af5a;}	
.buttonCustom3:hover{color:white;}	
	
@media (max-width: 767px) {
       .text .f5{   font-size: 15px;   }
       .text .f3, .text .f1{  font-size: 20px;  }
	   .btn-spin {font-size: 30px !important;}
    }
	
@media (max-width: 500px) {
       .text .f5{   font-size: 14px;   }
       .text .f3, .text .f1{  font-size: 16px;  }
	   .btn-spin {font-size: 25px !important;}
    }	
	
	
.present .buttonCustom2{
	margin-top: 10px;
    background-color: #005347;
    color: #f7af5a;
	font-size: 22px !important;
	    height: 48px !important;
		   /* border: 4px solid #c3dbd8;*/
}

/* сектор колеса */
.spinner {
	background-image: url(romashka.png);
    background-position: center center;
    background-size: 90%;
    background-repeat: no-repeat;
	
  /* добавляем относительное позиционирование */
  position: relative;
  /* подключаем сетку */
  display: grid;
  /* выравниваем всё по центру */
  align-items: center;
  /* добавляем элемент в сетку */
  grid-template-areas: "spinner";
  /* устанавливаем размеры */
  width: var(--size);
  height: var(--size);
  /* поворачиваем элемент  */
  transform: rotate(calc(var(--rotate, 25) * 1deg));
  /* рисуем круглую обводку, а всё, что не поместится, — будет скрыто за кругом */
  border-radius: 50%;
}

/* всё, что внутри этого блока, будет находиться в области сетки с названием 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%;
  /* устанавливаем координаты, относительно которых будем вращать текст */
  transform-origin: center right;
  /* поворачиваем текст */
  transform: rotate(var(--rotate));
  /* запрещаем пользователю выделять мышкой текст на секторах */
  user-select: none;
}

.close{ opacity:1;
	position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
	cursor:pointer;
    width: 24px;
    height: 24px;
    border-radius: 100px;
    background: linear-gradient(45deg, transparent calc(50% - 3px), #005347 calc(50% - 3px), #005347 calc(50% + 3px), transparent calc(50% + 3px)), linear-gradient(-45deg, transparent calc(50% - 3px), #005347 calc(50% - 3px), #005347 calc(50% + 3px), transparent calc(50% + 3px));
  }
  
/* язычок */
.ticker {
  /* добавляем относительное позиционирование */
  position: relative;
  font-size: 35px;
  /* устанавливаем размеры */
 /* left: calc(var(--size) / -15);*/
  width: calc(var(--size) / 10);
  height: calc(var(--size) / 20);
  /* фон язычка */
  background: var(--lg);
  /* делаем так, чтобы язычок был выше колеса */
  z-index: 1;
  /* форма язычка */
  clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
  /* устанавливаем точку, относительно которой будет вращаться язычок при движении колеса */
  transform-origin: center left;
}

.ticker .fa{color:#005347;}

/* кнопка запуска колеса */
.btn-spin {
background: #c3dbd8;
    text-transform: uppercase;
    /*font-size: 12px;*/
    border: 1px solid #eee;
    color: #005347;
    transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    display: inline-block;
   /* padding: 5px 10px;*/
    cursor: pointer;
   /* border-radius: 0;*/
    line-height: 1.1;
	font-family: KabelCBook;
	font-size: 40px;
  border-radius: 12px;   
  padding: 5px 25px;
	
	background-color: #c3dbd8;
}
.btn-spin:hover{background-color: #005347; color:white;}

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

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

/* анимация движения язычка */
.is-spinning .ticker {
          animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* эффект, когда колесо задевает язычок при вращении */
@keyframes tick {
  40% {
    /* чуть поворачиваем язычок наверх в середине анимации */
    transform: rotate(-12deg);
  }
}

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

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