.widget{

  display: block;

  position: fixed;

  z-index: 100;

  width: 6.7rem;

  height: 6.4rem;

  right: 1rem;

  bottom: 1rem;

  transform: translateY(50vh);

  transition: .5s transform;

  

}

.widget.show{

  transform: translateY(0vh);

}

.widget::after{

  content: '';

  display: block;

  position: absolute;

  z-index: 0;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  background: url(../img/widget/poligon-0.svg) center / contain no-repeat;

  animation: 2s pulseWidget infinite;

}

.widget.with-label::after{

  animation: none;

}

.widget.with-label .poligon-1,

.widget.with-label .poligon-2,

.widget.with-label .poligon-3{

  animation: 1s pulseIn3 linear forwards;

}



.widget .icons{

  display: block;

  position: absolute;

  z-index: 2;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

}

.widget .icons img{

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -28%);

  animation: 9s fadeToggleIcon infinite linear;

  width: auto;

  height: 2.3rem;

  opacity: 0;

}

.widget .icons img:nth-child(2){

  animation-delay: 3s;

  height: 2.65rem;

}

.widget .icons img:nth-child(3){

  animation-delay: 6s;

  height: 2.65rem;

}

.widget .poligon-1{

  display: block;

  position: absolute;

  z-index: 1;

  width: 7.75rem;

  height: 7.4rem;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background: url(../img/widget/poligon-1.svg) center / contain no-repeat;

  animation: 2s pulseIn1 infinite;

}

.widget .poligon-2{

  display: block;

  position: absolute;

  z-index: 0;

  width: 8.85rem;

  height: 8.45rem;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background: url(../img/widget/poligon-1.svg) center / contain no-repeat;

  opacity: 0.4;

  animation: 2s pulseIn2 infinite;

}

.widget .poligon-3{

  display: block;

  position: absolute;

  z-index: 0;

  width: 9.85rem;

  height: 9.45rem;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background: url(../img/widget/poligon-1.svg) center / contain no-repeat;

  animation: 2s pulseIn3 .35s infinite;

}

.widget-label{

  display: block;

  position: fixed;

  z-index: 99;

  right: 5rem;

  bottom: -20rem;

  width: 22rem;

  height: 6.4rem;

  padding: 1.3rem 4rem 1rem 1.7rem;

  font-size: 0.8rem;

  background: url(../img/widget/box-bg.svg) center / contain no-repeat;

  line-height: 1.5;

  opacity: 0;

  transform: translate(-2rem, 0rem);

  color: #fff;

  visibility: hidden;

  transition: 1s opacity, 1s transform, .5s bottom;

}

.widget-label.show{

  bottom: 1rem;

  animation: 2.5s infinite linear;

  animation-delay: 4s;

}

.widget-label.show:hover{

  animation-play-state: paused !important;

}

.widget-label.show:hover+.widget, .widget:hover{

  transform: scale(1.2);

}

.widget:hover::after{

  animation-play-state: paused;

}

.widget:hover .poligon-3{

  opacity: 0;

  animation-name: none;

}

/* .widget-label.show>p>strong,

.widget-label.show>p>small{

  opacity: 1;

  transform: translateY(0);

} */

.widget-label p>strong{

  display: block;

  margin-bottom: 0.55rem;

  text-transform: uppercase;

  letter-spacing: 0.135em;

  opacity: 0;

  top: 1rem;

  position: relative;

}

.widget-label p>small{

  display: block;

  letter-spacing: 0.06em;

  font-size: 0.7rem;

  opacity: 0;

  top: 1rem;

  position: relative;

}

.widget-close{

  position: absolute;

  z-index: 5;

  width: 14px;

  height: 14px;

  top: .5rem;

  left: .5rem;

  cursor: pointer;

  background: url(../img/widget/close.svg) center / contain no-repeat;

}

.widget-label .arrows{

  display: flex;

  position: absolute;

  z-index: 5;

  right: 3.5rem;

  bottom: 1rem;

  opacity: 0;

}

.widget-label .arrows img{

  display: block;

  margin-left: .5rem;

  height: .9rem;

  width: 1.1rem;

  animation: 1.5s fadeToggleArrows infinite linear;

}

.widget-label .arrows img:nth-child(2){

  animation-delay: .3s;

}

.widget-label .arrows img:nth-child(3){

  animation-delay: .6s;

}

.widget-hover{

  display: flex;

  justify-content: center;

  align-items: center;

  position: absolute;

  z-index: 4;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  padding: 1.3rem 4rem 1.2rem 1.7rem;

  font-size: 0.8rem;

  background: url(../img/widget/box-bg.svg) center / contain no-repeat;

  line-height: 1.5;

  text-transform: uppercase;

  letter-spacing: 0.135em;

  font-weight: 900;

  text-align: center;

  opacity: 0;

  transition: .4s opacity;

  cursor: default;

  text-decoration: none;

  cursor: pointer;

}

.widget-label:hover .widget-hover{

  opacity: 1;

}





.form-steps__backs{

  margin-top: 1.5rem;

}

.form-steps__back{

  display: inline-block;

  font-size: 14px;

  font-weight: 300;

  letter-spacing: 5px;

  cursor: pointer;

  vertical-align: middle;

}

.form-steps__back::first-letter{font-weight:900}

.form-steps__back:hover{font-weight:900;letter-spacing:4.6px}

.form__box-input_required{

  position: relative;

}

.form__box-input_required::after{

  content: '*';

  display: block;

  position: absolute;

  top: 0;

  right: 0;

  line-height: 1.2;

  color: #ff0000;

  pointer-events: none;

}



.modal .form-steps{

  padding: 0 !important;

}

.btn1{

  user-select: none;

}



@media (min-width:1221px){

  .modal_quiz.modal{

    padding: 0;

  }

  .form-steps__form .form__box-input{

    width: 306px;

  }

}



@media (max-width: 1221px){

  .widget-hover{

    opacity: 0;

  }

  .modal .steps__scale{

    margin-top: 12px;

  }

  .modal .form-steps__nav{

    margin-bottom: 15px;

  }

  .modal .form-steps__form{

    margin-top: 20px;

  }

  .modal .form-steps__form .form__box-input{

    margin-bottom: 15px;

  }

  .modal .form-steps__form .form__box-upload{

    margin-top: 15px;

    margin-bottom: 20px;

  }

  .form-steps__title strong{

    font-size: 1.4em;

  }

  .form-steps__subtitle{margin-top: 8px;}

  .form-steps__fieldset{margin-top: 10px;}

  .modal.modal_quiz{padding-bottom: 0;padding-top: 25px;}

  .form-steps__form .form__box-submit{margin-left: -30px;}

  .mfp-content{max-height: 100vh;overflow-y: auto;}

}

@media (max-width: 460px){

  .widget{

    width: 6.2rem;

    height: 5.8rem;

  }

  .widget-label{

    width: 21rem;

    height: 6.1rem;

    right: 4.6rem;

    font-size: 0.75rem;

    padding-top: 1.4rem;

  }

}



@keyframes pulseWidget{

  0%, 100%{

    transform: scale(1.1);

  }

  50%{

    transform: scale(.9);

  }

}

@keyframes pulseIn1{

  0%{

    transform: translate(-50%, -50%) scale(1.1);

    opacity: 0;

  }

  100%{

    transform: translate(-50%, -50%) scale(.6);

    opacity: 1;

  }

}

@keyframes pulseIn2{

  0%{

    transform: translate(-50%, -50%) scale(1.1);

    opacity: 0;

  }

  100%{

    transform: translate(-50%, -50%) scale(.5);

    opacity: 1;

  }

}

@keyframes pulseIn3{

  0%{

    transform: translate(-50%, -50%) scale(1.1);

    /* opacity: 0; */

  }

  100%{

    transform: translate(-50%, -50%) scale(.4);

    /* opacity: 1; */

  }

}

@keyframes fadeToggleIcon {

  0%, 33%, 100%{

    opacity: 0;

  }

  5%, 28%{

    opacity: 1;

  }

}

@keyframes fadeToggleArrows {

  0%,100%{

    opacity: 1;

    transform: translateX(20%);

  }

  50%{

    opacity: 0;

    transform: translateX(0%);

  }

}

@keyframes shakeX {

  from,

  30%,

  to {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

  }



  3%,

  9%,

  15%,

  21%,

  27% {

    -webkit-transform: translate3d(-5px, 0, 0);

    transform: translate3d(-5px, 0, 0);

  }



  6%,

  12%,

  18%,

  24% {

    -webkit-transform: translate3d(5px, 0, 0);

    transform: translate3d(5px, 0, 0);

  }

}

.header__email{
  display: block;
  width: max-content;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: 0.3s border-color;
  letter-spacing: 2px;
}
@media (min-width:561px) {
  .header__email{
    margin-right: 0;
    font-size: 16px;
  }
  .header__email:hover{
    border-color: currentColor;
  }
}

