/* 15 fix */

/* Make slider the positioning container */
#flexslider-1 {
  position: relative;
}
.fa-play{
	color: #fff;
}
.fa-pause{
	color:#212121;
}
/* Control wrapper */
#flexslider-1 .hero-slider-control {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 20;
}

#flexslider-1 .hero-slider-control .slider-toggle {
  all: unset; /* removes theme button styling */

  width: 52px;
  height: 52px;
  background: #F5A623;
  border-radius: 0;
  cursor: pointer;
  top : 15px;
  right: -16px;
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;
}

/* Green when paused */
#flexslider-1 .hero-slider-control .slider-toggle.paused {
  background: #0C7C54;
}

#flexslider-1 .slider-toggle .icon-play,
#flexslider-1 .slider-toggle .icon-pause {
  font-family: "Font Awesome 5 Free"; /* or your icon font */
  font-weight: 900;
  font-size: 18px;
  color: #fff;
  width: 30px;
  height: 30px;
}

/* Icon visibility */
.icon-play {
  display: none;
}

.slider-toggle.paused .icon-play {
  display: inline;
}

.slider-toggle.paused .icon-pause {
  display: none;
}

/* Default pause icon */
#flexslider-1 .icon-pause::before {

  color: #212121;
  font-size: 24px;
}


#flexslider-1 .icon-play::before {
 
  color: #fff;
  font-size: 24px;
}


/* Show pause by default */
#flexslider-1 .icon-play {
  display: none;
}

/* When paused show play icon */
#flexslider-1 .slider-toggle.paused .icon-play {    
  display: inline;
}

#flexslider-1 .slider-toggle.paused .icon-pause {
  display: none;
}

/* Media Queries for Responsive Design Pause/Play Functionality
==============================================*/
/* Destop max-width 1449*/
@media (max-width: 1449px) and (min-width: 992px) {
  #flexslider-1 .hero-slider-control .slider-toggle {
    top: -38px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  #flexslider-1 .hero-slider-control .slider-toggle {
    top: -45px;
  }

  .view-content .flexslider .flex-direction-nav a {
    top: 35%;
  }
}

@media (max-width: 767px) {
  #flexslider-1 .hero-slider-control .slider-toggle {
    top: -82px;
  }

  .view-content .flexslider .flex-direction-nav a {
    top: 30%;
  }
}

@media (max-width: 576px) {
  .view-content .flexslider .flex-direction-nav a {
    top: 28% !important;
  }
}