#slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  user-select: none; }
  #slider .sliderElement,
  #slider #sliderArrowL,
  #slider #sliderArrowR {
    position: absolute;
    display: inline-block;
    height: 10vw; }
  #slider #sliderArrowL,
  #slider #sliderArrowR {
    width: 3vw;
    z-index: 2;
    background: url("img/Arrow.png") center center no-repeat;
    background-size: contain;
    cursor: pointer;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0.25; }
  #slider:hover #sliderArrowL,
  #slider:hover #sliderArrowR {
    opacity: 0.75; }
    #slider:hover #sliderArrowL:hover,
    #slider:hover #sliderArrowR:hover {
      opacity: 1; }
  #slider #sliderArrowL {
    left: 3vw;
    transform: scale(0.9) rotate(180deg); }
    #slider #sliderArrowL:hover {
      transform: scale(1) rotate(180deg); }
  #slider #sliderArrowR {
    right: 3vw;
    transform: scale(0.9); }
    #slider #sliderArrowR:hover {
      transform: scale(1); }
  #slider #sliderMainElements {
    display: inline-block;
    width: 80vw;
    height: 10vw; }
    #slider #sliderMainElements .sliderElement {
      width: 15vw;
      left: 10vw;
      z-index: 1;
      background: url("http://via.placeholder.com/250x150") center no-repeat;
      background-size: contain;
      filter: grayscale(100);
      transition: margin-left 1s ease, opacity 1s ease, filter 0.5s ease; }
      #slider #sliderMainElements .sliderElement:hover {
        filter: grayscale(0); }
  @media only screen and (min-width: 767px) and (max-width: 1199px) {
    #slider #sliderMainElements {
      width: 80vw;
      height: 15vw; }
      #slider #sliderMainElements .sliderElement {
        width: 25vw;
        left: 9vw; }
    #slider #sliderArrowL,
    #slider #sliderArrowR,
    #slider .sliderElement {
      height: 15vw; } }
  @media only screen and (min-width: 0px) and (max-width: 767px) {
    #slider #sliderMainElements,
    #slider #sliderArrowL,
    #slider #sliderArrowR,
    #slider .sliderElement {
      height: 50vw; }
    #slider #sliderArrowL,
    #slider #sliderArrowR {
      width: 8vw; }
    #slider #sliderMainElements .sliderElement {
      width: 70vw;
      left: 13.5vw; } }

/*# sourceMappingURL=sliderStyle.css.map */