.arrow-con{
  $size: 30px;
  width: $size;
  height: $size;

  display: inline-block;

  background-color: #eeeeee;

  color: #444444;

  position: relative;

  border-radius: 50%;
  >.the-icon{
    @include centerit();
  }

  &+.arrow-con{
    margin-left: 5px;
  }
}

.arrowsCon{

  line-height: 1;

  opacity: 0.5;
  >*{

    display: inline-block;

    cursor: pointer;
    margin-left: 5px;
  }

  $transition-property: opacity;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);


  .cs-arrow{
    $size: 40px;
    width: $size;
    height: $size;


    background-color: rgba(255,255,255,0.3);

    border-radius: 5px;


    >svg{
      $size: 17px;
      width: $size;
      height: $size;

      @include  centerit();

      path{
        fill: #444444;
      }
    }
  }

  .cs-arrow-left,.cs-arrow-right{
    top: 50%;
    left: 15px;
    position: absolute;
    transform: translate3d(0,-50%,0);
  }

  .cs-arrow-right{
    left: auto;
    right: 15px;
  }

  .arrow-con{

    color: #ffffff;


    opacity: 0.8;

    $transition-property: opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    &:hover{
      opacity: 1;
    }
  }
  &.theme-dark{

    .arrow-con{

      color: #444444;
    }


  }

}
.contentscroller:hover{
  .arrowsCon{
    opacity: 1;
  }
}

.contentscroller{
  &.no-need-for-nav, &.settings-disable-arrows{

    .arrowsCon{ display:none;
    }
  }
}