/* Grid Adjustments */
.process-steps > .row.wide {
  max-width: 1200px;
}

/* Slick Slider Adjustments */

.process-steps .slick-custom-slider-container[data-slick-id="processSteps"] .slick-track {
  margin: 0 auto;
}

.process-steps .row .slick-custom-slider-container .slick-dots li button:before {
  color: #585858;
}

.process-steps .slick-custom-slider-container[data-slick-id="processSteps"] .slick-arrow:not(.slick-disabled):before {
  color: #780235;
  opacity: 1;
}

.process-steps .slick-custom-slider-container[data-slick-id="processSteps"] .slick-arrow.slick-disabled {
  pointer-events: none;
}

.process-steps .slick-custom-slider-container[data-slick-id="processSteps"] .slick-prev,
.process-steps .slick-custom-slider-container[data-slick-id="processSteps"] .slick-next {
  top: 37.25%;
  transform: none;
}

.process-steps .slick-custom-slider-container[data-slick-id="processSteps"] .slick-prev.slick-disabled:hover:before, 
.process-steps .slick-custom-slider-container[data-slick-id="processSteps"] .slick-next.slick-disabled:hover:before {
  opacity: .15;
}

/* Phone slide styles */
.process-steps .slide-phone-wrapper {
  max-width: 60%;
  margin: 0 auto 20px;
}

.process-steps .slide-phone-wrapper .phone-body {
  border-radius: 23px;
  border: 1px solid #bfbfbf;
  padding: 2% 6% 3%;
  text-align: center;
  background: #fff;
}

.process-steps .slide-phone-wrapper .phone-body .phone-sensor {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #bfbfbf;
}
.process-steps .slide-phone-wrapper .phone-body .phone-speaker {
  display: block;
  margin: 0 auto 5px; 
  width: 20%;
  height: 8px;
  border-radius: 8px;
  border: 1px solid #bfbfbf;
}
.process-steps .slide-phone-wrapper .phone-body .phone-screen {
  width: 100%;
  height: 0;
  padding-bottom: 176%;
  border: 1px solid #bfbfbf;
  overflow: hidden;
  margin-bottom: 8%;
}

.process-steps .slide-phone-wrapper .phone-body .phone-screen img {
  min-width: 100%;
}

.process-steps .slide-phone-wrapper .phone-body .phone-button {
  display: inline-block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #bfbfbf;
  position: relative;
}

.process-steps .slide-phone-wrapper .phone-model img {
  width: 100%;
}

.process-steps [data-slick-id="processSteps"] .process-single-step .text-limiter {
  width: 75%;
  margin: 0 auto;
}

.process-steps [data-slick-id="processSteps"] .process-single-step .text-limiter .slide-title {
  font-size: 1rem; /* 16/16 */
  font-weight: 600;
}
  
.process-steps [data-slick-id="processSteps"] .process-single-step .text-limiter .slide-content {
  font-size: 13px;
}

/* ----------- MEDIA QUERIES ---------- */

/* Section styles */
@media only screen and (min-width: 48em) { /* 768/16 */
  .process-steps {
    padding: 30px 0 10px;
  }
}

@media only screen and (min-width: 64em) { /* 1024/16 */
  .process-steps {
    padding: 70px 0 50px;
  }
}

@media only screen and (min-width: 40em) {
  .process-steps .process-steps-title {
    font-size: 40px;
    margin-bottom: 65px;
  }
}

/* Slick Slider Adjustments */
@media only screen and (max-width: 64em) {
  .process-steps .row .slick-custom-slider-container .slick-list {
    padding-bottom: 40px;
  }
}

@media only screen and (min-width: 40em) and (max-width: 64em) {
  .process-steps .row .slick-custom-slider-container .slick-list {
    margin: 0 45px;
  }
}

@media only screen and (min-width: 64em) {
  .process-steps .row .slick-custom-slider-container .slick-list {
    margin: 0 70px;
  }
}

/* Phone slide styles */
@media screen and (min-width: 64em) { /* 1024/16 */
  .process-steps .slide-phone-wrapper {
    margin: 0 auto 50px;
  }
}

@media screen and (min-width: 26.563em) { /* 425/16 */
  .process-steps .slide-phone-wrapper {
    max-width: 192px;
  }
  
  .process-steps .slide-phone-wrapper .phone-body .phone-screen img {
    max-width: none;
  }
}

@media only screen and (min-width: 48em) {
  .process-steps .process-single-step .slide-phone-wrapper {
    position: relative;
  }
  
  .process-steps .process-single-step .slide-phone-wrapper:after {
    content: "";
    display: block;
    position: absolute;
    width: 28px;
    height: 26px;
    top: 50%;
    right: -60px;
    background: url("../img/arrow-next.png") no-repeat top center /contain;
    transition: opacity .5s ease-in-out;
    opacity: 0;
  }
}

@media only screen and (min-width: 64em) {
  .process-steps .process-single-step .slide-phone-wrapper:after {
    right: -48px;
  }
}

@media only screen and (min-width: 57.5em) and (max-width: 64em){ /* 920/16 - 1024/16*/
  .process-steps .process-single-step.slick-current:not(:last-child) .slide-phone-wrapper:after,
  .process-steps .process-single-step.slick-current + .slick-active:not(:last-child) .slide-phone-wrapper:after {
    opacity: 1;
  }
}

@media only screen and (min-width: 75em) { /* 1200/16 */
  /* Add arrows between slides only for slides in visible area (slick-active) */
  .process-steps .process-single-step.slick-current:not(:last-child) .slide-phone-wrapper:after,
  .process-steps .process-single-step.slick-current + .slick-active:not(:last-child) .slide-phone-wrapper:after,
  .process-steps .process-single-step.slick-current + .slick-active + .slick-active:not(:last-child) .slide-phone-wrapper:after {
    opacity: 1;
  }
}