.jacket-heat-settings-section-module {
  background: #000;
  display: flex;
  position: relative;
  overflow: hidden;
}
.jacket-heat-settings-section-control-row,
.jacket-heat-settings-section-control-wrapper{
  display: flex;
  z-index: 1;
}
.jacket-heat-settings-section-control-row {
  align-items: center; 
}
.jacket-heat-settings-section-control-wrapper {
  flex-direction: column;
  padding: 100px 3rem;
}
.jacket-heat-settings-section-control-row-images-wrapper-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.jacket-heat-settings-section-img {
  object-fit: cover;
  height: 100%;
  min-height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}
.jacket-heat-settings-section-control-row-img {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 220px;
  width: auto;
  object-fit: contain;
	transform: scale(1);
	animation: pulse 2s infinite;
}
.jacket-heat-settings-section-control-row-img--heat-level {
  max-height: 170px;
  animation: none;
  transform: translateX(-40px) !important;
  transition: .3s 0s ease !important;
}
.jacket-heat-settings-section-control-row-img--heat-level.active {
  transform: translateX(0) !important;
  transition: .3s .3s ease !important;
}
.jacket-heat-settings-section-control-row-image-wrappers {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 1;
}
.jacket-heat-settings-section-control-row-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex: 1 0 auto;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: .3s 0s ease;
  align-items: center;
  justify-content: center;
}
.jacket-heat-settings-section-control-row-content h2,
.jacket-heat-settings-section-control-row-content p {
  margin: 0;
  white-space: nowrap;
}
.jacket-heat-settings-section-control-row-img,
.jacket-heat-settings-section-img {
  opacity: 0;
  transition: opacity .4s .4s ease;
}
.jacket-heat-settings-section-control-row-img.active,
.jacket-heat-settings-section-img.active {
  opacity: 1;
  position: relative;
  transition: opacity .4s 0s ease;
  
}
.jacket-heat-settings-section-control-row-img, .jacket-heat-settings-section-img[data-heat-level="1"],
.jacket-heat-settings-section-control-row-img, .jacket-heat-settings-section-img[data-heat-level="4"] {
  transition: opacity .4s 0s ease;
}
.jacket-heat-settings-section-control-row-content.active {
  opacity: 1;
  position: relative;
  transform: translateX(0);
  transition: .3s .3s ease;
}
.jacket-heat-settings-section-control-row-content img {
  max-height: 220px;
  width: auto !important;
}
.jacket-heat-settings-section-control-row-content-wrapper {
  position: relative;
  padding: 0 2rem 0 0;
  flex-direction: column;
  z-index: -1;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
	}
	70% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.95);
	}
}




.jacket-heat-settings-section-smoke {
  height: 100%;
  width: 100%;
  position: absolute;
  bottom: -50%;
  right: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .4;
  transition: 0.5s ease;
}
[data-heat-level="2"] .jacket-heat-settings-section-smoke {
  opacity: 1;
}
[data-heat-level="3"] .jacket-heat-settings-section-smoke,
[data-heat-level="4"] .jacket-heat-settings-section-smoke {
  opacity: .7;
}
.jacket-heat-settings-section-control-row-p-wrapper {
  opacity: 0;
  margin-bottom: -40px;
  top: -20px;
  height: 100px;
  align-items: center;
  display: none;
  position: relative;
}
.jacket-heat-settings-section-control-row-p {
  color: #febc18;
  font-size: clamp(30px, 2vw, 60px) !important;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
}
.jacket-heat-settings-section-control-row-img--heat-level.active + .jacket-heat-settings-section-control-row-p-wrapper {
  display: flex;
  animation: fade-in .3s forwards;
}
.jacket-heat-settings-section-smoke-img {
  width: 100%;
  z-index: 1;
  position: absolute;
  bottom: 0;
  filter: saturate(0);
}
.jacket-heat-settings-section-smoke-img__left {
  left: 0;
  -webkit-animation: smoke-left 10s linear infinite;
  -moz-animation: smoke-left 10s linear infinite;
  -o-animation: smoke-left 10s linear infinite;
  animation: smoke-left 10s linear infinite;
}
.jacket-heat-settings-section-smoke-img__right {
  right: 0;
  -webkit-animation: smoke-right 10s linear infinite;
  -moz-animation: smoke-right 10s linear infinite;
  -o-animation: smoke-right 10s linear infinite;
  animation: smoke-right 10s linear infinite;
}


.jacket-heat-settings-section-pulsing-arrows-wrapper {
  display: flex;
  position: relative;
}
.jacket-heat-settings-section-pulsing-arrows {
  display: block;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(-45deg);
  border-right: 7px solid red;
  border-bottom: 7px solid red;
  width: 26px;
  height: 26px;
  -webkit-animation: mouse-scroll 1s infinite;
  -moz-animation: mouse-scroll 1s infinite;
  animation: mouse-scroll 1s 5s infinite;
}
.jacket-heat-settings-section-pulsing-arrows.first {
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  animation-delay: alternate;
}

.jacket-heat-settings-section-pulsing-arrows.second {
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  animation-delay: .2s;
  animation-direction: alternate;
}

.jacket-heat-settings-section-pulsing-arrows.third {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  animation-delay: .3s;
  animation-direction: alternate;
}

@keyframes mouse-scroll {
  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}


@keyframes smoke-left {
  0%, 100% {
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  25% {
    -webkit-transform: translate(-10%, 0%);
    -moz-transform: translate(-10%, 0%);
    -o-transform: translate(-10%, 0%);
    transform: translate(-10%, 0%);
  }
  50% {
    -webkit-transform: translate(-20%, 0%);
    -moz-transform: translate(-20%, 0%);
    -o-transform: translate(-20%, 0%);
    transform: translate(-20%, 0%);
  }
  75% {
    -webkit-transform: translate(-10%, 0%);
    -moz-transform: translate(-10%, 0%);
    -o-transform: translate(-10%, 0%);
    transform: translate(-10%, 0%);
  }
}

@keyframes smoke-right {
  0%, 100% {
    -webkit-transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -o-transform: translate(0%, 0%);
    transform: translate(0%, 0%);
  }
  25% {
    -webkit-transform: translate(10%, 0%);
    -moz-transform: translate(10%, 0%);
    -o-transform: translate(10%, 0%);
    transform: translate(10%, 0%);
  }
  50% {
    -webkit-transform: translate(20%, 0%);
    -moz-transform: translate(20%, 0%);
    -o-transform: translate(20%, 0%);
    transform: translate(20%, 0%);
  }
  75% {
    -webkit-transform: translate(10%, 0%);
    -moz-transform: translate(10%, 0%);
    -o-transform: translate(10%, 0%);
    transform: translate(10%, 0%);
  }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 1550px) {
  .jacket-heat-settings-section-control-row-content.active {
    position: relative;
  }
}

@media (max-width: 1200px) {
  .jacket-heat-settings-section-pulsing-arrows {
    
  }
}

@media (max-width: 1000px) {
  .jacket-heat-settings-section-pulsing-arrows {
    
  }
  .jacket-heat-settings-section-control-row {
    flex-direction: column;
    align-items: center;
  }
  .jacket-heat-settings-section-control-row-content-wrapper {
    padding: 0;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .jacket-heat-settings-section-control-wrapper {
    padding: 50px 3rem;
  }
    .jacket-heat-settings-section-control-row-content-wrapper {
    display: flex;
  }
  .jacket-heat-settings-section-module {
    border-bottom: 10px solid #febc18;
    flex-direction: column;
  }
  .jacket-heat-settings-section-smoke {
    bottom: -5%; 
  }
}