.slider-main {
  height: 65vh;
  position: relative;
  background-color: #888;
}
@media screen and (max-width: 778px) {

.slider-main { height: 35vh; }
}
@media screen and (max-width: 690px) {

.slider-main { height: 55vh; }
}
@media screen and (max-width: 480px) {

.slider-main { height: 180px; }
}

.slider-main__item {
  width: 100%;
  height: 65vh;
  position: absolute;
  z-index: 10;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
@media screen and (max-width: 778px) {

.slider-main__item { height: 35vh; }
}
@media screen and (max-width: 690px) {

.slider-main__item { height: 55vh; }
}
@media screen and (max-width: 480px) {

.slider-main__item { height: 180px; }
}

.slider-main__item.active {
  z-index: 11;
  opacity: 1;
}

.slider-home {
  position: relative;
  list-style-type: none;
  padding: 0;
}

.slider-arrows {
  position: absolute;
  z-index: 15;
  border: 0;
  background: none;
  font-size: 45px;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  top: calc(50% - 55px);
}
@media screen and (max-width: 480px) {

.slider-arrows { top: calc(90% - 55px); }
}

.slider-arrows:hover { color: #888; }

.slider-arrows--prev { left: 20px; }
@media screen and (max-width: 480px) {

.slider-arrows--prev { left: 0; }
}

.slider-arrows--next { right: 20px; }
@media screen and (max-width: 480px) {

.slider-arrows--next { right: 0; }
}