slider.css

* {
  box-sizing: border-box; }

html {
  height: 100%;
  width: 100%; }

body {
  width: 100%;
  min-height: 100%;
  margin: 0; }

.slider-container {
  width: 100%;
  height: 50vh;
  position: relative; }
  .slider-container > .indicator {
    width: 30%;
    bottom: 15px;
    position: absolute;
    left: 50%;
    display: flex;
    transform: translate(-50%);
    height: auto;
    justify-content: center; }
    .slider-container > .indicator > .circle {
      background: rgba(245, 245, 245, 0.7);
      border-radius: 50%;
      height: 13px;
      width: 13px;
      margin-left: 8px;
      transition: background 0.3s ease-in; }
  .slider-container > .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: left 0.3s ease-in, right 0.3s ease-in; }
    .slider-container > .slide:hover > .content {
      opacity: 1; }
    .slider-container > .slide > img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1; }
    .slider-container > .slide > .content {
      width: 50%;
      height: 100%;
      background: transparent;
      position: relative;
      padding: 20px;
      padding-left: 60px;
      opacity: 0;
      color: white;
      font-family: "Quicksand", sans-serif;
      transition: opacity 0.3s ease-in; }
      .slider-container > .slide > .content:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 1;
        z-index: -1;
        background: -webkit-linear-gradient(to right, black, rgba(0, 0, 0, 0));
        background: -moz-linear-gradient(to right, black, rgba(0, 0, 0, 0));
        background: linear-gradient(to right, black, rgba(0, 0, 0, 0)); }
  .slider-container > .button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    z-index: 99;
    top: 50%;
    transform: translate(0, -50%);
    border-color: transparent;
    transition: border-color 0.3s; }
    .slider-container > .button > i {
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
      color: white; }
      .slider-container > .button > i::before {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); }
    .slider-container > .button:hover {
      border: 2px solid white; }

#left_arrow {
  left: 20px; }

#right_arrow {
  right: 20px; }

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