.fes-slider {
  width: 80%;
  margin: auto;
  max-width: 1200px;
}
.fes-slider p{ 
  font-weight: 600;
  top: 10px;
}
.fes-image-slider {
  width: 80%;
  margin: auto;
  display: flex;
  border: 8px solid #343e48;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}
.slider-inner {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: blue;
  height: 400px;
}
.slide-left {
  position: absolute;
  width: 50%;
  height: 100%;
  background-size: cover;
  left: 0;
  background-position: bottom;
}
.slide-left .slide-label {
  position: absolute;
  height: 100px;
  width: 300px;
  background-color: white;
  content: "Before";
  transform: translate(-30px, -50px) rotate(-20deg);
}
.slide-left .slide-label .slide-label-container {
  display: block;
  position: absolute;
  transform: translate(50px, 23px) rotate(20deg);
  font-family: roboto;
  font-weight: 700;
  font-size: 25px;
}
.slide-left .slide-label .slide-label-container p{
display: block;
    position: relative;
    font-size: 22px;
    font-family: poppins;
  color: #343e48;
}
.slide-right {
  position: absolute;
  width: 50%;
  height: 100%;
  background-size: cover;
  left: 50%;
  background-position: bottom;
}
.slide-right .slide-label {
  position: absolute;
  right: 0;
  height: 100px;
  width: 300px;
  background-color: #f4b218;
  content: "Before";
  transform: translate(30px, -50px) rotate(20deg);
}
.slide-right .slide-label .slide-label-container {
  display: block;
  position: absolute;
  transform: rotate(-20deg) translate(30px, 70px);
  right: 120px;
  top: -34px;
  font-family: roboto;
  font-weight: 700;
  font-size: 25px;
}
.slide-right .slide-label .slide-label-container p{
display: block;
    position: relative;
    font-size: 22px;
    font-family: poppins;
  color: white;
}
.slide-breaker {
  height: 100%;
  width: 2%;
  position: absolute;
  left: 49%;
  background-color: white;
}
.fes-slider .slick-dots li.slick-active button:before {
  color: #f2a931 !important;
}
.fes-slider .slick-prev:before {
  font-family: auto !important;
  background: url('https://learn.feslighting.com/hubfs/Landing%20Page/1024230_FES%20Goddard%20Schools%20Landing%20Page_A16_040121@2x.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 28px;
  height: 50px;
  display: block;
  line-height: 1;
  opacity: 0.75;
  color: white;
  position: relative;
  right: 10px;
}
.fes-slider .slick-prev:before {
  content: "" !important;
}
.fes-slider .slick-next:before {
  font-family: auto !important;
  background: url('https://learn.feslighting.com/hubfs/Landing%20Page/1024230_FES%20Goddard%20Schools%20Landing%20Page_A16_040121@2x.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 28px;
  height: 50px;
  display: block;
  line-height: 1;
  opacity: 0.75;
  color: white;
    transform: rotate(180deg);
}
.fes-slider .slick-next:before {
  content: "" !important;
}
@media(max-width:1300px){
  .slider-inner{
    height: 350px;
  }
  @media(max-width:1300px){
  .slider-inner{
    height: 300px;
  }
}
@media(max-width: 800px){
  .fes-slider .slick-arrow{
    display: none !important;
  }
  .fes-slider{
    max-width:500px;
  }
  .fes-image-slider{
    width: 95%;
  }
  .slider-inner{
    height: 450px;
  }
  .slide-left{
    width: 100%;
    height: 50%;
  }
  .slide-right{
    width: 100%;
    height: 50%;
    bottom:0;
    left:0;
    overflow:hidden;
  }
  .slide-right .slide-label {
    width: 200px;
    transform: rotate(20deg) translate(50px, -85px);
  }
  .slide-right .slide-label p{right: 15px; top: 40px}
    .slide-left .slide-label {
    width: 220px;
    transform: rotate(-20deg) translate(-50px, -80px);
  }
  .slide-left .slide-label .slide-label-container p{top: 30px;}
  .slide-left .slide-label p{left: 25px}
  .slide-breaker{
    transform: rotate(90deg);
    height: 800px;
    top:-40%;
  }
  .fes-slider .slick-arrow{
    top:105%;
    width: 100%;
  }
  .fes-slider .slick-prev:before {
    position:relative;
    left:20%;
}
  .fes-slider .slick-next{
    right:0;
  }
    .fes-slider .slick-next:before {
      position:relative;
      right: -80%;
}
}
  @media(max-width: 500px){
    .slider-inner{height: 350px}
    .slide-breaker{top: -65%}
  }